8 trucs et astuces CSS essentiels que tout développeur devrait connaître

CSS est utilisé pour ajouter un style à une page Web après avoir configuré le squelette HTML. De plus, vous pouvez créer des conceptions élégantes en CSS avec seulement quelques lignes de code.

Chaque développeur doit connaître ces astuces CSS pour développer ses projets rapidement et efficacement. Ils sont sûrs d'augmenter votre productivité au niveau supérieur - commençons.

1. Effets de survol

Vous pouvez ajouter un effet de survol à un élément HTML en utilisant le :flotter sélecteur.

Exemple: Ajout d'un effet de survol à un élément de bouton.

Code HTML:

Survolez-moi

Code CSS :

bouton: survolez {
couleur: #0062FF ;
bordure: #0062FF solide 1px ;
arrière-plan: #FFFF99 ;
}

Vous pouvez jouer avec ce code et ajouter des effets comme fondu enchaîné,grandi dans, fausser, etc. Faites-en votre propre!

Effet de fondu CSS au survol

bouton{
opacité: 0,5 ;
}
bouton: survoler{
opacité: 1 ;
}

Effet de croissance CSS au survol

bouton: survoler{
-webkit-transform: mise à l'échelle (1.2) ;
-ms-transform: échelle (1.2) ;
transformée: échelle (1.2) ;
}

2. Redimensionner les images pour s'adapter à un conteneur div

Vous pouvez redimensionner une image pour l'adapter à un conteneur div à l'aide de la la taille, largeur, et ajustement à l'objet Propriétés.

Code HTML:

Code CSS :

.random-image {
 hauteur: 100 % ;
 largeur: 100 % ;
 ajustement à l'objet: contenir ;
 }

3. Remplacer tous les styles

Vous pouvez remplacer toutes les autres déclarations de style d'un attribut (y compris les styles en ligne) à l'aide de la propriété !important directive à la fin d'une valeur.

Code HTML:

 Bonjour le monde!

Code CSS :

p {
 couleur de fond: jaune ;
 }
 .nom du cours {
 couleur d'arrière-plan: bleu !important ;
 }
 #idName {
 couleur de fond: vert ;
 }

Dans cet exemple, le !important la règle prévaut sur toutes les autres Couleur de l'arrière plan déclarations et s'assure que la couleur d'arrière-plan sera définie sur bleu plutôt que sur vert.

4. Tronquer le texte avec des points de suspension

Vous pouvez tronquer le texte qui déborde avec des points de suspension (...) en utilisant le débordement de texte propriété CSS.

Code HTML:

 Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor.

Code CSS :

.texte {
 espace blanc: nowrap ;
 débordement caché;
 débordement de texte: points de suspension ;
 largeur: 200 pixels ;
 }

En rapport: Le modèle de boîte CSS expliqué avec des exemples

5. Utilisation de la transformation de texte

Vous pouvez forcer le texte à être mis en majuscules, en minuscules ou en majuscules à l'aide de la transformation de texte propriété CSS.

Majuscule

Code HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Code CSS :

.majuscule {
 transformation de texte: majuscule ;
 }

Minuscule

Code HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Code CSS :

.minuscule {
 transformation de texte: minuscule ;
 }

Capitaliser

Code HTML:

 Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Code CSS :

.capitaliser {
 transformation de texte: capitaliser ;
 }

6. Utilisation de la déclaration de propriété sur une seule ligne

Vous pouvez utiliser les propriétés abrégées de CSS pour rendre votre code concis et facilement lisible.

Par exemple, CSS Contexte est une propriété abrégée qui vous permet de définir les valeurs de Couleur de l'arrière plan, image de fond, Répétition du fond, et position d'arrière-plan. De même, vous pouvez définir des propriétés pour Police de caractère, frontière, marge, et rembourrage.

Déclaration de propriété d'arrière-plan sur une seule ligne

couleur de fond: noir ;
image de fond: url (images/xyz.png) ;
répétition d'arrière-plan: pas de répétition ;
position d'arrière-plan: en haut à gauche ;

Vous pouvez simplifier la déclaration ci-dessus en une seule ligne :

arrière-plan: URL noire (images/xyz.png) non répétée en haut à gauche ;

Les propriétés abrégées sont très pratiques à utiliser, mais vous devez tenir compte de certaines cas délicats (comme indiqué sur MDN Web Docs) lors de leur utilisation.

Les info-bulles sont un moyen de fournir plus d'informations sur un élément lorsque l'utilisateur déplace le pointeur de la souris sur l'élément.

Code HTML:

Info-bulle de droite
Ceci est le texte de l'info-bulle

Code CSS :

corps {
 aligner le texte: centrer ;
 }
 .tooltip_div {
 position: relative ;
 affichage: bloc en ligne ;
 }
 .tooltip_div .tooltip {
 visibilité: masquée ;
 largeur: 170 pixels ;
 couleur de fond: bleu ;
 couleur: #fff ;
 aligner le texte: centrer ;
 rayon de bordure: 6 px ;
 rembourrage: 5px 0 ;
 /* Positionnement de l'info-bulle */
 position: absolue ;
 indice z: 1 ;
 haut: -5px ;
 gauche: 105 % ;
 }
 .tooltip_div: survolez .tooltip {
 visibilité: visible ;
 }

Code HTML:

Info-bulle de gauche
Ceci est le texte de l'info-bulle

Code CSS :

corps {
 aligner le texte: centrer ;
 }
 .tooltip_div {
 position: relative ;
 affichage: bloc en ligne ;
 }
 .tooltip_div .tooltip {
 visibilité: masquée ;
 largeur: 170 pixels ;
 couleur de fond: bleu ;
 couleur: #fff ;
 aligner le texte: centrer ;
 rayon de bordure: 6 px ;
 rembourrage: 5px 0 ;
 /* Positionnement de l'info-bulle */
 position: absolue ;
 indice z: 1 ;
 haut: -5px ;
 droite: 105 % ;
 }
 .tooltip_div: survolez .tooltip {
 visibilité: visible ;
 }

Code HTML:

Info-bulle supérieure
Ceci est le texte de l'info-bulle

Code CSS :

corps {
 aligner le texte: centrer ;
 }
 .tooltip_div {
 marge supérieure: 100px ;
 position: relative ;
 affichage: bloc en ligne ;
 }
 .tooltip_div .tooltip {
 visibilité: masquée ;
 largeur: 170 pixels ;
 couleur de fond: bleu ;
 couleur: #fff ;
 aligner le texte: centrer ;
 rayon de bordure: 6 px ;
 rembourrage: 5px 0 ;
 /* Positionnement de l'info-bulle */
 position: absolue ;
 indice z: 1 ;
 bas: 100 % ;
 gauche: 50 % ;
 marge gauche: -60px ;
 }
 .tooltip_div: survolez .tooltip {
 visibilité: visible ;
 }

Code HTML:

Info-bulle du bas
Ceci est le texte de l'info-bulle

Code CSS :

corps {
 aligner le texte: centrer ;
 }
 .tooltip_div {
 marge supérieure: 100px ;
 position: relative ;
 affichage: bloc en ligne ;
 }
 .tooltip_div .tooltip {
 visibilité: masquée ;
 largeur: 170 pixels ;
 couleur de fond: bleu ;
 couleur: #fff ;
 aligner le texte: centrer ;
 rayon de bordure: 6 px ;
 rembourrage: 5px 0 ;
 /* Positionner l'infobulle */
 position: absolue ;
 indice z: 1 ;
 Top 100%;
 gauche: 50 % ;
 marge gauche: -60px ;
 }
 .tooltip_div: survolez .tooltip {
 visibilité: visible ;
 }

Vous pouvez également utiliser la bibliothèque Bootstrap pour créer des Info-bulles d'amorçage.

8. Ajouter des effets d'ombre

Vous pouvez ajouter des effets d'ombre CSS aux textes et aux éléments à l'aide de la ombre de texte et le boîte ombre Propriétés CSS respectivement.

Ombre de texte CSS

le ombre de texte La propriété CSS ajoute des ombres et des calques au texte. le ombre de texte La propriété accepte une liste d'ombres séparées par des virgules à appliquer au texte.

Syntaxe de la propriété CSS text-shadow :

/* Vous pouvez utiliser 4 arguments avec la propriété CSS text-shadow :
décalage-x, décalage-y, rayon de flou et couleur */
/* offset-x | offset-y | rayon de flou | Couleur */
texte-ombre: 2px 2px 4px rouge ;
/* couleur | décalage-x | offset-y | rayon de flou */
texte-ombre: #18fa3e 1px 2px 10px ;

Noter: Les arguments color et blur-radius sont facultatifs.

En rapport: Comment utiliser CSS text-shadow: astuces et exemples

Par example:

arrière-plan: #e74c3c ;
couleur: #fff ;
famille de polices: lato ;
texte-ombre: 1px 1px rgba (123, 25, 15, 0.5), 2px 2px rgba (129, 28, 18, 0.51), 3px 3px rgba (135, 31, 20, 0.52), 4px 4px rgba (140, 33, 22, 0,53), 5px 5px RVB (145, 36, 24, 0,54), 6px 6px RVB (150, 38, 26, 0,55), 7px 7px RVB (154, 40, 28, 0,56), 8px 8px RVB (158, 42, 30, 0,57), 9px 9px RVB (162, 44, 31, 0,58), 10px 10 pixels RVB (166, 45, 33, 0,59), 11 pixels 11 pixels RVB (169, 47, 34, 0,6), 12 pixels 12 pixels RVB (173, 48, 36, 0,61), 13 pixels 13 pixels RVB (176, 50, 37, 0,62), 14 pixels 14 pixels RVB (178, 51, 38, 0,63), 15 pixels 15 pixels RVB (181, 52, 39, 0,64), 16px 16px RVB (184, 54, 40, 0,65), 17px 17px RVB (186, 55, 41, 0,66), 18px 18px rgba (189, 56, 42, 0,67), 19px 19px rgba (191, 57, 43, 0,68), 20px 20px rgba (193, 58, 44, 0,69), 21px 21px rgba ( 195, 59, 45, 0.7), 22px 22px RVB (197, 60, 46, 0.71), 23px 23 pixels RVB (199, 61, 47, 0,72), 24 pixels 24 pixels RVB (201, 62, 47, 0,73), 25 pixels 25 pixels RVB (202, 62, 48, 0,74), 26 pixels 26 pixels RVB (204, 63, 49, 0,75), 27px 27px RVB (206, 64, 49, 0,76), 28px 28px RVB (207, 65, 50, 0.77), 29px 29px rgba (209, 65, 51, 0.78), 30px 30px rgba (210, 66, 51, 0.79), 31px 31px rgba (211, 67, 52, 0.8), 32px 32px rgba ( 213, 67, 52, 0.81), 33px 33px RVB (214, 68, 53, 0.82), 34px 34 pixels RVB (215, 69, 53, 0,83), 35 pixels 35 pixels RVB (216, 69, 54, 0,84), 36 pixels 36 pixels RVB (218, 70, 54, 0,85), 37 pixels 37 pixels RVB (219, 70, 55, 0,86), 38px 38px RVB (220, 71, 55, 0,87), 39px 39px RVB (221, 71, 56, 0.88), 40px 40px rgba (222, 72, 56, 0.89), 41px 41px rgba (223, 72, 57, 0.9), 42px 42px rgba (224, 73, 57, 0.91), 43px 43px rgba ( 225, 73, 57, 0.92), 44px 44px RVB (225, 73, 58, 0.93), 45px 45 pixels RVB (226, 74, 58, 0,94), 46 pixels 46 pixels RVB (227, 74, 58, 0,95), 47 pixels 47 pixels RVB (228, 75, 59, 0,96), 48 pixels 48 pixels RVB (229, 75, 59, 0,97), 49px 49px RVB (230, 75, 59, 0,98), 50px 50px RVB (230, 76, 60, 0.99);

Ombre de boîte CSS

le boîte ombre La propriété est utilisée pour appliquer une ombre aux éléments HTML.

Syntaxe de la propriété CSS box-shadow

box-shadow: [décalage horizontal] [décalage vertical] [rayon de flou] [rayon de propagation facultatif] [couleur] ;

Noter: Les paramètres de flou, d'étalement et de couleur sont facultatifs.

En rapport: Comment utiliser CSS box-shadow: astuces et exemples

Par example:

boîte-ombre: rgba (0, 0, 0, 0,35) 0px 5px 15px ;

Si vous souhaitez consulter le code source complet utilisé dans cet article, voici le référentiel GitHub.

Donnez du style à votre site Web à l'aide d'astuces CSS modernes

L'ajout d'ombres de texte CSS à un site Web est un excellent moyen d'attirer l'attention des utilisateurs. Cela peut donner au site Web une certaine élégance et une sensation unique. Soyez créatif et expérimentez avec certains ombre de texte des exemples qui peuvent correspondre au thème de votre site Web.

11 exemples d'ombres de texte CSS à essayer sur votre site Web

Vous pouvez faire beaucoup avec les effets d'ombre de texte en CSS, mais il peut être difficile de savoir exactement ce qui est possible. Obtenez de l'aide avec ces exemples visuels.

Lire la suite

A propos de l'auteur