background preloader

CSS : comprendre le fonctionnement de float et clear

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. Related:  CSS3Principes

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.

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

Tutoriels XHTML, CSS, Accessibilité, JavaScript - Alsacréations Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5, XHTML), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Attention, il ne faut jamais mettre un <p> dans un <q>, c'est invalide.

border-spacing Résumé La propriété CSS border-spacing property spécifie la distance entre les bords de cellules adjacentes (uniquement pour le modèle de bordures séparées). Cette propriété est équivalente à l'attribut de présentation cellspacing en HTML. Valeur initiale 0 S'applique à tableaux et éléments avec la propriété inline-table Héritée oui Média visuel Valeur calculée deux longueurs absolues Syntaxe border-spacing: <length> | <length><length> | inherit Valeurs Une longueur à utiliser pour les espacements verticaux et horizontaux. La première longueur indique l'espacement horizontal (espace entre deux cellules de colonnes adjacentes) et la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne). Exemples Voir l'exemple sur une page Notes Cette propriété ne s'applique que lorsque border-collapse est définie à separate. Spécifications Voir également border-collapse Étiquettes et contributeurs liés au document Dernière mise à jour par :teoli,

Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Nous allons aujourd’hui appliquer ces transformations dans l’espace grâce aux transformations 3D du CSS3 ! Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Quels navigateurs sont compatibles? Les rotations Matrice

CSS Transitions Abstract CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. Status of this document This section describes the status of this document at the time of its publication. Publication as a Working Draft does not imply endorsement by the W3C Membership. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. This document is expected to be relatively close to last call. Table of Contents 1. This section is not normative. This document introduces new CSS features to enable implicit transitions, which describe how CSS properties can be made to change smoothly from one value to another over a given duration. 2. Transitions of ‘left’ and ‘background-color’ Transitions are a presentational effect. Example(s): 2.1. 2.2. .

CSS : on reprend tout à zéro ! Par Joe Gillespie Cet article est le premier d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages. Introduction Si l'idée d'utiliser des Feuilles de Styles en Cascade vous effraie, tranquillisez-vous. Que vous utilisiez un éditeur WYSIWYG sans jamais vous occuper du code source qu'il y a derrière, ou même si vous n'avez jamais créé la moindre page Web, ce tutoriel va vous mettre dans la bonne direction. De quoi aurez-vous besoin? De rien de particulier. Pas de panique ! Ah, vous aurez besoin d'un navigateur, ça va sans dire. Si vous voulez télécharger vos pages vers un serveur Web, vous aurez besoin d'un programme FTP standard, mais ne vous en inquiétez pas pour l'instant, tout va être fait sur votre ordinateur. Première étape : une page de base Avant toute chose, il nous faut une page Web de base. <html><head></head><body> Voici ma page Web </body></html> À l'intérieur de la balise html se trouvent deux autres paires de balises. La partie <head>...

CSS3 Animations Tuto : animation sans Flash avec HTML 5 et CSS 3 | Web y es-tu ? – Le Blog : Conseils et outils pratiques sur le monde impitoyable du web. Ce billet est une traduction réalisée par mes soins de Flashless animation : un très bon article de Rachel Nabors sur 24ways.org (merci Julien). Abordable et très instructif dès les premiers paragraphes, cet article est juste génial pour découvrir l’animation sans Flash et sans JavaScript. MAJ : Si les animations sont figées chez vous, passez la souris dessus et cliquez sur le bouton « rerun » pour la rejouer une fois ou sur « edit on Codepen » pour la voir fonctionner en boucle. Attention : Utilisateurs d’Internet Explorer 9 et précédent, votre charmant navigateur ne prenant pas en charge la propriété animation de CSS3, vous ne pourrez pas apprécier nos exemples animés (et quelque part, c’est bien fait pour vous, depuis le temps qu’on vous dit de changer de crèmerie…) ——————– Quand je suis arrivée dans le monde du webdesign il y a quatre ans, la première chose que je voulais faire était d’animer un dessin dans le navigateur. Les choses sont différentes maintenant. Le cycle de marche

Related: