background preloader

CSS3

Facebook Twitter

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. #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 #Wanna play? Try the tester. #Browser Support. 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. Copyright You may use this method on your personal 'non-profit' web site without seeking my permission. Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. 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. Edit-in-place Edit-in-place is a valuable UI for web applications that either allows users to create or edit content. Edit-in-place is often seen in WYSIWYG editors and apps that focus on data entry or organization (like mind-mapping apps, for example). When to Use Use edit-in-place as a UI design pattern wherever practical within your web apps. Examples Here are two examples of edit-in-place. Flickr In this wildly popular photo-sharing site, users can edit photo titles and certain other information in place.

Lovely Charts This mind-mapping app has an edit-in-place editor, making it super easy to use. Copy Box Onbile. The Webmasters Guide | BaseWebmaster.com. 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. Update: 3 more demos: Web ‘O Wonder Firefox 4 is almost here, and comes with a huge list of awesome features for web developers. In order to illustrate all these new technical features, we put together several Web demos. Note: Some of these demos use WebGL, and will work only on compatible hardware. Open Demos These demos haven’t been designed exclusively for Firefox 4.

The other big step forward for HTML5 demos is that these are Open Source. New technologies and new horizons for 400 million users In these demos, we are experimenting with new technologies, trying to imagine what could be the future of the Web. It means new possibilities, new ways to interact with web applications. We hope to inspire web developers to use these new technologies. Thank you! A lot of people were involved in the development of these demos.

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). <! <! #2 CSS Rules Specific to Explorer (IE CSS hacks) Another option is to declare CSS rules that can only be read by Explorer. IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.

. #3 Conditional HTML Class The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments. 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. It is also referred to as Common Barn Owl, to distinguish it from other species in the barn-owl family Tytonidae. These form one of two main lineages of living owls, the other being the typical owls (Strigidae). Source Wikipedia copyright © stu nicholls - CSS play Information Absolutely NO javascript, and as far as I know this cannot easliy be done with jQuery etc.. Using just CSS3 to rotate a card so that you can see the information on the reverse.

Just hover the image to see it rotate in perspective to show the information on the reverse side. 7th March 2012 Now that Firefox supports CSS3 3D transforms, this demo has been updated to include this browser. 8th January 2013 Copyright. Ombres avancées avec CSS3 et box-shadow - Les tutoriels | CreativeJuiz - Du jus, des fruits, du fun... et du Web ! 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).

Chez moi le meilleur rendu est sous Firefox, notamment pour la dernière ombre qui est un peu osée (au passage il semblerait que la propriété opacity ne fonctionne pas sur les pseudo-éléments). Dans cette démonstration nous allons utiliser des propriétés avancées de CSS2.1 (:before et :after) qui sont des pseudo-éléments. Des pseudo-éléments permettent de construire un élément dans la structure de votre document (DOM) sans vraiment en construire un… ok, ça commence bien pour l’explication.

Pseudo-éléments :after et :before Ainsi tous les liens porteurs de l’attribut hreflang se verront agrémentés d’un « (en) », dans le cas d’un lien anglais par exemple :Mon lien (en) Bogues. Using CSS clip as an Accessible Method of Hiding Content | Drupal 7 Themes | Drupal 7 Templates - Adaptivethemes. 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 Position Absolute - Collapse the Element. Using CSS3 Transitions, Transforms and Animation.

Flexible nav. Pure CSS3 box-shadow page curl effect. Have Fun w/ Borders | 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. How do I use this in my website? First, get colorfont.js and include it inside your page's element, like so: Now, let's say you have a heading, <h1>Hello Colorfont!

Where you would want to use coloured fonts. <h1 class="colorfont">Hello Colorfont! That's it? Almost! Image demonstrating how colorfonts are combined However, we need to set up our CSS so that the browser knows which fonts to use. Afterwards, you just need to specify how the headings should look: Why colorfonts? We set out to create a set of overlays to existing fonts that could effectively enable their use in colour. DownloadDownloadDownload More? 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. The button is also a great place to showcase many of the new CSS3 properties in one place, which is another reason I’m particularly taken with buttons at the moment.

Let’s build a button, friends. The markup I’m going to use a hyperlink in this example, but the styles we’re going to add could just as easily be applied to a <button> or <input> element as well. <a href="#" class="btn"><span>Press this! Notice the extra <span> element here. Adding the styles And voilà. Type study: An all CSS button. The Shapes of CSS. Create a cool slide out panel using CSS3 only. Smooth Fading Image Captions with Pure CSS3. Home : Articles : Smooth Fading Image Captions with Pure CSS3 Tutorial by Matt Doyle | Level: Intermediate | Published on 29 September 2010 Categories: Learn how to use CSS3 transitions to create nice, animated, semitransparent image captions. Full example and code download included. CSS3 promises to usher in a new wave of gorgeous web design, with lovely features such as drop shadows, text shadows, rounded corners, gradients, and border images.

One CSS3 feature that is really starting to gain traction now is transitions . Most modern browsers now have good support for transitions, including Firefox 4, Safari 5, Mobile Safari and Opera 10. In this tutorial I'll show you how to use CSS3 transitions to create a nice fading caption effect on images. Naturally, mobile browsers with touchscreens don't have a concept of hovering. Along the way, we'll also use some new HTML5 elements like figure and figcaption to create nice semantic markup. Ready? Step 1. <! This is fairly standard stuff. Step 2. <! 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.

The #1 Rule of CSS3 Coding Before we start on any project, we have to remember the number one rule of CSS3 coding. Well, actually it’s two rules: It must be cross-browser acceptable. These are the two principles that I regard to be the unchangeable law for using CSS3. The Concept The Code Now, onto the fun part. 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! Using CSS3 For Imageless Illustration Various new methods in CSS3 allow a number of very complex graphics to be created using pure CSS and no images. Pure CSS iPhone Illustration A mixture of borders, transforms and gradients to make an animated image of an iPhone. Creating The Opera Browser Logo in CSS3 A clean illustration of the Opera logo rendered using CSS3 techniques.

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. Full example and code download included. Recently, a reader asked us how we created our floating orange "follow" tab that appears on the right-hand side of every page on elated.com. In this tutorial you'll learn how to: Work with CSS sprites Position stuff relative to the browser window, rather than the page Create CSS3 rounded borders Add CSS3 drop shadows, and Create cross-browser translucent gradient backgrounds (using no images!) Ready? Step 1. Our first job is to create the image for the buttons within the tab. CSS sprites . The finished sprite image, with normal and hover states for each of the 4 buttons The disadvantages of sprites include: OK, let's create the above image!

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. We have to use the title attribute for the anchor because the alt attribute isn't fully implemented by Safari or Firefox.

Adding "Random" Tilts Safari 4 and Firefox 3.5 both have support for the :nth-child pseudo-selector (this is CSS3). Read about :nth-child and it's usage here. Although this seems like a bit much, this works to our advantage. Making Them Scale Final Details. 3 Easy and Fast CSS Techniques for Faux Image Cropping. CSS3 toggle-button without JavaScript. CSS background image hacks. CSS3 Click Slide Gallery. CSS3 Animated Bubble Buttons. 30+Useful Example CSS3 Style (Really Useful CSS) « CSS - FreshDesignWeb. 10 Fresh HTML5 CSS3 and jQuery Tutorials. Pimp your tables with CSS3. Pure CSS accordion.

Moving Highlight. DZ Slides: HTML5 Slides FTW. Les Media Queries CSS3 - Alsacréations. 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 | Speckyboy Design Magazine. 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 | Web Developer Juice. Gotta' love HTML5 & CSS3 - Lostkore's lab. 10 Beautiful and High Quality Free HTML5 Templates | Web Developer Juice. CSS3.0 Maker | CSS3.0 Generator | CSS 3.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 | Speckyboy Design Magazine. 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.