background preloader

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3

Menu Slides avec CSS3 - Créer des blocs dépliables animés en CSS3
Attention : Un bug étrange a été détecté sous Chrome/Safari sur Mac. Observez-vous cela ? Dans cet exemple, on utilise les transformations CSS afin de faire subir une rotation aux liens contenus dans les éléments de liste (li). <div class="menu"><ul><li><a href="">Home</a><div><h3>Home</h3><p>Bienvenue sur le site CSS3Create</p></div></li><li><a href="">News</a><div><h3>News</h3><p>Pleins de news sur CSS3 et sur HTML5</p></div></li> ... Réglage de la taille d’un li et application de la transition sur la taille. 0.15s correspond au retardement de la transition, afin d’éviter un déclenchement trop rapide de chaque slide. overflow:hidden permet d’éviter le débordement des éléments masqués. Ensuite au :hover, la taille des li est modifiée en utilisant les transitions CSS. L’effet de transition fonctionne avec le moteur Webkit (Safari-Chrome) , le moteur Gecko 2.0 (Firefox 4) et Opéra11+. Voir aussi : Menu avec slider effet transition Related:  CSS3Principes

Galerie photo hover avec transition CSS - Utiliser les transitions pour créer une galerie photo Utilisation des transitions CSS pour cet effet. Voici le code HTML ( chaque image est dans un "li" ) <ul><li><a href="#"><img src="firefox.jpg" alt="" /><strong>Firefox</strong></a></li><li><a href="#"><img src="opera.jpg" alt="" /><strong>Opéra</strong></a></li> ... Puis utilisation des transitions CSS pour créer l’effet. L’effet fonctionne dans tous les navigateurs prenant en charge les transitions CSS ( Safari/Chrome, Firefox 4 ) 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

Créer un bouton en CSS3 sans images - Utiliser les dégradés, les ombres et les coins arrondis. Tutoriel Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont par exemple nous permettre de réaliser un bouton, sans utilisation d’images. Ces techniques sont utilisables sur tous les éléments d’une page web : C’est parti ! Tout d’abord, commençons par le code HTML nécessaire. <p>Press</p> Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement. Vous devriez donc obtenir ceci : Et les nouveautés CSS3, c’est pour quand ? J’y viens, j’y viens. Ici nous appliquons donc un dégradé partant du haut vers le bas, avec un gris #555 en haut et un gris #2C2C2C en bas. Je laisse volontairement la valeur background: #444 pour la dégradation gracieuse dans les navigateurs trop ancien. Voila donc le résultat : Continuons notre CSS avec les coins arrondis. Les effets de lumière pour plus de réalisme Pour ajouter un peu de volume et de réalisme, nous allons ajouter plusieurs ombres. L’ombre du texte tout d’abord. Un peu d’interaction !

Beautiful Slide Out Navigation: A CSS and jQuery Tutorial Today I want to show you how to create an amazing slide out menu or navigation for your website. The navigation will be almost hidden – the items only slide out when the user hovers over the area next to them. This gives a beautiful effect and using this technique can spare […] View demoDownload source Today I want to show you how to create an amazing slide out menu or navigation for your website. The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. Ok, let’s get to work. 1. The only thing we will need for the navigation is a simple unordered list with links inside of the list elements: The list is getting an ID because we want to refer to it later in the JavaScript. 2. First, we define the CSS properties for the list: The navigation should always be accessible for the user, even if he scrolls down the page. Now, let’s look at the list element properties: For the links in the list elements, we define the following CSS properties: The JavaScript

Slider Galerie photos en CSS3 - Créer une galerie photo avec défilement automatique sans Javascript Utilisation des animations CSS pour réaliser cet effet. L’animation totale dure 20s : 14% d’affichage de photo, 2% de slide vers la photo suivante et 4% pour revenir sur la première photo. Note : n’oubliez pas d’ajouter tous les préfixes sur les @keyframes. L’effet réalisé dans cet exemple est assez simple. Aller plus loin avec cet article : Slider Galerie photos "en boucle" en CSS3 Rotation d’un menu en CSS3 - Créer ce menu rotatif avec les Animations CSS Etape 1 : Gérer les transformations On utilise tout d’abord les transformations CSS pour gérer la rotation avec transform : rotate(angle). La rotation se fait par rapport à un axe qui n’est pas le centre de l’élément avec transform-origin : x y ;. Voici le code HTML utilisé : <dl class="menu"><dt class="btnRot">Partagez</dt><dd><a href="">...</a></dd><dd><a href="">Delicious</a></dd><dd><a href="">Facebook</a></dd><dd><a href="">Twitter</a></dd></dl><div class="masque"></div><div class="ombre"></div> Tout d’abord, positionnement du menu en haut, et positionnement des liens masqués à l’envers : Puis au hover, on pivote le menu de 180 degrés : Etape 2 : ajout des animations Ensuite, les animations permettent de faire pivoter le menu avec un effet de balancier : le menu bascule deux fois avant de s’arrêter en bas. Tout d’abord le menu descend (animation bounceIn) Puis remonte (animation bounceOut) :

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

CSS3 : animations et transitions d'images ou d'objets L'ère des gifs animés est morte, celle de flash est en déclin. La faute à... ? Aux CSS3 et à HTML5 qui apportent leur floppée de nouveaux outils pour animer nos sites ! animation et transition permettent d'apporter du mouvement aux pages web en quelques lignes de code. Propriétés utilisées : animation transition Sommaire Avertissement préliminaire : les trucs qui bougent pourtout, qui scintillent, qui clignotent sans arrêt, ont un haut pouvoir de nuisance sur la concentration et la sérénité du visiteur. Réaliser une transition Fonctionne avec : Chrome 4, Safari 3.1 Firefox 4 MSIE 10 Opera 10.5 Un changement de couleur de fond au survol de la souris, ou au focus d'un lien, se fait par défaut de façon binaire : on passe du tout au rien. L'exemple ci-dessous permet de modifier la transparence de la couleur déclarée en rgba en la faisant passer de 60% (une opacité de 0,4) à une opacité totale. Code HTML <p id="doigt"><a href="#doigt">On ne montre pas du doigt ! Code CSS Haut Réaliser une animation

Stylus Stylus ships with the stylus executable for converting Stylus to CSS. Usage: stylus [options] [command] [< in [> out]] [file|dir ...] Commands: help [<type>:]<prop> Opens help info at MDC for <prop> in your default browser. STDIO Compilation Example stylus reads from stdin and outputs to stdout, so for example: $ stylus --compress < some.styl > some.css Try Stylus some in the terminal! $ stylus body color red font 14px Arial, sans-serif Compiling Files Example stylus also accepts files and directories. $ stylus css The following will output to . $ stylus css --out public/stylesheets Or a few files: $ stylus one.styl two.styl For development purposes, you can use the linenos option to emit comments indicating the Stylus filename and line number in the generated CSS: $ stylus --line-numbers <path> Or the firebug option if you want to use the FireStylus extension for Firebug: $ stylus --firebug <path> Prefixing classes $ stylus --prefix foo- used with this code: .bar width: 10px would yield Converting CSS

Une police personnalisée CSS3 avec @font-face ou Google Font L’utilisation de polices personnalisées a toujours été un problème pour les développeurs et les webdesigners. Une image de texte est affichée correctement par tous les navigateurs, tandis q’un vrai texte peut être référencé et sélectionné. Il est à présent possible grâce à la propriété @font-face d’embarquer des polices sur son site, et que celles-ci s’affichent correctement même si l’utilisateur n’a pas la police installée. Avant toute chose il est important de savoir quels navigateurs implémentent la fonctionnalité @font-face… A tous les coups ça ne va pas marcher sur Internet Explorer ! Eh bien si ! Le @font-face simple Commençons tout d’abord par le cas simple qui fonctionnera correctement sur tous les navigateurs modernes. Ce bout de code un peu particulier ne sert pas à appliquer un style à un élément, mais à déclarer une police. Une fois la police déclarée, elle est utilisable comme n’importe quelle autre police : Et c’est tout ! @font-face ultra compatible Haha effectivement !

Effets de survol avec transitions et filtres CSS - Donner de la profondeur à vos galeries photos Marche à suivre Pour réaliser cet effet, utilisez une simple liste d’images que vous positionnez à votre convenance. Dimensionnez le tout. Commençons par ajouter une transformation lors du survol de nos images : Ici, nous ajoutons un agrandissement de 150%. Note : pour éviter les problèmes de superposition, j’utilise position: absolute sur les images, avec z-index: 1 à l’état normal, puis en fixant z-index: 5 lors du survol. Ensuite, ajoutons une transition pour que l’effet soit progressif : Ici, toutes les propriétés seront animées, en utilisant la méthode cubic-bezier dont une valeur est hors bornes (supérieure à 1). Enfin, l’utilisation des récents filtres CSS nous permet de créer de la profondeur, avec l’application d’un filtre de flou et d’un filtre niveau de gris. Compatibilité L’effet d’agrandissement avec les transitions est compatible au sein de la majorité des navigateurs récents. Pour ceux qui le souhaitent, voici le code complet utilisé. Code HTML Code CSS complet

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

Les transitions et animations CSS | Édition Nº17 Introduction Depuis toujours, les concepteurs web ont tenté de styler et de dynamiser des pages HTML terriblement monotones. À la fin des années 90, un simple effet de survol ne peut pas être réalisé facilement : l’utilisation de JavaScript est inévitable, mais impose de connaître la programmation. Plus tard, lorsque que la mode était aux ombres portées et aux coins arrondis, les techniques passaient par la surcharge du balisage HTML et la création d’images étirables, ce qui nuisait considérablement à la sémantique et à l’accessibilité (si toutes les précautions n’étaient pas prises). Parallèlement, de nombreux designers-développeurs, frustrés des possibilités offertes par les standards web, se tournèrent vers des solutions radicales, comme Flash, notamment pour ses capacités d’animation, de transformation d’objets dans l’espace, de gestion des textes et du multimédia. Transitions CSS ;Animations CSS ;Transformations CSS. Transitions et animations en CSS, c’est quoi ? Les transitions

40 Beautiful Free HTML5 & CSS3 Templates Dec 01 2011 Over the last few years there has been great collections of quality free HTML & CSS templates published on Noupe such as 50 Free High-Quality and “New” (X)HTML/CSS Templates (2009) and 40+ Elegant Free CSS/(X)HTML Templates (2010). There have been some great free templates released over the last year so we thought it would be appropriate to share some of these great new designs with you all. The Templates 1. A minimal looking grey and pink design that comes packaged with an Ajax powered PHP contact form. Info & Download | Demo A beautiful clean two column design that would be perfect for a blog. Info & Download 3. A grunge styled website that is suitable for a portfolio or a blog. Info & Download | Demo 4. A great looking clean blog template that has been also ported to WordPress. Info & Download | Demo 5. A clean HTML5 powered template that could be used for a portfolio or blog. Info & Download | Demo 6. Info & Download | Demo 7. Info & Download 8. Info & Download | Demo 9. 10. 11. 12.

Related:  AnimationCSS