Creative CSS3 Animation Menus
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements. View demo Download source Being in the mood for experimenting with CSS3, I’d like to show you some creative menu hover effects in today’s tutorial. The icons used in the demos are actually a Web Symbols typeface that we’ll include with @font-face. The Markup The HTML structure for the menu will be an unordered list where each item is a link element that consists of an icon span and a content div that will contain the main title and the secondary title: As we are using a symbol font for the icons, we write letters for the icons. The CSS The common style for all the examples will be the inclusion of the symbol typeface: Example 1 Example 2
Inclure jQuery de manière optimisée
jQuery est un framework JavaScript très célèbre, permettant en quelques lignes de code de dynamiser un site web, de créer de petites animations, des interactions avec les formulaires, de programmer des appels Ajax. Voici, en détails, quelques possibilités d'intégration à votre site, afin de minimiser l'impact sur les performances et le temps de chargement. Appel classique à la librairie (fichier téléchargé) De la manière la plus basique, il est vous est proposé sur le site jQuery.com de télécharger le fichier - en affichant son code source - et de le placer sur votre site, par exemple dans jquery.js ou jquery-1.x.x.min.js. Fichier et compression Vous récupérerez ainsi une version "minifiée", c'est à dire compressée jusqu'à un certain niveau par un algorithme supprimant espace et commentaires, mais rendant peu lisible la déclaration des fonctions. Voyez les différences entre la version non minifiée et la version minifiée. Performances au chargement Vous obtiendrez ainsi : <! <! Démo
Changer le curseur en CSS – Custom cursor
Je vous livre aujourd’hui une règle css qui permet de changer le curseur de la souris avec n’importe quelle image. Vous pouvez donc tout de suite regarder le résultat en démo : La mise en place est très simple. Il vous suffit de prendre une image en .png de préférence. Je me sers de celle-ci dans l’exemple précédent : Et pour changer de curseur, il suffit d’appliquer ce code css sur la div sur laquelle on veut modifier ce dernier : Pour mieux comprendre le fonctionnement je vais vous donner un autre exemple. Exemple N’hésitez pas à partager ce tuto!!
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> ... </ul> 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 )
Sites Web interactifs en jQuery qui Rock! Inspiration par 25 sites.
L’arrivée du jQuery en 2006 bouleversa le monde du web que l’on connait aujourd’hui. L’utilisation des effets parallax, les centaines d’animations plus surprenantes les unes que les autres, l’utilisation de galeries « slideshow », etc., font en sorte de rendre le web plus vivant tout en gardant une rapidité d’exécution ce qui n’était pas toujours le cas avec les sites web programmés en Flash. Dans cet article, vous trouverez une superbe liste de sites web en jQuery comprenant des effets d’animation splendides utilisés en grande partie pour le système de navigation à travers les pages. La liste de sites web suivante a été créée par le design Chris Spooner, fondateur du site web line25.com. Superbes sites web avec animations jQuery CaptainDash Mustache Small Studio McCormack & Morrison Wanda Productions Socket Studios Blind Barber Dangers of Fracking thePENHOUSEPROJECT Edits Quarterly Spring/Summer Bagigia Carbure Squarefactor Inzeit Grayden Poper Second Story Interactive Studios Superlovers James Anderson
Créer des menus simples en CSS
Dans ce tutoriel, nous allons apprendre à réaliser des menus "simples" (sans arborescence: tous les liens sont au même niveau) à l'aide des feuilles de style. Sommaire Le code HTML Comme toujours, le choix des balises html doit être guidé par la nature du contenu qu'on souhaite y placer. Dans le cas d'un menu, la question est un peu délicate, dans la mesure où il n'existe pas de balise spécifique pour désigner un ensemble de liens. Un point de vue largement répandu consiste à considérer le menu de navigation comme une liste de liens, et donc à utiliser la balise correspondant aux listes non ordonnées, <ul>. Par exemple, pour un menu comportant 5 items: <ul id="navigation"><li><a href="#" title="aller à la section 1">item1</a></li><li><a href="#" title="aller à la section 2">item2</a></li><li><a href="#" title="aller à la section 3">item3</a></li><li><a href="#" title="aller à la section 4">item4</a></li><li><a href="#" title="aller à la section 5">item5</a></li></ul> Voir le résultat
