News

CSS Style guide: 10 essential techniques

Add contemporary CSS3 techniques to your site. Create animated background images, add tucked corners, create custom radio buttons, build fancy centred headings and create stacked page effects

CSS3Logo

HTML and CSS are the building blocks of webpages. The CSS3 specification modules have added a great number of new features to the CSS specs that allow us to spice up our pages and avoid extra markup, overuse of decorative images, and other coding annoyances. Here we will utilise shadows, transitions, new selectors, pseudo-elements, and much more. This is really just the beginning, and should give you a good overall view of what is possible with pure CSS without relying too much on images or bloated scripts and libraries.

Of course, in most large projects, you’ll still rely on utility libraries like jQuery and Modernizr; images will always be a part of your content. But with CSS3 your dependence on scripts and images will fall dramatically, and you’ll find yourself designing right in the browser much more often. CSS3 makes so much possible, and often with very little code in comparison to what we used to do with extra markup and cut-and-paste scripts.The techniques and tips chosen in this feature are practical for solving real-world problems and adding flair and creativity to your pages and interfaces. But, keep in mind the principles and concepts that can be gleaned from all these techniques. Understanding the concepts behind these tips can help you come up with newer and better ideas in your future projects.

01. Scaled animated background images

Using transitions along with the background-size property, we can add a neat rollover effect to a promo box. Here’s the pertinent code for you to try:

001.bg {
002 background: url(example. png);
003 width: 400px;
004 height: 260px;
005 transition: background- size .5s ease-out;
006 background-size: 100% 100%; overflow: hidden;
007 cursor: pointer;
008}
009
010 .bg:hover {
011 background-size: 110% 
110 %; background-origin: 
012 border-box;
013}

The background image should be purely decorative, not essential to the content – otherwise an inline image is more appropriate. When the user hovers over the element, the background-size property is transitioned to a larger size. For this to work, we need to set the initial background-size on the element, and hide the overflow. Changing the background-origin on hover adds more. A similar technique is used on the Webdesigner Depot photos (www.webdesignerdepot.com).

02. Tucked corners

The Gravatar.com homepage displays a promo box with a tucked corners effect. This type of thing makes an appearance in print design, and no doubt developers have used images and extra markup to achieve something similar on the web.
The beauty of this technique, as with many CSS3 techniques, is that you don’t require images and the code is quite easy to understand and maintain. Let’s take a look at the code:

001. tucked-corners { 
002 background: #fbfbfb;
003 position: relative;
004 box-shadow: 0 1px 25px hsla(0,0%,0%,.2);
005}
006
007. tucked-corners:before,
008. tucked-corners:after {
009 background: #d2d2d2;
010 content: ‘’;
011 width: 100px;
012 height: 50px;
013 position: absolute;
014 top: -25px;
015 box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5);
016}
017. tucked-corners:before {
018 left: -50px;
019 transform: rotate(- 02045deg);
021}
022. tucked-corners:after {
023 right: -50px;
024 transform: 025rotate(45deg);
026}

What we’ve done here is use :before and :after pseudo-elements to add to new elements as children of the . tucked-corners element. Each of these pseudo-elements is given the same background colour as the page, which allows the pseudo-elements to blend in seamlessly with the background of the page. Each pseudo-element is styled with multiple CSS features to produce this effect. First, a box-shadow helps the pocket-like look that overlaps each corner of the main element.
Of course, in order to position the pseudo-elements, we’ve employed absolute positioning, along with a specific height and width for each corner pocket element.
Finally, the part of the code that really brings this effect to fruition is the CSS3 rotation transform, which turns each corner 45 degrees and -45 degrees respectively, to ensure the bottom-side box shadow takes its position correctly.

03. Drop cap

In print terms, the drop cap is customarily referred to as an initial, and often didn’t just drop but would sometimes appear outside on the left margin, or with the bulk of the letter above the first line. Using CSS3, we can incorporate the drop cap by combining two CSS3 selectors: first-child and first-letter. Our code might look like this:

001 p:first-child:first-letter {
002 float: left;
003 colour: DarkGoldenRod;
004 font-size: 100px;
005 line-height: 80px;
006 margin-right: 10px;
007 }

Floating the first letter causes all inline elements (in this case, any subsequent text) to wrap around it nicely, so when we apply the sizing and colour, the first letter will drop beside the other lines, giving us the visual effect we desire.

04. Animated button rollovers

CSS gradients cannot be animated directly, because they don’t fall under the category of animatable properties (www.w3.org/TR/css3-transitions/#animatable-properties). But we can get around this by using the background-size and background-position properties, which are animatable. Here’s an example:

001.button {
002 background: linear-gradient(#2876b2, #549ad0); background-size: 100% 200%;
003 transition: background-position .5s linear;
004}
005
006.button:hover, .button:focus {
007 background-position: 0 -102%;
008}

Trivial styles have been removed purely for brevity, but the relevant parts of the CSS are shown here. These include the linear gradient, the background-size property, and the transition settings. When the user hovers over the button, the background position changes. Because of the transition, the change is not instantaneous, but takes place over the specified duration (0.5s).

05. Custom radio buttons and checkboxes

All browsers and operating systems have their own way of displaying form elements. For usability purposes, you don’t want to mess too much with the look of these. But, should you want to give them a bit of a custom look that matches your site’s theme or your product’s branding, there are options available that don’t involve you doing any complex scripting or similarly unmaintainable hacks.
This technique uses a background image in combination with the general sibling selector (the tilde character, ~) and the :checked pseudo-class. Here’s how our CSS might look if we applied this technique to a set of radio buttons and checkboxes:

001input[type=radio], 
002input[type=checkbox] {
003 position: absolute;
004 top: 0;
005 left: 0;
006 opacity: 0; 
007}
008
009.radio-buttons label {
010 display: block;
011 padding-left: 45px;
012 height: 35px;
013 background: url(radio- sprite png) no-repeat 0 0;
014}
015
016.checkboxes label { 
017 background: url(checkbox- sprite.png) no-repeat 0 0;
018}
019
020input:checked ~ label {
021 background-position: 0 -35px; 
022}

Some common unrelated styles have been omitted for brevity. The first thing we do is remove the actual radio buttons and checkboxes from the page using display: none. Next, we add a background image sprite to all the label elements. You’re probably wondering: ‘how will the user select any of the elements, to toggle them?’
To accomplish this, we ensure that in our HTML each label element is associated with a radio button using the for attribute on the labels and a matching id element on each input. With this in place, any input element whose associated label is clicked will become checked, or selected, even though it’s not actually on the page.
This allows us to use the general sibling selector and the :checked pseudo-class to target the checked input. The checked state moves the background sprite image to show the checked, or ‘selected’ part.

06. Extruded Text

This technique can be applied to any piece of text, and the text content can be changed without editing the effect itself. The basic idea here is that we utilise layered text shadows to give the appearance of an extruded letters effect.
Depending on how you want the extruded part of the text to look, you can alter the colour of the shadows, the opacity using RGBA colours, and the general shape by altering the vertical and horizontal position of each shadow.
With slightly incrementing position values, the layered text shadows appear to be a single text artefact extruding from the real text, without changing the position or flow of surrounding elements.

07. Design in-browser with HSL

Most of us are probably pretty set in our ways when it comes to our design workflow. We do most of our design work in Photoshop then we convert our design to HTML and CSS. Some designs require at least some work in Photoshop, but how can we move some or all of our design work to directly inside the browser?
Enter HSL and HSLA colour values. Here’s how a colour value looks when declared using HSL:

001.example {
002 background-colour: hsl(50, 100%, 50%);
003}

The values inside the hsl() function represent hue, saturation, and lightness respectively. So if you want to experiment with different colours on different elements on your page, just increment or decrement the hue value until you get a colour you want (choosing between 0 and 359).
If the colour is not quite right, you can adjust either the saturation or lightness to get various alternatives based on the chosen hue. The hue values are based on the colour wheel, so it’s a super-simple task to adjust colours.
Even if, due to the need to support older browsers, you don’t plan on using HSL values in your final stylesheet, you can use them only during the design phase, and then convert everything to hex or RGB values later.
So just as you would do in Photoshop – adjusting text colour, border colours, background colours, and more – you can fiddle with values right in the browser, skipping a lot of potentially wasted time with Photoshop’s rather
clunky interface.
As a bonus, HSL values also allow for an alpha channel (declared as a fourth value in the same way as the opacity property), giving you even greater control over your colour choices.

08. Fancy centered heading

In many cases fancy headings require use of a background image or an image inserted via a pseudo-element. This technique will look somewhat graphic-like, but will not use images. Instead, we’re going to utilise the flexibility of CSS3 gradients to create a horizontal line behind our heading. In the HTML, we nest a element inside of our heading element, around the text (this is necessary) and then the CSS is as follows:

001 h1 {
002 background: linear- gradient(#ae4e1e 0%, #ae4e1e 45%, #fff 46%, #fff 54%, #ae4e1e 54%, #ae4e1e 100%);
003}
004
005h1 span {
006 background: #ae4e1e;
007 padding: 0 20px;
008 }

To achieve this effect, the span element is given the same background colour as the parent element holding the content. The gradient uses multiple colour stops, positioned at intervals that avoid any kind of gradual transition. For example, notice the 45% colour stop, followed by a 46% colour stop. With this sudden change in colour from one pixel to the next, the colour stops have no gradual change, thus keeping the gradient edges straight, rather than, well, gradient-like.

09. Stacked Pages Effect

Decorative elements can be added to pages easily by taking advantage of features inherent in certain CSS3 properties. For example, CSS3’s box-shadow property allows multiple shadows to be added to a single element, giving the appearance of extra elements. These are declared by comma-separating shadow value sets.
In addition to multiple shadows, each shadow can be customised to no longer look like a shadow. Here’s how our code might look:

001 body {
002 background: #666;
003}
004
005.papers {
006 border: #ccc solid 1px;
007 background-colour: #fff;
008 box-shadow: 
009 4px 4px 0 #fff,
010 5px 5px 0 #ccc,
011 9px 9px 0 #fff,
012 10px 10px 0 #ccc,
013 14px 14px 0 #fff;
014}
015

This example uses five stacked shadows. Each shadow allows vertical and horizontal offsets, so with some fine tuning we can create the 3D-like stacked effect by slightly incrementing those values for each shadow. Also, every other shadow element has a smaller distance increment in addition to a different colour.

10. Animated glow boxes

This technique will use both transitions and box shadows to create a growing glow effect on the box when the user hovers their mouse over it. Here’s the relevant code:

001 body {
002 background: #c4c4c4;
003 }
004
005.glow-box {
006 background: #ffaa00;
007 colour: #333;
008 box-shadow: 0 0 0 0 001001#ffff99;
transition: box-shadow .3s ease-in, colour .3s ease-
in; 
009 }
010
011.glow-box:hover {
012 box-shadow: 0 0 80px 
01310px #ffff99;
014 colour: #ffff99;
015}

The transition affects both the text colour and the shadow, giving the appearance that the glow appears through the text and around the box, effectively lighting up the background. The box shadow’s colour is a yellowish shade, giving it a glow-like look, rather than a customary dark shadow look. The transition is given a short duration of under 0.5s, and we’re using ease-in timing to make it appear more realistic.

×