Well last night I finally took the plunge and now I don’t know what it is I was waiting for all these years.
Sass enables you to create CSS with much less effort than before. It brings CSS closer to the programming language that we all wish it was.
Let’s get down to some of the features.
Sass Features Variables Right now, this is going to be the feature I make the most use of.
So here’s another common Internet Explorer CSS hack that’s pretty popular and not too ugly.
Here’s The Problem ie-css-min-height-hack
This is how normal people horizontally center block elements using CSS: You slap on a width (I mean, that should be obvious enough right?). Then you set the left and right margins to auto, and Voil , centered!
body #box { margin: 0 auto; width: 780px; } Well except in Internet Explorer and some older browsers.
Now it’s not surprise to anyone out there that I hate Internet Explorer. No I mean I really hate it! One of the reasons that I hate it so much is that it’s buggy. Call it whatever you want, maybe it’s too forgiving on bad HTML or CSS, but whatever their intentions are (forgiving sloppy code or just too lazy to interpret code right) it causes tons of problems.
The Min-Height Problem I know a lot of you have had this problem in the past.
Here’s the kindergarten version of a 3 Column CSS layout that you’re going to get from most other websites:
<div id="header">header stuff</div> <div id="left">left stuff</div> <div id="center">center stuff</div> <div id="right">right stuff</div> <div id="footer">footer stuff</div> Simple enough right? The alignment is done in your style sheet, where the left would float left, the center would also float left and the right would float right.
You could set all your styles based on these column ids.
Now there’s a lot of code involved and the menu created doesn’t really fit normal usability standards, but the end result is cool.
Happy July 4th to all you guys.
Source: Accessible expanding and collapsing menu [456 Berea Street]
Now I’ve never really been a Photoshop guy. I just don’t have an eye for that stuff, even if it may be very basic. What’s my solution? My Cool Button. This service allows you to created, not to bad if I do say so myself, Web 2.0 buttons on the fly.
A lil' PHP and GD2 sure does go a long way these days.
Saw this and I was amazed:
All done with CSS And JavaScript. The implementation is also brilliantly simple. And it all fits in 1.5KB. What’s to lose?
By the way, you can’t tell by the image, but the image under that travel menu; it moves with the mouse hover. Check it out: Facny Menu.
Introduction Here we go again, the age old story. Do we use plain old HTML Tables or do we invest the time and energy into learning and using CSS properly? Duh, it’s not even worth saying anymore. Tables suck, tables have always sucked. The only thing that keeps tables going for so long is their ease of design.
More Evidence Tables Bad, CSS Good tells us, again, why we should us CSS whenever possible:
Are you one of those guys who just loves the look of Rounded Corners, but doesn’t like the footwork required? It’s your lucky day, sort of.
Rounder corners are developed using, rounded corner images of course, CSS style to set those images as backgrounds, and the content of the box surrounded by a number of divs. You need one div for the content of the box. Then you need two divs above that, for the top corners and two below it, for the bottom corners.
Yes again, I’m late. I’m sorry folks, but here we go.
Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven’t impulsively changed my theme again)? Nice basic reflection, right? It’s commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, “what’s so impressive about that?”. Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good.
