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

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

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 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 !

Des images rondes en CSS3 Avec le CSS3, on peut faire des choses qui nécessitait autrefois l'utilisation d'un logiciel de design (type Photoshop ou Gimp). Par exemple comment rendre une image ronde? Nous allons voir comment le faire tout d'abord avec une technique qui ne marche que sous chrome et safari et ensuite une technique qui fonctionne sur tous les navigateurs modernes (Firefox, Opera, Safari, Chrome et IE9). le principe est relativement simple, il suffit d'utiliser la propriété border-radius CSS3 (et ses équivalents pour les navigateur : -moz-border-radius, -webkit-border-radius). Vous noterez tout de même que sous Firefox, Opera et internet Explorer 9, la première technique ne fonctionne pas. A partir de cette exemple, on peut ainsi décliner cet exemple avec d'autres propriétés CSS La technique la plus compatible reste encore de mettre l'image au niveau du div dans la propriété css background mais au niveau référencement c'est un manque à gagner.

CSS: Centrer un objet Centrer des lignes de texte Le plus fréquent (et donc) le plus facile des types de centrage est de centrer des lignes de texte dans un paragraphe ou dans un titre. CSS possède la propriété 'text-align' pour cela: Chaque ligne d'un P ou d'un H2 est centrée entre les marges, comme ceci: Les lignes à l'intérieur de ce paragraphe sont toutes centrées entre les marges du paragraphe, grâce à la valeur 'center' de la propriété CSS 'text-align'. Centrer un bloc ou une image Quelquefois, ce n'est pas le texte qui doit être centré, mais le bloc dans son ensemble qui doit l'être. Cet étroit bloc de texte est centré. C'est également la façon de centrer une image: placez-la dans un bloc spécifique et appliquez lui la propriété margin. L'image suivante est centrée: Centrer verticalement CSS niveau 2 ne possède pas de propriété pour centrer des objets verticalement. L'exemple ci-dessous montre comment centrer un paragraphe à l'intérieur d'un bloc qui possède une certaine hauteur donnée.

SlideToggle : simplifiez vous la vie pour afficher et masquer un élément - BlogYann BlogYann Dans la série jQuery simplifie moi la vie, voici la méthode .slideToggle. Voir la démo Imaginez que vous avez un div monBloc que vous voulez masquer ou afficher en fonction du clic sur le lien displayBloc <a id="displayBloc" href="#">Contenu masqué</a><div id="monBloc">Lorem Ipsum</div> Plutôt que de s’amuser à appeler une fonction afficheMasque sur l’évènement onclick du lien pour un résultat sans animation comme ci-dessous : function afficheMasque(){ if(document.getElementById('monBloc').style.display=='none'){ document.getElementById('monBloc').style.display='block'; }else{ document.getElementById('monBloc').style.display='none'; }} Utilisez slideToggle pour obtenir la même chose avec une animation. $(document).ready(function(){ $("#displayBloc").click(function () { $("#monBloc").slideToggle("slow"); });}); La vitesse d’apparition/disparition du bloc est déterminée par ‘fast’ ou ‘slow’ ou être spécifié en millisecondes. N’oubliez pas d’inclure l’appel à jQuery dans la balise HEAD. ShareThis

Slideshow en CSS3 Un slideshow automatique grâce aux keyframes Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;) Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Notre CSS va ensuite définir une animation par images-clefs. Dans un premier temps nous annonçons l'utilisation des keyframes. Une autre manière d'écrire cette même animation serait celle-ci: Cette syntaxe permet de gagner en place en regroupant les points d'étape. Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.) - Il est aussi possible de remplacer 0% et 100% respectivement par from et to. - Il est également possible d'utiliser des valeurs en pourcentage pour left. Continuons en réattribuant les styles précédemment utilisés à notre slide : Puis les styles concernant l'élément qui défile dans son conteneur : Voir l'exemple

Les préfixes vendeurs en CSS Afin de permettre le développement progressif et l'implémentation des modules CSS, les éditeurs de navigateurs (vendors) ont la possibilité d'introduire le support de propriétés spécifiques. Cette manière d'opérer est recommandée par le W3C depuis CSS 2.1 et valable pour les versions suivantes. Ces "propriétés propriétaires" doivent être préfixées d'un tiret et d'un code correspondant au moteur les exploitant : -o- pour Opera -moz- pour Gecko (Mozilla) -webkit- pour Webkit (Chrome, Safari, Android...) -ms- pour Microsoft (Internet Explorer) -khtml- pour KHTML (Konqueror) Le tout doit être suivi du nom de la propriété souhaitée ou anticipée. Ainsi, la fameuse propriété border-radius destinée à arrondir les angles des boîtes sans utiliser d'images ou de techniques alternatives s'est vue introduite par : -moz-border-radius sous Gecko (2.0 à 3.6) -webkit-border-radius sous WebKit Quelques inconvénients font surface : Recommandation d'usage courant

How to Style Input Type Range in Chrome, Firefox, and IE | Brenna O'Brien The syntax differs from vendor to vendor, but in all cases, you have two components that need to be styled. The track is the long piece representing the range, and the thumb is the nub you slide to pick a value. It is possible to apply styles directly to input[type=range], but you may run into cross-browser troubles. Best to take advantage of the vendor specific track and thumb selectors as much as possible. We'll be using them to recreate this custom styled range slider. Webkit based browsers (Chrome, Safari, Opera) In webkit based browsers, the track is styled with a special pseudo selector ::-webkit-slider-runnable-track, and the thumb with ::webkit-slider-thumb. Custom focus styles can also be applied on the thumb and the track. Gotchas You'll need to tell webkit you want nothing to do with their default styles by including a -webkit-appearance: none; on both the input and the thumb. Firefox There's currently a little bug in Firefox where outline: none doesn't remove focus styles. Bonus

Menu déroulant – FrogWeb Menu déroulant 2 niveauxComme il y avait pas mal de demandes je me suis amusé à faire un :menu-deroulant-2-niveaux Pour le code il y a juste à afficher le code source. Menu déroulant horizontal Pour cacher/montrer un sous menu la technique du display: none (cacher) et display: block (montrer) est souvent utilisée. Pour des raisons d’accessibilité et de reférencement j’utilise une autre technique : left: -999em (cacher) et left: auto (montrer) Utilisation de left Tout d’abord une précision quant à l’utilisation de left, top, right et bottom : ça ne fonctionne que sur des éléments positionnés (absolute, fixed, relative). Cela tombe bien puisque pour faire un sous menu déroulant celui-ci doit-être en position: absolute. Voici le code totalement épuré de toute CSS décorative pour une meilleure compréhension : Code HTML Code CSS ce qui nous donnes (ah oui, c’est du brut…) : D’autres techniques existent mais je trouve celle-ci plus « propre ». Rien ne vous empêche également de les laisser.

Le modèle tabulaire en CSS Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. En outre, certaines parties de cet article sont extraites du livre «CSS avancées, vers HTML5 et CSS3», avec l’aimable autorisation de l’auteur :) Compatibilité Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Il faut remonter aux antiques versions d’Internet Explorer 7 et précédentes pour trouver des navigateurs qui ne supportent pas ce schéma de positionnement. Display Depuis les spécifications CSS2, pas moins de 10 valeurs dédiées aux rendus tabulaires ont été ajoutées à la propriété display. Vous connaissiez sans nul doute déjà les valeurs block, inline, none et inline-block, en voici de nouvelles dans notre arsenal à présent bien complet : table Spécifie un comportement de table de type bloc pour un élément. inline-table table-row table-row-group

CSS3 : @font-face, vous avez demandé une police de caractère non standard ? Vous êtes ici > CSS Débutant | CSS3 | Déclarer une police de caractère non standard avec @font-face Longtemps, longtemps, le webmestre s'est lamenté de ne pouvoir utiliser qu'un petit nombre de fontes pour ses sites web. Arial, Helvetica, times new roman... c'était d'un triste ! Ou alors il fallait faire des images. Et mettre du texte en image ce n'est tout de même pas très logique, sans compter les problèmes d'accessibilité qui peuvent en découler. Grâce à @font-face on peut à présent utiliser des polices de caractère exotiques et laisser cours à son inventivité. Règle utilisée : @font-face Fonctionne avec : Chrome, Safari Firefox, SeaMonkey MSIE Opera Le sélecteur @font-face existe depuis très longtemps : depuis les CSS 2.0. La police de caractère, ou plutôt les différents formats de la police de caractère, doit être placée sur le serveur. Il y aura donc les mêmes contraintes techniques et éthiques qu'avec une image : Étape 1 : obtenir tous les formats nécessaires Code CSS Tout est dans le ?

Menu déroulant en CSS Si vous voulez avoir tout de suite un aperçu du type de menu décrit dans cette page, vous pouvez visiter notre page de démonstration. Et pour garder le script proposé au chaud sur votre PC, vous pouvez aussi le télécharger. Avec ou sans javascript ? Lorsqu'on peut se passer de javascript, il est prudent de le faire. Les principes utilisés pour créer les menus hiérarchiques sont malheureusement incompatibles avec Internet Explorer versions 6 et antérieures. Notre choix a consisté à mettre au point un menu à 2 vitesses qui fonctionne : Sans javascript pour Firefox, Opera, Mozilla et IE7Avec javascript pour IE 5.5 et 6 Ce choix permet à notre menu de rester pleinement opérationnel pour la quasi-totalité des visiteurs. Une partie de cache-cache En réfléchissant au principe de base d'un menu déroulant, vous constaterez qu'il s'agit essentiellement d'une partie de cache-cache : certaines parties en sont masquées et n'apparaissent que lorsque l'utilisateur survole le menu principal. La ligne :

100 Great CSS Menu Tutorials Aug 23 2011 Navigation is such an important part of your website. It’s how your visitors navigate to the main areas of your site and makes it easy for them to find your good content. CSS is of course the perfect language for designing beautiful navigation menus. Today we would like to show you 100 of these tutorials; 75 horizontal CSS menu tutorials and 25 vertical CSS menu tutorials. Horizontal CSS Menu Tutorials 1. View Tutorial | Demo 2. View Tutorial | Demo 3. View Tutorial & Demo 4. View Tutorial | Demo 5. View Tutorial | Demo 6. View Tutorial | Demo 7. View Tutorial | Demo 8. View Tutorial 9. View Tutorial | Demo 10. View Tutorial | Demo 11. View Tutorial | Demo 12. View Tutorial | Demo 13. View Tutorial | Demo 14. View Tutorial & Demo 15. View Tutorial | Demo 16. View Tutorial | Demo 17. View Tutorial 18. View Tutorial | Demo 19. View Tutorial | Demo 20. View Tutorial | Demo 21. View Tutorial & Demo 22. View Tutorial | Demo 23. View Tutorial | Demo 24. View Tutorial & Demo 25. View Tutorial | Demo 26. 27.

Related: