5 Visual CSS Properties Designers Should Know

The Web language CSS (Cascading Style Sheets) has been around a long time. And it can now perform many handy design tasks that Web designers used to use image editing software to accomplish. Here are five visual design properties that all Web designers should know.

image-rendering

If you want to give your images some extra sparkle, try using the image-rendering CSS to sharpen them on the fly. The image-rendering CSS property has a crisp-edges and pixelated option. Crisp-edges with make sure the color contrast within an image stays intact whereas pixelated groups neighbor pixels into larger pixel areas (this is particularly useful for high-resolution screens).

filter: drop-shadow

Adding a drop shadow to an image is useful for a couple of reasons. First, you can use a very subtle drop shadow on an image to make the image stand out just a bit more. It’s possible to use drop shadows almost imperceptibly to enhance a design in this way. For PNGs with transparent backgrounds, this can push the foreground image more forward.

A drop shadow can also be used in its most typical application — as a basic visual style element for call outs and text boxes, for instance.

To add a drop shadow using CSS just use the drop-shadow filter, like so:

img {
 filter: drop-shadow (10 10 2px black);

 

border-radius

The border-radius CSS property makes it possible to style buttons and images with rounded corners. Before the border-radius property, designers used to have to make the rounded elements as PNGS and GIFs — which took production time and affected page load.

Border-radius can even be used to create circles and ovals, which is useful to know, although one does not see it used for these shapes too often in web design.

A simple example of a rounded button is:

.button {border-radius: 8px;}

Here is border-radius used to create an oval image:

image {
 border-radius: 60%;
 }

 

text-shadow

The text-shadow property is versatile and can be used to add a drop shadow to text and also to create outline text.
The property has four parameters: x-offset, y-offset, blur and color of shadow. The X and Y offset tell it how far on the X and Y axis to apply the shadow away from the original text. The blur is the distance of the blur from the text and the color of the shadow is it’s color.

H1 {
text-shadow: 0 2px 0 black;

linear-gradient

The linear-gradient property makes it possible to add gradients as backgrounds to websites and page elements. The linear-gradient does require some customization for each browser.

Here is an example of the linear-gradient code with browser customization:

.gradient {
 background: blue;
 background: -webkit-linear-gradient(white, yellow); /* For Safari 5.1 to 6.0 */
 background: -o-linear-gradient(white, yellow); /* For Opera 11.1 to 12.0 */
 background: -moz-linear-gradient(white, yellow); /* For Firefox 3.6 to 15 */
 background: linear-gradient(white, yellow); /* Standard syntax */
 }

It’s also possible to create fairly complex gradients using CSS as well, and there are a number of generators out there that make creating the code much easier. UI Gradients (https://uigradients.com/) is a great example.

Here is the code for UI Gradient’s Dance to Forget gradient:

background: #FF4E50; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #F9D423, #FF4E50); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #F9D423, #FF4E50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

 

These CSS properties are key to designing visually interesting websites, but there is much more to learn. To discover more about CSS, here are some additional resources:

https://www.w3.org/Style/CSS/Overview.en.html
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.w3schools.com
http://www.htmldog.com/guides/css/beginner/
http://www.csszengarden.com/
http://www.cssnewbie.com

Cover image is of CSS redesign website concept for USA Today by Geex Arts (http://usatoday.geex-arts.com/).