Css tips and tricks - Red Team Design CSS Debutant : Tutoriels CSS Boutons CSS Le bouton élegant qui change d'aspect au passage de la souris est très utilisé sur les pages web. Longtemps, la majorité de ces boutons étaient animés par un javascript ou pire (car plus lourd) par un applet java. Avec les CSS la légèreté et la simplicité est de mise pour créer de beaux boutons. Plusieurs images de fond Grâce à la propriété background-image, il est très facile de mettre une image de fond dans le corps (body) d'une page web. Pour pouvoir mettre plusieurs images de fond, il faut définir des cadres (des div) auxquels on attribuera une image chacun. Coins arrondis Pour réaliser des blocs (menus ou autres) avec des coins arrondis, il existe principalement trois méthodes en CSS, qui offrent plus ou moins de fluidité et de possibilités graphiques. Créer des coins arrondis avec une seule image, coulissante en hauteur et en largeur, permet une certaine liberté graphique et s'adapte à un design fluide. Zoom d'image Vignettes (Thumbnails) Tableaux à bordures fines Et bien si !
Les sélecteurs 5.1 La reconnaissance d'un motif En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur. Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Cette table résume la syntaxe du sélecteur de CSS2 : 5.2 La syntaxe des sélecteurs Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. sélecteur consiste en une succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. combinateurs sont : les caractères blancs et les caractères ">" et "+". sujets
Best CSS3 Animation Demos and Tutorials Today we are showcasing a post on CSS3 Animation featuring some of the best and most awesome functions. CSS3 is full of amazing features that you can take advantage of that you may not know about. That’s why we are going to go over some of those CSS3 features that are less explored. Some of these CSS3 Animation effects you will find below may not be visible to you if you are using the Firefox browser. Display social icons in a beautiful way using CSS3 The example works with all -webkit based browsers (Safari and Chrome), but also in Firefox 4. More on Display social icons in a beautiful way using CSS3 Advertisement 3d animation using pure CSS3 The perspective property is what we need to create the 3d effect. More on 3d animation using pure CSS3 Colorful Clock Make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year. More on Colorful Clock Colourful rating system with CSS3 We’re going to do a relatively simple jQuery tutorial. jQuery DJ Hero
CSS Frame Generator v. 1.00 What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line. display position z-index visibility overflow float clear list-style width height margin padding border background color font line-height text-* letter-spacing word-spacing word-wrap white-space vertical-align outline cursor Cascade CSS et priorité des sélecteurs CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade ! Les styles CSS appliqués finalement à une page Web ont de multiples origines simultanées : styles utilisateurs et styles par défaut de l'agent utilisateur s'ajoutent aux différentes feuilles de styles éventuellement prévues par l'auteur, pour structurer ses CSS en modules, offrir des styles alternatifs ou styler ses documents pour différents medias. Les sources de style possibles Trois séries de styles CSS d'origines différentes sont susceptibles d'être concurrentes ou combinées pour un même élément (X)HTML : Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et l'agent utilisateur (alias le navigateur). Prenons l'exemple des liens a d'un menu de navigation du type : <ul id="menu"><li><a href="..." Tout d'abord, une sélection en 3 étapes Etape 1 : le tri par media
20 Fresh Free HTML5 And CSS3 Website Templates And Tutorials | Bloggermint HTML5 is an advanced version of HTML supported by all major browsers. HTML5 has bought us incredible ways to add videos, audios by minimizing the lookup of external source. Frankly not all browsers support all functions of HTML5 but I believe we can see many website and blog switching to HTML5 this year and of course its the future. Recently I have been into lots of HTML5 works and during those time, I found some free website templates that won’t suck. Other resources about HTML5 and CSS3 How to create a HTML5 contact form Detect geolocation on web browser using HTML5 CSS3 Tutorials: Box Shadow effect CSS3 Tutorials: Rounded Corners 1. (Tutorial Included) 2. 3. 4. 5. 6. 7. 8. 9. (Tutorial Included) 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. If you want a custom HTML5 template for your blog or website, contact me.
Utiliser CSS3 aujourd'hui, outils et ressources Bien que les spécifications CSS 3 soient encore en phase de maturation, il devient acquis qu'un certain nombre de ses composantes sont déjà exploitables en production sur les navigateurs actuels, moyennant quelque gymnastique pour notre attachant boulet à tous qu'est Internet Explorer. Le contexte actuel est pour le moins excitant pour nous autres webdesigners, puisque l'on peut enfin s'évader d'une norme CSS2.1 vieille de plus de 10 ans ! Nous nous trouvons dans une période clé, et de grands changements vont bientôt s'opérer dans notre façon de travailler au quotidien. Cependant Internet Explorer modère cet engouement puisque seule sa version 9 commence à supporter ces nouveautés, version encore au stade beta non utilisable par le grand public. De multiples ressources CSS3 pour déjouer les faiblesses d'IE voient le jour presque quotidiennement, notamment par l'ajout de JavaScript. Voyons quelques uns de ces outils en ligne en vogue actuellement : CSS3pie.com CSS3please.com CSS3.info