Comment redimensionner des éléments et créer des dégradés avec CSS3 - dummies

Vous pouvez littéralement faire des centaines de tours sur votre site avec CSS3. Parmi les astuces clés sont le redimensionnement des éléments de votre page Web et la création de dégradés pour votre arrière-plan.

Comment redimensionner des éléments avec CSS3

Vous avez sans doute entendu parler du redimensionnement d'une fenêtre de navigateur. Avec CSS3, vous pouvez désormais donner aux visiteurs la possibilité de redimensionner n'importe quelle balise ou élément de textarea en utilisant la propriété resize. La valeur de redimensionnement peut être définie sur none, horizontale ou verticale, et est généralement associée à la propriété overflow définie sur auto.

div {width: 300px; redimensionner: les deux; overflow: auto;}

Comment créer des dégradés avec CSS3

Dans le passé, lorsque les concepteurs voulaient un fond dégradé pour un élément, ils créaient un graphique, puis le répétaient le long de l'axe X ou Y remplissez l'espace. En utilisant CSS3, vous pouvez créer vos propres dégradés de chargement plus rapide.

. gradient {/ * Safari & Chrome * / image de fond: -webkit-gradient (linéaire, gauche en bas, en haut à gauche, arrêt de couleur (0, # 74B4DB), arrêt de couleur (1, # F7ECCA)); / * Firefox * / image de fond: -moz-linear-gradient (au centre en bas, # 74B4DB 0pt, # F7ECCA 100%); height: 200px;}

En plus de la technique présentée ici, vous pouvez également créer des effets de dégradé plus complexes en utilisant l'éditeur de dégradés en ligne gratuit sur le site Web de ColorZilla.

Pour en savoir plus sur ces dix techniques et travailler avec CSS3 en général, visitez CSS3. info et W3C.