background preloader

CSS

Facebook Twitter

Pearltrees Extension - Chrome Web Store. 21 outils et générateurs CSS pour développeurs web. Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). 2.

CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. 4. 5. 6. 7. CSS3 Please est probablement l’un des tous meilleurs générateurs CSS3. 8. 9. CSS3 Generator - By Peter Funk & Eric Hoffman. CSS3 Generator. Les nouveautés de CSS3 en 20 exemples. Il faut tout d’abord commencer par les bases, le CSS c’est quoi, d’ou ça vient, etc … CSS en Anglais « Cascading Style Sheets » que nous traduisons en France par « feuille de style ».

Ces feuilles de style nous permettent de gérer la présentation d’une page web. Le langage CSS, ainsi que le HTML et le XML sont la recommandation du World Wide Web Consortium, plus connu sous W3C. Le but d’une feuille de style et donc du CSS est de permettre de séparer le contenu HTML de la présentation des éléments. C’est à dire que grace à l’HTML et au CSS on peut créer des pages web ou la structure du document se trouve dans le fichier HTML et la présentation se situe dans le fichier CSS.

Il est également vrai que vous pouvez faire du CSS et de la présentation directement dans le HTML, mais pas dans tous les cas. De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. Nous allons maintenant voir quelques exemples assez surprenant de réalisation faites avec CSS3. Feuilles de style en cascade. Un article de Wikipédia, l'encyclopédie libre.

Pour les articles homonymes, voir CSS. Les feuilles de style en cascade[1], généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000.

Histoire de CSS[modifier | modifier le code] Un concept parmi d'autres, présent dès l'origine du web[modifier | modifier le code] Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web (« WorldWideWeb », renommé par la suite « Nexus ») permet de mettre en forme les documents à l'aide de ce qui serait aujourd'hui considéré comme une « feuille de style utilisateur »[2].

Les premiers développements[modifier | modifier le code] CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS3 Introduction. Nouveautés CSS3 : du neuf dans vos designs - Arnaud Guignant. Apprendre CSS : Création d'une horloge en CSS3. Inutile de s'y attarder plus que nécessaire : la <div> #horloge correspond au conteneur, #heure, #minute et #seconde aux aiguilles et #centre à l'axe de rotation. Bien sûr, si on affiche la page telle quelle, on ne va pas voir grand-chose ! Ajoutons donc quelques styles de base : Tout d'abord, nous mettons un border-radius à 50% et une bordure bleutée à l'horloge afin de lui donner une forme arrondie.

Quelles que soient les dimensions d'un élément, fixer la valeur de border-radius à 50% permet d'obtenir une forme arrondie. En revanche, si on fixe la taille d'un élément (par exemple 400px), qu'on ajoute une bordure et qu'on fixe la valeur de border-radius à la moitié de la taille de l'élément (200px), l'arrondi ne tiendra pas compte de la bordure elle-même. On rajoute une marge horizontale avec la valeur 40px auto afin de décoller l'horloge du titre et de la centrer horizontalement.

Pour peaufiner encore le rendu, nous allons ajouter quelques styles avec le pseudoélément :before :