Jelenlegi hely

2.12. A CSS3 néhány megoldása

A CSS3 fejlődése jelentősen felgyorsult. De így is nehéz megjósolni, hogy mikor használhatjuk ezeket a megoldásokat teljes értékűen.

Most csak néhány alapvetőbb példát fogunk megnézni.

Lekerekített sarkok

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Szegély képpel

border-image: url('image-border.png')29 29 29 29 round round;
border: double orange 1em;

Szöveg árnyék

text-shadow: 2px 2px 2px #000;

Doboz árnyék

box-shadow:10px 10px 20px #000000;

Átlátszóság

<img src="opacity.png"
  style="margin: 10px; opacity:0.25; width:179px; height:76px;"/>
<img src="opacity.png"
  style="margin: 10px; opacity:0.50; width:179px; height:76px;"/>
<img src="opacity.png"
  style="margin: 10px; opacity:0.75; width:179px; height:76px;"/>

Több háttérkép

background: url(top.png) top left no-repeat,
url(banner.png) 11px 11px no-repeat,
url(bottom.png) bottom left no-repeat,
url(middle.png) left repeat-y;

Több hasáb

-moz-column-gap: 2em;
-moz-column-count: 3;