All too often images are given borders, drop-shadows, rotated slightly, etc via photoshop or some image editing program. This is not only undesirable since CSS should be taking care of the layout, but it is very restricting. A single change in the image would force you to change all the images individually. CSS cascade, which is what makes them so awesome.
I've been avoiding things like CSS3 gradients, transitions but most of all selectors. I use CSS3 as progressive enhancement and I feel selectors cross over from progressive enhancement to complete layout alterations. This obviously isn't the case if the selectors are used in the right way.
What is "the right way?"
I'm very glad you asked. Simply put, "the right way" degrades gracefully. An IE6 user shouldn't notice that they are missing out on anything. It looks right for every user regardless of the browser. I think designers probably have the biggest problem with this concept, "IT MUST LIEK LOOK THE SAME EVERYWHERE LOLZ". Yes, this example-designer is a troll who types in caps. More to the point, designs look different via different mediums, everything plays a role. A piece of paper is always the same resolution, font-size, font-family etc. A webpage can be viewed VERY differently on different computers/browsers. Differences can include font-size, browser width/height, possible font-type and even language.
Have you ever seen that "Translate" link next to a Google search result? This causes words become different lengths & wraps these words in <span> tags. This can have a major impact on your websites and it's important to take note of this if you are targeting foreign traffic. I didn't take this into account when I developed the current CSS-Plus theme.
There are many things that one needs to take into account, not just lte IE 7. Keep this in mind when developing anything.
The HTML
The whole point of doing this was to keep the HTML as clean and standardized as possible.
<ul id="testimonials">
<li>
<img src="images/image1.jpg" alt="" />
<h2>Jeffrey Rose</h2>
<div>
<p>
Lorem ipsum...
</p>
</div>
</li>
<li>
<img src="images/image2.jpg" alt="" />
<h2>Fred Tigerlily</h2>
<div>
<p>
Lorem ipsum...
</p>
</div>
</li>
<li>
<img src="images/image3.jpg" alt="" />
<h2>Craig Dandelion</h2>
<div>
<p>
Lorem ipsum...
</p>
</div>
</li>
<li>
<img src="images/image4.jpg" alt="" />
<h2>Jordan Lilly</h2>
<div>
<p>
Lorem ipsum...
</p>
</div>
</li>
</ul>Let me explain the HTML. Each testimonial is contained within a separate list item. Each list item includes an image, an h2, a div, and paragraph tags within the div. I think everything is quite straight forward except the rogue div. It seems a bit unnecessary doesn't it? Well, one of the coolest CSS tricks I know is to have 2 perfect columns while only setting the width of 1 column. To do this you float each columns left and right, and set the dynamic columns overflow to hidden. This will force text to stay in the column instead of wrapping around objects. This will be clear when you see the example.
The CSS
I'd never used this much CSS3 features on a production site before this.
#testimonials{
width: 500px;
margin: 0 auto;
}
#testimonials h2 {
color:#ccc;
font:26px Georgia, serif;
text-shadow:-1px -1px 0 rgba(255,255,255,0.25);
}
#testimonials li {
border-top:3px solid rgba(0,0,0,0.2);
clear:both;
padding:40px 0;
}
#testimonials li img {
border:5px solid transparent;
float:left;
-moz-box-shadow:0 0 10px #333;
-webkit-box-shadow:0 0 10px #333;
box-shadow:0 0 10px #333;
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);
margin:0 20px 0 0;
}
#testimonials li:nth-child(2n) img {
float:right;
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
transform:rotate(5deg);
margin:0 0 0 20px;
}
#testimonials p {
padding:0 0 20px;
}
#testimonials li:first-child {
border:none;
}
#testimonials div {
overflow:hidden;
}Take note of the following CSS features:
overflow: hidden
This is applied to the dynamic column I was referring to earlier.
rgba()
This is very awesome and can be used in many areas to get cool effects
nth-child(2n)
This is the life saver. We should all take a moment of silence to thank the nth-child inventor...
If we had created images that included the all off these effects (drop shadow, rotate, border, etc) and we wanted to remove the second testimonial, it would mess everything up. It would be
Image align left -Missing- Image align left Image align right
look at that! We would have to either have to replace the deleted testimonial with another one or manually go and change each image, and change the floats accordingly. Nth-child is a lifesaver.
Compatibility
Again, I think it degrades very well, however you could add support for a few of those CSS3 features to IE6,7 and 8 with CSS3 PIE and selectivizr. CSS3 PIE adds support for a few CSS3 properties, such as box-shadow and Selectivizr adds support for CSS3 selectors - Which is really awesome. These libraries work well together (selectivizr requires jQuery or some other big javascript library such as MooTools) and are very easy to implement, just paste the following code in the header.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/selectivizr.js"></script>
<script type="text/javascript" src="js/PIE.js"></script>
<style type="text/css">
#testimonials li img{behavior: url(js/PIE.htc);}
</style>Note 1: Make sure the file paths are correct. Note 2: Selectivizr doesn't work without apache running. So make sure you're running it through localhost or on the web. I spent two hours learning this the hard way. Note 3: CSS3 pie is very finicky. One tiny change can stop it from working (at least in my experience). I also attached the PIE.htc via an internal stylesheet because I usually get problems otherwise.
Conclusion
Start using this as soon as possible. Aesthetically pleasing, easy to maintain and graceful degradation.