useful articles
Get flash to fully experience Pearltrees
February 3, 2011 Updated: April 21, 2011 10:49 AM EST Since the beginning of the 'webfont revolution' we've relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that's clear and compatible with future browsers? Short history
The New Bulletproof @Font-Face Syntax
Twenty Advanced CSS Tutorials
The following collection focuses on advanced CSS tutorials to help you sharpen your CSS skills. Once you’ve recreated these tutorials on your own, you can use and re-use the resulting files and keep them in your personal toolkit for future reference. We avoided tutorials that used combinations of CSS and jQuery to focus entirely on CSS development tricks. jQuery is a powerful tool, but if you want to learn pure CSS, then these advanced tutorials are a great place to start.
Published by Chris Coyier I've seen this come up a couple of times lately on Twitter and then an interesting Dabblet so I figured it would be an important thing to document. Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. In other words: < nav >< a href = "#" > One </ a >< a href = "#" > Two </ a >< a href = "#" > Three </ a ></ nav >
Fighting the Space Between Inline Block Elements
I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3.
Pretty CSS3 buttons
Responsive & Retina Content Images using simple CSS & a spacer PNG - HTML5/CSS3 Experiment - Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5/CSS3
Posted: April 03 2012 This technique has been superceded by Responsive & Retina Content Images Redux . The problem with media queries and responsive design at the moment is there's no "real" way to deliver a particular content image (that's referenced in an img tag) for different breakpoints and resolutions. So, it occurred me to that the simplest way of dealing with content images (as img tags) in a responsive design and for retina screens was to use a spacer PNG (generally smaller than an GIF) and background images. All it requires is a blank PNG or GIF the same size as the intended image, and then setting that image's background to whatever image needs to be served along with background-size: contain. It works because the spacer PNG is transparent, which allows the image's background image to be visible.
Efficiently Rendering CSS
Published by Chris Coyier I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices . Google is also always on a crusade to make the web faster.
Center Multiple DIVs with CSS
At some point, you may have a situation where you want to center multiple elements (maybe <div> elements, or other block elements) on a single line in a fixed-width area. Centering a single element in a fixed area is easy. Just add margin: auto and a fixed width to the element you want to center, and the margins will force the element to center. There really should be a similar simple way to center multiple elements evenly spaced. It would be nice if CSS had a property called “box-align” which you could set to “center” then the child elements would be centered evenly within their parent.
The Principles Of Cross-Browser CSS Coding
It is arguable that there is no goal in web design more satisfying than getting a beautiful and intuitive design to look exactly the same in every currently-used browser. Unfortunately, that goal is generally agreed to be almost impossible to attain. Some have even gone on record as stating that perfect, cross-browser compatibility is not necessary.
Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary , but also totally impossible. Of course, when we speak of the challenge of “cross-browser” CSS, we’re really saying “How can I make this work in Internet Explorer versions 6-8?” — because those are really the most problematic browsers. Although I’ve written before about cross-browser CSS , and I still stand by just about every word in that article, I thought I’d reiterate my feelings on this subject by providing what I feel is the best workflow for getting your CSS to be as efficient, hack-free, and maintainable as possible while providing as similar an experience in all supported browsers. Keep in mind that the recommendations here would likely only apply if you are developing projects with a high number of users on older versions of Internet Explorer.
Cross-Browser CSS Development Workflow
“Vertical-align isn’t working!” cried the web developer. The vertical-align property is one of those features of CSS that sounds pretty self-explanatory, but can cause problems for CSS beginners. I think even many CSS veterans have had problems figuring this one out at times. In this post, I’ll try to cover it in an understandable manner.
Understanding CSS’s vertical-align Property
Fixing IE's Opacity Inheritance
January 17, 2012 Child elements ignore the parent's opacity in Internet Explorer. In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent.HTML5 Placeholder Attribute
November 8, 2011 A guide to using the attribute, and support it for older browsers. PlaceholderOctober 23, 2011 Getting the naturalWidth and naturalHeight for an image in any browser. Actual width and height in modern browsers Modern browsers (including IE9) provide naturalWidth and naturalHeight properties to IMG elements. These properties contain the actual, non-modified width and height of the image.
NaturalWidth and NaturalHeight in IE
Solving IE7 & IE8 PNG Opacity Problems
July 18, 2011 How to fix transparent png issues associated with Internet Explorer's alpha filter. PNG Alpha-transparenciesPublished by Guest Author The following is a guest post by Gustav Andersson who has come up with a clever little technique for a text flow problem. I've struggled with this myself in the past, so I'm happy to add this technique to the ol' toolbox. Not mention, yet another one of these . A floating image takes away horizontal space from the text that flows around it. In fixed width layouts, you can check that the space left for the text is enough to create a decent looking column, safe in the knowledge that everyone else will see the same thing.