Flip-Panel Prototype 03

This is an animated hover-card with stacked-images and flex-box inner content.

Content Development

  • Research
  • Copywriting
  • Journalism/Interviews
  • Website Content
  • Advertising Concepts
  • Technical Writing

Engaging, succinct content written for specific purpose and for repurpose across media

Art & Design

  • Art Direction
  • Creative Ideation
  • Fine Art
  • Illustration
  • Graphic Design
  • Brand Development

Visual vocabulary, technical expertise, and intuitive design solutions with an emphasis on digital design

Product Development

  • Research
  • Brand Strategy
  • Content Development
  • Information Architecture

Research, strategy and planning to develop an idea and make it marketable

Front-end Development

  • Custom Front-end Design
  • User Experience Design
  • User Interface Design
  • Built around your content

Customized websites with information architecture structured around content to quickly convey benefit and identity

Website Engineering

  • Static Websites
  • WordPress Themes
  • JavaScript
  • Design Systems
  • Component Design

Custom Design systems and component design built for portability and integration with a variety of technical implementations

Progressive Enhancement

  • Maintenance
  • User Testing
  • Analytics and Media
  • Custom Content
  • Special Initiatives

Ongoing work to keep your website current with attention paid to the consumer

This is an animated hover-card prototype.

Technologies involved with this prototype are:

  • RGBa()
  • Var()
  • Text-shadow
  • Box-shadow inset
  • Animation / transitions
  • Image layering
  • CSS gradients
  • Flexbox
  • Inline-block
  • Absolute positioning
  • Fluid widths

This is an animated hover-card with stacked-images and flex-box inner content.

Adhering to a mobile-first approach, this flip-card prototype uses absolute positioning in tandem with transitions, which kick-in after 756px for a desktop view.

This prototype uses CSS Custom Properties [ var() ] declarations to abstract some of the code within the CSS, such as the box-shadow inset and photos which are stacked with gradients. The images are loaded as background images.

The use of Custom Properties is very interesting. I chose to apply the custom properties to classes so I can switch images quickly. The drawback is repetitive CSS code. In future, I might apply images via JavaScript but this prototype is strictly CSS.

I used flex-box properties to style the inner content of the surface boxes. The flip-boxes are displayed using inline-block. I find that flex-box with percentage width values conflicts with inline-block, causing layout mayhem. I had to wrap the flip-boxes in pairs to compensate.

I created new colors for the shadow-box inset. The new color variations are based on other colors in the cwebba-08 palette.

Further research for mobile-first is to see how I can create a meaningful card experience with mobile-touch.

© Craig Webb Art.  All Rights Reserved.