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

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

Chaque développeur doit connaître ces astuces CSS pour créer ses travaux rapidement et avec succès. Ils sont sûrs d’augmenter votre efficacité au niveau suivant – commençons.

1. Effets de survol

Vous pouvez inclure un impact de survol sur un composant HTML à l’aide de la : flotter sélecteur.

Exemple : Ajout d’un impact de survol à un élément de commutation.

Code HTML:

Code CSS :

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

Effet de fondu CSS au survol

Effet de croissance CSS au survol

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

Vous pouvez redimensionner une image pour l’adapter à un conteneur div en utilisant le la taille , largeur , et aussi ajustement à l’objet Propriétés.

Code HTML:

Code CSS :

3. Contourner tous les styles

Vous pouvez ignorer toutes les autres déclarations de style d’une qualité (composées de styles en ligne) à l’aide de la ! important instruction à la fin d’une valeur.

Code HTML:

Code CSS :

Dans cet exemple, le ! important la politique remplace tous les autres fond – ombre déclarations et s’assure que la teinte de fond sera définie sur bleu au lieu d’être respectueuse de l’environnement.

4. Couper le texte avec des points de suspension

Vous pouvez tronquer le texte qui déborde avec des points de suspension ( … ) faisant usage de la débordement de texte Propriété résidentielle ou commerciale CSS.

Code HTML:

Code CSS :

5. Utiliser la transformation de texte

Vous pouvez obliger le message à être en majuscules, minuscules ou en majuscules en utilisant le transformation de texte propriété CSS.

Majuscule

Code HTML:

Code CSS :

Minuscule

Code HTML:

Code CSS :

Capitaliser

Code HTML:

Code CSS :

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

Vous pouvez utiliser les maisons abrégées en CSS pour rendre votre code concis et rapidement lisible.

Par exemple, CSS Contexte est une propriété abrégée qui vous permet de définir la valeur de Couleur de l’arrière plan , fond-photo , Répétition du fond , et aussi placement en arrière-plan . De même, vous pouvez définir des propriétés résidentielles ou commerciales pour Police de caractère , frontière , marge , aussi bien que rembourrage .

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

Vous pouvez simplifier l’affirmation ci-dessus en une seule ligne :

Les bâtiments abrégés sont extrêmement faciles à utiliser, mais vous devez penser à certains instances secondaires délicates (comme indiqué sur MDN Web Docs) tout en les utilisant.

7. Info-bulles

Les info-bulles sont un moyen de fournir plus d’informations concernant un élément lorsque l’individu déplace la ligne directrice de la souris sur le composant.

Info-bulle de droite

Code HTML:

Code CSS :

Info-bulle de gauche

Code HTML:

Code CSS :

Info-bulle supérieure

Code HTML:

Code CSS :

Info-bulle du bas

Code HTML:

Code CSS :

Vous pouvez également utiliser la collection Bootstrap pour développer des Info-bulles d’amorçage .

8. Ajouter des effets d’ombre

Vous pouvez inclure des impacts d’ombre CSS sur des textes ainsi que des composants utilisant le ombre de texte aussi bien que boîte ombre Propriétés CSS en particulier.

Ombre de texte CSS

le texte – ténèbres La construction CSS inclut des ombres et également des couches pour le message. le texte – ténèbres la propriété résidentielle approuve une liste de contrôle d’obscurité séparée par des virgules à lier au message.

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

Noter : L’ombre ainsi que les désaccords de rayon de flou sont facultatifs.

Par example:

Ombre de boîte CSS

le boîte ombre home est utilisé pour utiliser une ombre aux aspects HTML.

Syntaxe de la page d’accueil CSS box-shadow

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

Par exemple:

Si vous avez l’intention de jeter un œil au code source total utilisé dans cet article, voici la base de données GitHub .

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

L’ajout d’obscurité de texte CSS à un site Web est un excellent moyen d’attirer l’attention des utilisateurs. Cela peut donner au site un certain style et aussi une sensation unique. Innovez et expérimentez avec certains ombre de texte cas qui pourraient se redresser avec le style de votre site internet.