background preloader

Logos In Pure CSS

Logos In Pure CSS
Related:  CSS3Principes

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

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.

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). Ainsi, vous gagnerez du temps au démarrage de la conception du style 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. 8. 9.

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?

CSS Zen Garden: The Beauty of CSS Design So What is This About? There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. CSS allows complete and total control over the style of a hypertext document. Participation Strong visual design has always been our focus. You may modify the style sheet in any way you wish, but not the HTML. Download the sample HTML and CSS to work on a copy locally. Benefits Why participate? Requirements Where possible, we would like to see mostly CSS 1 & 2 usage. Luckily, designing this way shows how well various browsers have implemented CSS by now. We ask that you submit original artwork. This is a learning exercise as well as a demonstration. By Dave Shea. 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:

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().

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

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: