HTML5/CSS3 “Need to know” – part 2

Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page

HTML5 and CSS3 – all I know in one dose

Where to begin? There are so many exciting new things that you can do with CSS3 that I can barely contain myself just thinking about them.

Gradients Background

Gradients! Easy place to start and very important. May have been the first true CSS3 style I’ve ever used. Though I’ve never actually learned how to code them.

Say what?! It’s true. I was introduced to a gradient code generator (a bad one too) and used that to create the needed CSS for my backgrounds. Later though, I was introduced to “The Ultimate Gradient Generator,” which is awesome to say the least. If you haven’t used it before, check it out. It’s almost like the Gradient Overlay fx in Photoshop and it generates the proper -moz, -webkit and even a Microsoft filter for IE.

Top

Text Shadows

How about text shadows? In the office, probably once a week I am forced to say, “I love text shadows.” Seriously, it can be a cool effect, a subtle addition or even a way to add anti-alias to your webfontkit and google fonts. I’ve had some terribly rendered fonts on websites look a hundred times better because of a subtle text shadow. So how to do a text shadow? Simple:

text-shadow: x-offset y-offset blur color;
Ex: text-shadow: 1px 1px 1px #333;

Or for the color you can use rgba.

Ex: text-shadow: 1px 1px 1px rgba(0 0 0 .75);

This will give you a black shadow with an opacity of 75%.

Top

Box Shadows

Box shadows are very similar, but due to the limited support of browsers you’ll need to use the -webkit and -moz calls.

-moz-box-shadow: 1px 1px 1px rgba(0 0 0 .75);
-webkitbox-shadow: 1px 1px 1px rgba(0 0 0 .75);

Top

Rounded Corners

What else… Well there’s rounded corners. I’ve seen coders do ridiculous things with mark-up to get rounded corners. I once fixed a website that the developer had four layers of <b> tags with background png images. It seems ridiculous now because we have the right tools but a year or so ago developers had to get creative.

Anyway let’s look at how to do rounded corners. For this. We need the border-radius call. But again because of limited support of CSS3 we need a little help from -webkit and -moz.

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

This will give you all four round corners on a ten pixel radius. But that’s not all! You can also specify which corners get what radius. This can be accomplished much like margins and padding; the values go clockwise. But where margin is top, right, bottom and left, border-radius does top-left, top-right, bottom-right and bottom-left.

-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;

This will give you an element with the top corners rounded and the bottom two not.

Top

Pseudo Classes

Better ways to select the elements you wish to style and ways to even add content without adding it to the HTML. They range from the familiar ‘:hover’ and ‘:visited’ to the new ‘:nth-child’, ‘:before’, and ‘:after.’ Let’s take a look at some of the newer pseudo classes.

  • :after – add and style content to your element
  • :before – same as :after just adds to the DOM before your selected element
  • :nth-child() – select a specific child of a DOM element
  • :nth-child-last() – same as :nth-child but starts selection from last child
  • :not() – select all that do not match this

A good example of using :after and :before to do something cool is speech bubbles.

  <style>
    p.my-bubble {
      position: relative;
      padding: 1.5em;
      margin: 1em 0 3em;
      border: 2px solid #222;
      color: #333;
      background: #fff;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
    }
      p.my-bubble:before {
        content: "";
        position: absolute;
        bottom: -2em;
        left: 4em;
        border-width: 2em 2em 0;
        border-style: solid;
        border-color: #222 transparent;
        display: block;
        width: 0;
      }
      p.my-bubble:after {
        content: "";
        position: absolute;
        bottom: -1.8em;
        left: 4em;
        border-width: 2em 2em 0;
        border-style: solid;
        border-color: white transparent;
        display: block;
        width: 0;
      }
  </style>
  <p class="my-bubble">Hello World</p>

Take a look at the result: jsfiddle.net/Tw5JB/1/

:nth-child() selectors are very powerful, but tend to have limited support when it comes to every coder’s favorite browser; Internet Explorer. From what I’m reading it has full support in IE9, but it doesn’t in IE7 or 8. Yet since no one with Windows XP can upgrade to IE9 this is still a decent concern.

Example:

  <style>
    ul li:nth-child(odd) { color: red; }
    ul li:nth-child(0) { color: blue; }
  </style>
  <ul>
    <li>Bob</li>
    <li>Fred</li>
    <li>George</li>
    <li>Sparky</li>
  </ul>

See the result: jsfiddle.net/sRm7j/

Top

Keyframes (pure CSS animations)

I was very excited about this. Pure CSS animations via transitions and key-frames. Below is an example of how I made a neon light bar sign for a website.

  <style>
    @import "http://fonts.googleapis.com/css?family=Monoton";
    @-webkit-keyframes light-sign {
      0%, 40%, 65%, 80% {
        color: #666;
        text-shadow: 0 0 2px #999;
      }
      30%, 60%, 75%, 100% {
        color: #900;
        text-shadow: 0 0 10px #700; 
      } 
    }
    @-moz-keyframes light-sign {
      0%, 40%, 65%, 80% {
        color: #666;
        text-shadow: 0 0 2px #999;
      }
      30%, 60%, 75%, 100% {
        color: #65ebff;
        text-shadow: 0 0 10px #700;
      }
    }
    h1#animate {
      font-size: 48px;
      font-family: 'Monoton', cursive;
      color: #900;
      -webkit-animation: light-sign 1s 1;
      -moz-animation: light-sign 1s 1;
      text-shadow: 0 0 10px #700;
    }
  </style>
  <h1 id="animate">Sparkmasterflex</h1>

See the result: jsfiddle.net/J6CDF/

Top

Resources
Spread the word
Tweet about this on TwitterShare on Google+Share on FacebookPin on PinterestShare on RedditShare on TumblrEmail this to someonePrint this page