Z’s Still not Dead Baby, Z’s Still not Dead

24ways.org 24ways.org3 years ago in #Dev Love352

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 colours, 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 1961 Austin Seven 850, the small car which helped define the swinging sixties. The original Mini. Red, (British Racing) green, blue designs.Transparency with alpha values The simplest way to add transparency to a background colour, border, or text element is using alpha values in your colour styles. These values have been available in combination with RGB (red, green, blue) for years. In RGBA, decimal values below 1 make any colour progressively more transparent. 0 is the most transparent, 1 is the most opaque: body { color: rgba(255, 0, 153, .75); }Alpha values allow colour from a background to bleed through. Alpha values also combine with HSL (hue, saturation, lightness) to form HSLA: body { color: hsla(0, 0, 100, .75); } Currently a Working Draft, CSS Color Module Level 4 enables alpha values in RGB and HSL without the additional “A”: body { color: rgb(255, 0, 153, .75); /* color: hsl(0, 0, 100, .75); */ } This new module also introduces hexadecimal colours with alpha values. In this new value, the last two digits represent the transparency level, with FF producing 100% opacity and 00 resulting in 100% transparency. For the 75% opacity in my design, I add BF to my white hexadecimal colour: body { color: #ffffffbf; } Although there’s already wide support for hexadecimal, HSL, and RGB with alpha values in most modern browsers, the current version of Microsoft Edge for Windows has lagged behind. This situation will no doubt change when Microsoft move Edge to Chromium. 2. Use opacity Using the opacity property specifies the amount of opacity of any element (obviously) which allows elements below them in the stacking order to be all or partially visible. A value of 0 is most transparent, whereas 1 is most opaque. Opacity tints images with colour from elements behind them. This property is especially useful for tinting the colour of elements by allowing any colour behind them to bleed through. The British Motor Corporation logo in the footer of my design is solid white, but reducing its opacity allows it to take on the colour of the body element behind: [src*=”footer”] { opacity: .75; } You might otherwise choose to use opacity values as part of a CSS filter. 0% opacity is fully transparent, while 100% 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(75%); }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…

Like to keep reading?

This article first appeared on 24ways.org. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply