How To Use CSS3 Pseudo-Classes - Smashing Magazine. Advertisement CSS3 is a wonderful thing, but it’s easy to be bamboozled by the transforms and animations (many of which are vendor-specific) and forget about the nuts-and-bolts selectors that have also been added to the specification. A number of powerful new pseudo-selectors (16 are listed in the latest W3C spec1) enable us to select elements based on a range of new criteria. Before we look at these new CSS3 pseudo-classes, let’s briefly delve into the dusty past of the Web and chart the journey of these often misunderstood selectors. A Brief History Of Pseudo-Classes When the CSS12 spec was completed back in 1996, a few pseudo-selectors were included, many of which you probably use almost every day. :link:visited:hover:active Each of these states can be applied to an element, usually <a>, after which comes the name of the pseudo-class.
CSS2 Arrives Hot on the heels of CSS1 was CSS24, whose recommended spec was published just two years later in May 1998. Why Use Pseudo-Classes? Sample Code. CSS3 Rounded Image With jQuery. The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn't display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically. View Demo Rounded Images Goal My goal to use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot below. Problem The problem is none of the modern browsers display rounded corners image the way I want it. The CSS Trick The trick is very simple: wrap a span tag around the image element. Final Solution With jQuery To make things easier, we can use jQuery to automatically wrap a span tag around the image.
The jQuery code below will find any element with ".rounded-img" or "rounded-img2" (in my case, it is the image element) and wrap it with a span tag. Sample Usage I hope you will find this trick useful. Credits. Web Designer's Checklist, Web Designers' Browser Support Checklist : FindMeByIP : what browser am I using, how modern is my web browser, and what's my IP address? Kiwis et compagnie. CSS3.0 Maker | CSS3.0 Generator. Modernizr - Détectez si vos visiteurs supportent le CSS3 et HTML5. Modernizr est une librairie Javascript permettant de tester le navigateur de vos visiteurs et de déterminer quelles sont les propriétés CSS3 et HTML5 qu'il est capable de supporter. Ainsi, avec quelques instructions CSS, vous aurez la possibilité d'utiliser les dernières propriétés CSS3 sur les navigateurs modernes, et proposer une solution alternative aux aux plus anciens.
Au chargement de la page, un objet javascript est créé. Il contient des booléens associés à chaque instruction CSS3: font-facecanvasbalises audio et videoborder-radiusBackgrounds multipleslocalStorageEtc. En jouant avec les classes CSS, vous pourrez créer des conditions directement dans votre feuille de style, exemple: 02. 03. 04. 05. 06. 07. 08. 09. 2..no-audio #audio { 3. display: none; 5..audio #audio button { 2.if (Modernizr.audio) { Simple et pratique !
Site Officiel. HTML5.jpg (Image JPEG, 1200x1312 pixels) 50 New Useful CSS Techniques, Tools and Tutorials - Smashing Magazine. Advertisement Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content.
However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect. In this round-up we present fresh useful articles about less-known CSS 2.1 and CSS3 properties as well as an overview of recently published CSS techniques, tools and tips for designers and web-developers. Please stay tuned: next week we will present the second part of this article, featuring fresh CSS3 techniques, tools and resources. Learn About Obscure CSS Properties The Little Known font-size-adjust PropertyEver wanted to use fallback fonts on your CSS with different aspect ratios without them looking huge (or tiny)? Useful CSS Techniques Useful CSS Tools, Tips and Advice CSS 3, Please!