CSS3

CSS is the language that you use to design your website. CSS3 is the latest version of CSS, that has some very cool new effects.

CSS is the language that you use to design your website. CSS3 is the latest version of CSS, that has some very cool new effects.

For example, say you want to create a button with a gradient. With CSS, your only option is to open up Photoshop, create a button with the gradient that you want to use and reference the background image in your CSS stylesheet.

background: url(‘img/gradient-button-background.png’) no-repeat;

Problem is, if you want to change the color or anything else, you have to go back into Photoshop, change the color, and then update the background PNG—a bit time consuming. Plus, adding images to your stylesheet can significantly impact your website’s load time.

With CSS3, you can use the gradient function to create the same effect. Heavy, image-laden files be damned!

So, what else can you do with a little CSS3? Why not try some of these fancy new tricks:

Box Shadows

Want to make your site look richer or make certain sections of the page pop out? Nothing says pop like a box shadow:

box-shadow: 1px 2px 3px 1px #000000;

RGB vs. RGBA

Previously, you were restricted to RGB or hexadecimal values when using color on your site. CSS3 allows you to use RGBA as well, which allows you to set the opacity of the colors that you’re using.

background: rgba(0,0,0, 0.4);

Rounded Corners, aka Border Radius

In order to produce rounded corners in CSS, you had to create image files that were the exact size of the box that you wanted to add curves to. Fun times.

border-radius: 3px 3px 3px 3px;

CSS3 supports rounded corners and even allows you to adjust the radius of these curves without ever having to touch a graphics program.

3D Transform

Ever used Illustrator to make your text look like the credits on the Star Wars movie? Or, make a 2D house pop out of the page by making it 3D? Guess what? You can do this now too with CSS3 Transform function.

transform: rotateY(90deg) translateZ(200px);

You can see all sorts of fancy examples of transformation here.

Web Fonts

The most popular new feature of CSS3 is definitely web fonts. You may not remember this, but only a few years ago we were all limited to a shortlist of web fonts which included Arial, Georgia, Impact, and Comic Sans.

No more! With CSS3’s @font-face feature you can literally add any font that your heart desires:

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

Of course, there is a little bit of a downside. Since CSS3 is still a working specification, meaning it hasn’t be finalized or established as the web standard, its not supported by all browsers.

Cocktail Party Fact

Ever since CSS3 came on the market, developers all over the world have been trying to outdo one another with their CSS3 fancy-ness.

The current winner? Jay Salvat who re-created the Mona Lisa using mostly CSS3 box-shadows.

Your email address will not be published.

Cancel

10 comments

  1. Tamie Almgren Replied

    Youre so cool! I dont imagine Ive read anything such as this before. So nice to find someone with some original applying for grants this subject matter. realy many thanks for starting this up. this excellent website is something that is necessary on the net, someone with just a little originality. useful job for having something not used to the internet!

  2. Mantenimiento de repuestos de frigorificos Replied

    Acabo de tener una mala experiencia con el SAT de Arvartos donde me han devuelto el telefono con 2 meses diciendome que tiene restos de oxido y que no se puede reparar. Puedes ir a la tienda donde la adquiriste y solicitar un duplicado de tu factura, presentando tu IMEI y tus datos personales, puede que te den un duplicado y luego lo presentas en el SAT. El centro de reparación nos ha confirmado que lamentablemente el pago por Paypal no esta habilitado. Recomiendo estos teléfonos a quien quiera algo mejor que lo básico pero sin pasarse con el presupuesto.

  3. Allyn Yandow Replied

    Great weblog right here! Also your website lots up very fast! What host are you the usage of? Can I am getting your associate link on your host? I desire my website loaded up as quickly as yours lol.

  4. Isidra Wojtecki Replied

    Good web site! I truly love how it is easy on my eyes and the data are well written. I am wondering how I might be notified when a new post has been made. I’ve subscribed to your feed which must do the trick! Have a nice day!

  5. free download full version crack full serial key serial number product key keygen activation key license key crack Replied

    I’ve read some good stuff here. Definitely worth bookmarking for revisiting. I surprise how much effort you put to create such a magnificent informative site.

  6. furtdso linopv Replied

    Woah! I’m really loving the template/theme of this site. It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between user friendliness and visual appeal. I must say that you’ve done a very good job with this. Additionally, the blog loads extremely fast for me on Chrome. Outstanding Blog!

  7. Jennifer Langsam Replied

    I see this hasn’t been updated since 2012. Is there a newer version of CSS that we should be aware of?

  8. applebinge Replied

    The css code for “mona lisa” was a lot. Great work by @jaysalvat.

    • Kelli Replied

      Thanks for the heads-up! We’ve updated the link so please give it another try..

Want more articles like this?

Sign up to get the most recent tech news, tips and career advice.