CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Créer un menu CSS graphique à onglet 2 - Je viens de créer une image de 500 pixels de large sur 200 de haut. J’y ai placé divers éléments : header, logo, menu, article… dans le but de créer une interface graphique ou tout du moins un morceau. Cette image servira de base pour créer un menu CSS avec onglets graphiques dont le style s’apparente énormément aux sites de style web 2.0 ! Le menu est horizontal, au survol de la souris un onglet orange apparaît derrière le lien actif. Le tout est accessible aux débutants, alors n’hésitez pas à tester ce tutoriel ! Ce menu CSS est optimisé pour le web et ne comporte que deux images : Il ressemble à cela : Pour le tester en live : Je crée donc une image de 500 sur 200 pixels. Fichier source photoshop clic pour télécharger le fichier source photoshop utilisé dans ce tutorial Je sélectionne l’outil rectangle arrondi des formes personnalisées avec un radius au minimum de 10 pixels. Terminée, la partie graphique est TRES simple <!
Créer un menu glissant en utilisant jQuery - javascript, site internet, menu, jquery, framwork, glissant, effet, tutorial css Grâce à ce tutoriel vous allez pouvoir créer un superbe menu horizontal avec un effet d’apparition des sous menus grâce à l"utilisation du framwork jQuery ! A voir absolument ! Vous avez certainement croisé un jour ou l’autre un menu créé grâce à la technologie JavaScript, si non passez donc votre souris sur le menu bleu sur le haut même de cette page … voyez-vous les sous menus apparaitre ? Ce tutoriel va vous expliquer comment créer un menu du même genre mais en ajoutant une animation d’ouverture, de fermeture et un petit effet d’arrondi sur les bords. Rien de bien compliqué dans cette méthode, vous allez le voir, chaque étape est bien expliquée et très simple à comprendre ! Pour commencer je vous invite à tester ce menu en cliquant sur le bouton ci-dessous, vous verrez qu’en cliquant sur la flèche un sous menu apparaitra avec une animation glissante, de quoi donner envie à vos lecteurs de cliquer et de parcourir chacune des rubriques ! Voici comment se structure la liste 1 : Et oui !
Tilted Content Slideshow A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations. View demo Download source The FWA landing page has a really nice content slider that plays with 3D perspective on screenshots and animates them in an interesting way. Today we’d like to recreate part of that effect and make a simple content slideshow with some fancy 3D animations. The slideshow won’t be the same as the one on the FWA page: the items won’t be “floating” or moving on hover and we’ll only have a simple navigation. If you have seen the effect over at the FWA landing page you will notice that the movement directions of the screenshots are random (moving up or down and sliding to the sides). Please note that we’ll be using CSS 3D Transforms and CSS Animations which might not work in older or mobile browsers. For the demo we are using some website screenshots from Zurb’s Responsive Gallery. So, let’s get started! The Markup The CSS Let’s not forget the fallback:
Easy-Design.Net : 2) Faire une galerie image par image- Lightbox 2.04 - Documentation <div class="row2" style="text-align:right;"> <a href=""></a>• <a href="../wiki/history.php?id=155">Historique</a><a href="../wiki/print.php? Encore un système LightBox ! Compiler plusieurs images, c'est l'art et la manière de le faire. Commencez par télécharger : Lightbox-galerie-simple-image.zip une fois que vous avez téléchargé cette archive dézippez la avec 7zip. c'est très simple, l'index, dans l'archive est déjà faite. Placez vos images miniatures et large dans le dossier : images. Code HTML : Les images sont déjà présentes dans le dossier "images". C'est l'attribut rel="lightbox" inséré dans le lien image qui va déclencher les JS placés précédemment dans la balise head. 1) Remplacez image-1.jpg (image large) etc ... par les vôtres. 2) title="Légende facultative ." : Cela vous permettra de mettre une légende à votre image. Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc...
Une galerie d'images CSS3 avec effet de zoom L'idéal est d'avoir une page sans ascenseur car le pseudoélément :target provoque des sauts de page vers l'objet ciblé, ce qui serait gênant sur un site avec un scroll. Si besoin, cela peut être réglé avec une ligne de JavaScript que vous pourrez trouver à la fin de cet article. Pour commencer, regardons un peu la structure HTML à utiliser. Elle consiste en un élément parent contenant différents sous-éléments, chacun correspondant à une image. Chacun de ces blocs image possède quelques fonctionnalités comme un bouton de fermeture, une image et un lien permettant de cliquer sur l'image pour l'agrandir. Le code CSS n'est pas très compliqué. Ensuite, nous appliquons des styles aux éléments internes. Avant de passer à la gestion de :target, il reste un peu de positionnement à effectuer. Le ciblage des éléments n'est pas particulièrement compliqué. Et voilà ! Code CSS complet Sélectionnez
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 !
Zoomer une image avec les CSS - CSS Debutant Zoomer une image, à l'aide des CSS2, lors de son survol de la souris peut se faire très facilement. Il suffit de combiner le pseudo-élément :hover à la balise img (image). Hélas, tant que MSIE6 existera, il faudra utiliser d'autres moyens pour le même résultat. Ce tutoriel décrit deux méthodes pour zoomer une image 100% CSS, la première simplissime mais inopérante avec MSIE6, la seconde utilisant la technique des « portes coulissantes ». Sommaire Première technique Fonctionne avec : FireFox MSIE 7 + Mozilla / SeaMonkey Opéra 7 + Safari Attributs utilisés : img:hover Code (x)html L'image est déclarée dans le code html sans valeurs de tailles (ni width, ni height) : Code CSS Pour éviter tout saut, ou recouvrement, du texte sous-jacent lors du zoom, on peut déclarer cette image dans un cadre (ici appelé zoom) de hauteur égale à la photo zoomée (ici 400px). Zone de test Haut Seconde technique Tous les navigateurs graphiques background cursor display height margin width Inconvénients de la méthode : Astuces