Share
Ce tutoriel montrera comment créer une belle barre de navigation simple utilisant plusieurs styles CSS3 combinés. Notre objectif est de créer une apparence qui auparavant ne pouvait être créée qu'en combinant plusieurs images, JavaScript et plusieurs div. Commençons?
Remarque: Tous les exemples suivants ont été testés sur Mozilla Firefox, Safari et Chrome. Si vous souhaitez obtenir quelque chose de similaire dans IE ou tout autre navigateur, laissez un commentaire et je serai heureux de vous aider..
Dès le début de la conception Web, une barre de navigation esthétique et bien conçue a été l’un des éléments les plus puissants pour garder les sites Web organisés et bien structurés. Dans le passé, créer un joli design utilisant des ombres, des dégradés, des angles arrondis et des effets de survol nécessitait une série de trucs qui augmentaient la taille de notre code et le nombre d'images..
Pour ce tutoriel, nous allons explorer deux effets CSS3 très importants: Coins arrondis et ombres de la boîte, nous utiliserons également les dégradés linéaires précédemment présentés dans le didacticiel CSS3 vs Photoshop - Arrière-plans complexes..
Tout le monde a entendu parler d'eux, il sera redondant de parler de la façon de les créer. Dans les exemples suivants, je vais me concentrer sur les différences entre la création d'un effet Corner arrondi à l'aide d'images et sur les avantages et les inconvénients de l'utilisation de CSS3..
La création d'un effet de coin arrondi est assez simple dans n'importe quel logiciel graphique, mais nous avons quelques problèmes dans Photoshop:
Précision: Même si vous pouvez définir le rayon des coins arrondis, le moteur anti-aliasing intégré de Photoshop ajoute souvent un ou deux pixels supplémentaires dans le graphique. Dans le passé, la plupart d'entre nous avons dû réduire manuellement les pixels des angles arrondis basés sur des images inexactes pour créer une jointure nette avec, par exemple, des arrière-plans de couleur..
Édition: C'est l'un des plus gros problèmes de la création d'un coin arrondi basé sur une image. Si vous créez un graphique pour un angle de rayon 10px dans Photoshop et que, pour une raison quelconque, vous devez augmenter le rayon à 20px, il n'y a pas d'autre moyen de le faire que de redessiner la forme ou de modifier manuellement tous ses angles, ce qui vous fait perdre temps et précision. Le redimensionnement est un autre gros problème. Si vous souhaitez étirer ou agrandir la forme, vous devez utiliser l'outil de sélection de point dans Photoshop, car l'utilisation des commandes de transformation peut entraîner des distorsions indésirables dans la forme des coins. Je n'ai même pas besoin de mentionner que couper les coins prend un tas de précieuses minutes.
Remplissages et bordures: La création d'un remplissage en dégradé dans une boîte à coins arrondis basée sur une image a toujours été une tâche ardue. Même si les bords sont recouverts, une précision chirurgicale est nécessaire pour découper les images impliquées. Vous devez créer au moins 3 images pour chaque case, une pour les coins supérieurs, une autre pour les coins inférieurs et le dégradé horizontal ou vertical, puis écrivez le code correspondant. Un autre problème avec le remplissage d'image est que souvent le conteneur doit augmenter sa hauteur ou sa largeur, ce qui donne un effet indésirable avec le dégradé (voir capture d'écran ci-dessous)..
Mélanger les styles de coin: Dans Photoshop, la création de styles de coin mélangés prend un certain temps, il n’existe aucune option permettant de combiner des styles de coin. Vous devez manuellement réduire / augmenter le rayon ou combiner des formes? puis couper chaque coin.
Utiliser CSS3 pour remplacer les angles arrondis classiques basés sur des images est une excellente idée. Voici quelques avantages:
Voyons le code pour créer des coins arrondis sur un élément HTML:
/ * Boîtes à coins arrondis * / .box image d’arrière-plan: -moz-linear-gradient (haut, # FAD502, # E89502); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# FAD502) à (# E89502), couleur-stop (1, # E89502)); .fourcorners -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; .topleft -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px; -khtml-border-radius-topleft: 20px; bord-haut-gauche-rayon: 20px; .bottomleft -moz-border-radius-bottomleft: 20px; -webkit-border-bas-rayon-gauche: 20px; -khtml-border-radius-bottomleft: 20px; bordure-bas-gauche-rayon: 20px; .topright -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; border-top-right-radius: 20px; .bottomright -moz-border-radius-bottomright: 20px; -webkit-border-bas-rayon-droit: 20px; -khtml-border-radius-bottomright: 20px; border-bottom-right-radius: 20px; .asymmetrical1 -webkit-border-top-left-radius: 160px; -khtml-border-radius-topleft: 160px; -moz-border-radius-topleft: 160px; border-top-left-radius: 160px; -webkit-border-top-right-radius: 20px; -khtml-border-radius-topright: 20px; -moz-border-radius-topright: 20px; border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 10px; -khtml-border-radius-bottomleft: 10px; -moz-border-radius-bottomleft: 10px; bordure-bas-gauche-rayon: 10px; -webkit-border-bottom-right-radius: 0px; -khtml-border-radius-bottomright: 0px; -moz-border-radius-bottomright: 0px; border-bottom-right-radius: 0px; .asymmetrical2 -webkit-border-top-left-radius: 0px; -khtml-border-radius-topleft: 0px; -moz-border-radius-topleft: 0px; bord-haut-gauche-rayon: 0px; -webkit-border-top-right-radius: 90px; -khtml-border-radius-topright: 90px; -moz-border-radius-topright: 90px; border-top-right-radius: 90px; -webkit-border-bottom-left-radius: 0px; -khtml-border-radius-bottomleft: 0px; -moz-border-radius-bottomleft: 0px; rayon-bas-gauche-rayon: 0px; -webkit-border-bottom-right-radius: 90px; -khtml-border-radius-bottomright: 90px; -moz-border-radius-bottomright: 90px; border-bottom-right-radius: 90px; .circle width: 170px; hauteur: 170px; rembourrage: 15px; font-family: Arial, Helvetica, sans serif; couleur: #FFF; taille de police: 12px; poids de police: gras; float: gauche; image d'arrière-plan: -moz-linear-gradient (top, # FAD502, # E89502); background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# FAD502) à (# E89502), couleur-stop (1, # E89502)); -webkit-border-top-left-radius: 100px; -khtml-border-radius-topleft: 100px; -moz-border-radius-topleft: 100px; border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -khtml-border-radius-topright: 100px; -moz-border-radius-topright: 100px; border-top-right-radius: 100px; -webkit-border-bottom-left-radius: 100px; -khtml-border-radius-bottomleft: 100px; -moz-border-radius-bottomleft: 100px; border-bottom-left-radius: 100px; -webkit-border-bas-rayon-droit: 100px; -khtml-border-radius-bottomright: 100 pixels; -moz-border-radius-bottomright: 100px; border-bottom-right-radius: 100px;
Certains des effets les plus intéressants que vous pouvez obtenir avec Photoshop sont les ombres portées et les ombres intérieures. Les utiliser correctement peut générer des effets 3D remarquables. Bien sûr, utiliser une ombre portée ou une ombre intérieure dans le mauvais sens peut rapidement devenir un effet ringard.
Vous trouverez ci-dessous quelques exemples de bonnes pratiques:
CSS3 nous permet de créer des ombres avec seulement quelques lignes de code, le style en charge est "box-shadow".
Pour créer une image de type Photoshop Ombre portée vous pouvez utiliser la syntaxe suivante:
boîte ombre:
Pour créer une image de type Photoshop Ombre intérieure vous pouvez utiliser la syntaxe suivante:
box-shadow: encart
Accentsconagua