Useful articles

Facebook Twitter

The New Bulletproof @Font-Face Syntax. 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.

The New Bulletproof @Font-Face Syntax

Could there be a better way? One that's clear and compatible with future browsers? Short history In September 2009, Paul Irish came up with the Bulletproof syntax for writing the @font-face declaration. The “Fontspring @Font-Face Syntax” The code should have been clean, clear and simple all along. What? The hack trick that makes this work is the '?' Twenty Advanced CSS Tutorials. The following collection focuses on advanced CSS tutorials to help you sharpen your CSS skills.

Twenty Advanced CSS Tutorials

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. Topics range from sliders, accordions, forms, layouts, to even image transitions. Stylish Image Content Slider in Pure CSS3 Source. Fighting the Space Between Inline Block Elements. 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.

Fighting the Space Between Inline Block Elements

Here's the deal: a series of inline-block elements formatted like you normally format HTML will have spaces in between them. Pretty CSS3 buttons. 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.

Pretty 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. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+. The Objective. 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. And yes, it even works with serving "retina images" to the new iPad. Efficiently Rendering CSS.

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?

Efficiently Rendering CSS

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. 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. The Principles Of Cross-Browser CSS Coding.

Advertisement 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.

The Principles Of Cross-Browser CSS Coding

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. While I agree that creating a consistent experience for every user in every browser (putting aside mobile platforms for the moment) is never going to happen for every project, I believe a near-exact cross-browser experience is attainable in many cases. As developers, our goal should not just be to get it working in every browser; our goal should be to get it working in every browser with a minimal amount of code, allowing future website maintenance to run smoothly. Understand the CSS Box Model. Cross-Browser CSS Development Workflow. Most good developers by now accept the fact that pixel-perfect cross-browser CSS is not only unnecessary, but also totally impossible.

Cross-Browser CSS Development Workflow

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. Understanding CSS’s vertical-align Property.

“Vertical-align isn’t working!”

Understanding CSS’s vertical-align Property

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. Fixing IE's Opacity Inheritance. Child elements ignore the parent's opacity in Internet Explorer.

Fixing IE's Opacity Inheritance

January 17, 2012 In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. HTML5 Placeholder Attribute. A guide to using the attribute, and support it for older browsers.

HTML5 Placeholder Attribute

November 8, 2011. NaturalWidth and NaturalHeight in IE. Getting the naturalWidth and naturalHeight for an image in any browser. October 23, 2011 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. Solving IE7 & IE8 PNG Opacity Problems. How to fix transparent png issues associated with Internet Explorer's alpha filter. July 18, 2011 PNG Alpha-transparencies IE7 and IE8 have native PNG support for alpha-transparencies, but it falls to pieces as soon as opacity comes into the picture. When setting any value for opacity, even 100% (ie. filter: alpha(opacity = 100)), IE fills in the alpha-transparency of the PNG with a pure black fill. Minimum Paragraph Widths in Fluid Layouts. 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. In a fluid layout, however, you have no such guarantee. 5 Really Useful Responsive Web Design Patterns. Responsive web design requires a very different way of thinking about layout that is both challenging and exciting. The art of layout was already complex enough for the centuries that it was defined by fixed elements, now things are becoming exponentially more complicated as layouts become increasingly adaptive. Which One: Responsive Design, Device Experiences, or RESS? As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up.

SASS and Compass for Web Designers: Introduction. HTML5 Video Player Comparison. Animate.css: Kick-Ass CSS Animations in Seconds Flat. On my laundry list of todo items that I’ll do “someday” is the idea of creating a prebuilt library of useful CSS animations.

The bad news is that I’ll likely never actually get around to doing this. The Great Tablet Flood. Free iPad CSS layout with landscape/portrait orientation modes. By Matthew James Taylor on 27 May 2010 The iPad has finally launched in Australia today, hooray! Useful CSS Snippets for Your Coding Arsenal. Jan 27 2012. Writing CSS For Others. Advertisement. CSS Shorthand Guide. Sunday Oct 23 2005 Ok. Create CSS3 Buttons Compatible with All Browsers -

CSS3 brings with it some awesome styling features, like rounded corners, gradients and borders, but also brings a lot of headaches to those who want to implement it inside web pages, due to Internet Explorer lack of support for these great features. If you feel guilty for making use of CSS3, don`t be, because I`m going to show you how you can create web elements only with CSS3 which are compatible with all browsers. Today, I want to show you how to create some beautiful buttons which make use of the latest CSS3 features and, most importantly, pass the cross-browser compatibility test, which means they will look awesome in modern brosers, like Chrome and Firefox, but also will look pretty good in older brosers, even IE6.

Code a Responsive Navigation Menu. Bulletproof CSS3 Dropdown Navigation Menu. Font sizing with rem. Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age. Unfortunately, there are still various pros and cons that make the various techniques less desirable. Website dimensions - exact pixels - live check. What’s the Deal With Display: Inline-Block? 9 удивительных эффектов для сайта, или Как это повторить? How to Make Slicing Suck Less: Tips and Tricks for Slicing a PSD. Create a Responsive Web Design with Media Queries.