Design Posted » CSS

CSS3 Card Trick: A Fun CSS3 Experiment

Jacob Gube — Mon, 06 Sep 2010 10:00:44 +0000

This tutorial is based on a simple animated experiment that showcases just one of the amazing things you can create using CSS. I’ve used no images and no scripting; everything’s done using HTML and CSS.

It goes without saying that since CSS3 is still not supported by all browsers, it might not work as intended; but I’ve coded this in such a way that it will degrade gracefully on non-CSS3 browsers, including IE (of course).

Experimenting on cutting-edge standards for the sake of innovation is an attribute that helps us learn, and perhaps by pushing the boundaries, we can improve our knowledge further.

Final Result

You can click on the preview image to see the demo. For optimum experience, use a WebKit browser like Google Chrome or Apple Safari.

View Demo

Download Source

A Primer on Innovation

If you ask any self-taught professional, motivation and willingness to experiment are the two primary skills that feed their passion to becoming better designers and developers.

While memorizing every single element, property, function and attribute for every language is an option, knowing what they can do is even better.

Whether you are working out how to fix a browser bug, achieving a complex layout, or if you simply want to play around and see what you can come up with (like this example), the ability to hone your skills to match the situation puts you in a fantastic position for whatever the world may throw at you.

Now that the inspiring speech about the justification behind this fun experiment is over, it’s time we begin examining and reconstructing this example to display how everything came together to produce the final result.

Within this experiment we will be taking advantage of some cool CSS3 code (which you can use in other projects) such as border-radius, box-shadow along with the target and checked pseudo classes.

Oh, and if that wasn’t enough, we’re even going to use a few WebKit transformations to give Chrome and Safari (they support animations) a progressively-enhanced experience.

So what I hope will happen is that by going over the process of creating these CSS3 playing cards, you’ll have fun learning about these new CSS3 capabilities.

Fragments and Fieldsets

Like with all websites, we need to begin right at the beginning with some HTML that lays down the tracks for the experiment.

For the purpose of this example, we’ll keep the CSS and JavaScript used inline inside the document so that you can easily use the View Source feature in your web browser while studying the demo. But in production, I hope you will keep your CSS and JavaScript external.

In the code block, you will find:

An unordered list that will feature the various card suits
A paragraph of text which simply describes the experiment on the page
A (very complex) web form that will hold the stylistic variables which make up each of the cards

Playing Cards with CSS3!

Select an option above to change the suit displayed!

Unicode Characters for the Card Suits

While much of the HTML above is straightforward, there is something worth mentioning for its value in our discussion. Within both the list and the form, you will notice that there are a lot of strange Unicode escape characters (such as ♦) which are embedded at various points.

When you view the page in your browser, you will notice that these characters represent each suit (spades, hearts, clubs and diamonds) and therefore we can give the cards their appearance without any images.

The list has one mention for each icon, and each form has 3 for each (for the corners and centerpiece).

With the HTML finished, you should see the list, table and text (plus those cool characters).

What’s With The Web Form?

You may be curious about the monstrous HTML web form. The justification for such code is simply due to the way the CSS3 will work with the elements. While the list element uses simple fragment links (attached to the frameset container for each card), each card — when it appears — contains two input elements with associated labels.

The first label contains a mixture of span and em elements (to give the card value in the corners) and a strong element (for the big central character).

The second label simply acts as a reset mechanism for the special effects, i.e. when a WebKit browser is being used.

Laying the Foundations

Now that we have completed the HTML, it’s time to move onto the CSS. To begin, we will add in all the CSS content for the web page; and we also need to give our cards a bit of color.

The below code begins our journey into CSS3 by taking advantage of both the border-radius and box-shadow CSS properties (with a few compatibility tweaks).

IE Support

It’s worth noting that the filter property will not validate under W3C CSS standards due to it being a proprietary extension for Microsoft’s Internet Explorer; but as this is just for fun, the validation of the code is less important. This allows us to support Internet Explorer; that’s a good enough reason to break auto-validation in this case.

body { background: #DDDDDD; overflow: hidden; }
body .fire { color: #FF0000; }
p {
  background: #FFFFFF; border: 1px solid #CCCCCC;
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
  font-size: 25px;
  text-align: center;
  height: 30px;
  width: 600px;
  margin: -35px -300px;
  padding: 10px 15px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  z-index: 99;
}

Using the above code, you should see a lovely looking paragraph on your page!

Navigation, Simplified!

Next on the list is the navigation. For our playing card experiment, we shall be making use of anchor fragments that will show and hide each of the cards (as required).

While the code you’ll see next doesn’t contain the CSS3 that will activate the navigation (we’ll get to that later), you will notice the code that not only floats the navigation to the top-right hand side of the screen, but also adds the same cool border-radius and box-shadow effects.

When you refresh the page after plugging in this code, you should see that the links are now highly visible and make use of our awesome Unicode characters.

ul {
  background: #FFFFFF; border: 1px solid #CCCCCC;
  background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD));
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
  font-size: 50px;
  margin: 0;
  padding: 0 15px;
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 99;
}
ul li {
  display: inline;
  list-style-type: none;
}
ul li a {
  color: #000000;
  display: block;
  float: left;
  padding: 0 10px;
  text-decoration: none;
}

Now we have the list hovering and ready for action (along with that paragraph).

Styling the Aces

The most complicated part of the CSS is making the cards look like, well, like playing cards. Using the code that follows will get you the perfect and progressively enhancing design elements that make the final look possible.

Code to pay attention to includes:

The CSS3 linear gradient that fade the cards
The reversed gradient using the mask-image property on the center character (providing an even softer feel)
A span label effect which rotates the bottom right reference to make it upside down (just like real cards)

All simple but very effective.

.base {
  background: #FFFFFF;
  border: 1px solid #CCCCCC;
  color: #000000;
  background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD));
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5);
  height: 360px;
  top: 50%;
  margin-top: -180px;
  width: 260px;
  left: 50%;
  margin-left: -130px;
  z-index: 9;
  cursor: pointer;
  font-size: 50px;
  text-decoration: none;
  padding: 15px 0 0 25px;
  position: absolute;
}
strong {
  font-size: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -160px;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1)));
}
em {
  font-size: 40px;
  font-style: normal;
  display: block;
  margin-bottom: -15px;
}
label span {
  -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter:
  progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  position: absolute;
  bottom: 15px;
  right: 25px;
}
#spades strong { margin-left: -68px; } #spades em { margin-left: 0; }
#hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; }
#clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; }
#diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; }

Note: Depending on the browser used, the effects may look different. Chrome, Safari both support all the fancy stuff, Firefox will have the background gradient (but the center character will look strong), and Opera and IE will have no "worn" effects!

With some clever coding, the playing cards should now look easy on the eyes.

Navigation and Animation

Using the code above, your cards should appear like they come from a proper deck of playing cards. Now that we have the cards, navigation, and paragraphs looking all pretty, it’s important that we get each of the cards appearing on demand. And we should also do something with the cancel and radio buttons that are hovering around behind the scenes.

What happens next is where things get really interesting for you WebKit users.

fieldset { display: none; }
fieldset:target { display: block; }
fieldset:target .card+label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; }
fieldset:target .card:checked+label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); }
.close {
  background: #DDDDDD; cursor: default;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
  text-indent: -999em;
}
@-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } }
@-webkit-keyframes effectx {
from { -webkit-transform: rotateX(0deg); }
to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; }
}

Explaining the above code is very simple. With the anchor links, we are using fragment URLs to navigate between cards in the deck and therefore the target pseudo class hide and show the fieldset as its ID appears.

The .close class takes its place behind the card covering the full browser viewport so that upon clicking the page (once the card is hidden), you can restore the item back to its original position.

This is relative to the usage of radio buttons as we shall be using the CSS3 :checked pseudo to animate the content for WebKit browsers depending on the check state.

The animation and effects may not show, depending on your browser.

The main features that WebKit users will be excited about are the two card classes that trigger either the scaler keyframes which will make the card zoom in (from nowhere) or the effectx keyframes that will rotate and flip the card which makes it appear as if it’s being pushed over (and falling off the page).

We can also add some simple effects that work alongside the checked property to give some lovely experimental fun stuff that you can interact with (if you use Chrome or Safari). Other browsers will simply ignore the actions.

Note: With most WebKit animations, once the effect has run its course, it will be reset to a default point. Because this example required the effect to remain permanent (until directed by the user otherwise), I made use of the checked state pseudo and radio buttons to ensure the effects were held firmly in place.

Dealing with Internet Explorer

OK, so remember in the beginning when I said I’ve used no scripting? Well that’s only partially true.

Because IE doesn’t yet support all these things, we need to use JavaScript so that at least our IE users will have a decent experience.

Of course, if you don’t care about IE — after all, this is an experiment for cutting-edge browsers that support CSS3 — then, yes, this CSS3 experiment uses no scripting whatsoever.

Luckily, because IE — like other non-WebKit browsers — don’t support the CSS3 animated effects, the need to deal with the checked state (in CSS3) is moot since the effect will be non-functional anyway.

However, one thing that should be available is the target pseudo so that IE users can change the suit of the playing card.

Using a small bit of conditional JavaScript, we can replicate the effect with little impact on the browser. There’s also a fragment redirect in the script to help browsers load the first card.

function bootup(){
if (location.hash == "") { location.hash="#spades"; } var tds = document.getElementsByTagName("a"); direct();
  for( var x=0; x < tds.length; x++ ){tds[x].onclick = function(){setTimeout(direct, 1);};}
}
function direct(){
/*@cc_on @if (@_jscript_version > 5.6)
  var counted = document.getElementsByTagName("fieldset");
  for( var x=0; x < counted.length; x++ ){ counted[x].style.display = "none" }
  document.getElementById(location.hash.substr(1)).style.display = "block";
@end @*/
}
window.onload=bootup;

The example should now be complete and have some neat special effects!

While the above code should be enough to get the basic effect working on the latest version of IE, its worth highlighting that I didn’t spend much time attempting to get the effect functional on really old browsers like IE6.

Because this is a proof-of-concept demonstration — and because it exists just to play with what’s available in up and coming standards — there was no incentive to try and fire the effects onto every browser.

It’s worth saying, however, that if you do intend on using any of this in a production site, you should support the browsers your visitors use.

Playful Innovation

Just a few years ago, the ability to produce such a textured playing card that looks like an image would not have been possible without the use of images. The animation effects, without scripting or Flash, would have been beyond most people’s dreams.

Our proof-of-concept shows the benefits of modern standards, and what the future is for us web designers and web developers.

The need to keep innovating and pushing our browsers to the limit is an important part of the web’s evolution.

As a web professional, I always try to spend time learning and examining my own abilities to see what unique solutions I can produce. Ideally, after reading this, you will be inspired to experiment on your own. Good luck and share your own experiments in the comments!

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

Touchscreens and Hover states

speckyboy — Fri, 03 Sep 2010 08:16:11 +0000

With the huge popularity of mobile touch devices and the current major drive to make everything web related compatible with these devices, today’s Design Reviver Answers discussion is certainly relevant with current development trends. The question that was asked was “Will Touchscreen devices make hover states a thing of the past?”

You can leave your thoughts and point-of-view below, or you can leave your answer on the original question on Answers here: Will Touchscreen devices make hover states a thing of the past?

Will Touchscreen devices make hover states a thing of the past?

This question was originally asked by Mpstud.

The best answer comes from Darrell Estabrook :

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

Amazing Pure CSS3 Experiments

speckyboy — Thu, 02 Sep 2010 08:19:13 +0000

The new and revitalized CSS3 properties have not only opened up many, many marvelous development solutions for web designers, it has also allowed talented developers to push the boat out further and showcase there CSS skills by building and styling in ways that were never ever thought possible previously.

In today’s news round-up we take a look at some of these amazing experimental pure CSS3 creations…

Please note, you will need either the latest version of Safari or the Chrome browser to fully experience these CSS3 experiments.

iOS Icons Made in Pure CSS

iPhone CSS3

Pure CSS Twitter Fail Whale

Pure CSS Animated 3D Super Mario Icon

By Paul Andrew (Speckyboyand speckyboy@twitter).

Three Kick-Ass Web Developer Tutorials

speckyboy — Thu, 26 Aug 2010 09:11:10 +0000

Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.

A jQuery, CSS3 & HTML5 Hover-Based Interface

In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5

By Paul Andrew (Speckyboyand speckyboy@twitter).

How and Why Would Anyone Validate Their Code

Joel Reyes — Wed, 25 Aug 2010 10:16:43 +0000

Validating HTML or CSS code is a controversial topic. Many are strict on assuring their code is validated while others do not care at all. There are plethoras of reasons why you should validate your code, or at least as much as possible instead of ignoring the errors. We discuss several benefits to validating your HTML and or CSS.

Decrease Cross-Browser and Cross-Platform Issues

There are many reasons why some browsers interpret your code differently from others. While it could be an intended implementation in the browser, it is mainly a bug in its interpreter that causes variant changes to your web page across many different browsers and platforms.

You can implement many quick fixes and “hacks” to your code to get it to look just right in most of the popular browsers. However, as these browsers continue to be updated, one of your hacks or quick fixes may have been a temporary work around to a bug in the browser, which may be fixed in the future causing your site to look awkward after an update has been implemented.

Moreover, while some workarounds are necessary, you can try to eliminate several by just validating most or all of your code, possibly making your website future proof.

Good Development Practices

Assuring your code is completely valid benefits you as a developer as you will help teach yourself good development practices for the future. Additionally, when learning or developing, it is best to learn and develop something the right way instead of keeping bad habits in your learning and developing process.

Professionalism

Validated code is a big sign of professionalism especially to your current or future employer and or clientele. By having valid code, it shows whomever it may be that you take your time to develop something of quality rather than something that seems like you whipped up quickly to get the job done.

As an additional to professionalism being valid code, organized and well laid code is also a sign of quality and professionalism. Thus, always assure your code is neatly organized and valid when need-be.

Standards Compliant Code

Browsers today are always improving to be standards compliant, so your website should too. When you validate your code, it means that your code is standard compliant. With that said, it is definitely a great idea to future-proof your website by validating your code, which generally takes minutes to do.

How to Validate

Now that we covered several benefits to validating your code, how do you validate code?

One of the easiest ways to validating your code is to visit w3.org and use the HTML and CSS validators available there. All you need to do to check if your code is valid, is to either upload, paste, or link your code or website and hit the validate button. If errors return, they usually provide explanations to each error returned, making it generally easy for you to follow through and fix.

Other ways to validate your code is to utilize tools available to make validating code a lot easier. These tools are generally available in a plethora of options such as validators built into Integrated Development Environments, browser toolbars, online services, or even desktop tools.

Overall, validating your code is a definite must whether you do it today or tomorrow. In fact, as time progresses and browsers continue to update to become more standards compliant, not validating your code will mean that your website will not properly be laid out as you may have intended throughout these browsers.

Furthermore, prepare your websites for tomorrow and get the code validated as it will save you time in the future, and your website will more likely work across different browsers and platforms than it would be without being validated.

27 Amazingly Realistic CSS Icons and Logos

przemek — Fri, 20 Aug 2010 21:00:51 +0000

CSS3 comes up and you can replicate fancy effects you thought you can only do in Photoshop. Now people create logos and icons within only lines of code and what’s more no images! Effects are stunning and unbelievably realistic. In this article, we have handpicked some awesome css3 experiments so far which will make you say wow.

Olympic Logo

Name: Doug Neiner
Purely css, ems based and dynamically scallable. It also requires a browser capable of rendering border-radius. For now that includes recent versions of Chrome, Safari, Firefox and Internet Explorer 9.

jQuery Logo

Name: Doug Neiner
We all know jQery. Probably most of us, favorite javascript framework. Logo rendered mainly using border-radius property.

jQuery UI Logo

Name: Doug Neiner
jQery UI icon. Not as popular as framework brother, but worth being interested in. Similairly, made using border-radius property.

Impressive CSS logo replications

Name: Justin Sepulveda
Nice piece of icon set. All made with pure css and use border-radius, gradient, transform properties. It’s nice to see people come up with such amazing replicas. Awesome!

Opera Logo

Name: David DeSandro
Nicely made Opera icon. Extensive usage of border-radius, gradient could provide this extensively awesome effect. Logo doesn’t look the same on all browsers, especially on IE.

iOS icons

Name: Louis Harboe
Great work. Advanced css3 involved.

Simple css icons

Name: Zander Martineau
I didn’t know making triangles out of css2 was possible, till this article research. Here you can find some pretty and simple stuff like rss icon, heart icon or triangle.

Pure CSS animated 3D Super Mario Icon

Name: Andreas Jacob
Made by with CSS3 & the CSS 4D Framework by Andreas Jacob. Animation work is decent but for now only works in Safari 5.

Some nice icon made with pure CSS

Name: Andrew Kelly
Gradients, Shadows and rounded borders used. Nice final effect.

Adobe Photoshop Logos in CSS3

Name: Radu Chelariu
Great use of gradients and amazing footer. No images used!

Ten amazing social media icons!

Name: Nicolas Gallagher
All examples use simple, semantic HTML. No empty elements, no unnecessary extra elements, no JavaScript, no images.

Peculiar CSS icon set

Name: Lucian Marin
Peculiar is icon package made only in CSS. It was created for sites and web applications that depend on fewer HTTP requests as possible or don’t need to use any image at all.

Twitter icon in only CSS3

Name: Giacomo Bartoli
Obviously used @font-face with little shadow and rounded borders.

Go Transit CSS Logo

Name: Collin Henderson
CSS only logo of Canadian Transporter. Simply done with use of border-radius.

Internet Explorer CSS icon

Name: Andreas Jacob
Best viewed with Firefox 3.6+ & Safari 5. Radial, linear gradients, shadows and lots of empty elements.

Nintendo icons

Name: Drew
Mario mushroom, the Triforce, a Pokéball, and Kirby made with pure css.

Back to the future CSS Logo

Name: Lucas Garron
This logo and the original one. Unbelievably alike. Best viewed in webkit browser.

Raindrop CSS Logo

Name: Sean Martell
Amazing replication of Mozilla’s project i like.

Bahamas CSS Logo

Name: ForestMist
Impressive replica made with use of border-radius.

Reddit CSS Alien

Name: Matthew James Taylor
Nice css logo made with use of “O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( )” and some font-styling.

Social Media Pure CSS icons

Name: insicdesigns
Just another social media icons with use of css3.

Bonus: iPhone in CSS3

Name: Jeff Batterton
Well, that’s not an icon, but work involved in this one is really insane. Extensive use of css3.

Bonus: Twitter Fail Whale

Name: Jeff Batterton
Well, that’s not an icon, neither logo. It’s really good illustration made only with css. No images whatsoever!

Bonus: LOST – Animated CSS3 Logo

Name: Marcos Esperon
This example animation plays nerdy title in the introduction of the series Lost (a tribute to its completion). Best viewed in webkit browser.

Final thoughts

There are many amazingly done css icons and logos. People achieved those effects using only lines of code. Sounds unbelievable, but it’s true. Well, this may not be what CSS is for, but it’s fun way to learn and play with it. So, learn css3, experiment for yourself and remember to check out The Ultimate Roundup of 55+ CSS3 Tutorials.

The Advantages of Using CSS Sprites Along With a Few Tips

Joel Reyes — Fri, 20 Aug 2010 13:08:38 +0000

There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.

To better understand this concept, let us look at the following example image:

As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.

Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.

Who Uses CSS Sprites?

Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.

Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.

Cut Back On HTTP Requests

One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.

Saves Time

By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.

Flexibility

By utilizing CSS sprites, you are giving yourself more flexibility over your website’s design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.

Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.

Tips

Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS “spriting” experience.

Plenty of Space

While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.

Left to Right, Right to Left

No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.

To better understand this concept, let us have a look at the sprite below:

Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:

Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.

Repeating Images Should Consume Less Pixels

Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.

To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.

One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.

However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.

25 Amazing CSS3 Experimentations and Demos

Vandelay Website Design — Thu, 19 Aug 2010 10:56:08 +0000

CSS3 is opening up a lot of possibilities for designers and developers. Things that used to require images, JavaScript or Flash can now be done with the power of CSS. Unfortunately, in most cases these developments are more useful for experimentation and learning at this point since they are not supported by all of the major browsers. However, if you’re interested in learning more about the capabilities of CSS3 it can be a valuable use of your time to see what is being done.

In this post we’ll feature 25 experimentations and demos from various designers/developers using CSS3. Some have more practical real-world uses than others, but all of them demonstrate what can be done with CSS3 and some creativity.

Look Ma, No Flash!

Old School Clock with CSS3 and jQuery

A Colorful Clock with CSS & jQuery

AT-AT Walker

Pure CSS Social Media Icons

Pure CSS3 Page Flip Effect

Recreating the OS X Dock

Use CSS3 to Create a Dynamic Stack of Index Cards

Experiment: Realistic iPod with CSS3

CSS3 Loading Spinners without Images

CSS Posters

CSS3 Background-Clip & @Font-Face

CSS3 Button Maker

Create a Vibrant Digital Poster Design with CSS3

Multi 3D Cubes with Animation Using CSS

Sliding Vinyl with CSS3

Animations Using CSS Transforms

Easily Turn Your Images into Polaroids with CSS3

jQuery DJ Hero – CSS3 and jQuery Fun

CSS3 Animations Demonstrated with Snow

How to Create Depth and Nice 3D Ribbons Only Using CSS3

Apple’s Navigation Bar Using Only CSS

Pure CSS Coke Can

Our Solar System in CSS3

Rotating Image Gallery Using CSS Transform and Transition

For more web development resources please see:

Getting Started: Learning to Code for the Web, Logically

Peter Burgin — Mon, 16 Aug 2010 10:00:35 +0000

Coding is a logical process. You want the site or program to do a particular thing. You enter in the commands needed to achieve that end.

Learning to develop websites could be approached just as logically. Languages for the computer could be compared to math classes. You need to learn simple addition before you can even think about calculus. Going into it with the thought of languages building off each other might help you learn the languages more effectively.

Language 1–HTML
The first language you should tackle is obviously HTML. Short for HyperText Markup Language, this was the first language used on the web and as such is the backbone and framework for many other languages. The syntax of HTML is relatively simple and straightforward and there are a number of books and online resources available to help you. Be aware of the dates of the resources, however, since some elements are no longer supported, especially since HTML5 is in the process of a release.

What I wish I had known: Make sure you close all your tags! I cannot count the times that a page displayed strangely because I forgot to close a div. In this, commenting may be your best option, especially if it’s only

It may save you a headache or two for HTML and will insure that you are in the habit of closing them for the stricter offshoots. A validation tool may become your best friend, so be sure to bookmark your favorite. I like W3C’s Markup Validator, but there are others out there, so check around.

Some good resources:

Web Monkey’s “Make an HTML Document”
University of Texas at Austin’s “Learning HTML”–This is more a list of other useful sites, but still good
W3Schools HTML Tutorial–very basic, but good if you are just starting out

Offshoots: There are several other languages that branch off from HTML. This includes XHTML which tends to be more fussy about syntax—they don’t call it “strict” for nothing—but does have its uses.

Language 2–Cascading Style Sheets (CSS)
There’s a good reason I put CSS here. It builds directly off of HTML, but lets you stylize your website more efficiently than HTML by itself. Having a visually appealing website also is more encouraging to work on and more fun to show off.

CSS also brings to your attention the issue of cross-browser compatibility, the sometimes frustrating problem of web browsers handling the same code differently. Learning CSS will help you anticipate the different ways browsers handle the same code. Developing a mindset to deal with these hurtles also builds general troubleshooting capabilities, a necessary tool for real life, as well as web development.

Having ids and classes already built into your HTML from using CSS also makes it easier to incorporate JavaScript libraries, like jQuery, later on.

With CSS3, cascading style sheets now have more useful features than ever, including support for gradients and rounded corners. These can save you time and energy. The downside of this is that not all browsers support them.

What I wish I’d known: Internet Explorer is (arguably) the worst browser when it comes to cross-browser compatibility. Conditional comments work for IE5 and up, and make styling for IE a little easier. Here’s a fun way to use them in the head of an HTML document.

Only Internet Explorer will see the stylesheet contained within the conditional comments. Other browsers will only see a comment and ignore it. By putting the IE stylesheet second, you override any duplicate tags, so you only need to modify the elements that display incorrectly.

Some good resources:

Language 3–JavaScript (JS)
JavaScript is useful for creating websites with dynamic or animated content. This includes animated transitions, menu tabs and near-flash like effects. JS introduces you to the wonders of, among other things, if and elseif statements. These are actually very useful tools and appear in many forms of programming, including PHP.

The syntax for JS is less forgiving than HTML or CSS, but will give you a definite sign that you did something wrong. It won’t work! The frustrating bit is that it doesn’t necessarily tell you what is wrong, so you may spend hours searching for that missing semicolon.

What I wish I’d known: While there are proponents of first learning a JavaScript library—like MooTools or jQuery— I don’t think you are doing yourself a favor through this, having done this myself. This is because when it comes to certain things—like HTML5’s canvas function, for instance—you need to know how to make the whole thing work without the shortcuts that libraries provide, especially where calling variables are concerned.

Some good resources:

Offshoots:Depending on your need for dynamic content, AJAX (Asynchronous JavaScript and XML) may be something you want to learn as well. It isn’t its own language, but a way of combining the two languages for more dynamic functionality. Obviously, this requires a knowledge of both JavaScript and XML.

Language 4—PHP
PHP can be used to create dynamic websites, either on HTML pages or on sites run on a content management system (CMS) like Wordpress. The conditional statements, like “if”, “elseif” and “else”,are similar to those used in Javascript.

Unlike the already mentioned web development languages, PHP runs server-side, which has its own set of benefits and challenges. One benefit is that, unlike JavaScript, the user does not have to have PHP installed on their system in order to correctly view the page. The downside of this is that your host server does have to support PHP, though this is becoming less of an issue. The other part of this is that you do need a local server to run PHP pages.

What I wish I’d known:Parse errors can be helpful. These point to the direct line number with the syntax error, which can save you time.

Some good resources:

Continuing your learning
These are the core languages that will get you the most mileage. While there are other languages used in web development, HTML, CSS, JavaScript and PHP can provide a foundation for you to bridge off of. The Internet itself offers many resources that can help you learn coding or refresh your knowledge.

3 Advanced CSS3 Techniques You Should Learn

Jacob Gube — Sun, 15 Aug 2010 16:00:50 +0000

If you’re reading this, then I can safely assume that you’ve at least heard of CSS3. The latest version of CSS includes properties that allow you to style your HTML elements with rounded corners, drop shadows, and even color gradients.

However, these techniques just scratch the surface of what CSS3 can really do. In this guide, I am going to be talking about three advanced CSS3 techniques.

View Demo

Here is a single demo page of all the code I’ll be using in this guide. It’s best viewed on WebKit browsers (like Google Chrome and Apple Safari) so you can see the CSS3 -webkit animation properties in action.

View Demo

1. Advanced Selectors

One of the most important but under-hyped features of CSS3 is the new advanced selectors. I’m sure I don’t have to tell you why being able to target specific HTML elements without having to use an ID attribute is a good thing!

Traditionally, CSS selectors have always been: IDs (#id), classes (.class), HTML elements (such as p), and occasionally pseudo-classes like :hover or :active.

The problem with this formula is that nearly every element needs to have a hook. This means that to get specific with what you’re selecting, the element needs to have either an ID (if it’s just one element) or a class (if it’s a group of elements) so that the browser knows what you’re talking about.

When you start working with very complex layouts, the amount of IDs and classes you need to add to your markup begins to slow you (and your web pages) down.

Enter CSS3. With numerous new pseudo-classes to choose from, your markup and page response times will thank you.

To demonstrate some of these new selectors, I’ve marked up a simple example: two unordered lists.




  
    First Line
    Second Line
    Third Line
    Fourth Line
    Fifth Line
    Sixth Line
  
  
    First Line
    Second Line
    Third Line
    Fourth Line
    Fifth Line
    Sixth Line

The following code block is some basic CSS just for visuals. All I’ve done is reset the margins and padding of every element using the universal selector (*) and applied some basic styles to both unordered lists.

* {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  margin: 2%;
  border: 1px solid #ccc;
  padding: 5px;
  width: 44%;
  float: left;
}
ul li {
  margin-bottom: 5px;
  padding: 2px;
}

Now it’s time to write our first advanced selector! (Don’t be scared!)

The first part of our selector just says to select the

first child

Then it goes on to select the odd list items (first, third, fifth, and so on) in the first unordered list.

As you can see, using a combination of pseudo-classes and HTML element selectors, we’ve managed to only select the first of the two identical unordered lists.

ul:first-child li:nth-child(odd)

Another way of doing this is shown below, which does the same thing except this time it does so by selecting the first

ul:first-of-type li:nth-child(odd)

As you progress further into using CSS selectors, you’ll find that there are many ways of doing the same thing, and it’s up to you to decide which one to use.

With the first unordered list selected, we can style the odd list items (we will give them a different background color than the other list items).

ul:first-child li:nth-child(odd) {
  background-color: #d2fffe;
  border: 1px solid #000;
}

That isn’t the only way of using :nth-child, though. We can also use it to style individual elements based on their position. The code block below gives the 5th list item of the first unordered list on our web page a pink background.

body > ul:first-child li:nth-child(5) {
  background: #ffd2d2;
}

For another example, let’s add a web form to our HTML document. Please note the fact that one of the input elements (name=email) has the Boolean attribute of disabled so that I can demonstrate the :disabled pseudo-class later on.



  Name:
  

  Email:
  


  Message:

The following code block is just some basic styles for our web form. What this will do is remove some default styling on the form and float the labels to the left and the inputs to the right.

form {
  clear: both;
  width: 95%;
}
form p {
  margin-bottom: 15px;
  clear: both;
  overflow: hidden;
}
form label {
  float: left;
}
form input, form textarea {
  width: 70%;
  float: right;
  border: 1px solid #000;
}
form textarea {
  height: 50px;
}

We’re now going to take advantage of the disabled attribute on the email input to add a darker gray background to it.

input:disabled {
  background: #e7e7e7;
}

Next up, we have a complex-looking selector, but it’s actually quite simple.

By using the :not pseudo-class, we are selecting everything inside a paragraph that is also inside a form except for </code> and <code><label></code> elements.</p> <p> Essentially, what this will do is target all form fields that aren’t textareas.</p> <pre> form p *:not(textarea):not(label) { height: 20px; }</pre> <p>In actual practice, it would be more efficient to use <code>input</code> as the selector in our particular case, but I chose to do it this way to demonstrate the <code>:not</code> selector and how we can chain different pseudo-classes together to produce a more specific selector.</p> <p>That’s it for advanced selectors. We covered a lot, but we still have two more techniques to look at! Let’s get started with those.</p> <h3>2. Animations</h3> <p>Animation on the web has long been the domain of Flash and JavaScript. Now, with CSS3, it’s possible to do the same sorts of animation with only a few lines of code!</p> <p>To demonstrate animation techniques, let’s add another section to our markup: a simple div with no class or ID, and inside it, an <code><h1></code> — nothing too fancy. </p> <pre> <div> <h1>Hover over to see animation</h1> </div> </pre> <p>Since it’s our first div, we can use the <code>:first-of-type</code> pseudo-class to select it. I’ve made it a 200px by 200px blue box just to make it easy to see. I’ve also styled the <code>h1</code> for visuals.</p> <pre> div:first-of-type { width: 200px; height: 200px; background: blue; color: #fff; clear: both; } h1 { color: #fff; font: 30px/1.5 Helvetica, Arial, sans-serif; width: 150px; margin: 25px auto; }</pre> <p></p> <p>Now comes the fun part! To create the animation, add the following three lines to the <code>div:first-of-type</code> selector. You’ll see nothing yet, but this sets the stage for the animation functionality, which will kick in when the box is hovered on.</p> <pre> -webkit-transition-property: background, border; -webkit-transition-duration: 2s, 1s; -webkit-transition-timing-function: linear, ease-in-out;</pre> <p>I’m using three properties to define two animations for the box (<code>background</code> and <code>border</code>). By adding commas between the properties of each option, I can distinguish which ones will be applied to which animation.</p> <p>The <code>-webkit-transition-property</code> value defines which CSS properties will be animated (background and border).</p> <p>The <code>-webkit-transition-duration</code> property defines how long the animation transition will be — in this case, 2 seconds for the background and 1 second for the border.</p> <p>The last <code>-webkit-transition-timing-function</code> tells the browser what equation to use for the transition.</p> <p>So we’ve set the stage for the animation, but we haven’t added any animation yet!</p> <p>Let’s fix that by declaring our <code>:hover</code> properties.</p> <pre> div:first-of-type:hover { background: #ccc; border: 20px solid blue; }</pre> <p>Now, when you hover over our blue box, the background and border will change and grow. That’s it. We don’t have to add any other code, the animation will run automatically!</p> <p>We’re not done yet, let’s add one more example animation to the markup.</p> <pre> <div onclick="this.style.webkitTransform='rotate(360deg)'"> <h1>Click me!</h1> </div> </pre> <p>I’ve used a bit of inline Javascript so that when the div is clicked, it rotates itself around 360 degrees (in production, you will want to do this unobtrusively by using JavaScript DOM selection methods — but that’s out of the scope of this guide).</p> <p>Next for the CSS, we’ll use the <code>:last-child </code> pseudo-class (since we want to target the last div in our HTML).</p> <pre> div:last-child { width: 95%; height: 100px; -webkit-transition: -webkit-transform 3s ease-in; background: rgba(0,0,0,.5); cursor: pointer; }</pre> <p> The things to note about the above CSS code block is that the background property uses the <code>rgba</code> property to give the div a semitransparent background. The other thing to note is the use of the <code>-webkit-transition</code> property shorthand to animate the rotation of the div.</p> <p></p> <p>And with that, we’re done with the animation. It’s full steam ahead to the last CSS3 technique we’ll cover: media queries.</p> <h3>3. Media Queries</h3> <p>The third and last advanced CSS3 technique I’ll be discussing is media queries. What are they? Media queries allow web designers to add conditional CSS rules depending on what the user is using to view the web page.</p> <p>The advantage of this is that we can make new rules on how to display a web page depending on the situation of our user. For example, if their viewport’s width is thinner than 800 pixels, we can adjust the layout accordingly, giving us a truly fluid and flexible layout. So how do we do it? Easy.</p> <pre> <strong>@media</strong> screen and (max-width:800px) { ...properties when browser is 800px or less... }</pre> <p>If you open up the demo in a web browser that supports media queries, you will see that as you reduce the size of the browser, the boxes change sizes, which is great.</p> <p>However, wouldn’t it be awesome if when the browser’s width gets reduced, the two lists stop floating? Yes, it would be. And the CSS for that is the following:</p> <pre> @media screen and (max-width:800px) { ul { float: none; max-width: auto; width: auto; } }</pre> <p></p> <p>While we’re at it, let’s make a few other changes. In the following code block, we’ll make it so that the first div disappears if the viewport is less than 800px.</p> <pre> div:first-of-type { display: none; }</pre> <p>Now when the browser is reduced past 800px, the blue box will disappear!</p> <p>We can even have multiple <code>@media</code> rules in one document. How about we do something else if the browser is lowered to 600px in width?</p> <pre> @media screen and (max-width:600px) { ul:last-of-type { display: none; } }</pre> <p>Now, when you reduce the browser a little more (less than 600px) — like magic — the second unordered list disappears!</p> <p>Here’s some styles for when the width is reduced to 400px.</p> <pre> @media screen and (max-width: 400px) { div:last-child, form { display: none; } ul:first-of-type { height: auto; padding: 50px; } ul:first-of-type li { margin-bottom: 50px; } }</pre> <p>I hope you see the potential of media queries, especially with the growing number of ways people view websites (<a href="http://sixrevisions.com/user-interface/a-quick-look-at-mobile-web-designs/" title="A Quick Look at Mobile Web Designs - sixrevisions.com">such as through mobile devices</a>).</p> <h3>Wrapping Up</h3> <p>Now you know three advanced CSS3 techniques! Give yourself a pat on the back, you deserve it.</p> <p>It’s important to note that while the selectors and media queries will work in most modern browsers (Firefox, Safari, Chrome), the animation will only work on Webkit-based browsers like Safari and Chrome.</p> <h3>Further Reading</h3> <ul> <li><a href="http://www.w3.org/TR/css3-selectors/">Selectors</a> (W3C specs)</li> <li><a href="http://webkit.org/blog/138/css-animation/">CSS Animation</a> (WebKit’s blog)</li> <li><a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> (W3C specs)</li> <li><a href="http://css-tricks.com/css-media-queries/">CSS Media Queries & Using Available Space</a></li> <li><a href="http://sixrevisions.com/css/css3-demos-experiments/">10 Interesting CSS3 Experiments and Demos</a></li> <li><a href="http://sixrevisions.com/css/semantic-css3-lightboxes/">Semantic CSS3 Lightboxes</a></li> <li><a href="http://sixrevisions.com/css/examples-of-css3-in-the-wild/">Examples of CSS3 in the Wild</a></li> </ul> <h3>Related Content</h3> <ul> <li><a href="http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/">How to Create Inset Typography with CSS3</a></li> <li><a href="http://sixrevisions.com/css/examples-of-css3-in-the-wild/">Examples of CSS3 in the Wild</a></li> <li><a href="http://sixrevisions.com/interviews/six-questions-eric-meyer-on-css3/">Six Questions: Eric Meyer on CSS3</a></li> <li><em>Related categories</em>: <a href="http://sixrevisions.com/category/css/">CSS</a> and <a href="http://sixrevisions.com/category/web-development/">Web Development</a></li> </ul> <h3>About the Author</h3> <p class="about-author"><strong>Max Luzuriaga</strong> is a freelance web designer (see his work on his <a href="http://www.maxluzuriaga.com/">portfolio site</a>). He’s also a design blogger at <a href="http://www.thedesigngnome.com/">The Design Gnome</a>. He likes web standards and loves talking in the third person. Follow him on Twitter as @<a href="http://twitter.com/designgnome">designgnome</a>.</p> <div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=6F2QbxVjvJc:PtGbygGbBB4:V_sGLiPBpWU"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=6F2QbxVjvJc:PtGbygGbBB4:yIl2AUoC8zA"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=6F2QbxVjvJc:PtGbygGbBB4:qj6IDK7rITs"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=6F2QbxVjvJc:PtGbygGbBB4:gIN9vFwOqvQ"></img></a> <a href="http://feeds.feedburner.com/~ff/SixRevisions?a=6F2QbxVjvJc:PtGbygGbBB4:7Q72WNTAKBA"></img></a> </div> </article> </main></body></html>