Créer un bouton en CSS3 sans images - Utiliser les dégradés, les ombres et les coins arrondis. Tutoriel Dans ce tutoriel, nous allons utiliser différentes techniques CSS qui vont par exemple nous permettre de réaliser un bouton, sans utilisation d’images.
Ces techniques sont utilisables sur tous les éléments d’une page web : C’est parti ! Tout d’abord, commençons par le code HTML nécessaire. Dans cet exemple, un simple paragraphe suffit : <p>Press</p> Appliquons-lui quelques styles par défaut : une taille, une police, une couleur, un alignement. Vous devriez donc obtenir ceci : Et les nouveautés CSS3, c’est pour quand ? J’y viens, j’y viens. Ici nous appliquons donc un dégradé partant du haut vers le bas, avec un gris #555 en haut et un gris #2C2C2C en bas. Je laisse volontairement la valeur background: #444 pour la dégradation gracieuse dans les navigateurs trop ancien. Voila donc le résultat : Utiliser les transitions CSS sur les dégradés - Vincent De Oliveira. Faire des transitions entre les images d’arrière-plan est un rêve pour tout designer CSS.
Actuellement, c’est totalement impossible, que ce soit avec des images ou avec des dégradés. La spécification CSS3 a tenté de résoudre ce problème en proposant la fonction cross-fade(), qui permettrait exactement de réaliser cela, mais cette fonction a été retirée pour une étude plus poussée dans CSS Level 4. Les dernières versions de WebKit supportent néanmoins une version expérimentale de cette fonction avec quelques contraintes, comme la taille des images identiques. En attendant que la fonction cross-fade() soit correctement définie et disponible pour tout les navigateurs, quelques astuces nous permettent de réaliser des transitions entre deux dégradés. Voici un article pour effectuer des transitions entre images. Première astuce La première astuce consiste à utiliser une couleur de fond unie et un dégradé au dessus avec la transparence, par exemple: Seconde astuce.
Rotation d’un menu en CSS3 - Créer ce menu rotatif avec les Animations CSS. Etape 1 : Gérer les transformations On utilise tout d’abord les transformations CSS pour gérer la rotation avec transform : rotate(angle).
La rotation se fait par rapport à un axe qui n’est pas le centre de l’élément avec transform-origin : x y ;. Voici le code HTML utilisé : <dl class="menu"><dt class="btnRot">Partagez</dt><dd><a href="">... </a></dd><dd><a href="">Delicious</a></dd><dd><a href="">Facebook</a></dd><dd><a href="">Twitter</a></dd></dl><div class="masque"></div><div class="ombre"></div> Tout d’abord, positionnement du menu en haut, et positionnement des liens masqués à l’envers : Puis au hover, on pivote le menu de 180 degrés : Etape 2 : ajout des animations.
Jardin Zen CSS : La beauté de la conception CSS. Alors, de quoi s'agit–il ?
Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Cliquer sur l'un d'eux appliquera son style sur cette page. Le code HTML reste le même, seule la feuille de style externe change. Les CSS permettent un contrôle total de la mise en forme d'un document hypertexte. Participation Notre objectif a toujours été de promouvoir les designs de qualité. Vous pouvez modifier la feuille de style dcomme bon vous semble, mais pas le code HTML. Téléchargez les fichiers d'exemple HTML et CSS pour travailler sur une copie locale. Avantages Pourquoi participer ? Conditions Si possible, nous aimerions surtout voir l'utilisation de CSS 1 et 2.
Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. 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. Menu horizontal déroulant en CSS. Un menu horizontal, c'est bien...
Un menu horizontal qui déroule, c'est mieux !... Oh enfin, mieux... Ça dépend des goûts et des besoins. Mais ça peut être utile. Comme précédemment, le menu sera fait sous forme d'une liste à puces que l'on va contraindre à devenir horizontale, mais ce sera, en plus, une liste à puces imbriquée qui va donc être démasquée par rollover. Fonctionne avec : Firefox 3 IE 7 SeaMonkey Opéra 9 Safari 3 Camino 1.6 Attributs utilisés : background-color color display float height list-style-type padding position margin text-align, text-decoration width Note importante Comme indiqué ci-dessus, cette technique, basée uniquement sur des propriétés CSS (notamment la pseudo-classe :hover), ne fonctionnera que sur des navigateurs récents.
Code (x)html Code CSS Dans un premier temps, on transforme donc cette liste à puces verticale en une liste horizontale. A ce stade, le résultat est le suivant :