HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres Alignement d'un texte Ce texte est aligner à gauche.
linear-gradient - Créez un dégradé linéaire en CSS La fonction linear-gradient permet de créer un dégradé linéaire. Elle prend 3 valeurs, dont 2 sont obligatoires : direction du dégradé (optionnel) couleur de départ couleur de fin La direction du dégradé par défaut est to bottom dans la nouvelle syntaxe (C’est où le dégradé va !). Dans l’ancienne syntaxe, la direction par défaut était top (C’est d’où le dégradé part). Dégradé rouge/bleu du haut vers le bas background: linear-gradient( red, blue); Dégradé rouge/bleu de la droite vers la gauche background: linear-gradient( to left, red, blue); background: linear-gradient( right, red, blue); La syntaxe préconisée à l’heure actuelle est la suivante, sachant que le module concernant les dégradés est arrivé en CR (les préfixes devront être enlevés bientôt), et que par conséquent les navigateurs supporteront la dernière déclaration : Note : IE10, Firefox 16 et Opera 12.1 supportent les fonctions non préfixées. Voici également un petit conseil pour l’utilisation des dégradés linéaires verticaux.
Introduction au CSS3 Cette introduction est destinée à ceux qui souhaitent avoir un aperçu global de ce qu’apporte le CSS3. Vous y découvrirez un ensemble conséquent de nouveautés, comment utiliser les préfixes propriétaires afin d’en tirer profit dès maintenant et nous discuterons du caractère non-critique de son utilisation. Il s’agit de la suite logique de l’Introduction à l’HTML5, mais elle peut être lue indépendamment. Sommaire Le CSS3 c’est quoi ? Le CSS3 est le nom employé pour caractériser l’ensemble des nouveautés depuis le CSS2.1. Mais le CSS3 c’est également un ensemble de nouveaux sélecteurs, de nouvelles manières de spécifier les couleurs, une détection des caractéristiques de l’appareil de l’utilisateur, des calculs dans les feuilles de style, des SVG en arrière plan… bref, le CSS3 est un généreux enrichissement des feuilles de style qui, en plus d’être profitable à l’utilisateur, l’est au développeur également ! Exemple pratique : Les bordures arrondies Et vous vous dites : Avec pour CSS : Non. à
-moz-appearance - CSS « CSS « Référence CSS « Extensions Mozilla Résumé -moz-appearance est utilisée par les navigateurs Mozilla pour afficher un élément en utilisant les styles natifs d'une plate-forme suivant le thème du système d'exploitation. Valeur initiale : aucune S'applique à : tous les éléments Héritée : non Pourcentages : N/A Valeur calculée : comme spécifiée Syntaxe -moz-appearance:valeur d'apparence Valeurs none Aucun style spécifique n'est appliqué (défaut). button L'élément est rendu comme un bouton. button-small L'élément est rendu comme un petit bouton. checkbox L'élément est rendu comme une case à cocher, incluant uniquement la partie réelle de la case à cocher. checkbox-container L'élément est rendu comme un contenant pour une case à cocher, qui peut inclure un effet d'illumination de l'arrière-plan sous certaines plate-formes. checkbox-small dialog L'élément est rendu comme une boîte de dialogue, ce qui inclut la couleur d'arrière-plan et toutes autres propriétés. listbox menuitem menulist menulist-button
Introduction à l’HTML5 Cet article est destiné aux débutants en HTML5, et à tous ceux qui souhaitent en savoir un peu plus sur cette nouvelle technologie qui agite le web et le monde mobile. Si vous vous intéressez aux technologies du web, vous avez probablement déjà entendu parler de l’HTML5 aux cours des dernières années. Cette introduction va vous donner un premier aperçu de ce qui se cache derrière le terme HTML5, vous présentera le contexte dans lequel évolue cette technologie, et nous verrons un bon nombre de nouvelles fonctionnalités qu’il apporte. Sommaire : L’HTML5 c’est quoi ? L’HTML5 n’est pas… Tout d’abord, je suis convaincu que parmi vous certains se disent : L’HTML5, c’est un nouveau langage ? Ou encore : Je débute, j’ai envie d’apprendre l’HTML5 directement, ça a l’air mieux que l’HTML d’avant. Voire : Pfff, moi qui venait d’apprendre l’HTML, je vais devoir tout réapprendre… Il est grand temps de clarifier les choses : L’HTML5 n’est pas un nouveau langage. L’HTML5 est… Le W3C et le WHATWG On y arrive !
Eclipse plugin for LESS Using this plugin? You may also be interested in an Apache Ant task for LESS. (Désolé, cette page n'est disponible qu'en Anglais.) Overview LESS is a language which extends CSS with dynamic behavior such as variables, mixins, operations and functions. Syntax coloring Syntax is automatically colored in the LESS editor as you type. Outline view The outline view provides an overview of your style sheet, and an easy access to its components. Content assist Press CTRL+space to get a context relevant list of completion proposals for CSS properties and variable names. Errors and warnings Potential errors in your stylesheet are detected in background and signaled by problem markers. Variable and Mixin linking Variable and mixin uses are automatically linked to their definition, allowing navigation and detection of undefined names. Launch the LESS compiler Create launch configurations for LESS stylesheets, and run them directly from their contextual menu. Jump to the next error and fix it Installation License
» Les nouvelles balises sémantiques de l’HTML5 Qu’est-ce que l’HTML5? Comme la plupart des programmes, OS et autre, l’HTML est amené à évoluer au cours du temps pour continuer à satisfaire les besoins des programmeurs. L’HTML5 est donc la prochaine version de l’HTML, mais pas seulement. Sémantique, késako? La sémantique, c’est ce qui permet à l’ordinateur de mieux comprendre à quoi correspond le contenu des balises. Les nouvelles balises sémantiques Comme vous pouvez le devinez, l’HTML5 rajoute de nombreuses balises sémantique car leur utilité se fait de plus en plus ressentir. <section> vous permettra de définir une section/partie de votre page. Maintenant que vous connaissez toutes ces balises, vous devriez être capable de faire un site qui respecte la sémantique. Et pour les vieux navigateurs? La question des vieux navigateurs est assez importante. En effet, il suffit de créer les balises en javascript pour pouvoir les utiliser après dans votre HTML.
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we'll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features. Step 1: Building the Navigation Bar Let's begin with a basic menu, built with an unordered list and some basic CSS styling. Creating the Menu Container We'll now apply some basic CSS styling. Now, let's see how we can improve it with some CSS3 features. For rounded corners, the syntax will be : For the background, we'll use gradients and a fallback color for older browsers. The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953. We can now add a darker border and polish the design with a "fake" inset border created with the "box-shadow" feature. HTML Part
Nouvelles balises et nouveaux éléments en HTML5 Internet a beaucoup changé depuis la sortie du HTML 4.01 en 1999. Aujourd’hui, de nombreux éléments et balises provenant du HTML 4.01 sont obsolètes, très rarement utilisé ou pire, mal utilisé. Pour la plupart d’entre eux, ces éléments et balises ont été ré-écris en HTML5. Pour une utilisation d’internet plus simple et plus riche, le HTML5 a inclus de nouveaux éléments, de nouvelles balises pour améliorer la structure de vos documents, dessiner, ajouter des médias … I. Une nouvelle sémantique Le HTML5 offre de nouvelles balises pour améliorer la hiérarchisation et la structuration de votre document. II. III. VI. V. La liste des balises suivantes appartenant au HTML 4.01 à été retiré du HTML5. Language Features | Less.js Extend is a Less Pseudo-Class which merges the selector it is put on with ones that match what it references. Released v1.4.0 In the rule set above, the :extend selector will apply the "extending selector" (nav ul) onto the .inline class wherever the .inline class appears. So the following: Outputs Notice how the nav ul:extend(.inline) selector gets output as nav ul - the extend gets removed before output and the selector block left as-is. Extend syntax The extend is either attached to a selector or placed into a ruleset. Example: It can contain one or more classes to extend, separated by commas. Extend attached to selector Extend attached to a selector looks like an ordinary pseudoclass with selector as a parameter. If a ruleset contains multiple selectors, any of them can have the extend keyword. .big-division, .big-bag:extend(.bag), .big-bucket:extend(.bucket) { } Extend inside ruleset Extend can be placed into rulesets body using &:extend(selector) syntax. Extend inside a body: nth expression