background preloader

A Comprehensive Guide to CSS Resets

A Comprehensive Guide to CSS Resets
This guide examines the infinite-like variety of CSS resets created by web developers and designers across the world. While almost all of these CSS resets are generally provided free for public use (many through Creative Commons licensing), it is incumbent upon you to check the terms of use before putting them to use in your projects. This guide follows Part 1, where the history of CSS resets was discussed; you’re advised to read that before this one to get the most out of this guide. This is Part 2 of a three-part series of articles on the topic of CSS resets. In putting together this guide, the 2007 collection of resets by Jeff Starr — who, as an aside, has contributed articles on Six Revisions — was used as a jumping-off point. "Hard" Reset As discussed in Part 1 of this series, the original version of the "hard" reset was by web designer Andrew Krespanis: It wasn’t long before folks added border: 0; and outline: 0; to the list of properties, giving us: Poor Man’s Reset Siolon Reset

Menu Transitions | unraveled Since I started helping out over at Widgetopia, I’ve been paying much closer attention to Web menus and how they work. The aspect of menus that’s been on my mind the most is the menu transition often used in Flash UIs, such as the “choose a model” menu on the current Volkswagon homepage. What intrigues me about menu transitions is not their effects, but their experience. As an experiment of sorts, I thought a Nielsenesque miniguide to menu transitions would be fun to write. What are Menu Transitions? Menu transitions are visual (and sometimes audio) effects that connect two separate menu states. A flashy yet well produced example of menu transitions (Flash with sound) can be seen at Joshua Davis Studios. When Are Menu Transitions Appropriate? Simply put, menu transitions are appropriate when they convey an idea or meaning without gratuitous or long effects. Another example of menu transitions can be found on the Elf movie homepage.

CSS Specificity Some people are confused by CSS Specificity, especially with all of the (not-so) new CSS3 Selectors. The image below may help make sense of CSS Specificity. Download the PDF Legend: X-0-0: The number of ID selectors, represented by Sharks0-Y-0: The number of class selectors, attributes selectors, and pseudo-classes, represented by Fish 0-0-Z: The number of type selectors and pseudo-elements, represented by Plankton a la Spongebob*: The universal selector has no value +, >, ~: combinators, although they allow for more specific targeting of elements, they do not increase specificity values:not(x): The negation selector has no value, but the argument passed increases specificity CSS SpeciFISHity You can download the PDF of fishy CSS specificity here Specificity determines which CSS property declaration is applied when two or more declarations apply to the same element with competing property declarations. With CSS3 Selectors, order is even more important, as is understanding specificity: !

Snazzy Hover Effects Using CSS With all these CSS3 effects and tutorials popping up every day that show all the new and wonderful things we can make happen, we sometimes forget about poor little old CSS2.1 and the great potential it still has. With very good browser support, we can do lots of cool things that we know will work in all major browsers. In this tutorial, I will be going over creating flexible advanced hover techniques using CSS2.1 properties. Here is a live demonstration of the effect we will be creating. Advanced hover states are quite simple When I first started learning CSS, the :hover pseudo-element was no more than a way to remove the underline on a text link. Since then, through experimentation, I have learnt that it is so much more powerful and it can create some really cool effects when used in conjunction with other CSS properties. The astute reader will see that this technique has great potential outside of what we discuss here, such as showing CSS tool tips when hovering over a hyperlink. <! Wrap up

CSS Style Guides As we wrap up our recent poll on ordering CSS properties, it brings up the larger issue of CSS style guides. Ordering properties is just one choice you have to make that makes up a complete styling strategy. Naming is a part of it. Let's round up some existing ones. But first... I love pattern libraries. The List I'll list some excerpts from each that I like below. GitHub GitHub CSS Style Guide → As a rule of thumb, don't nest further than 3 levels deep. Unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size. Google Google HTML/CSS Style Guide → Use ID and class names that are as short as possible but as long as necessary. E.g. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability. E.g. .demo-image not .demoimage or .demo_image Idiomatic CSS Nicolas Gallagher's Idiomatic CSS → More?

Nicer Navigation with CSS Transitions - GetHiFi Update: March 21, 2014 - We have an updated post after years of practice with these techniques. Newer versions of Apple's Safari web browser (and Google Chrome, which is also based on Webkit) support a vendor-specific implementation of the CSS3 Transition property. CSS Transitions are a very powerful effect that can eliminate the use of JavaScript for many common effects. Quick Overview There are three properties that make up the transition: -webkit-transition-property, -webkit-transition-duration, and -webkit-transition-timing-function. Additionally, there is a shorthand property that combines the three: -webkit-transition. -webkit-transition-property: This specifies which properties of the element will be animated. -webkit-transition-duration: The amount of time from the beginning of the transition to the end. -webkit-transition-timing-function: There are a number of timing functions—mathematical models for how the transition takes place—that you can choose from. A Simple Example

Object Oriented CSS · stubbornella/oocss Wiki Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 | Tutorials and projects Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5 In this tutorial, you’ll learn how to transform an HTML list into a wall of “sticky notes” that look and work like the following… The effect is built up gradually and works on the latest Webkit browsers (Safari, Chrome), Firefox and Opera. Other browsers simply get some yellow squares. Step 1: The HTML and Basic Squares Let’s start with the simplest version that works across all browsers. <ul><li><a href="#"><h2>Title #1</h2><p>Text Content #1</p></a></li><li><a href="#"><h2>Title #2</h2><p>Text Content #2</p></a></li> […] </ul> Notice that each note is surrounded by a link which is always a good element to use as it automatically means that our notes become keyboard accessible. The CSS to turn this into the yellow squares is simple: We reset things the browser normally gives us like margins and paddings and the list style to get rid of the bullets of the list. This works for every browser out there – including IE6. Blancer

Stu Nicholls | CSSplay | Experiments with cascading style sheets | Doing it with Style Animation Using CSS Transforms < CSS Tweet363 Shares Share0 Tweets37 Comments The examples on this page will work now in Firefox, Safari, Chrome, Opera and Internet Explorer 10. In older browsers you will see either no effects, or the transforms taking place without any animation. The animations presented below involve setting up a transformation to take place in response to a mouseover or other event. Then, rather than applying the effect instantly, we assign a transition timing function which causes the transformation to take place incrementally over a set time period. There are also other kinds of animation available, including @keyframes for perpetual motion, and requestAnimationFrame which gives complete control over the timing and path. Firefox and Opera now support these transforms with an almost identical syntax - just replace -webkit- with -moz- or -o- in the examples below. Internet Explorer 10 supports transitions with no prefix. To support all modern browsers, the following styles should be used for transitions:

CSS Animation We have another cool new CSS feature to talk about: animation specified in CSS. There is a lot of ground to cover here, so we’ll start with the basics first. The simplest kind of animation that we’ve added support for is called a transition. Normally when the value of a CSS property changes, the rendered result is instantly updated, with the element in question changing immediately from the old property value to the new property value. Transitions are specified using the following properties: transition-property – What property should animate, e.g., opacity.transition-duration – How long the transition should last.transition-timing-function – The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).transition – A shorthand for all three properties. Here is a simple example: This div will fade out when hovered over. For example: In the above style rule, opacity will animate over 2 seconds, but left will animate over 4 seconds.

CSS Transitions 101 Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. A link is either one color or another. A text field is either one size or another. A photo is either transparent or opaque. No in-betweens from one state to the next. This has led to most web pages feeling abrupt, with elements shifting and changing ungracefully. Yes, we can use DHTML and leverage the jQuery library for transitions, but this requires a lot of code for something that should be very simple. What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them. A few months back, I stuck my foot in my mouth by suggesting that designers should start using the new CSS 3 techniques that allow them to do some of the basic styling that they’ve been pleading for. Where CSS Transitions Come From Roll-Overs Example #1

CSS transitions - MDC Doc Center This is an experimental technologyBecause this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes. CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized. Animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the browser. Which CSS properties are animatable? HTML Content