jQuery CSS3 Minimalistic Navigation Menu Martin Angelov As you have probably heard by now, CSS3 animations are a powerful tool, which enables you to create animations which run without the need of applying additional scripting to the page. What is even better, in the next generation of browsers we will have even more powerful tools, including 3D transformations (already present in Safari). But what difference does it make for us today? At the moment only three browsers give you the ability to animate CSS properties – Chrome, Safari and Opera, which together take up only a small part of the browser market. Firefox is expected to soon join the club, and with the impending release of IE9, it suddenly makes sense to start leveraging this technique. So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers. The XHTML The menu is organized as an unordered list. demo.html CSS3 Animated Navigation Menu
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!! menu 6 Effets de Rollover avec jQuery et CSS3 » Le blog de Fredods Quelques Effets de Rollover avec jQuery et CSS3 Aujourd’hui je vais vous montrez quelques effets de « mouse over » intéressants utilisant jQuery et CSS3. Les effets de « mouse over », rollover, pour peu qu’il soit bien géré sont très attirant pour vos visiteurs qui prendront plaisir à la navigation sur votre site, l’expérience utilisateur en sera bien meilleur. Voici la liste de 6 effets jQuery des plus impressionnants avec différent style. À Noter : Ces effets marcheront uniquement sur les navigateurs qui supportent ces fonctions, donc pensez à faire les mises à jour de vos navigateurs si ils sont obsolètes. Direction-Aware Hover Effect Un effet des plus sympa sur une mosaïques d’images, la première image que vous survolerez va définir la manière dont la prochaine miniature va interagir au survol de cette dernière.Plusieurs effets sont possibles : Normal, Delay et Inverse. Demo | Source | GitHub jQuery.popeye Demo | Source | Plugin WordPress Fading Magnifying Effect Demo | Source Demo | Source
CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. CSS3 Transition Créer un menu horizontal centré en CSS (sans JavaScript) Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 93 383 fois. C’est une chose qui peut paraître très simple à faire, mais sur laquelle beaucoup de personnes se sont cassés les dents. Solution avec li en inline Vous savez sous doute que l’affichage des éléments de liste se fait par défaut en display: list-item;, qui procure à la liste ce comportement particulier, notamment l’attribution de puces de liste. Considérons le code HTML suivant : <ul id="nav"> <li><a href="#">Accueil</a></li> <li><a href="#">Services</a></li> <li><a href="#">À propos</a></li> <li><a href="#">Contact</a></li> </ul> Les commentaires HTML entre chaque élément de liste permettent de supprimer l’espace blanc (white-space) indésirable, visible sur certaines mises en forme. Il nous faut maintenant simplement annuler les styles par défaut de la liste pour obtenir des liens alignés sans puce de liste. Démonstration simple Démonstration stylée Écrit par Geoffrey Crofte