background preloader

Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3

Menu déroulant en CSS3 avec transition et max-height - CSS / CSS3
Menu déroulant en CSS3 avec transition et max-height Cet article a 3 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci publié le Lu 52 989 fois. Il y a quelques temps déjà, Lea Verou proposait d’utiliser la propriété max-height afin d’effectuer des animations sur un élément sans toucher à la propriété height. Démonstration Le sujet du menu déroulant est très sensible. Un bout de HTML Le code HTML est assez classique, il s’agit d’imbriquer des listes non-ordonnées. <ul id="menu"> <li><a href="#">Menu 1</a> <ul> <li><a href="#">Level 1.1</a></li> <li><a href="#">Level 1.2</a></li> </ul> </li><li><a href="#">Menu 2</a> <ul> <li><a href="#">Level 2.1</a></li> <li><a href="#">Level 2.2</a></li> <li><a href="#">Level 2.3</a></li> <li><a href="#">Level 2.4</a></li> </ul> </li><li><a href="#">Menu 3</a> <ul> <li><a href="#">Level 3.1</a></li> <li><a href="#">Level 3.2</a></li> <li><a href="#">Level 3.3</a></li> </ul> </li> </ul> Place au CSS Related:  CSS3Principes

Génerateur de DIV arrondies Créer un menu horizontal centré en CSS (sans JavaScript) - CSS / CSS3 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

CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Pompage.net - Inline-block est-il un substitut aux floats ? Par Steven Bradley Quand vient le moment de développer la mise en page avec CSS, float fait le plus gros du travail. Nous utilisons les éléments flottants pour les blocs importants comme une zone de contenu principale ou une colonne latérale ; nous y avons aussi recours pour les blocs de moindre taille à l’intérieur de ces blocs principaux. Mais les floats sont-ils toujours le meilleur choix? Si les floats fonctionnent généralement sans problème, il peut parfois être délicat de les manipuler. Les inline-block n’ont rien d’une nouveauté et il est possible que vous les utilisiez déjà. Qu’est ce qu’un inline-block ? Inline-block est l’une des valeurs possibles pouvant être assignées à la propriété display d’un élément. Les éléments de type bloc génèrent des boîtes selon le modèle de boîtes CSS. Lorsqu’on y pense, ce comportement n’est pas si éloigné de celui des éléments flottants. La différence entre float et inline-block Tous les blocs ci-dessus ont une déclaration display: inline-block.

Un menu d roulant en CSS3 Voyons d'abord comment se présente ce menu. Si vous êtes pressé, vous pouvez déjà voir un exemple en ligne. Comme vous pouvez le constater ci-dessous, la structure HTML ne contient rien de plus que ce qui est nécessaire, elle est minimale et facile à comprendre. Une dernière chose, mais néanmoins importante, le code HTML est sémantiquement correct. La structure est logique et a une signification propre, même si aucun style n'est appliqué : Dans mon exemple, seule la section « Categories » possède un sous-menu, mais bien entendu, vous pouvez en ajouter sur chacun des éléments. Le code est assez long, mais c'est tout ce dont on a besoin. Peut-être avez-vous remarqué le triangle qui apparaît au-dessus du sous-menu. Il est écrit en utilisant le pseudoélément :after : Le sous-menu est affiché au survol de la balise <li>. Même si au début de cet article j'ai annoncé « sans code JavaScript additionnel », je vais malgré tout en ajouter, uniquement pour le support d'IE6. Voir un exemple en ligne.

Créer des coins arrondis en CSS et sans images Vouloir créer facilement des blocs aux coins arrondis est un rêve de webdesigner aussi vieux que le Web lui-même. Traditionnellement, depuis les débuts du web, on réalisait ceci à l'aide de plusieurs éléments <div> imbriqués (ou autres), ou à l'aide d'un tableau à 9 cellules : la cellule du centre accueillait le contenu, tandis que les autres recevaient des images ou des images de fond étirables afin de dessiner les quatre coins et les bordures. Cette technique est généralement lourde et peu accessible. C'est pourquoi depuis quelques années et l'avènement des feuilles de style, de multiples techniques ont vu le jour pour proposer des solutions que l'on peut regrouper selon les critères suivants : avec ou sans images, avec ou sans JavaScript, avec ou sans ajout de markup (éléments dans le code HTML), fluide ou non fluide (blocs étirables en hauteur et/ou en largeur selon le contenu), toutes plus ou moins accessibles. Simple et approprié : border-radius Exemple : Et c'est tout !

KNACSS, un framework CSS minimaliste qui claque sous la dent ! Les transformations 3D en CSS3 L’une des innovations majeures apportées par le CSS3 est la capacité à “transformer” des éléments. Ces transformations, qui peuvent être effectuées en 2D (sur la plan de la page) ou en 3D, permettent d’enrichir l’expérience utilisateur avec de tout nouveaux types d’effets visuels. Les transformations combinées avec les transitions permettent en effet d’animer des éléments HTML en effectuant des rotations, des transitions ou des changements d’échelle. Ce tutoriel a été rédigé par Vincent De Oliveira, enseignant et développeur à l’ENSG. Introduction Vous avez déjà entendu parler des transformations en CSS, qu’elles soient 2D ou 3D? Quelles différences entre la 2D et la 3D sur le web? Pour l’affichage d’un site web à l’écran, nous travaillons en 2D: axe X : positif vers la droite de l’écran,axe Y : positif vers le bas de l’écran. Avec l’introduction des transformations 3D par le W3C, cela induit une nouvelle dimension: Quels navigateurs sont compatibles? Comment utiliser les transformations 3D?

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

Chez-swan.net : Créer une galerie de photos multipages en HTML - Lightbox2 - Documentation <div class="row2" style="text-align:right;"> &nbsp; <a href=""></a>&bull; <a href="../wiki/history.php?id=153">Historique</a><a href="../wiki/print.php? Un slideshow facile à réaliser : les photos s'agrandissent au survol de la souris. Commencer par télécharger : Lightbox2 (3,87 Mo) Cette archive à été repensé car à l'origine le css était inclus dans la page web. j'ai donc créer un fichier css à part, pour alléger la page html. une fois que vous avez téléchargé cette archive dézippez la avec 7zip. Avant de commencer il vous faut savoir les deux formats d'images utilisés.Les miniatures: 200x150 px Les larges: 640x480 px Placez vos images miniatures et larges dans le dossier : lbox. Code HTML : Remplacer MINIATURE.jpg par les votres. 1) Dans la page lightbox2.html en édition, repérez les catégories. 2) Si vous avez des connaissances en CSS, il est possible de modifier les couleurs, fonds, dimensions etc...

Related: