Share
Alors que CSS3 devient plus robuste et plus largement supporté, les options pour des éléments de design modernes et amusants pouvant être créés sans graphiques sont pratiquement illimitées! Pour un projet récent, j'ai décidé de voir si je pouvais créer une bannière de ruban centrée avec du CSS3 pur. Ce tutoriel vous expliquera comment cela a été fait.
Il s’avère que c’est en fait assez simple, utilisant uniquement du HTML sémantique simple et quelques ruses CSS3 grâce à la magie de la propriété border-width. La seule mise en garde: comme avec toutes les nouvelles techniques CSS3, cela peut-il être un peu méchant dans certains navigateurs IE? nous aborderons cela à la fin du tutoriel.
Voici comment:
Nous voulons créer une barre de liens de navigation, nous allons donc commencer par une simple liste non ordonnée [ul] avec des liens à l'intérieur de [a]. C'est l'un des blocs de construction les plus fondamentaux du balisage; bon pour créer des listes d’éléments à styler de la même façon que nous allons le faire ici:
Le code:
Nous voulons que les liens flottent horizontalement sur la page, nous allons donc ajouter les styles suivants:
Tout d'abord, nous voulons supprimer le style de puce des éléments de liste, les faire flotter à gauche les uns des autres et ajouter un peu d'espace entre eux.
#navigation li list-style: none; bloc de visualisation; float: gauche; marge: 1em;
Ensuite, nous allons ajouter un peu d’ombre au texte, supprimer le soulignement du lien et ajouter la couleur et la taille du texte..
#navigation li a text-shadow: 0 2px 1px rgba (0,0,0,0.5); bloc de visualisation; texte-décoration: aucun; couleur: # f0f0f0; taille de police: 1.6em; marge: 0,5 m;
J'aime aussi ajouter un peu d'effets d'animation doux en vol stationnaire:
#navigation li a: survol marge-haut: 2px;
Pour ajouter les étoiles, j'ai placé une entité HTML ✭ (qui ressemble à ceci?) à l'intérieur de chaque lien. Ceci est purement décoratif, et pas nécessaire pour la fonctionnalité.
À ce stade, nous avons déjà une belle section de lien de navigation utilisable que nous pourrions ajouter à une page. Mais nous allons continuer à créer un joli ruban pour mettre ces liens à l’intérieur de.
La technique de largeur de bordure que nous allons utiliser nécessite l'ajout de 4 éléments supplémentaires au balisage. Bien que ce ne soit pas idéal d'ajouter des éléments superflus, à long terme, c'est probablement toujours plus efficace que de charger des graphiques supplémentaires, et nous allons garder les choses aussi simples que possible..
Tout d'abord, nous allons créer un élément conteneur autour des liens. Cela nous permettra de définir une largeur pour garder tous les éléments de la bannière ensemble:
- ✭ lien 1
- ✭ lien 2
- ✭ lien 3
- ✭ lien 4
Nous ajouterons le style suivant pour définir la largeur et centrer l'élément conteneur:
#navigation_container margin: 0 auto; largeur: 960px;
Ensuite, nous ajouterons le rectangle qui constituera la section du corps du ruban:
- lien 1
- lien 2
- lien 3
- lien 4
Nous ajouterons les styles suivants pour créer l’arrière-plan du corps du ruban. Nous définissons un indice z de 500 car le rectangle doit être empilé au-dessus des triangles que nous créerons ensuite. J'ajoute à la fois -moz-box-shadow et box-shadow pour prendre en compte Firefox et -webkit / IE9 respectivement:
.rectangle background: # e5592e; hauteur: 62px; position: relative; -moz-box-shadow: 0px 0px 4px rgba (0,0,0,0,55); box-shadow: 0px 0px 4px rgba (0,0,0,0,55); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; z-index: 500; / * l'ordre de la pile: au premier plan * / margin: 3em 0;Ensuite, nous allons ajouter les triangles aux bords du ruban:
- lien 1
- lien 2
- lien 3
- lien 4
Enfin, nous allons ajouter un peu de magie sur la largeur de la bordure. La solution consiste à définir une couleur de bordure transparente pour chaque côté de l'élément, à l'exception du bas (pour les triangles supérieurs) et du haut (pour les triangles inférieurs). Ensuite, nous définissons une largeur de bordure de 50 px. Cela crée un triangle isocèle, que nous placerons ensuite derrière le corps principal du ruban:
.l-triangle-top border-color: # d9542b transparent transparent; style de bordure: solide; largeur de la bordure: 50 px; hauteur: 0px; largeur: 0px; position: relative; float: gauche; en haut: 1px; à gauche: -50px; .l-triangle-bottom border-color: transparent transparent # d9542b; style de bordure: solide; largeur de la bordure: 50 px; hauteur: 0px; largeur: 0px; position: relative; float: gauche; en haut: -40px; à gauche: -150px;Nous ferons la même chose pour le côté droit:
.r-triangle-top border-color: # d9542b transparent transparent; style de bordure: solide; largeur de la bordure: 50 px; hauteur: 0px; largeur: 0px; position: relative; Flotter à droite; à droite: -45px; en haut: -107px; .r-triangle-bottom border-color: transparent transparent # d9542b; style de bordure: solide; largeur de la bordure: 50 px; hauteur: 0px; largeur: 0px; position: relative; Flotter à droite; en haut: -149px; à droite: -145px;Et nous avons fini! Cela rendra parfaitement dans les navigateurs Firefox et Webkit. Il est notoire que IE utilise mal ces propriétés CSS3, il ne restitue donc pas parfaitement, mais nous ferons de notre mieux pour le rendre assez proche en utilisant quelques feuilles de style personnalisées..
Pour IE8 et IE9, nous allons ajouter des règles de positionnement personnalisées via la feuille de style "ie.css":
.l-triangle-top left: 150px; en haut: 50 px; .l-triangle-bottom left: 50px; en haut: -12px; .r-triangle-top .r-triangle-bottom top: -169px;Juste pour être sûr (et puisque nous croyons en l'amélioration progressive), nous allons également ajouter un correctif pour IE7, qui peut être placé dans la section d'en-tête de votre page ou dans une feuille de style IE7 séparée. Mon choix de solution consiste simplement à masquer les triangles dans les navigateurs inférieurs à IE8. La propriété browser-width est prise en charge dans IE7, mais l’espacement sera légèrement différent. C'est à vous de décider si vous souhaitez passer plus de temps à repositionner les éléments dans IE7:
Envelopper
Les images de fond sont juste pour le plaisir - vous pouvez ajouter les vôtres et construire autour de ce document? ou prenez simplement tout ce qui précède et déposez-le dans votre propre design. Mais, dans l’intérêt d’être complet, voici le CSS qui ajoute à ces images:
html background: # 77d5fb url ('bottom_bg.jpg') en bas au centre, no-repeat; body background: transparent url ('top_bg.png') en haut au centre, no-repeat; largeur: 100%; hauteur: 100%; marge: 0 0;Crédits: Les images proviennent d'iStockPhoto. Nous ne pouvons pas distribuer l'image de l'île du bas avec la démo, mais vous pouvez la récupérer ici..
C'est tout!
J'espère que vous avez apprécié celui-ci! Rappelez-vous qu'il s'agit d'un ensemble de techniques relativement nouvelles. Par conséquent, si votre objectif est d'obtenir une stabilité à 100% sur tous les navigateurs connus, il existe des moyens plus stables de le faire en utilisant des images de base pour l'arrière-plan. Laissez vos commentaires et questions ci-dessous;)
En savoir plus sur la création d'un effet de ruban ou de pliage:
Créez un effet de ruban 3D enveloppant (plus un fichier PSD gratuit!)
J'ai pensé qu'il serait peut-être amusant de créer un tutoriel sur le populaire effet de ruban Wrap-Around en 3D qui a fait son apparition cette année. C'est un excellent moyen d'ajouter de la profondeur à vos conceptions, et c'est sacrément facile à compléter..
Visitez la poste
Petit conseil: Formes CSS pratiques
Une technique de conception courante consiste dernièrement à créer un effet de pli, dans lequel il apparaît qu'un titre est enveloppé derrière son conteneur. Ceci est généralement réalisé grâce à l'utilisation d'images minuscules; Cependant, avec CSS, nous pouvons facilement imiter cet effet. Je vais vous montrer comment dans quatre minutes.
Visitez la poste
Accentsconagua
