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. 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> Remarquez l'identifiant placé sur la balise <ul>. Capture d'écran du résultat: On va donner une bordure, une couleur de fond et une couleur de texte aux éléments <li>:
Loader Developer's Guide - Google Loader
Google API loader allows you to easily import one or more APIs, and specify additional settings (such as language, location, API version, etc.) applicable to your needs. In addition to the basic loader functionality, savvy developers can also use dynamic loading or auto-loading to enhance the performance of your application. To load the APIs, include the following script in the header of your web page. After you call google.load, you can use all of the loaded modules in your web page. For specific examples of each API, visit the code playground or the documentation specific to the desired API(s) (see links in the left navigation). The loader is cached in the user's browser for up to one hour. google.load(moduleName, moduleVersion, optionalSettings), allows you to call individual APIs by version, where: moduleName is the name of the API (e.g., "visualization" or "search").version specifies the version of the API module, as described below. Versioning The usage model Google encourages is:
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 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. 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: The CSS Example 1
Database management in a single PHP file
Transit - CSS transitions and transformations for jQuery
What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.
Logiciel pour créer un site Web évolutif & performant
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
