2009-12-19

CSS3 и сянката…

Тъй… ако обичате сянката като мен… значи ще ви е интересно как се слага тя под CSS3. Направо давам пример:

text-shadow: 1px 1px 1px rgba(0,0,0,.3);

такаам… сега:

- първият 1 пикселче означава отместването по хоризонтала на сянката

- вторият 1 пиксел (следвам примера) е отместването по вертикала. (точно като на background-position)

- третият пиксел е за блърването на сянката- колкото повече, толкова по голямо разпръксване ще има. Ако изпишем 0, то сянката ще е солиден цвят, т.е. няма да е размита и леко прозрачна.

- четвъртото – rgba(0,0,0,.3) е цвета. Но сега ще ме попитате, какво е “,.3” и защо точно rgba – защото с този четвърти параметър отбелязваме прозрачността – в случая опаситито ще е 30%.

До тук говорехме за сянката на текствоете. Но какво е при кутийките?!?

box-shadow: 0 1px 7px rgba(0,0,0,.2); – тук параметрите са в същата подредба и ознчават същото като text-shadow.

Английски вариант на статийката тук : http://owltastic.com/2009/12/shadows-and-css3/

Няма коментари: