v 5 TRUCS CSS QUE TOUT WEB DESIGNER DOIT CONNAÎTRE ! - Hi-Tech Library
Accueil / Web / 5 TRUCS CSS QUE TOUT WEB DESIGNER DOIT CONNAÎTRE !

5 TRUCS CSS QUE TOUT WEB DESIGNER DOIT CONNAÎTRE !

Le CSS nous sauve littéralement la vie, nous, Web designers/programmeurs qui cherchons à nous simplifier la vie dans notre travail quotidien.

Voici, donc, 5 petits trucs et astuces qui pourraient s'avérer être fort utiles :

1. La première lettre d'un paragraphe

Pour afficher la première lettre d'un paragraphe, comme dans un magazine ou un conte de fées, il suffit d'utiliser le pseudo-élément first-letter :

p:first-letter{
     display:block;
     float:left;
     margin: -20px 5px 0 0;
     color:#A30B06;
     font-size:3.0em;
     font-family:Georgia;
}

2. Centrer un site Web au milieu de l'écran

Si vous souhaitez centrer un site Web au centre de l'écran afin qu'il soit plus esthétique sur un gros écran, il suffit d'utiliser les marges latérales auto sans oublier de spécifier une largeur :

body{
    width:1000px;
    margin:0 auto;
}

3. Modifier le curseur pour tout élément cliquable

Une nouvelle tendance est de montrer à l'utilisateur qu'un élément est cliquable en modifier le curseur lorsque celui-ci passe par-dessus l'élément.

input[type=submit],label,select,.pointer {
   cursor:pointer;
}

4. Donner un style aux nombres d'une liste ordonnée ol

5 trucs et astuces CSS

Vous pouvez appliquer un style aux nombres d'une liste ordonnée, sans toutefois que ce style soit appliqué aux éléments.

<ol>
<li><p>Google</p></li>
<li><p>Facebook</p></li>
<li><p>Youtube</p></li>
</ol>
ol {
    font: italic 1em Georgia;
    color: #999;
}
ol p {
    font: normal .8em Arial;
    color: #000;
}

5. Aligner verticalement avec line-height

Vous pouvez aligner le contenu d'un bloc ayant une hauteur fixe, à l'aide de la propriété line-height.

 line-height:50px;

Vérifiez également

5 mythes sur l’apprentissage de la programmation

Vous souhaitez démarrer votre carrière de programmeur, mais vous ne savez pas par où commencer …

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
Connecting
Please wait...
Envoyer un message

Désolé, nous ne sommes pas en ligne pour le moment. Laisser un message.

* Nom
* Email
* Description
Connecte-toi maintenant

Besoin d'aide? Gagnez du temps en commençant votre demande de support en ligne.

* Nom
* Email
* Description
Nous sommes en ligne!
Feedback

Aidez-nous à vous aider mieux! N'hésitez pas à nous laisser des feedback.

Comment évaluez-vous notre soutien?