Dzień dobry.
Chciałbym uzyskać taki efekt. Powiedzmy, że mam taki html:
<div>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
<p>Lorem ipsum</p>
</div>
Chciałbym, w czystym CSS3 nadać taki styl, aby każdy z akapitów miał np. opacity o 0.1 mniej od poprzedniego rozpoczynając od wartości 1.0. Da się to zrobić?
M.
Możesz to zrobić na dwa sposoby.
Albo pisząc dla każdego P osobny styl:
DIV > P:nth-child(1) {...}
DIV > P:nth-child(2) {...}
Albo upakowując kolejne elementy jak matrioszkę:
http://drakonica.pl/dokumenty/css_tunel.htm
p.s. Niby istnieje coś takiego jak CSS counter:
https://www.w3schools.com/css/tryit.asp?filename=trycss_counters1
ale on działa chyba tylko na liczbach całkowitych.
Dzięki.
Są propozycje wśród użytkowników i programistów CSS aby dodać funkcje, które pozwolą na odczytanie wartości licznika jako int i możliwość użycia go w funkcji calc() a potem przypisania do np. opacity. Ale na razie niestety można o tym pomarzyć :(
M.
Tak właściwie, to w czasach dojmującej dominacji Internet Explorera 4-6 można było używać CSS expressions i umieścić sobie w arkuszu np. coś takiego:
top:expression((x=(document.documentElement.offsetHeight-this.offsetHeight)/2)<0?0:x+'px');
Za cholerę to nie było standardem, niemniej dziwne, że po kilkunastu latach CSS nie ustandaryzował sobie czegoś podobnego, tak jak wprowadził np. wpsółczesny odpowiednik dawnych filtrów z IE.