La création d’un site Web de pointe peut être une entreprise colossale, à moins que vous ne travailliez plus intelligemment en utilisant des idées que d’autres ont déjà perfectionnées. Les techniques répertoriées ici peuvent vous faire gagner un temps précieux tout en vous permettant de créer un site de qualité professionnelle.
Table des matières
Contrôle des polices
Il est évident que le type de police que vous choisissez, ainsi que sa taille et sa couleur, peuvent définir l’apparence de votre site. Dans le passé, cependant, les concepteurs étaient quelque peu limités dans le choix de la police car les polices par défaut s’affichaient lorsque la police choisie n’était pas présente sur la machine de l’utilisateur, détruisant potentiellement le design. Cela a également créé des problèmes pour les concepteurs dans des situations où les polices utilisées par une entreprise sur d’autres publications devaient être utilisées sur le site Web. Tout cela peut être résolu en utilisant la règle font-face, qui permet aux concepteurs d’afficher la police de leur choix dans le navigateur de l’utilisateur.
Pour afficher une police, convertissez d’abord le .tff au format .eot. Cela peut être fait avec un convertisseur en ligne gratuit. Une fois le fichier converti, téléchargez les deux fichiers sur votre site.
Pour afficher la police dans le navigateur de l’utilisateur, utilisez cet extrait de code CSS:
@ font-face
{font-family: myFont;
src: url (‘MaFont.ttf’),
url (‘MyFont.eot’); / * IE9 * /}
Vous pouvez ajuster l’affichage de la police avec l’une des propriétés facultatives de font-stretch, font-style ou font-weight.
Codes de couleur
Si vous n’êtes pas à l’aise avec les jeux de couleurs, ne vous inquiétez pas – il existe un moyen de contourner le problème. L’utilisation du générateur de palette de couleurs sur CSSdrive.com est un moyen intéressant de créer un jeu de couleurs basé sur une image que vous avez téléchargée. Une fois que vous téléchargez votre image préférée (gardez-la sous 1 Mo), l’outil créera les codes de couleur hexadécimaux que vous devez utiliser dans vos feuilles de style.
Couleur de l’arrière plan
Vous pouvez définir la couleur d’arrière-plan de l’un des différents éléments de votre site à partir de votre feuille de style. Selon vos préférences, vous pouvez définir une couleur en utilisant la valeur hexadécimale, la valeur RVB ou en utilisant le nom de la couleur (le cas échéant). Pour définir la couleur d’arrière-plan, utilisez l’élément approprié:
- corps {couleur d’arrière-plan: jaune;}
- h1 {couleur d’arrière-plan: # 000000;}
- p {couleur de fond: rgb (255,0,255);}
Coins arrondis
Lorsque vous stylisez des boîtes ou des bordures sur votre site, les coins arrondis ont tendance à être plus beaux que les carrés et avec CSS3, leur création est facile. Pour créer un coin arrondi, utilisez simplement le rayon de bordure propriété. Vous pouvez contrôler chacun des quatre coins en utilisant cette méthode – permettant des options intéressantes.
Pour créer une boîte avec les deux coins supérieurs arrondis, utilisez cet extrait de code:
#Top_Corners_Rounded {hauteur: 65px;
largeur: 260px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;}
Contrôle des styles concurrents
Si vous avez besoin de contrôler des styles concurrents, assurez-vous que l’un est toujours implémenté dans certaines situations, utilisez le !important déclaration. Cette règle simple garantira tout ce qui est déclaré !important est prioritaire. Par exemple, dans l’ordre normal du CSS si vous aviez les styles suivants (éventuellement sur deux feuilles de style séparées), le dernier serait implémenté, dans ce cas, un paragraphe serait rouge.
# style-test p {
Couleur bleue; }
# style-test p {
La couleur rouge;}
Cependant, en ajoutant !important au premier style p, le bleu sera la couleur affichée.
# style-test p {
couleur: bleu! important; }
# style-test p {
La couleur rouge;}
Boutons 3D
Faites ressortir vos boutons de navigation en leur donnant un effet 3D. L’illusion est créée avec le boîte ombre attribut. En utilisant une faible profondeur lorsque le bouton est dans son état actif et une profondeur plus profonde lorsqu’il est inactif, vous créez l’impression que le bouton est réellement enfoncé lorsque la souris est cliquée.
La création d’un bouton 3D comporte deux étapes:
- Placez cet extrait dans votre code HTML
Allez-y! - Placez ce code dans votre feuille de style
.bouton {
couleur: #fff;
couleur de fond: # F5B800;
rembourrage: 7px;
position: relative;
text-align: centre;
taille de la police: 48px;
texte-décoration: aucun;boîte ombre:
5px 5px 5px 0 # 000000;-webkit-box-shadow:
5px 5px 5px 0 # 000000;-moz-box-shadow:
5px 5px 5px 0 # 000000;border-top-right-radius: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-top-right-radius: 20px;bord-bas-gauche-rayon: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-bottom-left-radius: 20px;-webkit-transition: couleur d’arrière-plan 0,2s linéaire;
transition: couleur de fond 0,2 s linéaire;
}.button: actif {
boîte-ombre: 1px 1px 5px 0 # 000000;
-webkit-box-shadow: 1px 1px 5px 0 # 000000;
-moz-box-shadow: 1px 1px 5px 0 # 000000;
haut: 4px;
gauche: 4px;
}.button: hover {background-color: # FFCC33;}
Si vous voulez que tous les coins du bouton soient incurvés, au lieu de seulement ceux en haut à droite et en bas à gauche, utilisez rayon de la bordure: 20px, au lieu de border-top-right-radius: 20px et border-bottom-left-radius: 20px.
Table de style accordéon
Un moyen intéressant de sauvegarder de l’immobilier sur une page consiste à créer des boîtes pliables. Vous pouvez utiliser le titre ou le titre d’un sujet pour inciter l’utilisateur à cliquer, mais vous n’avez pas à perdre un espace précieux pour afficher tout le texte. La création d’une boîte de style accordéon pour contenir votre contenu est un peu compliquée car elle utilise JavaScript et CSS, mais vous créez essentiellement un fichier .js pour contrôler l’ouverture et la fermeture de la boîte et un fichier CSS pour contrôler l’affichage du texte.
Générateurs et tutoriels
Un bon moyen d’apprendre plus d’astuces CSS ou de découvrir comment un style particulier fonctionne est d’essayer les différents générateurs CSS en ligne. Ces outils peuvent créer un codage pour tout, des bordures aux menus déroulants. Si vous souhaitez acquérir une appréciation plus complète du CSS, lisez CSS Basics, une publication en ligne qui divise le sujet en 18 chapitres. Chaque section est remplie d’exemples pratiques et d’explications faciles à comprendre.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !