Archive for the 'CSS & CSS3'

Tweet 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...
Read more

Tweet I was watching the other day the talk that Lea Verou gave at Fronteers 2011 (you can check the video on Fronteers Vimeo page) when she just proved that I don’t know CSS3 at all (I lived for a while with the sensation that I did know a little bit, I was wrong though). One thing caught my attention: CSS3 patterns. She build some really crazy stuff there and I invite you to check more CSS3 patterns on her site, test the code and implement it in your future projects. Nothing is made...
Read more

Tweet Inspired from the print world, people from Adobe and Microsoft are coming with new features that might (or might not) be embedded into future CSS specs. These new features – CSS Regions and CSS Exclusions – will allow text to flow into webpages pretty much like they do in newspapers and magazines. You remember that the idea of text flowing into columns is another CSS3 proposal, CSS Multi-column Layout Module and web layouts imitating magazine layouts is CSS3 Paged Media...
Read more

Tweet Ingredients: sprites, unorderdered lists, Mootools knowledge. Cooking time: 1 hr The Result: Can be seen on our – Demo page – mouse-over the top menu. Preparation of the Mootools glowing menu The menu is a list containing an A tag for each menu item. We are using sprites and text-indent:-5000px for accessibility purposes. The trick is that we use the image positioned top for LI and bottom for A HREF Step 1: cook the HTML code 2e6e842fab18b494549b2a3fad853af3008...
Read more

Tweet 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. 2e6e842fab18b494549b2a3fad853af3011 for the white shadow is visually-similar to 2e6e842fab18b494549b2a3fad853af3012 because box-shadow has the parameters: 2e6e842fab18b494549b2a3fad853af3013 and progid:DXImageTransform.Microsoft.Shadow: ...
Read more