background preloader

Logos In Pure CSS

Logos In Pure CSS

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. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at 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. 2. Transitions of ‘left’ and ‘background-color’ Transitions are a presentational effect. 2.1. 3.

CSS3 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.

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. 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 Déplaçons div-1a dans le coins supérieur droit de la page: Footnotes 4. position:relative + position:absolute

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. 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 ! 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. Chaque item (li) devra néanmoins être légèrement écarté de son voisin, on va donc déclarer une marge droite à 2 pixels (margin-left:2px).

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. 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. Avec l’introduction des transformations 3D par le W3C, cela induit une nouvelle dimension: Quels navigateurs sont compatibles? Comment utiliser les transformations 3D?

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:

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

CSS Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Browser support ie Chrome Firefox Safari Opera 9+ Sometimes you don’t need crazy javascript code to come up with creative and nice looking effects. The new trick here is having the same element (in this case a phone) in the exact same position in all background images, so that while you scroll everything moves, but the phone. The only assets you need are different images, with the same size and an element in common in the same position. Image credits: Unsplash. iPhone mockup from Pixel Buddha. Creating the structure The HTML structure is pretty basic: each section contains a .content element with the title and paragraph. Adding style Couple of important things to bear in mind: iOS devices don’t like background-attachment: fixed; Therefore on small devices the fixed background effect won’t be visible. This is all the code you need to achieve the fixed background effect:

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') ); ? 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().

La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement Dans de nombreux cas, on utilise des balises superflus pour gérer ; la largeur total d'une grille avec les éléments externes et l'espacement entre chaque balise avec l'élément interne. Parfois même, pour appliquer de la couleur de fond, on utilise une troisième balise ! C'est notamment le cas avec le framework CSS Bootstrap qui se fait vieux. Si vous vous ventez de ne plus suporter IE8 parce qu’il à fait son temps, alors il est également temps d'arrêter d'utiliser des balises inutiles ! Voici un exemple d'ancienne pratique et son équivalence avec la propriété CSS3 calc(). La Grille Exemple old school à la Bootstrap Avec le HTML suivant : et avec la CSS suivante : nous obtenons : Résultat : Même exemple avec calc() en CSS3 <ul class="component"> <li>Zone 1</li> <li>Zone 2</li> <li>Zone 3</li> <li>Zone 4</li> <li>Zone 5</li></ul> Zone 1 Zone 2 Zone 3 Zone 4 Zone 5 À propos de calc() Support IE9 Support propriétaire width: -webkit-calc(50% - 100px);width: -moz-calc(50% - 100px);width: calc(50% - 100px);

CSS3 – Créer un slideshow automatique et contrôlable Si vous suivez le compte @NoupeMag sur Twitter (ça marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l’an dernier. Ce n’était pas ma première tentative de slideshow comme le présentent ces premier et second travaux datant de mai 2010. Ce tutoriel ne s’adresse pas aux débutants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tronçons de code qui vont suivre. Cependant, le code commenté reste – je l’espère – accessible. Avant propos La page de démonstration du slideshow full CSS3 vous propose des fichiers sources en téléchargement, profitez-en, notamment si vous souhaitez récupérer les images. Les codes CSS fournis ici sont légèrement différents de ceux fournis dans l’archive zippée téléchargeable. Les codes CSS3 présents sur ce tutoriel ne tiennent pas compte des préfixes parfois nécessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Les défauts des versions précédentes

Related: