I have to admit that when I like the design of a website I check its CSS and HTML to see the code hoping to learn something new. I’m horrible at design and I cannot make a box even if I have it in front of me for 24 hours non stop but I love all kinds of tricks to make the content more appealing: rounded boxes, sexy quote marks, bubbles, everything.
What is really weird is that all these fancy design elements are usually cut as images and put as background-image for some DIV while the vast majority of them can be recreated with CSS. I admit, not all of them are simple but some do and today I’ll show you my latest experiment. I love a certain kind of box and I’m trying to make it using CSS3 only. After a little prayer to the CSS3 God let’s start.
If you’re not a patient person skip all this and go directly to the test page.
I was watching the other day the talk that Lea Verou gave at Fronteers 2011 when she just proved that I don’t know CSS3 at all.
One thing caught my attention: CSS3 patterns. Making some of my own was the next step. It’s a great way of learning the specs a bit better cause I must confess I never read them properly and never bothered with the small details.
Very simple problem with a pretty complicated solution, mostly because IE is ignoring the box-shadow CSS3 property. Instead progid:DXImageTransform.Microsoft.Shadow is doing the trick for it and an equivalent can be found.
I am sure you all know about Mictosoft’s IE9 Testdrive. Its main target was, for now, the developer – in an attempt to showcase the improvements in IE9 and maybe make us be more nice to them and forget how much time we waste with IE6.
What I was interested as a frontend developer was the the compatibility tables for features like SVG, CSS3 and DOM. And the test results, as per Microsoft’s page, are all gorgeous.
Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.
When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.
I faced this problem many times and for a while the long-used-trick with a display:none div worked very well. So I happily created roll-over effects in image-based menus until one day…
Now the old trick is not functioning on Mozilla. The good guy is Internet Explorer and the bad guy is suddenly Mozilla. Surprised? Me too…
Tweet We need rating scripts for different situations in our webpages. For example we want visitors to rate a wallpaper in a wallpapers site, or a product in a shopping cart. For this we can use one of the rating scripts presented below: Unobtrusive AJAX Star Rating Bar The guys from Masuga Design made this [...]
Tweet As we said in a previous post we’ll try to bring here some resources related to CSS shadows applied to images or boxes. CSS shadow kerfuffle “… in addition to just the plain old img element, an enclosing div plus four additional divs to handle the corners”. CSS Drop Shadows This technique uses an [...]