News

CSS Style guide: 10 more essential techniques

Another 10 contemporary CSS3 techniques to enhance your site. Create 3D text, print style multi-column layouts and patterned backgrounds. Discover how to animate form fields, highlight page sections, make an element resizable and force hardware acceleration.

CSS3Logo

01. FANCY SKEWED HEADER TEXT


Once again, with CSS3, we can avoid relying on our graphic editor and create easy to maintain typography effects. This effect will use a number of different features to produce a 3D, skewed header. First, our HTML:

001< h1 data-text=”CSS3 Type”>CSS3 Type< /h1> 

A simple < h1> tag with our header text, but notice the unique custom data attribute that duplicates the header’s text – this will come into play in a moment. Now our CSS:

001 h1 {
 002 display: inline-block; 
 003 font-family: “Archivo Black”, sans-serif;
 004 text-align: center;
 005 colour: #ff5500;
 006 text-transform: uppercase;
 007 font-size: 90px;
 008 transform: skew(-14deg) rotate(-6deg) translateZ(0);
 009 position: relative;
 010 z-index: 5;
 011 white-space: nowrap;
 012 border-top: solid 6px #ff5500;
 013 border-bottom: solid 6px #ff5500;
 014 line-height: 100px;
 015 padding: 0 0 7px 0;
 016 margin: 0;
 017 }
 018
 019 h1:after {
 020 content: attr(data-text);
 021 display: inline-block;
 022 position: absolute;
 023 colour: white;
 024 top: 5px;
 025 left: 5px;
 026 z-index: -1;
 027 text-align: center;
 028 white-space: nowrap;
 029 }

A few things can be discussed here. First, we’re combining three different transform functions. The -6 degree rotation rotates the text, but rotation alone looks sloppy. If we combine the rotation with a slight skew, however, we give the rotated text a sleeker look.
But that’s not all. To add depth to the text, we duplicate it with a pseudo-
element. That’s where our custom data attribute comes in. We can grab the content of that attribute using the attr() function as the value for the content property. Then we just have to style the text to match the header.
First we position the pseudo-element absolutely. We make it white, and we put it below the other text by giving it a z-index value of -1. We also position it 5px offset from the original text, so it is visible. The rest of the styles are inherited from the main element, giving the duplicate text look.
There are other styles shown in the code that are not discussed here, and we’ve also used a custom font from Google Web Fonts. All of this is really incidental: the main parts to focus on are how we used transforms to alter the look of the text, and then duplicate it using a pseudo-element and a custom data attribute.

02. PRINT STYLE MULTI-COLUMN LAYOUTS


With the advent of responsive design, many websites now appear at large widths on larger screens and then respond accordingly. On a site with such a wide layout, long strings of text can become difficult to read.
As an option, you may consider using CSS3’s multiple columns feature. Let’s see how this would work on a simple page that has multiple paragraph elements on a wide display. Here’s the CSS:

001.wrap {
 002 padding: 20px;
 003 margin: 0 auto;
 004 max-width: 1400px;
 005 column-count: 2;
 006 column-width: 50%;
 007 column-gap: 3em;
 008}

Here we’re using the column-count property to define how many columns to divide our text into, and we’re setting each column’s width at 50%, which makes this section of our page responsive.
The column-gap property defines the space we want between columns. We’ve left out the column-rule property, which allows us to define a vertical rule between the columns.
As an option, we could change the number of columns we want to define (and subsequently the size of each column) depending on the size of the screen using media queries. For example, on the smallest devices we could revert to a single column and on very wide screens the columns could be divided into three.
The CSS3 spec has additional related properties that help get better control over the look of the columns, related to column breaks, spanning columns, and filling columns. Not all these properties have full browser support, however.
Finally, remember to test how the columns degrade in non-supporting browsers. For example, a single column may not be readable on IE8 at 1,400px wide. Due to the performance hit, polyfilling is not recommended for this type of feature. You’re much better off degrading gracefully to a single column at a reasonable width, rather than slowing down the page considerably on what is already a much slower browser.

03. PATTERNED BACKGROUNDS

This has gained notoriety in large part thanks to Lea Verou’s CSS3 Patterns Gallery.
The basic concept is based on the use of CSS3 gradients to create repeating background patterns without images, thus reducing HTTP requests. Of course, if the gradient code is too large or convoluted, then the benefits may end up outweighing the drawbacks,
so you’ll have to consider that if you use this technique.
In almost all cases, this technique requires layering multiple gradients (thus taking advantage of multiples backgrounds in CSS3) along with the use of background-size and background-position. The example shown here creates a brick background.

04. PAGE CORNER ADS

Most developers have seen code libraries and scripts hosted on GitHub. The websites for these projects often have a ‘fork me on GitHub’ promo in the top-right corner of the page. Normally, this is a triangular image, with an annoyingly square clickable area.
Other page corner promos are similar. We’re going to create one that’s more intuitive and only the triangular shape will be clickable. Here’s the code:

001.page-wrap {
 002 position: relative;
 003 overflow: hidden;
 004}
 005.corner-ad {
 006 display: block;
 007 width: 210px;
 008 height: 190px;
 009 background: 010linear- gradient(#ffaa00, #ffbb33);
 011 transform: rotate(45deg) translateZ(0);
 012 position: absolute;
 013 right: -100px;
 014 top: -90px;
 015 text-align: center;
 016 line-height: 330px;
 017}

Besides some common styles removed for brevity, we have a regular box-shaped element. But to make it look triangular, we hide the top by rotating it with CSS transforms and positioning it into the corner of the page with absolute positioning.

05. HIGHLIGHT PAGE SECTIONS

The :target pseudo-class lets you style a part of the page that matches a fragment identifier, defined as part of the URL of the current page. This is the kind of thing often referred to as ‘in-page links’. The href values of such links begin with a hash symbol (#).
In our HTML, we might have sections that look like this:

< section id=”one”>< p>Content for one< /p>< /section>
 < section id=”two”>< p>Content for two< /p>< /section>
 < section id=”three”>< p>Content for three< /p>< /section>
 004 //code ends//

If a link points to #one, we can style that section differently when it’s visited. Here’s the CSS:

001 :target {
 002 background: #ccc;
 003 }

It’s as simple as that. With this in our CSS, every ID in our HTML that matches a hash in the URL will cause those styles to be applied to that element. This technique is used on Wikipedia to help the user see which footnoted reference has been selected.

06. ANIMATE FORM FIELDS ON FOCUS


In most cases, when CSS transitions are added to a page, they’re associated with hovering over elements. But transitions can occur as a result of any event on the page that causes changes to the CSS. One of these events is giving an element focus with the cursor.
CSS has a pseudo-class called :focus that lets us select the focused state of an element. When we combine this with CSS3 transitions, we can create a highly intuitive experience when a user is interacting with form fields.
Here’s how the code will look:

001 input {
 002 width: 280px;
 003 transition: width 1s 004ease;
 005 }
 006
 007 input:focus {
 008 width: 340px;
 009}

It’s that simple. An effect that in the past required JavaScript, is now just a few lines in CSS

07. MULTIPLE BORDERS

There are a few different ways to put multiple borders on a single element. You can use a pseudo-element, a combination of border and outline, or even an extra nested element in your HTML.
One of the simplest ways to do this is using the box-shadow property. Here’s the code:

001 .example {
 002 width: 400px;
 003 height: 400px;
 004 box-shadow: 0 0 0 6px #1ac4e6, 0 0 0 12px #3355ff; 
 005 }

The key to this effect is how we define the box shadow. First, we ensure there’s no blur (the third value in each shadow value set). This keeps the shadow sharp, so it’s straight, like a border would be. Next, we use the spread value (the fourth value) to size our borders.
We could alternatively utilise the offsets (the first two values), but the spread alone is enough to give us the effect we want.

08. MAKE AN ELEMENT RESIZABLE

In many browsers, a textarea form element by default has a handle in its bottom right corner that allows the user to resize it. This is great for usability.
But these aren’t the only UI elements that could benefit from being resized by the user. Let’s make a simple div element resizable:

001 .resize-this {
 002 width: 300px;
 003 height: 300px;
 004 border: solid 2px #aaa;
 005 background: #ddd;
 006 overflow: auto;
 007 resize: both;
 008 }

Two things are needed here. The resize property needs to be set, which can be a value of both (meaning the element can be resized vertically and horizontally) or one of either. The second thing needed is an overflow value of something other than visible. This makes the resizing handle appear on the element.

09. FORCE HARDWARE ACCELERATION

Usually only in WebKit browsers, you may notice certain bugs occurring when using transforms, transitions, or animations with CSS3. By default, browsers do not invoke hardware acceleration for these features, but you can tell the browser to do so with a single line of code:

001 .example {
 002 -webkit-transform: translateZ(0);
 003 }
 004

This line will trigger hardware acceleration and can fix a number of issues that occur in WebKit-based pages. Streaks that occur behind animated elements will disappear; jagged edges on transforms will appear straight; rough looking text will look smooth; pages will not blink during animations or transitions. So if you notice any of these problems, add this property to the problematic element and it should improve things greatly.

10. MEDIA QUERIES FOR IPAD

With responsive design being one of the most prolific trends in web design, it’s useful to consider what styles can be used to target a specific device size and orientation. Media queries are declared using the @media directive in conjunction with conditional media features. The following syntax targets the iPad in both landscape and portrait mode:

001 @media only screen 
 002 and (min-device-width: 768px)
 003 and (max-device-width: 1024px) {
 004 /* selectors and styles go here
 005 */
 006 }

If you want to target iPad in landscape mode alone, you would do this:

001 @media only screen 
 002 and (min-device-width: 768px) 
 003 and (max-device-width: 1024px) 
 004 and (orientation: landscape) {
 /* selectors and styles go 
 here */
 005 }
 006

And to target the iPad in portrait mode:

001 @media only screen 
 002 and (min-device-width: 768px) 
 003 and (max-device-width: 1024px) 
 004 and (orientation : portrait) {
 005 /* selectors and styles go
 006 here */
 007 }

This is just a small sample of the flexibility of media queries. As a supplement, you can visit ipadpeek.com for a quick look at how your website looks on an iPad.

×