Generator online CSS3

Vom vedea ce se poate face folosind stilul CSS3 Playground , un generator online, care ne dă posibilitatea de a juca cu caracteristicile CSS3.Unele dintre lucrurile pe care le obţine sunt colturi rotunjite, umbre picătură pe text, marini ingrosate şi un efect frumos de opacitate.

In partea din stanga vedeti o bară de instrumente pentru a selecta proprietăţile pe care doriţi să le adăugaţi.In partea de sus avem un bloc eşantion se va schimba pe masura ce facem modificări, putem vedea blocul complet, dacă glisaţi liniei frontierei de jos cu mouse-ul.În partea de jos gasim stiluri care se adaugă la bloc şi la finalizarea modificări putem copia care spune că "Style to use in html/css file" şi lipiţi intr-o noua postare prin adăugarea unei clase de utilizare.
Am simplifica un pic, şi să presupunem că vom crea un bloc, oferă următoarele stiluri şi se adaugă înainte de ]]></b:skin> urmatorul cod.

.bloque-color {
-webkit-border-radius: 31px;
-moz-border-radius: 31px;
border-radius: 31px;
-webkit-box-shadow: 4px 4px 6px #000000;
-moz-box-shadow: 4px 4px 6px #000000;
box-shadow: 4px 4px 6px #000000;
text-shadow: -1px -1px 0px #000000;
-webkit-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-moz-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
-o-transform: rotate(-17deg) scale(0.9) skew(-22deg,17deg);
border: 1px solid #FFC0CB;
background: #696969;
padding: 9px;
opacity: 0.7;
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
font-size: 12pt;
color: #FFF5EE;
text-align: center;
width: 300px;
height: 150px;
}

După salvarea modificărilor, intr-un nou gadget html adăuga următorul text:

<div class="bloque-color">
Aici se adauga un text sau ce doresti sa apara.
</div>

sau daca doresti sa apar si un text insotit de o imagine foloseste codul urmator:

<div class="bloque-color">
Aici se adauga un text,o imagine sau ce doresti sa apara.
<img border="0" src="url-imagine" />
</div>

Acces la generator CSS3 Playground