The Goldilocks Approach to Responsive Web Design 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
Foundation: HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo
WTF, HTML and CSS? Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 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. 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. The above technique is straightforward, and has solid browser support. Caveats Easy peasy, right?
Building a Responsive Layout With Skeleton: Starting Out Dave Gamache's Skeleton Boilerplate provides the perfect foundations upon which to build responsive websites rapidly and reliably. We're going to use Skeleton and build a responsive page based on the Magazine design featured on Webdesigntuts+ recently. We'll be looking at everything from multiple background images, through to media queries, flexible media and mobile-friendly navigation. First Steps In this first video we'll download the Skeleton Boilerplate and prepare our project. Structure and Columns It's time to get stuck into the markup and some styling. We'll also deal with some of the aesthetics by using CSS multiple background images on certain areas. Multiple Background Images Browser support for multiple background images is pretty good, with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all cooperating nicely. Unfortunately, non-supporting browsers won't understand the rules and therefore won't display anything at all.
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. 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 A fluid width kinda setup: When to use
Everything You Need to Know About the CSS will-change Property Introduction If you’ve ever noticed “that flicker” in WebKit-based browsers while performing certain CSS operations, especially CSS transforms and animations, then you’ve most likely come across the term “hardware acceleration” before. The CPU, GPU, and Hardware Acceleration In a nutshell, Hardware acceleration means that the Graphics Processing Unit (GPU) will assist your browser in rendering a page by doing some of the heavy lifting, instead of throwing it all onto the Central Processing Unit (CPU) to do. When a CSS operation is hardware-accelerated, it usually gets a speed boost as the page rendering gets faster. As their names show, both the CPU and the GPU are processing units. Hardware acceleration (a.k.a. CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. The Old: The translateZ() (or translate3d()) Hack transform: translate3d(0, 0, 0); The New: The Glorious will-change Property