What I Learned at Skool – Some Cool New CSS3 Tricks

As part of my school work (gee, don’t you like homework at my age?) Anyway part of my assignment was to learn more about CSS3 and then write a blog post about it.

So here’s Johnnnnny!

What did I learn about CSS3?

Well the first thing I learned that was important to me was the overall current status of CSS3 as it is being used by current web browser vendors.

I used the tutorials on Lynda.com, so I liked that each chapter told you if the properties been studied were useable in the “real world” right now (so you could put it to work immediately) or they were still in their experimental stage (nice to know for later).

I liked learning how to use the box-shadow and border-radius properties, because while they aren’t seen in IE (and not much is) they add a nice, modern touch to a website’s appearance.

The box-shadow feature is cool way to set an element (like an image or a callout box) apart from the rest of the stuff floating around a page or give an entire page or a page sidebar a nice individual touch.

To create a box shadow the CSS is fairly straight-forward:

#element {
-moz-box-shadow: 10px 10px 5px #333; /* code for firefox browsers */
-webkit-box-shadow: 10px 10px 5px #333; /* code for chrome type browsers */
box-shadow: 10px 10px 5px #333;  /* standard code for all browsers – if they all used it — which they don’t */
}

The syntax is easy – box-shadow: h-shadow v-shadow blur spread color inset;

So…

box-shadow: 10px (position of the horizontal shadow) 10px (position of the vertical shadow) 5px (the The blur distance) #333 (the color of the shadow);

I didn’t use the inset or spread features since for most projects the h-shadow and v-shadows are fancy enough.

Now the border-radius property, which lets you create rounded corners on any type of border, is probably for me the best new feature in CSS3. With just a little imagination and practice, you can do lots and lots of interesting visual effects.

The border-radius is also fairly easy to figure out –

div
{
border: 2px solid;
-moz-border-radius:15px; /* code for firefox browsers */
-webkit-border-radius:15px; /* code for chrome browsers */
border-radius:15px; /* standard code for all browsers */
}

The greater the pixel size the more curved the radius or more rounded the corners become. You can even use this property to make a border oval or completely round.

Learned some more good things about the @font-face property and how to use it better plus more neat places to find more free fonts!

Also I liked learning about text-shadows, which adds a nice visual effect without spending time screwing around with Photoshop or Gimp to get a similar effect.

#sidebar h1 {
text-shadow:5px 5px 10px red;
}

Like the box-shadow, the syntax is easy – text-shadow: h-shadow v-shadow blur;

But unlike box-shadow it has been accepted by most browsers and you only have to use the standard code above to make it work.

And I really liked learning about the media query for mobile devices. I liked knowing that there was at last an almost automatic way to switch from a standard page to a more mobile friendly one. This was something I could use right away for some client sites.

Now the new CSS3 background property can have multiple images and use opacity which can be cool for those “peekaboo” looks that I would struggle to create with Photoshop or Gimp.

Now CSS3 allows you to design pages with more photoshop-like effects in mind, which is great.

But these new CSS3 properties can also a bit more of a pain, because now you have to pick and choose which CSS3 effect to try out vs. which ones you would be better off using an image editor or resorting to something like Modernizr to create a workaround which can be seen by most if not all web visitors.

But you should get used to using them NOW as they help provide a better user experience, which helps make people keep coming back to a website time and again.