Entourez votre avatar de CSS3.


De nouveaux thèmes qui sont apparus, des avatars agrégés dans des commentaires ou des pages de démonstration, célèbres sur moiComme mon thème ne m’était pas fourni, j’ai décidé de le paramétrer manuellement. Trouver.

Il est vrai que les avatars arrondis sont beaucoup plus jolis que les carrés ou les rectangles dans une zone de texte. Plus loin, cela donnera plus de prestige à votre page.

Nous allons voir comment décorer vos photos de présentation en quelques secondes.

Il existe plusieurs techniques. Aujourd’hui je vais vous en montrer un très simple qui fonctionne avec tous les navigateurs actuels.

Ajoutez d’abord ces lignes au fichier styles.css votre sujet.

nous allons créer un classe img-cercleque nous pouvons appliquer à nos images pour les mettre dans un cercle parfait.

Pour cela nous utiliserons la propriété Rayon de bordure CSS3.

rayon de bordure est une propriété CSS3, finalisée (recommandation candidate depuis février 2011) et déjà très utile en production dans les navigateurs modernes. Il est très intuitif d’arrondir un ou plusieurs coins d’un élément en indiquant la valeur d’arrondi souhaitée.

Les coins arrondis de chaque angle peuvent être définis à l’aide d’une notation abrégée, qui se lit généralement dans le sens des aiguilles d’une montre à partir du haut (haut, droite, bas, gauche).

Ainsi, la règle suivante créera un Un bloc circulaire avec 5px en haut à gauche, 10px en haut à droite, 0px en bas à droite et 5px en bas à gauche :

#frame { border-radius : 5px 10px 0 5px ; }

A Voir  Les 4 meilleurs ordinateurs portables à longue autonomie en 2022

Il existe plusieurs façons d’utiliser cette règle, similaire aux marges intérieures et extérieures :

  • une valeur: Les 4 coins sont arrondis à cette valeur.
  • Deux valeurs : La première valeur est arrondie en haut à gauche et en bas à droite, et la seconde valeur est arrondie en haut à droite et en bas à gauche.
  • Quatre valeurs : Chaque coin a sa propre rondeur.

Ensuite dans votre page, insérez la photo et dans Zone de classe CSS saisir de l’image cercle d’images.

Enregistrez le document, puis affichez votre page et vous devriez obtenir un cercle parfait avec l’image qu’il contient.

Cela le rend immédiatement plus élégant et arrondi.

peut également être inséré directement Code HTMLcomme dans mon Widget À propos de moi.

Voici le code que j’utilise :

Je m’appelle Guillaume REYNAUD, j’ai créé ce blog en 2008 et je suis passionné par la haute technologie et la gestion des réseaux. Voici les citations qui me ressemblent le plus (pour l’instant):« Le terrorisme et les mensonges sont les armes des faibles, pas des forts. Gandhi. »

Qui donne:

Vous pouvez ajouter petite ombre Utilisez le code suivant dans votre propriété CSS img-cercle :

Boîte Ombre : 0 0 8px rgba(0, 0, 0, .8);

c’est tout.