A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colors, square corners, and sharp edges.
Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.
Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs.
To illustrate how you might use them, I’ve made this design for the Austin Seven, the small car which helped define the swinging sixties.
bodyelement behind:
[src*="footer"] { opacity:. (**********************************************************************; }
You might otherwise choose to use opacity values as part of a CSS filter. 0% opacity is fully transparent, while (********************************************************************% is fully opaque and appears as if no filter has been applied. Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses:
[src*="footer"] { filter: opacity (48%); }3. Start blending
Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years. Blend modes including luminosity, multiply, overlay, and screen can easily and quickly add depth to a design. There are two types of blend-mode.
background-blend-mode defines how background layers blend with the background color behind them, and with each other. My layered design requires three background images applied to the
bodyelement:
body { padding: 2rem; background-color: # ba0e 90; background-image: url (body-1.png), url (body-2.png), url (body-3.png); background-origin: content-box; background-position: 0 0; background-repeat: no-repeat; background-size: contain; }
You can apply different background-blend modes for each background image. Specify them in the same order as your background images and separate them with a comma:
body { background-blend-mode: multiply, soft-light, hard-light; }When I need to apply an alternative color palette, there's no need to export new background assets. I can achieve results simply by changing the background color and these background-blend modes.
Sadly, there's not yet support for blending modes in Edge, so provide an alternative background image for that browser:
@ supports not (background-blend-mode) : normal) { body { background-image: url (ihatetimvandamme.png); } }mix-blend-mode, on the other hand, defines how an element's content should blend with its ancestors.
********************** (************************************************************: ********************************** small car of the year
Austin Super Seven Morris Super Mini-Minor Austin Seven Cooper Morris Mini-Cooper
Today's car is a Mini
Austin Seven
I begin by applying a three-column symmetrical grid to the
bodyelement:
@ media screen and (min-width: em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; } } Three-column symmetrical grid with column and row lines over my design.Then, I place my elements onto that grid using line numbers:
body>p { grid-column: 1 / -1; } h1 { grid-column: 1/3; } figure { grid-column: 1 / -1; } footer { display: contents; } footer div { grid-column: 1/3; } [src*="footer"] { grid-column: 3 / -1; align-self: end; }As sub-grid has yet to see wide adoption, I apply a second grid to my
figure (element, so I may place my image and
) (figcaption) ******************:
{ display: grid; grid-template-columns: 1fr 3fr; } figcaption { grid-column: 1; } [src*="figure"] { grid-column: 2; }****************************** Left: This conventional alignment lacks energy. Right: Overlapping content adds movement which makes my design more interesting overall.Previewing the result in a browser shows me the energy associated with driving this little car is missing. To add movement to my design, I change the image's
grid-columnvalues so it occupies the same space as my caption:figcaption { grid-column: 1; grid-row: 3; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; padding-left: 5vw; }5. Stack with z-index
In Geometry, the x axis represents horizontal, the y axis represents vertical. In CSS, the z axis represents depth. Z-index values can be either negative or positive and the element with the highest value appears closest to a viewer, regardless of its position in the flow. If you give more than one element the same
z-indexvalue, the one which comes last in source order will appear on top.
********************************** Visualization of z-index illustrates the depth in this design.
It's important to remember thatz-index
is only applied to elements which have their (positionproperty set to eitherrelative
or
absolute
. Without positioning, there is no stacking. However,z-indexcan be used on elements placed onto a grid.********************************** All techniques combined to form a design which has richness and depth.As the previous. figure
image andfigcaption
occupy the same grid columns and row, I apply a higherz-index
value to my caption to bring it closer to the viewer, despite it appearing before the picture in the flow of my content:figcaption { grid-column: 1; grid-row: 3; z-index: 2; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; z-index: 1; }Z’s not dead baby, Z’s not dead
While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.
I'm incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. As I closed
my first article hereon this day all those years ago, “Have agreat holiday season! ”Z's still not dead baby, Z's still not dead. (********************************************
You might otherwise choose to use opacity values as part of a CSS filter. 0% opacity is fully transparent, while (********************************************************************% is fully opaque and appears as if no filter has been applied. Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses:
[src*="footer"] { filter: opacity (48%); }3. Start blending
Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years. Blend modes including luminosity, multiply, overlay, and screen can easily and quickly add depth to a design. There are two types of blend-mode.
background-blend-mode defines how background layers blend with the background color behind them, and with each other. My layered design requires three background images applied to the
3. Start blending
Almost universally, contemporary browsers support the same compositing tools we’ve used in graphic design and photo editing software for years. Blend modes including luminosity, multiply, overlay, and screen can easily and quickly add depth to a design. There are two types of blend-mode.
background-blend-mode defines how background layers blend with the background color behind them, and with each other. My layered design requires three background images applied to the
bodyelement:
body { padding: 2rem; background-color: # ba0e 90; background-image: url (body-1.png), url (body-2.png), url (body-3.png); background-origin: content-box; background-position: 0 0; background-repeat: no-repeat; background-size: contain; }
You can apply different background-blend modes for each background image. Specify them in the same order as your background images and separate them with a comma:
body { background-blend-mode: multiply, soft-light, hard-light; }When I need to apply an alternative color palette, there's no need to export new background assets. I can achieve results simply by changing the background color and these background-blend modes.
Sadly, there's not yet support for blending modes in Edge, so provide an alternative background image for that browser:
@ supports not (background-blend-mode) : normal) { body { background-image: url (ihatetimvandamme.png); } }mix-blend-mode, on the other hand, defines how an element's content should blend with its ancestors.
********************** (************************************************************: ********************************** small car of the year
Austin Super Seven Morris Super Mini-Minor Austin Seven Cooper Morris Mini-Cooper
Today's car is a Mini
Austin Seven
I begin by applying a three-column symmetrical grid to the
bodyelement:
@ media screen and (min-width: em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; } } Three-column symmetrical grid with column and row lines over my design.Then, I place my elements onto that grid using line numbers:
body>p { grid-column: 1 / -1; } h1 { grid-column: 1/3; } figure { grid-column: 1 / -1; } footer { display: contents; } footer div { grid-column: 1/3; } [src*="footer"] { grid-column: 3 / -1; align-self: end; }As sub-grid has yet to see wide adoption, I apply a second grid to my
figure (element, so I may place my image and
) (figcaption) ******************:
{ display: grid; grid-template-columns: 1fr 3fr; } figcaption { grid-column: 1; } [src*="figure"] { grid-column: 2; }****************************** Left: This conventional alignment lacks energy. Right: Overlapping content adds movement which makes my design more interesting overall.Previewing the result in a browser shows me the energy associated with driving this little car is missing. To add movement to my design, I change the image's
grid-columnvalues so it occupies the same space as my caption:figcaption { grid-column: 1; grid-row: 3; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; padding-left: 5vw; }5. Stack with z-index
In Geometry, the x axis represents horizontal, the y axis represents vertical. In CSS, the z axis represents depth. Z-index values can be either negative or positive and the element with the highest value appears closest to a viewer, regardless of its position in the flow. If you give more than one element the same
z-indexvalue, the one which comes last in source order will appear on top.
********************************** Visualization of z-index illustrates the depth in this design.
It's important to remember thatz-index
is only applied to elements which have their (positionproperty set to eitherrelative
or
absolute
. Without positioning, there is no stacking. However,z-indexcan be used on elements placed onto a grid.********************************** All techniques combined to form a design which has richness and depth.As the previous. figure
image andfigcaption
occupy the same grid columns and row, I apply a higherz-index
value to my caption to bring it closer to the viewer, despite it appearing before the picture in the flow of my content:figcaption { grid-column: 1; grid-row: 3; z-index: 2; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; z-index: 1; }Z’s not dead baby, Z’s not dead
While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.
I'm incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. As I closed
my first article hereon this day all those years ago, “Have agreat holiday season! ”Z's still not dead baby, Z's still not dead. (********************************************
You can apply different background-blend modes for each background image. Specify them in the same order as your background images and separate them with a comma:
body { background-blend-mode: multiply, soft-light, hard-light; }
When I need to apply an alternative color palette, there's no need to export new background assets. I can achieve results simply by changing the background color and these background-blend modes.
Sadly, there's not yet support for blending modes in Edge, so provide an alternative background image for that browser:
@ supports not (background-blend-mode) : normal) { body { background-image: url (ihatetimvandamme.png); } }
mix-blend-mode, on the other hand, defines how an element's content should blend with its ancestors.
********************** (************************************************************: ********************************** small car of the year
Austin Super Seven Morris Super Mini-Minor Austin Seven Cooper Morris Mini-Cooper
Today's car is a Mini
Austin Seven
I begin by applying a three-column symmetrical grid to the
bodyelement:@ media screen and (min-width: em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; } }
Three-column symmetrical grid with column and row lines over my design. Then, I place my elements onto that grid using line numbers:
body>p { grid-column: 1 / -1; } h1 { grid-column: 1/3; } figure { grid-column: 1 / -1; } footer { display: contents; } footer div { grid-column: 1/3; } [src*="footer"] { grid-column: 3 / -1; align-self: end; }As sub-grid has yet to see wide adoption, I apply a second grid to my
figure (element, so I may place my image and
) (figcaption) ******************:
{ display: grid; grid-template-columns: 1fr 3fr; } figcaption { grid-column: 1; } [src*="figure"] { grid-column: 2; }grid-columnvalues so it occupies the same space as my caption:
Left: This conventional alignment lacks energy. Right: Overlapping content adds movement which makes my design more interesting overall. ****************************** Previewing the result in a browser shows me the energy associated with driving this little car is missing. To add movement to my design, I change the image's
figcaption { grid-column: 1; grid-row: 3; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; padding-left: 5vw; }
5. Stack with z-index
In Geometry, the x axis represents horizontal, the y axis represents vertical. In CSS, the z axis represents depth. Z-index values can be either negative or positive and the element with the highest value appears closest to a viewer, regardless of its position in the flow. If you give more than one element the same
z-indexvalue, the one which comes last in source order will appear on top.
Visualization of z-index illustrates the depth in this design. ********************************** It's important to remember that
z-index
is only applied to elements which have their (positionproperty set to eitherrelative
orabsolute
. Without positioning, there is no stacking. However,z-indexcan be used on elements placed onto a grid.All techniques combined to form a design which has richness and depth. ********************************** As the previous. figure
image andfigcaption
occupy the same grid columns and row, I apply a higherz-index
value to my caption to bring it closer to the viewer, despite it appearing before the picture in the flow of my content:
figcaption { grid-column: 1; grid-row: 3; z-index: 2; } [src*="figure"] { grid-column: 1 / -1; grid-row: 3; z-index: 1; }Z’s not dead baby, Z’s not dead
While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.
I'm incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. As I closed
my first article hereon this day all those years ago, “Have agreat holiday season! ”Z's still not dead baby, Z's still not dead. (********************************************
(Read More) **********************************************************************
GIPHY App Key not set. Please check settings