SVG Fallback, Vertical Rhythm, CSS Project Structure Advertisement Howdy, folks! Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS1, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. We’ll take all kinds. If you’re interested in exploring more Q&A, there’s a bunch more in my author archive2. CSS Project Structure Stephen Beiler asks: “Could you please explain your strategy for building CSS? These days I’m using Sass3 for all my projects. I use this feature heavily while organizing and structuring CSS for a project. On my recent redesign of CSS-Tricks, I ended up with 28 .scss files, most of which were modular bits only ever @imported into bigger style sheets. When To Use OOCSS Michael Winczewski asks: “Chris, what do you think of OOCSS? I think it’s fantastic. Ren Walker asks: Sure. if (!
Using CSS gradients - Web developer guide CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly. Browsers support two types of gradients: linear, defined with the linear-gradient() function, and radial, defined with radial-gradient(). Linear gradients To create a linear gradient, you set a starting point and a direction (specified as an angle) along which the gradient effect is applied. Simple linear gradients Here's a linear gradient that starts at the center (horizontally) and top (vertically), and starts blue, transitioning to white. background: -prefix-linear-gradient(top, blue, white); background: linear-gradient(to bottom, blue, white); Using angles Size
Original Hover Effects with CSS3 The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example. View demo Download source Please note that this will only work properly in modern browsers that support the CSS3 properties in use. The Markup The structure of markup is very simple and intuitive. Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. <div class="view"><img src="image.gif" /><div class="mask"><h2>Title</h2><p>Your Text</p><a href="#" class="info">Read More</a></div></div> The CSS After creating our markup we’re going to set our style. And now we’ll look at the ten effects. Example 1 And now comes the heart of our effect. Example 2 Example 3 Example 4
Smashing Magazine — For Professional Web Designers and Developers CSS Gradients This article was originally published on March 2, 2010. It was updated April 1, 2011, July 20, 2011, and again March 3, 2014, each time to clarify and correct browser prefixes and best practices. Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen. Let's go through it all. Gradients are background-image While declaring the a solid color uses background-color property in CSS, gradients use background-image. Linear Gradient Perhaps the most common and useful type of gradient is the linear-gradient(). Not declaring an angle will assume top-to-bottom: This "to" syntax works for corners as well. like:
Blur Menu with CSS3 Transitions There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we'll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering. View demo Download source There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. The images in the demos are by fabulous Mark Sebastian and they are licensed under the Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License. Please note that this will only work properly in modern browsers and unfortunately Internet Explorer does not belong to that category yet since it does not support transitions (and many other suggested CSS3 properties that others do support). The Markup Let’s create the HTML structure for our menu first. Now we’ll add some style!
Avoiding Faux Weights And Styles With Google Web Fonts Stripes in CSS Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place. Normal Colored Diagonal Stripes Diagonal stripes are easy to pull off thanks to repeating-linear-gradient(): background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); Rather than the very last color-stop being 100% (or nothing, which means 100%) it's a fixed value. Gradient Diagonal Stripes If you make the background a regular linear-gradient(), and then make half the stripes totally transparent using repeating-linear-gradient(), it can appear as if the stripes have gradients. background: /* On "top" */ repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ), /* on "bottom" */ linear-gradient( to bottom, #eee, #999 ); Stripes Over Image Perhaps a texture? Any Direction, Any Angle It doesn't have to be exactly 45degrees. Vertical Stripes
20+ Enhancing CSS3 tools and generators CSS3 is an enhanced version of the Cascading Style Sheets specification, and it comes with many enchanting features that revolutionize Web layout and design, as well as other advantages. But it has some disadvantages as well, and tackling them requires smarts. CSS3 is new on the market, so there is still a lot to improve. The major problem is that the properties are browser-specific and cannot be easily implemented across browsers. Developers have to add extra code in order to implement the properties the same way across browsers. In this article, we’ll highlight some effective CSS3 auto-generator tools that can assist developers—especially lazy ones! 1. CSS3, please is a multipurpose tool with versatile features like border-radius, box-shadow and linear gradients. 2. CSS3 Generator helps developers generate cross-browser snippets for various CSS3 properties. 3. Border Radius makes your designs look more elegant with less effort. 4. 5. 7. 8. CSS3 Gen is a handy tool for novice developers.
PrefixFree: Break Free From CSS Prefix Hell Advertisement This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known for her experiments with CSS and JavaScript and in this post she presents her recent tool, prefixfree, which will hopefully help you break free from the CSS prefix hell. So What’s the Problem With Prefixes? I’m sure we all agree that CSS3 is pretty cool and that it enables us to do things that were previously impossible. But those of us who use CSS3 a lot have surely experienced prefix hell, as seen in the snippet below (from a real style sheet!) I’m not saying that prefixes are bad. A Solution: prefixfree The code I write in my live demo slides and presentations doesn’t have any prefixes, even for things like @keyframes or the transition property, which aren’t yet supported anywhere prefix-less. So, what does the rule above become with prefixfree? (al) Footnotes
Quick Tip: Understanding CSS3 Gradients Creating an image only for the purpose of displaying a gradient is inflexible, and is quickly becoming a bad practice. Unfortunately, at the time of this writing, they very well might still be required, but hopefully not for much longer. Thanks to Firefox and Safari/Chrome, we can now create powerful gradients with minimal effort. In this video quick tip, we'll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes. While Mozilla and Webkit generally adopt the same syntax for CSS3 properties, they unfortunately don't quite agree when it comes to gradients. Don't worry if your eyes gloss over at that syntax; mine did too! What type of gradient? Firefox, which implemented gradient support with version 3.6, prefers a slightly different syntax. Note how we've placed the type of gradient, linear, within the vendor extension. What if you don't need a 100% gradient from one color to another? Note the subtle off-white to white gradient at the top.
The Basics of CSS3 Keyframe Animation Previously I’ve discussed the concepts of keyframes and tweening that are central to animation. Now that this technology has arrived in modern browsers, it’s time to discuss how to make use of keyframe animations on the web with CSS. CSS Keyframes vs Transitions The term “CSS Animation” can be confusing: does it mean CSS transitions, keyframes, or both? CSS transitions are simple animations with only two possible points: a start frame and an end frame. Transitions are “one-shot” events, usually triggered by a user action (a mouseover, for example). Using Keyframes vs Transitions CSS keyframe syntax is a little complex, so it should be used only when needed. For our purposes, the term “CSS animation” covers both keyframes and transitions. CSS Keyframe Syntax In a sense, creating a keyframe animation is very similar to defining an embedded font with @font-face: we define the animation and then reference that definition later our stylesheet. @keyframes bounce { (Note the inner curly braces).