- - Ajouter un effet d’ombre aux images avec le générateur de code automatique CSS3

Ajouter un effet d’ombre aux images avec le générateur de code automatique CSS3

CSS vous permet de styler vos pages Web facilement, trèsfacilement. Vous pouvez définir plus de cent styles de texte sur une page (bien entendu, votre page ressemblera à un chapiteau de cirque), mais il en va de la facilité et de la souplesse offertes par l’utilisation de CSS dans les pages Web.ThèmeShock a un générateur de codeur CSS qui vous aidera à ajouterdifférents effets d'ombre portée sur vos images en quelques clics. Vous choisissez l'effet et le code est écrit. Des effets peuvent être ajoutés en bas, sur les côtés, en haut et en bas, en bas à gauche, en bas à droite, en haut à droite et en bas à gauche ou dans les coins diagonaux.

css-shadow-generator_HQ

Avant que tu commences; vérifiez la dimension de votreimage (celle à laquelle vous souhaitez ajouter l'effet). Le générateur de code a une limite supérieure et inférieure prédéfinie de 130 - 347 px pour la largeur et la hauteur de l'image. Si les dimensions de votre image dépassent cette limite, vous pouvez toujours modifier la largeur et la hauteur ultérieurement. Le code vous permet également de déterminer l'opacité et le flou de l'ombre. Vous ne pouvez pas télécharger votre image dans le générateur de code, une image par défaut sera utilisée pour vous permettre de prévisualiser l'effet.

Dans le menu déroulant, choisissez quelle ombreEffet que vous aimez, chaque fois que vous changez un des sélecteurs, un nouveau code est généré, alors assurez-vous d’utiliser le tout dernier. Une fois que vous avez sélectionné l’effet souhaité, définissez la largeur et la hauteur de votre image à l’aide de la barre de défilement horizontale. Utilisez les touches fléchées droite et gauche lorsque vous souhaitez déplacer le bouton un petit peu. Définissez le flou et l'opacité et le code sera généré. L'augmentation ou la diminution de l'un ou l'autre de ces paramètres créera un nouveau code.

Css3 Ombre portée

Une fois que tout est défini, copiez le code CSS dans unFichier CSS et nommez-le pour votre page Web (ou thème). Le code HTML qui se trouve sur votre page Web est également généré (il est unique pour chaque effet choisi dans le menu déroulant), copiez-le et placez le code de l'image (img src = "") où il est indiqué "votre code ici".

La meilleure chose à propos de ce générateur de code est quecela fonctionne et c’est gratuit. Il comporte des contraintes de dimension pour les images, mais elles peuvent être éditées à partir du code. Si vous utilisez une image transparente (comme celle ci-dessus), l’arrière-plan sera gris et terne. Vous pouvez modifier la couleur d'arrière-plan ultérieurement à partir du code. (Modifier l’arrière-plan de la ligne de code: #ccc). Le code donne également un cadre de 5px à toutes les images. Vous pouvez également le modifier, mais augmenter ou diminuer la largeur masquera ou révélera l’ombre plus que nécessaire, il est donc préférable de la laisser seule.

Visitez ThemeShock CSS Générateur d'ombres portées

commentaires