background preloader

CSS Debutant : Tutoriels CSS

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 ! Related:  html/css

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. 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 Menu horizontal déroulant en CSS Un menu horizontal, c'est bien... Un menu horizontal qui déroule, c'est mieux !... Oh enfin, mieux... Ça dépend des goûts et des besoins. Comme précédemment, le menu sera fait sous forme d'une liste à puces que l'on va contraindre à devenir horizontale, mais ce sera, en plus, une liste à puces imbriquée qui va donc être démasquée par rollover. Fonctionne avec : Firefox 3 IE 7 SeaMonkey Opéra 9 Safari 3 Camino 1.6 Attributs utilisés : background-color color display float height list-style-type padding position margin text-align, text-decoration width Note importante Comme indiqué ci-dessus, cette technique, basée uniquement sur des propriétés CSS (notamment la pseudo-classe :hover), ne fonctionnera que sur des navigateurs récents. Code (x)html <div id="menu"><ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a><ul><li><a href="#">Sous-item 1</a></li><li><a href="#">Sous-item 2</a></li><li><a href="#">Sous-item 3</a></li></ul></li><li><a href="#">Item 3</a></li></ul></div> Code CSS Haut

Méthode Daisy : les CSS feuille à feuille Bienvenue chez vous ! C’est le bazar, n’est-ce pas, dans votre code CSS ? Le CSS ? C’est une vraie galère dès qu’on doit y revenir, dès qu’on repasse derrière quelqu’un d’autre et même quand on doit replonger dans son propre code après longtemps... et ce n’est vraiment pas aisé de coder à plusieurs mains, en équipe. Mais comment diable s’y prend-on ? Voulez-vous vraiment continuer à coder chaque projet à partir de zéro ? Beaucoup se demandent alors s’il ne vaut pas mieux adopter un « framework CSS ». Mais c’est quoi, concrètement, un framework CSS ? Cependant ils restent peu utilisés : il semble que guère plus de 40 % des projets soient développés à l’aide d’un framework CSS [1]. Je vous propose plus simple : exploiter l’existant ! Prenons par exemple, l’une de ces feuilles de style longue comme le bras. Prenons maintenant un nouveau projet de site web. Je n’ai pas encore évoqué une chose pourtant importante... Pour résumer, cette méthode fonctionne si :

Can I use... Support tables for HTML5, CSS3, etc CSS Débutant : balises html ou xhtml de base Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en HTML. Le HTML est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique. Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! Voici donc les quelques balises HTML fondamentales à connaître pour comprendre la structure d'une feuille de style. Sommaire Balises les plus courantes Document <html></html> : document HTML <body></body> : corps du document Titres <h1></h1> : titre 1er niveau <h2></h2> : titre 2ème niveau <h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6) Éléments de texte <p></p> : paragraphe <ul></ul> : liste à puce <ol></ol> : liste numérotée <li></li> : élement d'une liste <a href=""></a> : lien hypertexte <blockquote></blockquote> : bloc de citation <strong></strong> : met en gras <em></em> : met en exergue Tableau

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

9 Seriously Useful Online CSS Code Generators | DesignModo Nowadays CSS is one of the most important and most used style sheet languages for web development. It might however seem not really user-friendly for a person who is new to it and decided to build a website on his own, but he has never heard of it or worked with it. Now of course a professional would be able to write a CSS code even on the palm of his hand if he didn’t have a computer in front of him, but this doesn’t really sound so easy for a newbie in this subject. And what would make his life easier for all those who want to learn it fast and efficiently? – an online CSS code generator of course! CSS code generators help you create the desired code automatically; therefore there is no need for you to be an experienced CSS programmer, plus it will help you get to know CSS better and soon you will even be able to write it on your own. CSS3.0 Maker CSS Type Set CSSMate CSSportal CSS Frame Generator Telerik Visual Style Builder Typetester Grid Designer CleanCSS

Méthodologie pour résoudre les problèmes d'affichage en CSS Suite au billet qui présentait un récapitulatif des moyens pour faire un site compatible sur tous les navigateurs actuels, voici à présent une petite méthodologie pour résoudre rapidement une grande partie des bugs d'affichage pouvant survenir avec les mises en page en CSS. Cette méthodologie se veut concise et se résume en trois étapes : isoler (le ou) les éléments problématiques, identifier l'erreur, et enfin, résoudre le bug. Isoler l'élément problématique Un bug d'affichage est dû en général à des incompatibilités de navigateurs ou des marges (margin, padding) par défaut différentes selon les navigateurs. Ajout de couleur de fond Actuellement, la très grande majorité des sites web est structurée à l'aide des balises <div>, <table>, <hn>, <p> et <ul>. En commençant votre feuille de style avec une partie ou toutes les déclarations suivantes vous aurez un aperçu de l'espace exact occupé par chacune des balises. Masquer les éléments un par un Suppression de toutes les marges Modèle de boîte

Eric Meyer: CSS CSS Work Books by Eric Including Smashing CSS, CSS: The Definitive Guide, Third Edition, CSS Pocket Reference, and Cascading Style Sheets 2.0 Programmer’s Reference, among several others. Articles by Eric Local copies of CSS articles, as well as other writing I've done. Inline model document A terse, but hopefully complete, description of how the CSS inline box model really works. Color equivalents table All 147 SVG-derived color keywords permitted in CSS3 in a sortable table showing the keywords with their equivalents in both hexadecimal notations, both (non-alpha) RGB notations, and non-alpha HSL. CSS Module Timelines A visualization of the activity of the CSS Working Group by plotting draft publication dates and W3C statuses over time. CSS Module Editors Leaderboard A bit of a goof wherein I score the editors of various CSS modules and present the results as a leaderboard. CSS Tests A fairly large collection of test files I’ve accumulated over the years. W3C CSS2 Test Suite Prototyping Offsite

Related:  Tutos