background preloader

Principes

Facebook Twitter

Slide It. - Sticky & éléments coulissants dans des onglets Aperçu. Pure CSS3 Image Slider. Guide CSS • Conseils et bonnes pratiques. CSS Elements. CSS3 référence. Pompage.net - Inline-block est-il un substitut aux floats ? Par Steven Bradley Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix? Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. Les inline-block n’ont rien d’une nouveauté et il est possible que vous les utilisiez déjà. Qu’est ce qu’un inline-block ?

Inline-block est l’une des valeurs possibles pouvant être assignées à la propriété display d’un élément. Les éléments de type bloc génèrent des boîtes selon le modèle de boîtes CSS. Lorsqu’on y pense, ce comportement n’est pas si éloigné de celui des éléments flottants. La différence entre float et inline-block Tous les blocs ci-dessus ont une déclaration display: inline-block. Sélecteurs css - Tais toi et code. Nous l’avons vu, la mise en forme css se définit par un ensemble de règles, composées de déclarations, appliquées aux balises html. La première partie d’une règle, celle qui indique l’élément ou les éléments html à laquelle elle s’applique, soit la partie dans la règle correspond à ce que l’on appelle le sélecteur. Sous sa forme la plus simple, un sélecteur désigne une balise. La règle ci-dessus indique que, dans la page html, tous les éléments dont la balise est <div> auront un fond de couleur rouge. Sélecteur de type id Hors, il arrive que plusieurs éléments partageant la même balise doivent être mis en forme différemment.

Et de pointer vers cet élément précis dans le css à l’aide du sélecteur la règle css deviendra donc Cette manière de faire nécessite que l’élément html à mettre en forme ait un identifiant unique, spécifié dans le code html (ici « bloc »). Sélecteur de type class et de pointer vers ces éléments à l’aide du sélecteur Chemin d’éléments et les règles css Sélecteurs combinés. Les sélecteurs CSS 2 et 3. Les règles des feuilles de styles sont composées d'un sélecteur qui désigne l'élément du code HTML et d'une définition comportant une liste de propriétés relatives à cet élément HTML ou cette classe d'éléments. Un sélecteur peut être un sélecteur simple ou un sélecteur composé, ou une chaîne de sélecteurs simples ou composés séparés par des combinateurs.

Ceux-ci sont les signes > ou + ou espace blanc. Le sélecteur simple Ce peut être le nom d'une balise, celui d'une classe précédé d'un point, celui d'un identifieur précédé du symbole dièse. Exemple, un code HTML: La feuille de style associée: Tous les calques auront un fond blanc. Le seul calque dont l'identifieur est "identifieur" aura un texte de couleur rouge. Tous les calques appartenant à la classe "box" auront un bord gris d'un pixel d'épaisseur. En conclusion, les sélecteurs permettent d'associer un style à un élément unique, à une balise ou à des balises différentes mais ayant une même classe.

Le sélecteur universel La règle: Syntaxe: ou: CSS Reference. Comment fonctionne la propriété CSS z-index. La propriété z-index permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical. Elle permet par exemple d'indiquer que pour deux éléments A et B partiellement ou totalement superposés, A sera placé au dessus de B ou inversement. Mais l'utilisation de cette propriété comporte quelques pièges.

Il y a deux informations principales à retenir : 1. Seuls les éléments positionnés peuvent avoir un z-index. 2. Un exemple Soit le code HTML suivant: <div id="test1">... et le code CSS suivant: Le résultat attendu est le suivant: div#test1 sera au premier plan; en dessous on aura div#test2; en dessous encore on aura div#test3 (qui ne se place pas au-dessus malgré un z-index de 10 car il n'est pas positionné); enfin, div#test4 sera le plus haut de la pile, mais ne recouvre pas les autres blocs ici car il est repoussé vers le bas par div#test3 qui n'est pas positionné.

Le modèle tabulaire en CSS. Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre «CSS avancées, vers HTML5 et CSS3», avec l’aimable autorisation de l’auteur :) Compatibilité Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Il faut remonter aux antiques versions d’Internet Explorer 7 et précédentes pour trouver des navigateurs qui ne supportent pas ce schéma de positionnement.

Display Depuis les spécifications CSS2, pas moins de 10 valeurs dédiées aux rendus tabulaires ont été ajoutées à la propriété display. Vous connaissiez sans nul doute déjà les valeurs block, inline, none et inline-block, en voici de nouvelles dans notre arsenal à présent bien complet : table Spécifie un comportement de table de type bloc pour un élément. Inline-table table-row table-row-group. 30 CSS Page Preload Animations. CSS : comprendre le fonctionnement de float et clear. Pourtant l'une des propriétés les plus utilisées en matière de CSS, float, avec ses valeurs left, right et none, reste celle dont le comportement est le moins prédictible par les designers Web même non débutants. Combiné à la propriété clear, et ses valeurs left, right, both et none, cela donne parfois des arrangements de règles hasardeuses dont l'affichage final est le résultat avant tout à d'une suite de tâtonnements et de rechargements de page. Comprendre le comportement de float implique une compréhension plus globale de la philosophie des CSS, notamment celle du flux.

Les CSS sont en effet conçues pour afficher les éléments au sein d'un flux : pour simplifier, les éléments en ligne, ou inline, sont affichés les uns à la suite des autres, tandis que les éléments conteneurs, ou block, amènent un retour à la ligne après leur affichage. Le comportement inattendu du reste du flux se retrouve souvent sous la forme d'autres éléments flottants qui n'occupent pas la place voulue. Hover avec transitions - Réaliser un effet de hover progressif avec les transitions en CSS3. Création d’un hover progressif Un hover progressif ? Je n’ai pas trouvé mieux pour expliquer cet effet pourtant si simple. Plutôt que de gérer un hover ON/OFF, ici le :hover s’applique progressivement, plus précisément, il disparait progressivement. On peut aussi parler de hover temporisé. De plus, l’effet de transition progressive est appliqué sur un dégradé.

Puis, sur chaque lien est appliqué un fond de couleur (gris) et lors du :hover, on fait disparaitre ce fond avec les transitions. Obtenez plus d’infos sur l’utilisation des dégradés. Les coins arrondis Dans cette démo, j’utilise également border-radius avec les pseudo-classes :first-child et :last-child pour arrondir le coin supérieur droit du premier <li> et le coin inférieur droit du dernier <li>. Pour la création de la petite flèche, suivez le tutoriel d’utilisation des bordures Astuce : utilisez prefixMyCSS pour ajouter les préfixes propriétaires aux règles CSS3. CSS: Centrer un objet. Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'.

Centrer un bloc ou une image Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Cet étroit bloc de texte est centré. C'est également la façon de centrer une image: placez-la dans un bloc spécifique et appliquez lui la propriété margin. L'image suivante est centrée: Centrer verticalement CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée. Le positionnement CCS en moins de 10 etapes: position static relative absolute float. 1. position:static Le positionnement par défaut de tous les élément est : position:static, qui signifie que l'élément n'est pas explicitement positionné et apparaît là ou il doit normalement apparaître dans le document.

Normalement vous n'avez pas à le spécifier sauf pour remplacer un positionnement qui a été mis précédemment. 2. position:relative Si vous spécifier position:relative, alors vous pouvez utilisez top ou bottom, et left ou right pour déplacer les éléments relativement a l'endroit ou ils devraient normalement se trouver dans le document. Déplaçons div-1 vers le bas de 20 pixels, et vers la gauche de 40 pixels: Remarquez que l'espace ou div-1 aurait du être si nous ne l'avions pas déplacer est maintenant un espace vide. L'élément suivant (div-after) ne bouge pas quand nous déplaçons div-1. Il semble que position:relative ne soit pas vraiment utile mais it pourra l'être pour certaines présentation que nous verrons plus tard. 3. position:absolute Footnotes 5. two column absolute.

Tutorial menu deroulant en css sans javascript. Menu déroulant en CSS. Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Certains internautes désactivent en effet l'exécution du javascript et pourraient se retrouver dans l'impossibilité de naviguer sur un site utilisant ce langage dans sa gestion de menu. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Seul le langage javascript permet de dépasser cette limitation. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs.

Une partie de cache-cache. 100 Great CSS Menu Tutorials. Aug 23 2011 Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content. CSS is of course the perfect language for designing beautiful navigation menus. It can be applied to any type of website and is very flexible. Don’t be alarmed if your own CSS skills are fairly limited as there are a lot of great tutorials out there that walk you through how to add clean and professional looking CSS menus to your website. You can either copy and paste the code into your own design or modify the menu to suit your needs. Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials. Horizontal CSS Menu Tutorials 1. View Tutorial | Demo 2. View Tutorial | Demo 3. View Tutorial & Demo 4. View Tutorial | Demo 5. View Tutorial | Demo 6.

View Tutorial | Demo 7. View Tutorial | Demo 8. View Tutorial 9. View Tutorial | Demo 10. View Tutorial | Demo. CSS3 Rotating Menu. CSS Dropdown Menu. CSS3 Animated Navigation Menu. Pure CSS3 Menu. Créer un menu horizontal déroulant en CSS. Un menu déroulant en CSS3. CSS3 Dropdown Menu. Menu déroulant – FrogWeb. Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative).

Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser. Menu avec slider effet transition - Réaliser un effet de bloc dépliable en CSS avec opacité. Créer un menu vertical latéral en css II - Copier coller.

Deuxième petit mémo pour créer un menu latéral dans son wordpress. Dans l’autre tuto, on fait apparaitre les sous menus au survol, en les faisant apparaître sur le coté.Ca peut être plus ou moins joli selon les sites. Une autre façon de procéder et de faire apparaitre les sous menus, sous les menus, donnant ainsi un petit effet sympa, très proche des menus jQuery. On fait appel au menu wordpress: <div id="menu_dynamique"><? Php wp_nav_menu( array( 'theme_location' => 'primary') ); ? ></div> On va ensuite dans le backoffice de son site pour créer son menu : on va dans Apparence, Menu, et on place les pages, liens ou catégories que l’on aura crée au préalable.

Ici j’entoure mon menu d’un id “menu_dynamique” qui va me servir à le pointer et le styliser en css.Wordpress génère automatiquement des ul li avec des noms de classes génériques.En faisant control Maj I sur son site, on retrouve notre menu, généré par notre fonction wp_nav_menu(). Menu déroulant en CSS3 avec transition et max-height. Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS.

Menu horizontal en CSS - CSS Debutant. Les menus sont logiquement des listes à puces. Oui, mais voilà, si on veut un menu horizontal, on ne voit pas bien comment faire devenir une liste verticale en liste horizontale... Et bien si ! Avec les CSS, on peut réaliser un menu horizontal avec une liste à puces dont chaque item sera un bouton. Fonctionne avec : Tous les navigateurs graphiques Attributs utilisés : background-color border-color ; border-style ; border-width color float height list-style-type padding text-align ; text-decoration width Code (x)html <ul><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item plus long</a></li></ul> Ce code html va donc être stylisé afin d'obtenir un menu horizontal, soit sous forme de boutons simples sans images, soit avec des images de fond qui changeront au survol de la souris par effet rollover.

Mise en forme de boutons CSS simples Le principe est donc de transformer cette liste à puces verticale en liste (sans puces) horizontale. Code CSS Résultat attendu Astuce Haut. Effets Lien Creative. Beautifully styling your lists. Personnalisé de liste déroulante Style. Vertical and horizontal translation - CSS3 Example by Selim Khemissi. [DIY] Panneau d'affichage style aéroport full CSS. CSS Decorative Gallery. Créer un design d’article de blog avec une date flottante en HTML et CSS. CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Can I use... Support tables for HTML5, CSS3, etc. Advanced drop shadows with CSS3 - Ombres avancées en CSS3 - Creative Juiz. Untitled Document. Percentage bar. Timelines CSS - 7 astuces.

Beautiful Photo Stack Gallery with jQuery and CSS3. How To Create Depth And Nice 3D Ribbons Only Using CSS3. Simple Effects for Drop-Down Lists. Pure CSS 3 fancy separator | Front / Back. CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3. Animations CSS. Menu CSS 3 animé. CSS3 Animated Vignette Buttons.

Creative CSS3 Animation Menus. Les animations CSS3 : Les outils Css. Stroll.js - CSS3 Scroll Effects. Pulsating CSS3 Input Search Box. Des infobulles en CSS3. Image a gauche ou droite en alternatif visuel. Passer une image en noir et blanc CSS3 - Contre-Courant. Les transitions et animations CSS | Édition Nº17. Animation CSS et effet typographique 3D - Utiliser les transformations 3D CSS pour réaliser une animation sympa. CSS3 Animations. Les transformations 3D en CSS3. CSS3 3D Transforms. 16,.97,.82,.2) ✿ cubic-bezier.com. CSS Transitions. Logos In Pure CSS. CSS3 – Créer un slideshow automatique et contrôlable. Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3. Slider Galerie photos en CSS3 - Créer une galerie photo avec défilement automatique sans Javascript. Slideshow en CSS3. CSS3 – Créer un slideshow automatique et contrôlable. SlideToggle : simplifiez vous la vie pour afficher et masquer un élément - BlogYann BlogYann.

Des images rondes en CSS3. How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O'Brien. Infobulle en CSS contenant une image. Diagrammes circulaires flexibles avec CSS et SVG. How to make a simple gradient using box-shadow CSS property. 50 Useful CSS Snippets Every Designer Should Have. CSS3 Generator. CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3. Propriétés par ordre alphabétique. CSS - Apprendre les mises en page. Une feuille de styles de base pour le media print. Important - CSS - Propriété | ZONE CSS - important definition CSS V5.0. Bienvenue sur la ZONE CSS | ZONE CSS - Les css et leurs relations avec les balises HTML et XHTML (définitions css V4.0)

Contraste de texte automatique avec CSS Blend Modes. Une police personnalisée CSS3 avec @font-face ou Google Font. La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement. Un arrière-plan extensible intelligent. CSS Fixed Background Effect. CSS3 Background Images 100% width/height. Les préfixes vendeurs en CSS. CSS overflow property. CSS: Clearing Floats with Overflow.