9
Je voudrais savoir s'il serait possible de répliquer l'effet comme le bas de la liste Top Tweets avec du CSS pur?Effet de dégradé de dégradé alpha avec CSS 3
A
Répondre
18
Oui, vous pouvez! Profitant des couleurs RGBA et dégradés CSS3, nous pouvons appliquer les styles suivants à un élément et un fond semi-transparent Affaiblissement:
Mozilla:
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));
Webkit:
background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1));
(Mise à jour après les modifications apportées aux dégradés Webkit)
Malheureusement, cela ne fonctionne que dans Firefox 3.6+, Safari et Ch Rome. Si vous avez besoin de l'effet dans IE ou des versions plus anciennes de Firefox, alors vous feriez mieux d'utiliser le format PNG semi-transparent comme le fait Twitter.
0
Bien que ce ne soit pas une solution globale, cela fonctionne sur Safari/Webkit - donc c'est bon à savoir pour quelqu'un qui fait des applications mobiles. Donc, supposons que vous n'adressiez que webkit, vous avez cette belle fonctionnalité décrite here. Cela vous aide également lorsque vous ne pouvez pas simuler le fondu avec un élément superposé. (par exemple, avoir une image sur le fond, au lieu d'une couleur unie)
Pour le reste, faites comme ci-dessus.
Vous pouvez également le faire fonctionner dans des IE plus anciens via 'filter' (IE7 et versions antérieures) et' -ms-filter' (IE 8 & 9). Voir http://stackoverflow.com/questions/213750/gradient-colors-in-internet-explorer et http://stackoverflow.com/questions/5159136/can-you-use-rgba-colours-in-gradients-produced -with-internet-explorers-filter-pr –
Cela ne fonctionne que si l'arrière-plan de cet objet est blanc ou statique. Imaginez que derrière cet élément se trouve un dégradé ou une image. – JLF