Useful :nth-child Recipes. Share this: Ship custom analytics today with Keen.io.
I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have! In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections. #Select Only the Fifth Element To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well. #Select All But The First Five If there were more than 10 elements here, it would select all of them beyond 5. #Select Only The First Five #Select Every Fourth, Starting At The First #Select Only Odd or Even #Select The Last Element Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.
#Select the Second to Last Element. Design Shack Hover Effect Examples. CSS play - CSS3 Photo Curls. CSS3 - Adding curled corners to photographs 4th May 2011 Works in IE9, Firefox, Safari, Chrome and Opera. copyright © stu nicholls - CSS play Information A simple method of adding the impression of curled corners to images with the minimum amount of extra markup and it works in IE9!.
The same stylesheet is used on all four images and can be applied to any sized images, though the smaller the image the less realistic it will look. You can have any combinaton of coners curled from just one corner to all four as shown. Simplified page borders in pure CSS. User Interface Patterns for Dealing with Interactive Content. Websites and web applications are getting more and more interactive each day.
Content on websites have the advantage over their printed counterparts in that, if we wanted to, we can let our users interact with them. We have already discussed site navigation patterns and popular web content presentation patterns. Now, let us explore some UI patterns for our interactive website content. The Webmasters Guide. Firefox 4 Web Demos: announcing Web O’ Wonder. Firefox 4 is almost here.
Check out some awesome Web demos on our brand new demo web site: Web’O Wonder. Screencast here. Extraits du livre CSS avancées, vers HTML5 et CSS3. CSS3 Click Chart by Impressive Webs. CSS Specific for Internet Explorer. As much as we don't like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer.
It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments... View Demo IE Specific #1 IE Conditional Comments IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8).
CSS3 3D Rotating Card. 22nd February 2011 - For Safari ONLY (at the moment) 7th March 2012 - Now working in Safari, Chrome and Firefox 8th January 2013 - Now also working in IE10, iPad, iPhone and iPod Touch (Tyto alba) is the most widely distributed species of owl, and one of the most widespread of all birds.
Ombres avancées avec CSS3 et box-shadow - Les tutoriels. CSS3 c’est pour l’aspect vendeur du nom, car au final on va aussi et surtout bénéficier du service de pseudo éléments (:after et :before) qui sont prévus depuis CSS2.1.
Les visuels que vous voyez sur la page de démonstration ne sont composés qu’avec des propriétés CSS sur une seule et unique <div> (pour chaque bloc). Using CSS clip as an Accessible Method of Hiding Content. Its relatively easy to hide content in Drupal using CSS, however its a whole different ball game to hide content and keep it accessible to all site visitors.
Disabled web users may be using a screen reader or other Assistive Technology. For Drupal 7 we wanted a way to hide content that worked in all browsers and avoided many of the issues associated with current techniques. The idea was to develop a new CSS class that could be applied to any element we needed to hide. We called this class .element-invisible and set about testing properties and values to make this work, in all browsers and all AT devices. First lets look at some of the current techniques we looked into and tested for Drupal 7, then I'll introduce a new technique I came up using the little known clip property and see how it stacks up - I think you'll be intrigued. Update: A clip method was committed for Drupal 7. Current Accessibility Techniques for Hiding Content Text Indent.
Using CSS3 Transitions, Transforms and Animation. Flexible nav. Pure CSS3 box-shadow page curl effect. CSS Border Tricks by Soh Tanaka. Andrew Hoyer. Pure CSS Slideshow. About war and bananas. Manufacturaindependente. What is Colorfont.js?
What is Colorfont.js? What is Colorfont.js? We wanted to be able to develop and use multi-coloured fonts on the web, and so Colorfont.js was born. It's a tiny library that allows you to have text in more than one colour without resorting to ugly hacks or images, retaining the advantages of using text. We also made available a set of colorfonts to be used with this library. CSS Box Shadow & Text Shadow Experiments - ZURB Playground - ZURB.com. Type study: An all CSS button. This is part of a series of guest posts covering tips and tricks for working with fonts on the web.
Today’s post was written by Dan Cederholm of SimpleBits. A few years ago I gave a talk about why a button made a great place to bring in type from a branding element (such as a logo). My point was that if the type in your logo was an image, and stylish buttons were also often images, then why not align the fonts in both to bring some cohesiveness to the typography. This was probably four years ago, and we’ve come a long way since. Now, in certain situations, CSS can replace the inflexible image buttons we used in the past. Type study: An all CSS button. The Shapes of CSS. Learn Development at Frontend Masters CSS is capable of making all sorts of shapes.
Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get the ::before and ::after pseudo elements in CSS, which give us the potential of two more shapes we can add to the original element. Square Rectangle. Create a cool slide out panel using CSS3 only. Smooth Fading Image Captions with Pure CSS3. Creating Fancy Checkmark Icons with Pure CSS3. I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it (plus, the challenge sounded kind of fun).
I had just seen Nicolas Gallagher’s awesome pure css social media icons, though, and I thought, “If he can do that, than I could certainly create a simple check icon with just css3″. I did figure it out with some experimenting and testing, and today I’m going to show you how to achieve the same effect. 50+ Awesome CSS3 Techniques for Better Designs. CSS3 is gaining momentum, despite the fact that the standard hasn’t even been finalized. There are hundreds of tutorials out there to teach designers how to use it, but unfortunately a lot of them cover the same ground.
And some of the tutorials teach designers to do things that they might not think of as useful, though the techniques can usually be adapted to fit a project perfectly. Below are more than fifty awesome CSS3 tutorials. Many are strictly CSS and HTML based, while others also incorporate JavaScript. If you have a favorite technique or tutorial that’s not included below, please share it in the comments!
How to Make a CSS3 Floating Follow Tab with Rollover Effects. Home : Articles : How to Make a CSS3 Floating Follow Tab with Rollover Effects Tutorial by Matt Doyle | Level: Intermediate | Published on 22 October 2010 Categories: Learn how to use CSS3 to create a nice, translucent Newsletter/RSS/Twitter/Facebook tab with rounded corners, gradient background and drop shadow. We'll be back shortly.
Demo - 7 javascript-effect alternatives using CSS 3 for webkit browsers - Web developer juice. Creating Polaroid Style Images with Just CSS - ZURB Playground - ZURB.com. Through a combination of browser-specific CSS (2 and 3) integration and some basic styling, we've turned regular old images into cool looking polaroid style images—with no additional markup to show the text. Using the Title Attribute Instead of adding additional markup (more headings or paragraphs), we've opted to reuse the content within the title attribute of the surrounding anchor tag.
Since it's good practice to use proper title text, and it's really freaking cool to do stuff with just CSS. Note: this is from the CSS2.1 spec, but browsers haven't implemented it fully. Read up on it here. 3 Easy and Fast CSS Techniques for Faux Image Cropping. This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content.
CSS3 toggle-button without JavaScript. With the rise of Retina displays people are looking for resolution independent alternatives to PNG icons. CSS background image hacks. Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.
CSS3 Click Slide Gallery. 17th January 2011 Hover here for the first image.Then click the images to show the next in the series. CSS3 Animated Bubble Buttons. Martin Angelov This week we are creating a useful set of animated buttons with the power of CSS3’s multiple backgrounds and animations. 30+Useful Example CSS3 Style (Really Useful CSS) « CSS - FreshDesignWeb. 10 Fresh HTML5 CSS3 and jQuery Tutorials. HTML5 and CSS3 are the next generation of the web, and will redefine the possibilities in web design and web development. When combined with an action oriented language such as jQuery, the range of effects and applications that can be created are amazing.
Pimp your tables with CSS3. Pure CSS accordion. Moving Highlight. I recently noticed a subtle and nice effect in the Google Chrome UI. As you mouse over inactive tabs, they light up a bit, but also have a gradient highlight that follows your mouse as you move around on them. The guys from DOCTYPE told me it was their inspiration for the navigation on their website.
DZ Slides: HTML5 Slides FTW. Les Media Queries CSS3 - Alsacréations. La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc.
Create Spinning Rays with CSS3 Animations & JavaScript. Create Spinning, Fading Icons with CSS3 and MooTools Example. CSS3 - The future now - Slide Down Menu. 3D Text. Pure CSS3 Post Tags. Pull Down Information Panel. 32 Javascript Alternatives with Pure CSS – Updated. Introduction à l’HTML5. 10 CSS3 Properties you Need to be Familiar with. Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5. The CSS3 Resize Property. 35 Inspiring Examples of Websites Using HTML5. HTML5 and CSS3 Without Guilt. CSSG Collections: Forms. CSS drop-shadows without images – Nicolas Gallagher – Blog & Ephemera. Use CSS3 to Create a Dynamic Stack of Index Cards - Demo. Awesome Overlays with CSS3's Border-Image Property - ZURB Playground - ZURB.com.
Surfin’ Safari - Blog Archive » CSS Animation. Votre site en HTML5 & en CSS3 ? - blog. Sexy bookmark like effect using pure css : re-cleaned. Gotta' love HTML5 & CSS3 - Lostkore's lab. 10 Beautiful and High Quality Free HTML5 Templates. CSS3.0 Generator. My CSS Wish List. Conception, réalisation et référencement de sites Web, c’est... Normandie Web. 30 Pure CSS Alternatives to Javascript. L Create a JQuery Content Slider Using Pure CSS. Effets en CSS. Make a ‘View Source’ Button. CSS Quick Tip: CSS Arrows and Shapes Without Markup. But it Doesn’t Validate. 20 Things I Learned About Browsers and the Web. Design Day 2010: Technology & The Modern Web. LESS - Leaner CSS.
Lightbox. Playing with CSS3 Media Queries.