Stronger, Better, Faster Design with CSS3

Advertisement

In our last article about CSS3, “Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons.

In this second article we’re going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts. As before, caveat coder — a lot of the CSS properties we’re going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too).

Why bother with CSS that has such limited support? It won’t always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff). Apparently, if you are one of those people who is waiting until using progressive CSS is safe because all major browsers support the same CSS at the same time, you are living in a fantasy world, so it’s just the right time to get things rolling with CSS3.

Ready? Let’s roll.

Inline Form Labels

Everyone’s familiar with inline form labels — storing the label of the field in the value attribute and using some minor JavaScript to erase the text when the field gains focus. This works…okay, but the major problem is that as soon as the user clicks, they lose the label entirely. If they tabbed right into it they may not even have read the label, in which case they’re just guessing.

The first site we saw that fixed this was MobileMe from Apple, on their login screen.

What happens with Apple is that clicking into the field fades the label back, but doesn’t erase it. Cooler still is that the cursor stays positioned left so you can start typing, and the JavaScript making that happen is not overly complex — it’s just layout tricks. They position a label behind the input containing the name of the field. When you click into the field they use JavaScript to apply a class to the label that knocks it back, and another class as you start typing to make the label vanish.

We wrote a blog post about this effect some time ago, describing how you could replicate it yourself. The problem is that over time setting up the page to support this isn’t as turnkey as we’d like, so we’ve revised and rebuilt it just for you (and, of course, for us).

The New Inline Label

Our new approach is considerably easier — to use it in our own products (like Notable and Scrumptious) we simply add class="inlined" to the label and voila! Here’s how we do it.

Start with a regular label and input:

<label for="demoForm1">Email Address</label>
	<input class="input-text" id="demoForm1" />

In previous iterations of this technique we went to the trouble of wrapping the label and input in a block-level element and used absolute positioning to put the label behind the input. Not anymore. First, we’ll add the “inlined” class to only the label:

<label for="demoForm1" class="inlined">Email Address</label>
<input class="input-text" id="demoForm1" />

Now we need to do a couple of things to get our labels to display correctly. First, we use negative margins to pull the input up and over the label. We’ll do this by using the CSS adjacent selector, which looks like this:

label.inlined + input.input-text {
		margin-top: -22px;
		background-color: transparent;
		position: relative; z-index: 2;
	}

That code tells the browser to apply the style to any input.input-text which immediately follows a label.inlined — this way we can use the negative margin to pull the input up and over the label itself. We also set the background color to transparent and give the input a relative position and a z-index value.

Next we need to style the label itself. You’ll need to adapt the styling here to mirror your input text style — the goal is for the text inside the label to appear as though it is actually part of the input. Here are the critical pieces:

label.inlined {
		padding-left: 6px;
		font: normal 12px/18px "Helvetica Neue";
		position: relative; z-index: 1;
		opacity: 0.75;
		-webkit-transition: opacity 0.15s linear;
	}

Let’s break that down. Padding and font are simply to mirror the input style. The positioning and z-index make sure the label stays behind the input — otherwise the input can’t be selected. Now the fun parts: opacity and -webkit-transition.

Our form labels work by fading back the label at different points. We start with the label faded back a little, hence the opacity: 0.75. You could also use color to drop the label back, but opacity works regardless of the font color. We add in the -webkit-transition so that whenever the opacity changes, the browser (Safari or Chrome, in this case) will change the opacity smoothly over about 1/8th of a second. So when does the opacity change?

Two times — when the user focuses on the field, and when they start typing. Let’s create two CSS classes we can apply for those states: focus and has-text.

label.focus {
		opacity: 0.35;
	}

	label.has-text {
		opacity: 0.0;
		-webkit-transition-duration: 0s;
	}

As you can see, we reduce the opacity of the label when the user clicks in, then make it invisible when they start to type. We change the duration of our transition so that as a user starts to type, the label disappears immediately, rather than fading back as they type. Now that we have our fields structurally set up and styled the way we want, the last step is a little bit of JavaScript.

Adding the JavaScript

Even though CSS3 has added new tricks like animations and transitions, JavaScript is still king when it comes to interaction. To get our labels to behave, we need to use a few simple JavaScript functions. In these examples we’ll be writing for jQuery, but they’re easy to adapt to Prototype or straight JavaScript.

The JavaScript needs to do three things:

  1. Add the focus class to the label when the user clicks into a field
  2. Add the has-text class as soon as they start typing
  3. Bring the label back if they leave the field empty and switch to another field.
$(document).ready(function(){
	$("label.inlined + input.input-text").each(function (type) {

		$(this).focus(function () {
			$(this).prev("label.inlined").addClass("focus");
		});

		$(this).keypress(function () {
			$(this).prev("label.inlined").addClass("has-text").removeClass("focus");
		});

		$(this).blur(function () {
			if($(this).val() == "") {
				$(this).prev("label.inlined").removeClass("has-text").removeClass("focus");
			}
		});
	});
});

We won’t pore over the JavaScript much — it’s pretty self-explanatory. jQuery let’s us quickly target the inputs we want by recognizing the same selector we’re using in CSS, but otherwise it’s all cut and dried. And there it is: inline labels that appear as refined versions of standard inline labels, but have much smoother interaction. Going forward now we can make any label inline by adding class="inlined" to the label — CSS and JavaScript will take care of the rest.

See the Live Demo »

We’ve created a live demo page for these forms in our Playground, a place for us to create small side projects and examples of cool toys. We’ll be linking to the Playground examples throughout this post and the rest of the series.

Fast, Easy Drop-in Modals

Next we’ll show you how to create easy modals that you can control with just one line of JavaScript. We use modals to great effect in our feedback tool, Notable, and while in Notable we use Ajax to load modals on the fly, this example will show you how easy it is to create an on-page modal.

The basic structure of our modals is a div.modal containing whatever we want. It could be an alert triggered by your page, a sign-in or sign-up form, or other information or actions that we don’t want to trigger a full page load. We’ll use some of our new CSS3 styles to make the modals look awesome and feel…well, modal, then turn them on with a single line of JavaScript.

The Simple Modal

Our first modal example is a simpler style, with a simpler animation. We’ll style the div to resemble a padded, floating box with a standard drop shadow so it appears to hover over the page. To make it appear, we’ll fade it up from an opacity of 0, and to close it, we’ll dismiss it immediately.

The modal style here uses a couple new CSS3 elements: -webkit-box-shadow to create the drop shadow and -webkit-transition (which you’ll recognize from the inline labels above) to fade it in without using JavaScript animation. Below are the styles for the modal; we’ll go over the new pieces in a second.

div#simpleModal {
		width: 560px;
		position: absolute; top: 40px; left: 170px;
		padding: 20px;
		border: solid 1px #bbb;
		background: #fff;
		-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-webkit-transition: -opacity 0.0s ease-out;
	}
	
	div#simpleModal.shown {
		opacity: 1.0;
		z-index: 100;
		-webkit-transition-duration: 0.25s;
	}

Most of the styling here is pretty standard — size and position as well as decent padding and a light grey border. The new pieces here are -webkit-box-shadow and -webkit-transition. We covered both of those new attributes in our article on CSS3 buttons so we’ll go over them quickly.

-webkit-box-shadow (or box-shadow as it will be called when the CSS3 spec is finalized and implemented) takes a few arguments. The first two properties are the offset, X and Y. In this case no X offset, 3px of Y offset. This puts the shadow just below the object. The next argument, 6px, sets the spread size: 6 pixels out from the box shape.

Finally we set a box-shadow color using RGBa, which lets us set an RGB color (black, in this case) and then set an opacity, or alpha channel. By using black with 25% opacity we can be sure it will darken whatever color it overlays; if we used something like #333 it would actually appear to glow on a black background, rather than look like a shadow.

The Fancy Modal

That modal is okay — it gets the job done and once you know it, the pieces can be put together in less than 5 minutes. We wanted to do a little more for Notable, so we cooked up a fancier style using a few other CSS tricks like -webkit-gradient and -webkit-transform.

This modal is a little flashier and more akin to a desktop app in terms of interaction: it slides down from the top and gets a little more chroming than the simple modal. We accomplish this through a couple of cool tricks.

div#fancyModal {
		display: block; width: 560px;
		position: absolute; top: -310px; left: 170px;
		padding: 90px 20px 20px 20px;
		border: solid 1px #999;
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(255,255,255)), to(rgb(230,230,230)));
		-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-webkit-border-bottom-left-radius: 6px;
		-webkit-border-bottom-right-radius: 6px;
		-webkit-transition: -webkit-transform 0.25s ease-out;
		-webkit-transform: translateY(-570px);
		-moz-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
		-moz-border-radius: 0 0 6px 6px;
		-moz-transform: translateY(-570px);
	}

First we generate a gradient for the background. Obviously we could just create a tiling background image for the gradient, but where’s the fun in that? We’ll have the browser create one using -webkit-gradient, which is a CSS function that creates a gradient you can use anywhere you would use an image. As you can see above, -webkit-gradient has quite a few attributes; it’s not as bad as it seems. Let’s break it down:

  • linear means that this gradient goes from one point to another, in a straight line. You can also use radial to create a circular gradient.
  • left top, left bottom are the coordinates for starting and stopping, in this case going from top to bottom with no angle. If we used left top, right bottom the gradient would stretch diagonally across the div.
  • from(rgb(255,255,255)) is the starting color, in this case white.
  • to(rgb(230,230,230)) is the ending color. We could also put color-stop elements in between if we wanted to vary the color as we went.

That wasn’t so hard! Gradients are going to be a great way to add those flourishes to design without having to futz around with image backgrounds – these are easily created and modified in just a couple of lines. Now let’s look at the fancier part of this modal: the appearance animation.

div#fancyModal {
		…
		-webkit-transition: -webkit-transform 0.25s ease-out;
		-webkit-transform: translateY(-570px);
	}

What we’re doing here is using a property called -webkit-transform to move the modal up and out of the viewport. Since transforms don’t impact the DOM we don’t get any weird effects or problems — the div just moves up without impacting anything else. So when the page loads, our div will be located above the page. When we add class="shown" to the div, it will get a new transform position, and the -webkit-transition will cause the transformation to be applied over a quarter of a second — this is what causes the modal to slide down from the top of the page.

As you can see, creating a fairly fancy modal style is pretty easy with these new CSS3 effects. Our last step is a simple line of JavaScript to apply a shown class to the modal. For our simple modal, it changes the opacity to 1; for our fancy modal, it changes the transform position to 0 (rather than -570px). Our transition then takes care of the actual animation.

See the Live Demo »

You can check out the live demo on the Playground. We’ve got the source code and clickable examples of the two modals (requires WebKit).

Newspaper Layouts with Columns and Image Masks

Our final example in this article will demonstrate how to use a couple of new CSS attributes and functions to create a cool newspaper layout — in this case the Super Awesome Times.

The faux-newspaper look goes in and out of style online pretty frequently, but these tricks can be used for quite a few cool applications. What we’ll talk about here is using -webkit-mask-image and -webkit-column-count.

Using Image Masks

Image masking is a way to affect the alpha channel of a block-level element by masking it with another image (or anything that can take the place of an image, like a gradient). For the Super Awesome Times we wanted to apply a subtle gradient to the masthead. We could simply render an image, but that’s no fun. Instead we masked the text (which in this case is an image, but with @font-face you could use text instead) with a generated gradient. Check it out:

div#masthead img {
	-webkit-mask-image:
		-webkit-gradient(
			linear, 
			left top, left bottom, 
			from(rgba(0,0,0,.75)), to(rgba(0,0,0,1)));
	}

The only property we need is -webkit-mask-image — the browser will use whatever you supply to create an alpha mask for the image or block element you’ve applied the mask to. In this case we use a gradient, which causes the masthead to fade from 75% opacity to 100%. Below is the masthead with the mask, and without — so you can see the difference:

It’s a subtle change, but some added depth can go a long way. There’s a great introduction to using masks over on Surfin’ Safari, the official WebKit blog. You can see how masks can be used for all sorts of interesting effects — even masking out an actual playing video.

Stunningly Easy Text Columns

Finally, we’ll show you how to use a new (and very poorly supported, so far) property in CSS3: text columns. Not the floated div kind, but the kind where you can simply set the number of columns and the gutter and have the browser do the rest.


3 columns, no fuss.

In the example above you can see three columns of text, but if you click through to the live example and view the source code, you’ll see that we’ve used just one div containing a number of paragraphs. Nothing tricky, no floats, no bizarre height manipulations — we’re just telling the browser to put the content of that block into 3 columns with 15px of space between them. Here’s how:

div.three-col {
		-webkit-column-count: 3;
		-webkit-column-gap: 15px;
		-moz-column-count: 3;
		-moz-column-gap: 15px;
	}

That’s it! Simple, easy markup and styling. The catch here is that even in forward-thinking browsers this property has pretty poor support — there are a number of other properties (like dividers, breakers, etc) that haven’t been implemented or at all supported yet. This is just a taste of what’s to come — simple columns are on the way, but not here just yet.

See the Live Demo »

Check out the Super Awesome Times on the Playground – just creating this prototype got some cool ideas kicking for our own site and blog.

Coming Up in CSS3…

We hope you enjoyed this further foray into CSS3. You can still check out our article on CSS3 buttons (including one which, no kidding, glows radioactively). Stay tuned for the third and final article in the series, where we’ll take the CSS properties and really go to town with polaroids, an OS X dock, vinyl album music players and more.

References and Resources:

CSS, CSS3,

↑ Back to top

ZURB is a close-knit team of interaction designers and strategists that help companies design better products & services through consulting, products, education, books, training and events. Since 1998 ZURB has helped over 75+ clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears, among others.

  1. 1

    css3 = great – let’s hope that ALL browsers will understand it :-)

    2
  2. 2

    Exciting stuff! Any talk when (if they will ever) Internet Explorer will support CSS3?

    0
  3. 3

    Amazing stuff, I dream of a world where coding HTML/CSS layouts would be this easy…only to wake up in the nightmare that is IE

    0
  4. 4

    Thanks alot for the 3 column property!

    0
  5. 5

    Ah, why do you tease me with this? Given that practical web coding still requires supporting browsers like IE6 (released in August 2001) I predict we’ll be able to assume widespread support of CSS3 around, oh, say, 2020. Can’t wait!

    0
  6. 6

    your demo page for the “The Fancy Modal” is not working in FF 3.5.5

    0
  7. 7

    Great! Thank you

    0
  8. 8

    I’ve heard box-shadow was removed from css3. Perhaps they are going to replace it with something little more meaningful like shadow, drop-shadow or something.

    0
  9. 9

    This is another ZURB article stating “webkit” and “moz” are valid CSS3 tags which they ARE NOT. webkit-properties are only used by Safari and Chrome (and a couple of other Browsers no one uses), that’s about 9% of all Browsers (http://en.wikipedia.org/wiki/Usage_share_of_web_browsers). Meaning about 90% of all people visiting your fancy site won’t see ANYTHING. Using webkit and moz properties is NOT about “the future of webdesign”, it’s the same bullsh*t we had a couple of years ago when every browser needed a seperate stylesheet and a dozen workarounds so it would look the way we wanted it.

    0
  10. 10

    Great ZURB, your articles & topics are one of the bests of SM! Go one!

    0
  11. 11

    great stuff! inline labels: might be cool to add a line in the javascript that throws the label back in if there’s a keypress and the input is blank (ie. user typed a value then erased it). so they don’t have to blur to see the label.

    0
  12. 12

    The 1st example, with new inline is a pretty weak example of CSS3. Why not just wrap the input element in the label. Then you don’t need a sibling selector to make this work

    0
  13. 13

    Superb, i was just looking for those form labels the other day. Thanks alot, bookmarked :-)

    0
  14. 14

    Superb article, get very excited at the potential of CSS3, love the fancy modal drop down, est la OS X. Thanks for the explanations will definitely be using them in upcoming projects.

    Darren Alawi.

    0
  15. 15

    Zurb team rocks!

    0
  16. 16

    The “Fancy Modal” doesn’t work to well on Firefox 3.5.5.

    0
  17. 17

    Good article, the modal window is broke in just about every browser for though

    0
  18. 18

    i don’t like inline form labels… by the way on the demo site if you copy-paste using the mouse right button instead of keypress, the text won’t be removed…

    0
  19. 19

    In the first example – inline labels – if you type something in the box and then reload or go to another page and click ‘back’, both the input text and label are visible. Anybody have a way to prevent that? Is there an event that fires on reload/back button that is reliable?

    0
  20. 20

    This post was nice but unfortunately it’s not very practical. Only the inline label as shown at Mobile.me actually works cross-browser. It seems while you had some fun with these new elements, but they have not yet been broken in using other browsers that support CSS3. The modal window example proved to be pretty much useless in every browser I looked at. Not only was the background non-existent but the “ok” button never closed the modal window.

    Future articles like this would be nice, but we need to remember to check the work before we release it to the public. That’s rule #1.

    0
  21. 21

    Superb ! I love this kind of articles.

    ZURB, you are great.

    0
  22. 22

    Until IE8 (!) becomes obsolete most of these things are of academic interest. Web designers can use them on their own sites and admire each other’s sites with Firefox but there is no way to use them in real-life projects.
    Even the browsers who support these features do so mostly through non-valid tags. It is a pity to see how quickly the issue web standards has been forgotten. Given the fact that web developers are the only ones that have to lose something from the abandonment of web standards I find it very strange that the people of Smashing Magazine are so happy with the current situation of CSS3.

    0
  23. 23

    I do like CSS3 a lot, and use little enhancements all the time. But what on earth is the point of webkit-animation? Especially when you’re already using jQuery!

    It’s all about doing what simplest and easiest. And for tiny touches like fading animation, jQuery is far superior (and not just because it’s cross-browser).

    To be honest, I’m not a fan of “inline” labels anyway. Just because MS does it, doesn’t make it a good idea. It looks very amateurish. If you don’t have enough space to accommodate a small label above or to the left of the field, then You’re Doing It Wrong. Add more white-space to your design and let it breathe.

    0
  24. 24

    ck ck ck … inline performance … nice i like it, thumbsup

    0
  25. 25

    Agreed, this is really exciting stuff, but modal examples no workie in my browser. :(

    0
  26. 26

    perfect,
    but,
    Do You Have any plan to kill the unsupported browsers so we stop doing stupids hacks…?!

    :-)

    Thx, keep us the good work

    0
  27. 27

    What are you talking about? You think only 5% of browser users are using modern browsers?!

    http://www.w3schools.com/browsers/browsers_stats.asp

    My rough calculations put IE weighing in at a meager 35%. Specific sites and clients may be different, but more users are using Firefox than all versions of IE.

    I say “Green means go!” Start using these properties today!

    0
  28. 28

    Hey everyone,

    Thanks for all the comments and retweets! Glad the articles have been a hit. We’ve just pushed out an update to our playground to address some of the Firefox functionality for the modals—they should now hide and show properly in at least 3.5 and up.

    Thanks,
    ZURB

    0
  29. 29

    Peter, the modal works in browsers that nearly 30% of the web users—Firefox, Safari, and Chrome—according to these usage stats on Wikipedia: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

    We just pushed the update for Firefox—try it again and you should see the update.

    Also, we’re not saying these should replace anything you have right now, just that there are techniques out there that can come of the new CSS3 support we’re seeing in browsers.

    Enjoy!

    0
  30. 30

    I’m no JavaScript whiz, but there must be an easier way of implementing the inline labels. Perhaps it would come at the cost of not using the fancy CSS3 transition, but is there a function to clear a field’s value when it receives *input* instead of focus?

    Also, a request to Smashing administrators: please implement “notify me of replies” functionality.

    0
  31. 31

    http://tarnfeldweb.com/dialog/
    Another great dialog script.

    0
  32. 32

    Nice article, but i don’t agree to “It won’t always have limited support”. Yeah, of course…but not “now”. Maybe 2011. Or 2012 … 2015? That it’s a good “fantasy” article, perfect in a perfect world, with FF/Chrome/Safari users at 99%. My opinion, Css3 are good to use in demo or labs test sites, for learning and be ready for future use. But now, i don’t think i’ll use them, above all when the clients ask me “why my website show so bad in my browser?” (read “internet explorer”). Oh well…you must download FF or chrome. “What the h*** that mean? all must download it for wacth my website? i don’t pay a website visible “good” only for who have FF… ect ect ect”. And so, in that situation (the common) i’ll need to use png to build my buttons, to add shadows, to add round borders ect. So, why i must do TWO works (use css3 and images), and not do ONE work (only images, as always do)? No reason, now, because i spend the double time to end my work (and the reason we use css3 it’s SAVE time).

    0
  33. 33

    Nice stuff. Minor comment: these aren’t called “modals”, they are called “modal dialog boxes” or “modal windows” or something like that. “Modal” is an adjective, not a noun, so the way you’ve used it is like talking about creating some “blues” or some “bigs” instead of “blue boxes” or “big boxes.”

    0
  34. 34

    Great Article , but unfortunately Box-Shadow was removed from CSS3 spec.

    http://www.w3.org/TR/css3-background/#the-box-shadow
    and maybe will be replace by this

    http://www.bradclicks.com/cssplay/drop-shadow/Drop-Shadow.html

    0
  35. 35

    Even though Iike this article, it’s become the 3rd, almost similar in a row..
    Some more advanced, like fieldset or (radio)button styling would be both neat and original.

    0
  36. 36

    Nice stuff Zurb, like the inline form example.

    To everyone whingeing about not being able to use this stuff cos of IE: ever heard of progressive enhancement? It’s not about your site not working in IE – you make it work just fine and make it look as good as it can in that browser, but for people with better browsers, they get an even better, slicker, more refined experience.

    I see more and more sites every week that are doing stuff with CSS that only better browsers can render correctly, and not just web-dev related sites either – sites for real businesses, so the argument about clients not accepting it doesn’t hold water for me either.

    0
  37. 37

    You can achieve the placeholder text in the forms using the placeholder attribute as well. That some nice HTML 5 magic there for you! Start using, quit whinging

    0
  38. 38

    Muhammad Usman Arshad

    December 16, 2009 10:59 pm

    nice collection, thanks for sharing

    0
  39. 39

    Nice article. Especially fan of the “Inline Form Labels” part. Form design is a task that should be (and that I have) taken very serious by everyone.

    About CSS3, browser prefixes and javascript: Apply anything you want, just keep graceful degrading in mind and enjoy~

    0
  40. 40

    Its very nice article and feature as well,

    plz awake Microsoft Guys…!
    I would say at least release some Plugin’s or Updates for IE6 which supports CSS3 & HTML5….
    Crossing the finger… :)

    0
  41. 41

    This is all nice stuff, but can anyone tell me when CSS3 will be applicable in practice??

    As I do not see real advantage of these incredible CSS3 specifications as many browsers do not support this at all. Perhaps when CSS4 will come up, we can use the advantage of CSS3 :)

    0
  42. 42

    “The New Inline Label” is called ‘placeholder’ and is an HTML5 feature. You shouldn’t use label elements to reproduce placeholder behavior, and vice versa.

    To quote the spec:

    The placeholder attribute should not be used as an alternative to a label.

    In other words, your example is semantically incorrect. See http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute for more details.

    0
  43. 43

    With the inline labels, would it not be possible to remove the need for Javascript by using an attribute selector? So:

    label.inlined + input.input-text {
    background:#fff;
    }

    label.inlined + input.input-text[value=""] {
    background:transparent;
    }

    I’m sure this principle could be expanded to provide the intermediate :focus step.

    0
  44. 44

    A majority can’t us it = spend your time on something else and get back to it when IE supports CSS3.

    0
  45. 45

    Is there a reason why The Fancy Modal background and shadow are not working in FF (3.55) ?

    0
  46. 46

    @shobo Yes, because Firefox doesn’t support “-webkit-transform”. As the name says, this is only supported by Webkit-based browsers (Chrome, Safari).

    @article: great stuff :) I can’t wait to use CSS3 in every-day work :) (though i’m already using it a bit)

    Chris

    0
  47. 47

    Love this article ! Zurb got a great playground…

    0
  48. 48

    CSS3 is great as far as it is supported by the “major” browser Firefox 3.5, which is nowadays used by almost everybody, who doesn`t rely on IE. This would especially be border-radius, box-shadow and rgba. But if it is CSS3 stuff that only works in the rest of the browsers, Safari and Chrome, which amount to about 5 % like in the case of the website I work for, its pretty useless nowadays. It`s great to push the web forward, but not when a majority of the people can`t see all the shiny new effects.

    Like I said elsewhere lately: Before webdesigners start to use CSS3 they should make the basics right and rely on current technology like + or > or attribute selectors or even pseudo elements (first/last-child). This would save so many extra classes, IDs and even tags.

    How many websites are out there, that still use tables or outdated HTML-tags? Even the big ones like Amazon do it. When this job is done people can start thinking about CSS3 and it`s “gimmicks” and “eye-candy”, because all the borders, shadows and transformations/transitions are nothing more than that. The basics would be much more important!

    0
  49. 49

    rubbish?

    Funny how fanboys scream over using proprietary features in IE yet suck em up like Llamas milk from Webkit ( 9%) or Google Chrome (privacy whore) – and its more than ‘progressive enhancement’ -each bit of non-standard cross browser behavior ( and disappearing labels/elements is pretty significant behavior ) has a cost in end-user documentation and support calls for your applications, not counting the testing cost as it becomes ONE MORE ITEM to be bug tracked and re-tested (across browsers) when updates are made.

    Meanwhile, as browsers implement more ‘me too’ features, the prospect of a ubiquitous web gets further and further away, as local computing requirements balloon.

    0
  50. 50

    There’s a major problem with yout inline label (at least in FF 3.5+). When selecting the text you just entered in the input, Firefox selects the text of the label instead.

    0
  51. 51
  52. 52

    CSS3 is useless until Internet Explorer support it.

    0
  53. 53

    Your inline label doesn’t behave properly (Safari 4, Mac). When I filled some inputs, and then go to another page, and go back, my input and the label shows up. Take a look at Apple’s website, it doesn’t do it over there =)

    0
  54. 54

    Very nice Article!!

    0
  55. 55

    Love the inline labels technique.

    0
  56. 56

    I don’t understand the use of the transform for the fancy modal box. In chrome, this just pushes some parts of the box under the bookmark bar. Wouldn’t position: absolute; top: 0; work better?

    0
  57. 57

    Also, if you are using this on a wordpress blog, or anything else that keeps the value in a cookie, as it currently stands, when the user comes back to the site later to post a comment, and the form fields are prefilled, they get something nasty, like this.

    There is an elegantly simple solution to this. In the js, right after the function is opened, add the following:
    if($(this).val() != "") { $(this).prev("label.inline_label").addClass("has_text");}

    Naturally, change the selector names, but that works for all my testing

    0
  58. 58

    Really thanks dear…….
    Your practicals lessons on webdesign are really great & helpful…

    0
  59. 59

    I love these lessons. They really are informative. Especially the part where right about the time this stuff is supported by most browsers, everything will be different and this will barely apply anymore because a newer slicker way will have been released 4 or 5 times by then! While I love this stuff and it is engaging, it is also useless mumbo jumbo because to apply it on a site designed to produce revenue is at this time suicide! There should be a different category for this stuff called ‘wishlist’ or ‘what could be’. Unfortunately, until someone at Microsoft decides to allow us to enjoy these possibilities, they are just dreams accessible by the few. Once again, Smashing, while being top notch and the best in the biz, I salute your risque and brazen transparency to making us aware of possibilities and what ‘could be’ if we weren’t dominated by ‘Big Brother’. Keep up the great work.

    0
  60. 60

    Simply awesome. Thank you!

    0
  61. 61

    I never noticed that subtlety regarding inline form labels on me.com. Very intuitive and clever solution from Apple. Great post.

    0
  62. 62

    For the Inline Form Labels I’d suggest combining the javascript for the keypress and blur checks into one using keypress. That way if someone types and has a blonde, short-term memory loss moment they can remove all the text using backspace in order to see what they need to type.

    $(this).keypress(function () {
    if($(this).val() == “”) {
    $(this).prev(“label.inlined”).removeClass(“has-text”).removeClass(“focus”);
    } else {
    $(this).prev(“label.inlined”).addClass(“has-text”).removeClass(“focus”);
    }
    });

    0
  63. 63

    Its not working for me in IE 4. lol!

    0
  64. 64

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
    rel=”Dofollow”>image masking

    0
  65. 65

    It’s still not perfect, because when you clear the text the label doesn’t reappear.
    I’ve been looking for the perfect inline-label plugin, but I still haven’t found anything like this one:
    https://launchpad.37signals.com/signin

    …unfortunately it’s made with Prototype (not jquery).

    0
  66. 66

    If every browser supported W3 standards, CSS development will no longer be interesting, complicated & full of surprises. CSS coders are paid a lot of money to fix layouts only because of screw-ups like MSIE.

    I think, MSIE is there to restore the balance.

    Regards,
    vinod

    0
  67. 67

    Ha ha ha, forget it, at least for the next 3 years, this thing, as awesome as this truly is may not be put into mainstream.

    0
  68. 68

    IE9 will “start” implementing CSS3 but nothing before that I’m afraid

    0
  69. 69

    It’s funny, because there’s so much hype around HTML5 and CSS3, that you’d think Microsoft would be more eager to support at least the very common properties like “border-radius”. Especially since we now have Chrome by Google, which is Microsoft’s #1 rival these days.

    The main thing that annoys me about IE is that MS refuses to release intermediate versions. Where’s IE 8.1?

    0
  70. 70

    yes i checked that is isn’t working in FF3.5.6 also

    0
  71. 71

    I can confirm – it’s a bit buggered… (technical term there ;P)

    0
  72. 72

    In Google Chrome the modal isn’t completely visible. The upper part is missing. The simple one is unproblematic.

    0
  73. 73

    yup, it’s not working for me either in FF 3.5

    0
  74. 74

    yupp, same here in safari 4.0.3, osx 10.5 – simple modal ok, fancy looses the upper part…
    thanks for the article!

    0
  75. 75

    I agree, but until users have access to these awesome features it will be a gamble to use them.

    0
  76. 76

    “afraid”, that’s the right word.
    Microsoft guys, how can you sleep at night?

    0
  77. 77

    it’s not working for me either in IE8 (just kidding)

    0
  78. 78

    You’re absolutely crazy if you think these are just of academic interest because IE doesn’t support them. If you use border-radius for more modern browsers, is it still alright if IE has sharp corners?

    My answer is: hell yes!

    Also, I’m not sure what you mean by non-valid tags. I just wrote a Tumblr theme in HTML5 and CSS and they both completely validate. HTML5 is a moving spec, but there is absolutely no reason you can’t start using it now. You may need a little help from Modernizr, but start now! That’s how you push browser makers at Microsoft to get their asses moving on CSS3 properties. Start using them for modern browsers and give IE a fully functional but less pretty version of your site.

    0
  79. 79

    They WILL see something: a less fancy, yet still perfectly usable, version of the website. And that’s okay. Bells and whistles are not a crucial part of a website, but if they make the experience nicer for some people then that’s better than them not being there at all. They won’t make the older browsers’ users have a worse experience.

    0
  80. 80

    Using webkit and moz properties is NOT about “the future of webdesign”

    You’re wrong. The vendor prefixes are for the most part for features that are already included in the CSS3 spec but are still at working draft or last call stages. The only way these features will reach full recommendation status is if browsers implement them so that authors can actually use them. The prefixes are only there now so that the features will work correctly in the browser before the module reaches full candidate recommendation at which time the prefix can be dropped.

    0
  81. 81

    That wikipedia article doesnt state those numbers you quoted.IE’s median share is 63%. so your number of 9% is way out of line.
    did you even bother to read the article you linked to before you linked it?

    0
  82. 82

    No need to get angry. What I mean is that -webkit and -moz do not validate either as CSS3 or anything else. Checking the live demos in the w3 css validator will make it clear.
    The question is if promoting the use of these features is pushing Microsoft to make standards compliant and functional browser or if it is giving the green light to all browser-makers to forget about standards compliance.

    0
  83. 83

    Validation is a tool; it’s not the be all and end all. As long as you know why your CSS doesn’t validate and are confident that those errors won’t cause problems accessing your content on any device, then you’re fine.

    0
  84. 84

    Still not working properly in the latest Webkit nightly on OSX. Same problem as reported by others with the top not being shown completely.

    0
  85. 85

    Since the gradient doesn’t work in Firefox I recommend you use multiple box-shadows (inset).
    Firefox offers multiple box-shadows, here’s an example of how to use them:
    http://tests.themasta.com/blogstuff/boxshadowdemo.html
    The result is stunning, isn’t it?!

    Hope Safari does support multiple Box-shadows soon, it replaces most of the background image needed for a good design!

    0
  86. 86

    there must be an easier way of implementing the inline labels

    There is, but you’d have to use HTML5 ;) http://24ways.org/2009/have-a-field-day-with-html5-forms

    0
  87. 87

    Great article but I’m with you on the inline labels. Simply clear the text when the user types something, not onfocus. You could also create a tiny jQuery script that checks the page for input fields with a particular class (say: inlinelabel) and does the work for you, automagically.

    0
  88. 88

    Totally agree with you mate, hate the negativity around progressive enhancement (or whatever you want to call it). Not going to take too much notice of it though, just adapt with the change and get excited about new technologies.

    0
  89. 89

    exactly… so for the moment use moz and webkit prefixes and then lastly apply the rule without any prefix so when it is supported (and moz webkit prefixes are dropped) your styles will still be picked up. Like so…

    .dry_your_eyes {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }

    0
  90. 90

    Fortunately here in Germany Firefox is the biggest rival to the IE (or is the IE #1 rivel to Firefox). Chrome only has little market shares ;)

    0
  91. 91

    Johan "Josso" Jensen

    January 4, 2010 7:23 am

    @Ron:
    Scott probably meant that Google is the #1 rival – and have you seen how fast Chrome has gained a few percent of the market share?
    Google and Chrome is one of the biggest rival to Microsoft and their browser (IE).

    – Josso

    0
  92. 92

    so when the military wears blues what’s that mean? or how about right before you get your speeding ticket and the blues are flashing behind you? I would much rather write “modal” multiple times rather than “modal dialog box”. nickname it what ever you want so long as every one is tracking. No need to nitpick, you knew exactly what he meant.

    0
  93. 93

    i have the same problem. i can’t select the text i’ve written in the input it just highlights the label. also if you select inside the input and slightly move your mouse while doing so you can potentially select the label instead and the user wouldn’t be able to type into it. it’s a cool idea but i don’t think that particular example is very user friendly.

    0
  94. 94

    Those numbers are incredibly inflated being that mostly web designers are visiting the w3c site , and they are using more advanced browsers, FF, SF, CM. the wikipedia article is much more accururate putting IE total usage around 63% ( http://en.wikipedia.org/wiki/Usage_share_of_web_browsers#Summary_Table )

    0
  95. 95

    Unfortunately, last-child is a CSS3 selector, and has NO support in IE to date.

    first-child is somewhat better supported, but still, not completely

    0
  96. 96

    What i don’t udnerstood is if truth be told how you’re now not actually much more neatly-appreciated than you may be now. You are so intelligent. You understand thus considerably relating to this matter, produced me for my part consider it from so many numerous angles. Its like men and women don’t seem to be fascinated except it is one thing to accomplish with Lady gaga! Your personal stuffs great. All the time take care of it up!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top