Home · Code snippets · CSS 3 Tips and Tricks

CSS 3 Tips and Tricks

There are tons of new, and amazing things which CSS coders will be able to do, but can't currently do, which CSS level-3 will bring into the focus of modern web development.

For example...


Embedding custom fonts.

@font-face {
  font-family: "Fertigo";
  src: url('/fonts/Fertigo.otf')
  format("opentype");
}

Rotation and scaling of elements

#mybox {
  transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);
  height: 100px;
  width: 100px;
}

Substring matching attribute selectors

E[att^='val']
E[att$='val']
E[att*='val']

The :target pseudo class

h2:target {
  background-image: url('yellow-fade.gif');
}

Rounded corners

#mybox {
  border-radius: 1em 2em 3em / 2em 1em;
}

Using pseudo elements in conjunction with the pseudo classes

input[type="text"]:disabled::after {
  content: "(disabled - do not use)";
  font-size: 0.9em;
  color: #CCCCCC;
  display: block;
}

Of course there are many more, and the W3C continue to refine the CSS3 spec. If you have any you'd like to share feel free to chime in. Happy coding!

Also, if you have time check out this CSS selector test developed by the folks over at css3.info, it absolutely blew my mind! It reveals just how much (or how little) of CSS3 your current browser supports.

Related URLs:

Nov 07, 2008

Comments

This article hasn't been commented yet.

Write a comment

* = required field

:

:

:


7 + 3 =