CSS3 linear gradients By Chris Mills Introduction For as long as we can remember, we have used colour gradients on the Web to brighten things up, and add class to designs. If you want to create a fantastic looking button, panel, gauge, progress bar or other UI feature, a gradient is the way to go. Up until now, we have always used repeated background images to create gradient effects. CSS3 comes to the rescue with the CSS Image Values and Replaced Content Module Level 3: part of this module defines CSS gradients, which allow us to create any gradients we want using only CSS. Note: Radial gradients are covered in the article CSS3 radial gradients. Creating gradients I have included some simple examples for you to play with in my linear gradients demo. To create a basic linear gradient, you need to provide a start point and an end point, like so: background-image: linear-gradient(rgb(100,100,100),rgb(200,200,200)); Varying the gradient angle The other way to set gradient angles is through a degree value, for example:
Force Element To Self-Clear its Children Share this: Ship custom analytics today with Keen.io. This will do you fine these days (IE 8 and up): Apply it to any parent element in which you need to clear the floats. You would use this instead of clearing the float with something like <br style="clear: both;" /> at the bottom of the parent (easy to forget, not handleable right in CSS, non-semantic) or using something like overflow: hidden; on the parent (you don't always want to hide overflow). Now for a bit of history! This was the original popular version, designed to support browsers as far back as it possibly could: There then was a bit of a cleaner version documented here by Jeff Starr, based on the fact that nobody uses IE for Mac, which is what the backslash hack was all about. Then it became popular to use "group" as a class name, which is nicer and more semantic (via Dan Cederholm). Of course, if you drop IE 6 or 7 support, remove the associated lines. Update May 18, 2011: Nicolas Gallagher again with the "micro" clearfix.
clearfix Reloaded + overflow:hidden Demystified clearfix and overflow:hidden may be the two most popular techniques to clear floats without structural markup. This short article is about enhancing the first method and shedding some light on the real meaning of the second. clearfix In everything you know about clearfix is wrong I explain the issues this method creates across browsers and I suggest to only use clearfix on elements that are not next to floats (e.g. a modal window), although as authors we still have to deal with collapsing margins. Margin-collapse behavior in the first two boxes shows that it is the generated (non-empty) content that keeps the bottom margin inside the box (which makes perfect sense according to spec). So, to create the same box layout across browsers we can enhance the original method by generating content using both pseudo-elements :before and :after: overflow 10.1 Definition of "containing block": 4. You can check this demo page to see how things work. Better alternatives Further reading
Better float containment in IE using CSS expressions Research into improving the cross-browser consistency of both the “clearfix” and “overflow:hidden” methods of containing floats. The aim is to work around several bugs in IE6 and IE7. This article introduces a new hack (with caveats) that can benefit the “clearfix” methods and the new block formatting context (NBFC) methods (e.g. using overflow:hidden) of containing floats. It’s one outcome of a collaboration between Nicolas Gallagher (that’s me) and Jonathan Neal. If you are not familiar with the history and underlying principles behind methods of containing floats, I recommend that you have a read of Easy clearing (2004), Everything you know about clearfix is wrong (2010), and Clearfix reloaded and overflow:hidden demystified (2010). Consistent float containment methods The code is show below and documented in this GitHub gist. Micro clearfix hack: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ Overflow hack (NBFC): Firefox 2+, Safari 2+, Chrome, Opera 9+, IE 6+ The CSS expression
The Ultimate Roundup of 55+ CSS3 Tutorials CSS3 is something that will take web development into the next level, while modernizing the web and allowing web designers and developers to make their creativity a reality. CSS3 allows for web techniques such as: text shadows, rounded borders, animations, custom web fonts, and much more. In this collection, you’ll find 57 High Quality CSS3 Tutorials that help to stand out from the crowd, and make better designs using only CSS. 1. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. 2. Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. 3. In this tutorial we’ll be learning how to create depth and nice 3D ribbons only using CSS3. 4. CSS3′s transform and transition properties make it possible to manipulate elements in a variety of ways using just CSS. 5. For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. 6. 7.
HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout Par défaut, les éléments flottants «dépassent» de leurs blocs parents. <p style="border: solid 2px red;"> Ce paragraphe n'a pas le "layout". On pourrait multiplier les exemples. Conférer le layout à un élément
html - What is a clearfix? CSS3 Buttonize Framework - Light-Weight, Flexable Instant Button Framework width: 100%, tu es le Mal ! – La Tête dans le Flux La propriété CSS width est certainement celle qui porte le plus mal son nom. En effet, elle représente la taille de la composante de contenu uniquement, pas largeur de l’élément. A vrai dire, l’appellation content-width lui conviendrait parfaitement et serait bien moins source de problèmes, mais voilà, elle s’appelle bel et bien width, et c’est ça le drame. Il est dangereux de croire que width correspond à la largeur de l’élément puisque dès que des marges internes (paddings) ou bordures (border) y sont ajoutées, la taille totale de l’élément ne correspond plus du tout à width. Et c’est d’autant plus problématique que l’on voit pulluler partout des width: 100%… ce qui crée potentiellement des éléments qui déborderont joyeusement de leur parent dès lors que le moindre padding ou la moindre bordure seront appliqués. C’est tout. Dans la grande majorité des cas, on peut aisément se passer de width: 100% Vos éléments sont des blocks (div, p, h1, ul, etc.) ?
All About Floats By Chris Coyier On What is "Float"? Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In page layout programs, the boxes that hold the text can be told to honor the text wrap, or to ignore it. In web design, page elements with the CSS float property applied to them are just like the images in the print layout where the text flows around them. Setting the float on an element with CSS happens like this: There are four valid values for the float property. What are floats used for? Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts. Floats are also helpful for layout in smaller instances. This same layout could be accomplished using relative positioning on container and absolute positioning on the avatar as well. Clearing the Float Float's sister property is clear. In the above example, the sidebar is floated to the right and is shorter than the main content area. The Great Collapse