Comment faire une image circulaire avec CSS seulement (exemple)
Vous vous demandez comment faire ces images circulaires fantaisie sans avoir besoin de les modifier dans Photoshop? Si vous ne savez pas de quoi je parle, voir Scenewave. Ceci est en fait assez simple. Pour les besoins de cet exemple, nous allons utiliser le logo Coca-Cola d'ici.
Commençons par HTML et CSS de base pour cela (je suppose que vous pouvez mettre en place un document HTML vierge et lier une feuille de style à elle).
Fixons un style de base pour la classe img-circulaire.
La seule chose, que vous pourriez ne pas être au courant, est la ligne 5. La taille de fond est une nouvelle propriété CSS3, qui permet de manipuler les dimensions de l'arrière-plan. Vous pouvez définir sa largeur et la hauteur en saisissant des valeurs de pixels exactes, en pourcentage ou faire la couverture de fond ou faire rentrer conteneur entier. Assurez-vous de voir la documentation de taille de base pour plus d'informations.
Alors maintenant, nous avons l'image, qui correspond à notre conteneur carré. Modifions le code CSS pour faire cadre circulaire. Nous utiliserons la propriété border-radius. ce qui nous donne l'occasion d'arrondir les angles de l'élément, il est appliqué. Pour rendre notre circulaire d'image, nous devons utiliser des valeurs, qui sont la moitié des valeurs de taille d'image. Notre fichier CSS ressemble maintenant à ceci:
Et tu as fini! Les nouvelles propriétés CSS nous permettent de créer des effets qui peuvent vous faire économiser de précieuses minutes de Photoshopping.
Si vous soigneusement étudié les liens vers les documents que je vous ai donné (au cas où vous l'avez manqué - Check it out), vous êtes parfaitement au courant, que vous pouvez manipuler les coins de l'image de façon non symétrique. Essayez le code CSS ci-dessous. Qu'est-il arrivé?
Pour voir les effets de cette visite tutoriel cette page jsFiddle.