Troubleshooting CSS Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions. On the bright side, this is what makes CSS fun (or kinda)! Photo credits Anyway, I’m not here to talk about my convictions but about CSS. Among others, I picked some really common yet annoying issues: Float clearing, an old battle I think this has to be the most common wat? Basically, when an element only contains floated elements, it collapses on itself. There are a number of ways to fix this. Then Nicolas Gallagher came with a new way to clear floats from the parent without touching the markup at all. Why? Why?
Adapt.js - Adaptive CSS Flexible CSS cover images I recently included the option to add a large cover image, like the one above, to my posts. The source image is cropped, and below specific maximum dimensions it’s displayed at a predetermined aspect ratio. This post describes the implementation. Demo: Flexible CSS cover images Known support: Chrome, Firefox, Safari, Opera, IE 9+ Features The way that the cover image scales, and changes aspect ratio, is illustrated in the following diagram. The cover image component must: render at a fixed aspect ratio, unless specific maximum dimensions are exceeded;support different aspect ratios;support max-height and max-width;support different background images;display the image to either fill, or be contained within the component;center the image. Aspect ratio The aspect ratio of an empty, block-level element can be controlled by setting a percentage value for its padding-bottom or padding-top. Changing that padding value will change the aspect ratio. Maximum dimensions Background image Final result
WTF, HTML and CSS? Frosting Glass with CSS Filters The following is a guest post by Bear Travis, a Web Standards Engineer at Adobe. I'm a fan of how Adobe is pushing the web forward with new design capabilities, and doing it in a responsible way. CSS filters is a good example. They knew they were desired because Photoshop paved the way. While filters such as contrast, saturate, and blur have existed in image editors for some time, delivering them on the web has historically required serving images with those filters already applied. Old School: Frosted Glass with Images The frosted glass effect has been kicking around the internet for a while; we even saw it here on CSS-Tricks back in 2008. Demo The HTML The markup is relatively simple. <article class="glass down"><h1>Pelican</h1><p>additional content... The CSS We first size everything to the viewport. The above CSS will create our blurred and lightened overlay. Notes If you'd like a further breakdown, I built a deconstructed version of the effect. New School: Frosted Glass with Filters
Creating Decorated Ordered Lists With CSS HTML ordered lists can be incremented in many different languages, but customizing the appearance of the leading numbers in each list item is rather difficult. Formatting the list in an OpenType font and using font-feature-settings to produce a special numbers option is one possibility, but there is an easier method. By using the under-appreciated CSS counters property – usually associated with generating point-numbered lists – we can customize the leading numbers with abandon. Given a standard HTML ordered list: <h1>Clarke’s Three Laws</h1> <li>When a distinguished but elderly scientist states that something is possible, he is almost certainly right. <li>The only way of discovering the limits of the possible is to venture a little way past them into the impossible. <li>Any sufficiently advanced technology is indistinguishable from magic. ol#clarke-laws { line-height: 1.6; list-style-type: none; counter-reset: section; margin-left: 3rem; Every new list item increments point by 1:
7 Things You Didn't Know You Could Do with CSS CSS and JavaScript, believe it or not, are starting to overlap as CSS adds more functionality. When I wrote 5 Ways that CSS and JavaScript Interact That You May Not Know About, people were surprised at how CSS and JavaScript have come to overlap. Today I will highlight seven tasks you can accomplish with CSS -- no JavaScript or imagery required! CSS @supports Every good front-end developer feature-tests before using features which a browser may not have. This new @supports feature, which also has a JavaScript counterpart, is well overdue and we can look forward to using it soon! CSS Filters Write a service to modify an image's color shades and you can sell it to Facebook for a billion dollars! This type of filtering only masks an image's original view and doesn't save or export the image with said filter, but it's great for photo galleries or anywhere else you'd like to add flare to an image! Pointer Events and Bricking Clicks Slide Down & Slide Up CSS Counters Unicode CSS Classes CSS Circles
SVG `text` and Small, Scalable, Accessible Typographic Designs Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic designer switching from print to web to avoid. It's too finicky. But with inline SVG, we can do it, and do it well. SVG <text> The big "trick" here is that SVG has a <text> element that is just that: text. <svg xmlns=" width="800px" height="300px" viewBox="0 0 800 300"><text x="25" y="55" font-family="'Lucida Grande', sans-serif" font-size="32"> Regular ol' text here. See. <text> is happy to use custom fonts Using @font-face and custom fonts on your site? <text class="hook">Some Cool Text Yeah. but it even works for SVG-as-<img> (or background-image, presumably) as well, as long as the font-family references the custom font by the right name. Use Design Software Scales Perfectly When to use Demo