CSS3 - Background proprietati noi 6 - WebMasters Academy: "Modelând Viitorul Digital"

CSS3 contine trei proprietati noi pt. background: background-size, background-origin, si background-clip, de asemenea, puteti adauga mai multe imagini pentru fundalul unui element, si chiar sa folositi culori gradient, cu linear-gradient.

background-size

Proprietatea background-size permite determinarea marimii imaginii de background. Astfel, puteti folosi aceeasi imagine in mai multe elemente cu dimensiuni diferite.

– Valori (puteti specifica dimensiunile in pixeli (px) sau in procente (%)):

auto – e valoarea predefinita (default). Redimensioneaza laturile imaginii astfel incat se mentine aspectul imaginii, daca ambele valori sunt auto, imaginea apare la dimensiunile ei.
procente – Redimensioneaza lungimea si inaltimea pozei pt. background, in procente relative la elementul parinte (nu la imagine). Prima valoare reprezinta lungimea, a doua inaltimea.
Daca se specifica numai o valoare, cealalta e setata „auto”.
pixeli – Redimensioneaza lungimea si inaltimea la marimile specificate.
Daca se specifica numai o valoare, cealalta e setata „auto”.
cover – Poza pt. background e marita (sau micsorata) astfel incat sa acopere toata suprafata de fundal.
contain – Poza pt. background e marita (sau micsorata) astfel incat sa fie cuprinsa in zona de continut.

Proprietatea background-size e recunoscuta in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.

– Exemplu:

#id1 {

width:200px;

height:100px;

border:1px solid blue;

background:url(‘css3.jpg’);

background-size:100px 60px;

background-repeat:no-repeat;

}

#id2 {

width:300px;

height:120px;

border:1px solid #01da02;

background:url(‘css3.jpg’);

background-size:contain;

background-repeat:no-repeat;

}

#id3 {

width:300px;

height:120px;

border:1px solid silver;

background:url(‘css3.jpg’);

background-size:cover;

}

–></style>

<div id=”id1″>Curs CSS – dimensiuni in pixeli</div>

<div id=”id2″>Curs css- valoare contain</div>

<div id=”id3″>www.cursCSS.net – valoare cover</div>

Rezultat:

Curs CSS – dimensiuni in pixeli

Curs css- valoare contain

www.cursCSS.net – valoare cover

Culoare Gradient

Proprietatea background poate primi o valoare speciala care defineste o culoare gradient.
Sintaxa pentru codul ce defineste gradient-ul difera de la un browser la altul, de aceea trebuie specificata pentru fiecare din navigatoarele web majore, dupa cum se vede in exemplul urmator.

#id1 {

width:300px;

height:120px;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dafeda’, endColorstr=’#0308fe’); /* IE 7, 8 */

background: -moz-linear-gradient(top left, #1f1, #fff, #11f); /* Mozilla Firefox */

/* Safari, Chrome */

background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #0f1), color-stop(0.5, #fff), color-stop(1, #01f));

background-image: -o-linear-gradient(top left, #01fe02, #0102fe); /* Opera 11.1+ */

background: linear-gradient(top left, #1f1, #fff, #11f); /* W3C Markup */

}

–></style>

<div id=”id1″>Curs cursCSS CSS<br />

www.cursCSS.net</div>

Rezultat:

Curs cursCSS CSS
www.cursCSS.net

Directia culori gradient si distanta pe care culorile o iau poate fi controlata.
Daca doriti ca directia gradient-ului sa inceapa de sus, folositi doar top, in loc de „top left”; pentru stanga adaugati doar left. Ca sa setati distanta culorii in gradient, adaugati o valoare de tip procent dupa culoare (sau o valoare intre 0 si 1 pt. browsere Webkit).
– Exemplu:

#id1 {

width:300px;

height:120px;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dafeda’, endColorstr=’#0308fe’); /* IE 7, 8 */

background: -moz-linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); /* Mozilla Firefox */

/* Safari, Chrome */

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0f1), color-stop(0.6, #fff), color-stop(1, #01f));

background-image: -o-linear-gradient(top, #01fe02 0%, #0102fe 99%); /* Opera 11.1+ */

background: linear-gradient(top, #1f1 0%, #fff 65%, #11f 99%); /* W3C Markup */

}

–></style>

background-origin

Proprietatea background-origin specifica zona de pozitionare a imaginii in background. Poate lua trei valori diferite:

padding-box – pozitia e relativa la coltul din stanga-sus unde incepe padding.
border-box – pozitia e relativa la coltul din stanga-sus a bordurii.
content-box – imaginea pt. background e pozitionata de la coltul stanga-sus unde incepe continutul.

background-origin e recunoscut in IE9+, Firefox 4+, Opera, Chrome, si Safari 5+.

– Exemplu:

#id1 {

width:350px;

height:120px;

padding:20px;

border:3px solid blue;

background:url(‘css3.jpg’);

background-repeat:no-repeat;

background-color:#bcfede;

background-origin:content-box;

}

#id2 {

width:350px;

height:120px;

padding:20px;

border:3px solid blue;

background:url(‘css3.jpg’);

background-repeat:no-repeat;

background-color:#bcfede;

background-origin:border-box;

}

–></style>

<div id=”id1″>Pozitioneaza imaginea in background incepand de la continut</div>

<div id=”id2″>Pozitionare relativa la bordura</div>

Rezultat:

Pozitioneaza imaginea in background incepand de la continut

Pozitionare relativa la bordura

background-clip

Proprietatea background-clip specifica zona de colorare a fundalului, e folosita pentru a determina daca background-ul se extinde sau nu pana in margini.
Primeste una din aceste trei valori:

border-box – culoarea de fundal se extinde pana in margini.
padding-box – culoarea de fundal e fixata la padding.
content-box – culoarea de fundal e fixata la zona continutului.

background-clip e recunoscut in IE9+, Firefox 4+, Opera, si Chrome.

Exemplu:

#id1 {

width:350px;

height:120px;

padding:20px;

border:2px solid blue;

background-color:#cdfeda;

background-clip:padding-box;

-webkit-background-clip:padding-box; /* Safari */

}

#id2 {

width:350px;

height:120px;

padding:20px;

border:2px solid blue;

background-color:#cdfeda;

background-clip:content-box;

-webkit-background-clip:content-box; /* Safari */

}

–></style>

<div id=”id1″>background-clip cu padding-box</div>

<div id=”id2″>background-clip cu content-box</div>

Rezultat:

background-clip cu padding-box

background-clip cu content-box

CSS3 Imagini multiple de fundal

CSS3 permite aplicarea mai multor imagini de background la un element.
Aceasta caracteristica e suportata in Firefox 3.6+, IE 9, Safari, si WebKit.
Imaginile multiple pentru background se adauga in proprietatea background-image separate prin virgula (imaginea specificata mai la inceput apare mai in fata).
Valorile din celelalte proprietati legate de poze pt. fundal se adauga in ordinea si numarul imaginilor din background-image, sau doar o singura valoare pentru toate.

– Exemplu:

#id1 {

width:400px;

height:150px;

background-repeat: no-repeat, repeat-x;

background-position: center top, center bottom;

}

–></style>

<div id=”id1″>Imagini multiple de background</div>

Rezultat:

Imagini multiple de background

CSS3 – Border proprietati noi

CSS3 contine caracteristici noi care permit crearea de colturi rotunjite, umbre la chenare si folosirea unei imagini pentru aspectul bordurii.

CSS3 Colturi rotunjite

Proprietatea border-radius permite crearea cu usurinta a colturilor rotunjite in designul elementelor, fara a fi nevoie de imagini sau mai multe tag-uri <div>.
Internet Explorer suporta border-radius incepand cu IE9, dar puteti folosi libraria de functii JavaScript DD_roundies ca sa afisati colturi rotunjite in navigatoare web care nu recunosc aceasta proprietate CSS;

Exemplu:

#id1 {

width:300px;

height:120px;

border:2px solid blue;

border-radius:28px;

}

–></style>

<div id=”id1″> Curs CSS – www.cursCSS.net</div>

Rezultat:

Curs CSS – www.cursCSS.net

Colturile rotunjite pot fi create si independent, folosind cele patru proprietati individuale: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, si border-bottom-left-radius.
Exemplu:

#id1 {

width:300px;

height:120px;

background-color:#bbfeda;

border:2px solid blue;

border-top-left-radius:20px;

border-bottom-right-radius:38px;

}

–></style>

<div id=”id1″> Curs CSS – www.cursCSS.net</div>

Rezultat:

Curs CSS – www.cursCSS.net

Adaugare umbre la chenare

Proprietatea box-shadow se foloseste pentru a adauga umbre la chenare. Este recunoscuta in IE9+, Firefox 4, Chrome, si Opera.
box-shadow are urmatoarea sintaxa:

elm { box-shadow: X_offset Y_offset blur marime culoare inset; }

– elm – este elementul HTML la care se aplica aceasta proprietate.
– X_offset – este pozitia /distanta umbrei pe latura orizontala. Sunt permise si valori negative.
– Y_offset – este pozitia /distanta umbrei pe latura verticala. Sunt permise si valori negative.
– blur – defineste distanta „blur” (optionala, 0 sau nespecificata inseamna fara „blur”).
– marime – marimea umbrei (optionala).
– culoare – culoarea umbrei (optionala, negru daca nu e specificata).
– inset – schimba umbra din exterior sa apara in interior.

Primele doua valori trebuie adaugate, restul sunt optionale. Daca „blur” sau marime nu sunt specificate, se considera 0.

Exemplu:

#id1 {

width:300px;

height:120px;

background-color:#bbfeda;

box-shadow: 11px 11px 5px #7878da;

-webkit-box-shadow: 11px 11px 5px #7878da; /* Safari si Chrome */

}

–></style>

<div id=”id1″> CSS3 box-shadow, Curs css/css/</div>

Rezultat:

CSS3 Imagine pentru bordura

Cu proprietatea border-image se poate folosi o imagine pentru aspectul bordurii.
Aceasta se obtine prin impartirea zonei bordurii in noua segmente, reprezentand cele patru colturi, cele patru laturi si centrul (dupa cum se vede in imaginea de mai jos). Se foloseste un singur fisier cu imaginea, impartit similar in cele noua segmente care vor reprezenta colturile, laturile si centrul.

box-image are urmatoarea sintaxa:

elm { border-image: url_img slice width outset repeat; }

– url_img – adresa si numele imaginii folosita pt. bordura.
– slice – specifica distanta pentru zona din imagine folosita in cele patru margini.
– width – lungimea bordurii cu imaginea.
– outset – specifica distanta fata de marginea chenarului, de unde incepe bordura cu imagine.
– repeat – specifica daca partea de imagine trebuie repetata, rotunjita ca incadrare, sau intinsa (poate avea aceste valori: stretch, repeat, round).

border-image nu e recunoscut in Internet Explorer.
Firefox foloseste proprietatea -moz-border-image.
Safari si Chrome suporta -webkit-border-image.

• Pentru a afisa cum trebuie border-image, trebuie sa specificati si proprietatea border-width.
In exemplul urmator se foloseste aceasta imagine:

#id1 {

width:200px;

height:120px;

border-width:12px;

-moz-border-image:url(‘border_image.png’) 30 30 round; /* Firefox */

-webkit-border-image:url(‘border_image.png’) 30 30 round; /* Safari and Chrome */

border-image:url(‘border_image.png’) 30 30 round;

}

#id2 {

width:200px;

height:120px;

border-width:15px;

-moz-border-image:url(‘border_image.png’) 30 30 stretch; /* Firefox */

-webkit-border-image:url(‘border_image.png’) 30 30 stretch; /* Safari and Chrome */

border-image:url(‘border_image.png’) 30 30 stretch;

}

–></style>

<div id=”id1″> CSS3 border-image, with round</div><br />

<div id=”id2″> CSS3 border-image, with stretch</div>

Rezultat:

CSS3 – text-shadow, word-wrap, text-overflow

CSS3 introduce noi proprietati pentru efecte de text, dar multe dintre ele nu sunt inca recunoscute de principalele navigatoare web. In aceasta lectie sunt prezentate cele care sunt mai bine acceptate: text-shadow, word-wrap, and text-overflow.

CSS3 text-shadow

Proprietatea text-shadow introdusa in CSS3 permite adaugarea unui efect de umbra care sa fie aplicat la textul dintr-un element HTML. Umbra apare in jurul literelor.
Sintaxa:

text-shadow: offset_X offset_Y blur culoare;

– offset_X – specifica pozitia umbrei pe orizontala. Sunt permise si valori negative.
– offset_Y – specifica pozitia umbrei pe verticala. Sunt permise si valori negative.
– blur – defineste distanta pentru valoarea „blur” (optional).
– culoare – defineste culoarea umbrei (optional). Daca nu e specificata, se foloseste negru.

text-shadow e recunoscut in principalele browsere, cu exceptia Internet Explore. Dar incepand cu versiunea 8 a Internet Explorer puteti folosi o proprietate filter pentru a crea efecte de umbra pt. text si in IE.
Sintaxa:

filter:progid:DXImageTransform.Microsoft.Shadow(color=val, direction=val, strength=val);

– color – specifica culoarea umbrei.
– direction – poate avea una din aceste valori numerice: 0=top, 45=top right, 90=right, 135=bottom right, 180=bottom, 225=bottom left, 315=top left.
– strength – reprezinta cantitatea de „blur”.

Exemplu:

h2 {

/* pt. IE8+ */

filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a1fe, direction=135, strength=5);

text-shadow: 2px 3px 3px #a0a1fe;

}

–></style>

<h2>Text cu text-shadow</h2>

Rezultat:

Text cu text-shadow

Se pot adauga mai multe umbre la acelasi text, prin adaugarea mai multor liste de umbre in proprietatea text-shadow, separate prin virgula.
Urmatorul cod amesteca o culoare verde cu una albastra ca sa creeze un efect de umbra cu aceste culori:

h2 {

/* pt. IE8+ */

filter:progid:DXImageTransform.Microsoft.Shadow(color=#a0a0fe, direction=135, strength=5);

text-shadow: -1px -1px 1px rgba(110,235,155,0.2), 2px 3px rgba(0,0,181,0.2);

}

–></style>

<h2>Text cu doua culori pt. text-shadow</h2>

– Observati ca s-a folosit formula rgba(Rosu, Verde, Albastru, Alpha) la definirea culorii, adaugand si transparenta (Alpha) in acelasi timp.
Rezultat:

Text cu doua culori pt. text-shadow

CSS3 word-wrap

Cu word-wrap puteti determina browser-ul sa rupa cuvintele lungi, cand acestea depasesc lungimea elementului, trecand pe un rand nou.
Sintaxa:

word-wrap: valoare;

„valoare” poate fi:
– normal – Nu rupe cuvintele intregi (valoarea prestabilita).
– break-word – Permite ruperea cuvintelor intregi. Cuvintele sunt rupte la nivel de caracter, nu in silabe.

Exemplu:

#id1 {

width:100px;

border:1px solid blue;

word-wrap:break-word;

}

–></style>

<div id=”id1″>Curs CSS – word-wrap un_cuvant_mai_lung.</div>

Rezultat:

Curs CSS – word-wrap un_cuvant_mai_lung.

CSS3 text-overflow

Cu proprietatea text-overflow puteti determina ce sa se intample cu textul, cand acesta depaseste lungimea elementului.
text-overflow este suportat in majoritatea navigatoarelor web, in afara de Firefox.
Sintaxa:

text-overflow: valoare;

„valoare” poate fi:
– clip – taie textul (valoarea prestabilita).
– ellipsis – afiseaza trei-puncte („…”) in locul textului taiat.

• In general, proprietatea text-overflow se foloseste impreuna cu white-space:nowrap; si overflow:hidden;.
Exemplu:

#id1 {

width:230px;

border:1px solid blue;

white-space:nowrap;

overflow:hidden; /* „overflow” valoarea trebuie sa fie diferita de „visible” */

text-overflow:ellipsis;

}

#id2 {

width:230px;

border:1px solid green;

white-space:nowrap;

overflow:hidden;

text-overflow:clip;

}

–></style>

<div id=”id1″>CSS Tutorial – un text lung pe o singura linie, alte cuvinte.</div>

<div id=”id2″>Site web www.cursCSS.net – alt text lung intr-un singur rand.</div>

Rezultat:

CSS Tutorial – un text lung pe o singura linie, alte cuvinte.

Site web www.cursCSS.net – alt text lung intr-un singur rand.

CSS3 opacity

Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.
IE8 si versiuni anterioare folosesc o varianta alternativa, proprietatea filter.

– Sintaxa:

filter: alpha(opacity=X); /* pt. IE */

opacity: X;

– X – reprezinta o valoare intre 0 (complet transparent) si 1.0 (fara transparenta).

1) Exemplu, un <div> cu o transparenta CSS de 40%:

#dv {

background-color:blue;

width:200px;

height:100px;

filter:alpha(opacity=40); /* pt. IE */

opacity:0.4;

}

–></style>

<div id=”dv”>Un continut oarecare …</div>

Rezultat:

Un continut oarecare …

2) Exemplu, seteaza opacitate 50% la o imagine:

#im {

filter:alpha(opacity=50); /* pt. IE */

opacity:0.5;

}

–></style>

Rezultat:

3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:

#im2 {

filter:alpha(opacity=50); /* pt. IE */

opacity:0.5;

}

#im2:hover {

filter:alpha(opacity=100); /* pt. IE */

opacity:1;

}

–></style>

Rezultat (pozitionati mouse-ul peste imaginea de mai jos):

4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):

#trans {

display:none;

position:absolute;

top:2%;

left:2%;

width:96%;

height:95%;

background-color:#07fe08;

filter:alpha(opacity=50); /* pt. IE */

opacity:0.5;

}

#cnt {

position:relative;

background:#e7e8fe;

width:300px;

height:200px;

border:1px solid blue;

padding:20px;

}

#cnt:hover #trans { display:block; }

–></style>

Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.

</div>

Rezultat:

Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. CSS3 opacity

CSS3 transformari 2D

Cu proprietatea CSS transform se poate modifica forma, marimea si pozitia elementelor HTML.
Se pot transforma elementele HTML in plan 2D sau 3D.
– Sintaxa:

transform: metoda(valori);

– Acest tutorial prezinta metodele de transformare in plan 2D: translate(), rotate(), scale(), skew() .

Internet Explorer 9 foloseste: -ms-transform .
Firefox foloseste: -moz-transform .
Chrome si Safari folosesc: -webkit-transform .
Opera foloseste: -o-transform .

Metoda translate()

Metoda translate() muta elementul de la pozitia initiala, in functie de parametri dati pentru pozitionare de la Stanga (axa-X) si de Sus (axa-Y) .
– Sintaxa:

transform: translate(X, Y);

Exemplu. Cand utilizatorul plaseaza cursorul mouse-ului pe un anumit Div, ii muta pozitia cu 20 pixeli de la stanga si 15 pixeli din partea de sus.

#idv {

width:90px;

height:90px;

background:#b0b1fe;

font-size:17px;

}

#idv:hover {

transform: translate(20px, 15px);

-ms-transform: translate(20px, 15px); /* IE 9 */

-webkit-transform: translate(20px, 15px); /* Safari si Chrome */

-o-transform: translate(20px, 15px); /* Opera */

-moz-transform: translate(20px, 15px); /* Firefox */

}

</style>

<div id=”idv”>Pozitionati mouse-ul aici.</div>

Demo:

Pozitionati mouse-ul aici.

CSS rotate()

Metoda rotate() roteste elementul HTML, in sensul orelor de ceas daca valoarea e pozitiva, in sens invers orelor de ceas daca valoarea e negativa.
– Sintaxa:

transform: rotate(grade);

Exemplu. Roteste element cu 60 grade in sensul orelor de ceas.

#idv2 {

width:90px;

height:90px;

background:#b0b1fe;

font-size:17px;

}

#idv2:hover {

transform: rotate(60deg);

-ms-transform: rotate(60deg); /* IE 9 */

-webkit-transform: rotate(60deg); /* Safari si Chrome */

-o-transform: rotate(60deg); /* Opera */

-moz-transform: rotate(60deg); /* Firefox */

}

</style>

<div id=”idv2″>Pozitionati mouse-ul aici.</div>

Demo:

Pozitionati mouse-ul aici.

Metoda scale()

Metoda scale() mareste sau micsoreaza marimea elementului HTML (inclusiv continutul din el), in functie de parametri pentru Lungime (axa-X) si Inaltime (axa-Y).
– Sintaxa:

transform: scale(Lungime, Inaltime);

– Valorile pentru Lungime si Inaltime sunt in procente. De exemplu, 1.5 inseamna 150% din marimea originala.

Exemplu. Transforma lungimea sa fie de 2 ori marimea originala, si inaltimea 1.5 ori inaltimea originala.

#idv3 {

width:90px;

height:90px;

background:#b0b1fe;

font-size:17px;

}

#idv3:hover {

transform: scale(2, 1.5);

-ms-transform: scale(2, 1.5); /* IE 9 */

-webkit-transform: scale(2, 1.5); /* Safari si Chrome */

-o-transform: scale(2, 1.5); /* Opera */

-moz-transform: scale(2, 1.5); /* Firefox */

}

</style>

<div id=”idv3″>Pozitionati mouse-ul aici.</div>

Demo:

Pozitionati mouse-ul aici.

CSS skew()

Metoda skew() distorsioneaza elementul HTML pe orizontala (axa-X) si verticala (axa-Y), incluzand si continutul din el.
– Sintaxa:

transform: skew(Xdeg, Ydeg);

Exemplu. Distorsioneaza elementul 20 grade pe lungime (axa-X) si 25 grade pe verticala (axa-Y).

#idv4 {

width:160px;

height:90px;

background:#abcdfe;

font-size:18px;

transform: skew(20deg, 25deg);

-ms-transform: skew(20deg, 25deg); /* IE 9 */

-webkit-transform: skew(20deg, 25deg); /* Safari si Chrome */

-o-transform: skew(20deg, 25deg); /* Opera */

-moz-transform: skew(20deg, 25deg); /* Firefox */

}

</style>

Demo:

Curs css

• Cele 4 metode de transformare pot fi utilizate si intr-o singura definitie transform, separate prin spatiu.
– Sintaxa:

transform: translate(X, Y) rotate(grade) scale(Lungime, Inaltime) skew(Xdeg, Ydeg);

– Puteti adauga doar acele metode pe care doriti sa le folositi in transformare.

Exemplu, muta elementul cu 50 pixeli de la stanga si 25 pixeli din partea de sus, il roteste cu 20 grade in sens invers orelor de ceas, transforma lungimea de 2 ori cea originala si inaltimea 1.5 ori, distorsioneaza elementul cu 15 grade pe orizontala si 20 grade pe verticala.

#idv5 {

width:90px;

height:90px;

background:#00da01;

font-size:17px;

transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg);

-ms-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* IE 9 */

-webkit-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Safari si Chrome */

-o-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Opera */

-moz-transform: translate(50px, 25px) rotate(-20deg) scale(2, 1.5) skew(15deg, 20deg); /* Firefox */

}

</style>

<div id=”idv5″>Continut oarecare…</div>

Demo:

Continut oarecare…

CSS3 transition

CSS3 transition poate fi utilizat pentru a anima proprietatile CSS, adaugand un efect de animatie cand se modifica proprietatile CSS ale unui element HTML, schimband gradual de la un stil la altut.
CSS3 transition are 4 componente:

transition-property – Specifica numele proprietatii (sau proprietatilor) la care transition trebuie aplicat (precum: width, color, font-size, etc.).
transition-duration – Specifica durata tranzitiei (animatiei), in sesunde (s), milisecunde (ms), (implicit 0).
transition-timing-function – Defineste tipul vitezei efectului in timpul transformarii:
ease (implicit), linear, ease-in, ease-out, ease-in-out
transition-delay – Defineste timpul de asteptare pana cand incepe efectul „transition” (implicit 0)

Pentru a folosi CSS3 transition, trebuie specificate aceste doua lucruri:
1. Proprietatea CSS la care se aplica efectul ( transition-property ).
2. Durata efectului ( transition-duration ).
– Ultimele doua componente ( transition-timing-function si transition-delay ) sunt optionale.
– Internet Explorer recunoaste „CSS3 transition” incepand cu IE 10.

Exemplu. Cand mouse-ul e deasupra unui anumit Div, se schimba gradual lungimea.

#iddv {

width:80px;

height:80px;

background:#b8b9fe;

font-size:17px;

transition-property: width;

transition-duration: 1.4s;

/* Firefox 4 */

-moz-transition-property: width;

-moz-transition-duration: 1.4s;

/* Safari si Chrome */

-webkit-transition-property: width;

-webkit-transition-duration: 1.4s;

/* Opera */

-o-transition-property: background-color, color;

-o-transition-duration: 1.4s;

}

#iddv:hover {

width:200px;

}

</style>

<div id=”iddv”>Pozitionati mouse-ul pe acest patrat.</div>

Demo (Cand cursorul mouse-ului iese din zona elementului, revine gradual la stilul initial):

Pozitionati mouse-ul pe acest patrat.

Proprietatea transition prescurtata

Se pot adauga toate cele 4 componente intr-o singura proprietate transition.
Sintaxa:

transition: transition-property transition-duration transition-timing-function transition-delay;

Exemplu: Schimba gradual „font-size” (in 0.4 secunde, cu viteza „ease-out”) cand mouse-ul e deasupra unui element cu class=”clse”.

.clse {

width:150px;

font-size:13px;

transition: font-size 0.4s ease-out;

-moz-transition: font-size 0.4s ease-out; /* Firefox 4 */

-webkit-transition: font-size 0.4s ease-out; /* Safari si Chrome */

-o-transition: font-size 0.4s ease-out; /* Opera */

}

.clse:hover {

font-size: 16px;

}

</style>

<ul>

<li class=”clse”><a href=”http://Curs css/” title=”Cursuri Programare Web”>Cursuri Programare Web</a></li>

</ul>

• Se pot adauga mai multe proprietati pt efect „transition” intr-o singura definitie, separate prin virgula.
Exemplu. Adaugare efect la: background, opacity si transform:

.dv1 {

width:115px;

height:100px;

position:relative;

font-size:17px;

text-align:center;

padding-top:18px;

}

.clsdv {

width:120px;

height:100px;

position:absolute;

top:0;

left:0;

background:#b8b9fe;

transition: background 1.3s, opacity 1.8s, transform 1.4s;

-moz-transition: background 1.3s, opacity 1.8s, -moz-transform 1.4s; /* Firefox 4 */

-webkit-transition: background 1.3s, opacity 1.8s, -webkit-transform 1.4s; /* Safari si Chrome */

-o-transition: background 1.3s, opacity 1.8s, -o-transform 1.4s; /* Opera */

}

.clsdv:hover {

background: #00da01;

filter:alpha(opacity=50); /* pt IE */

opacity:0.5;

transform:rotate(180deg);

-moz-transform:rotate(180deg); /* Firefox 4 */

-webkit-transform:rotate(180deg); /* Safari si Chrome */

-o-transform:rotate(180deg); /* Opera */

}

</style>

Puneti mouse-ul deasupra acestui dreptunghi.

Text oarecare, ascuns

</div>

Demo:

Puneti mouse-ul deasupra acestui dreptunghi.

Text oarecare, ascuns

Proprietati CSS ce pot fi animate

Lista cu proprietati CSS care pot fi utilizate in transition:

– Proprietati pt text: color, font-size, font-weight, letter-spacing, line-height, text-indent, text-shadow, vertical-align, word-spacing.
– Proprietati pt elemente tip bloc: background, background-color, background-image, background-position, border-left-color etc., border-spacing, border-left-width etc., clip, crop, height, min-height, max-height, margin-left etc., opacity, outline-width, outline-offset, outline-color, padding-left etc., width, min-width, max-width.
– Proprietati de pozitionare: bottom, top, left, right, grid-, visibility, z-index, zoom .

Forma Trapez cu CSS

Forma trapez cu un tag DIV si proprietati CSS. Forma de trapez e creaata folosind bordurile.
Cod:

#trapezoid {

height: 0;

width: 120px;

border-bottom: 80px solid #05ed08;

border-left: 45px solid transparent;

border-right: 45px solid transparent;

padding: 0 8px 0 0;

}

</style>

www.CursCSS.net</div>

Rezultat:

Curs CSS:
www.CursCSS.net

Trapez dreptunghic

Cod:

#rtrapezoid {

height: 0;

width: 120px;

border-bottom: 100px solid #05ed08;

border-left: 15px solid #05ed08;

border-right: 45px solid transparent;

padding-right: 20px;

}

</style>

Curs css</div>

Rezultat:

Curs CSS:
Curs css

Forma Romb cu CSS

Forma de romb cu un tag DIV si proprietati CSS. Forma de romb e creaata folosind bordurile.
Cod:

#rhombus {

position: relative;

top: -60px;

width: 0;

height: 0;

border: 60px solid transparent;

border-bottom: 75px solid #05ed08;

}

/* Zona de jos */

#rhombus:after {

position: absolute;

left: -60px;

top: 75px;

width: 0;

height: 0;

border: 60px solid transparent;

border-top: 75px solid #05ed08;

content: ”;

}

/* Continut in romb */

#rhombus div {

position: relative;

margin: 63px auto 0 -41px;

font-weight: bold;

z-index: 888;

}

</style>

<div id=”rhombus”><div>CursCSS</div></div>

Rezultat:

CursCSS

Triunghiuri cu CSS

Mai multe triunghiuri cu CSS, create doar cu un tag DIV si cateva proprietati CSS.

Triunghi in sus

Cod:

#triangleup {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid blue;

}

</style>

Rezultat:

Sus

Triunghi in jos

Cod:

#triangledown {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid blue;

}

/* Continut in triunghi */

#triangledown div{ margin:-85px 0 0 -20px; }

</style>

Rezultat:

JOS

Triunghi stanga

Cod:

#triangleleft {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-right: 100px solid blue;

}

/* Continut in triunghi */

#triangleleft div{ margin:-10px 0 0 25px; }

</style>

<div id=”triangleleft”><div>Stanga</div></div>

Rezultat:

Stanga

Triunghi dreapta

Cod:

#triangleright {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 100px solid blue;

}

/* Continut in triunghi */

#triangleright div{ margin:-10px 0 0 -85px; }

</style>

<div id=”triangleright”><div>Dreapta</div></div>

Rezultat:

Dreapta

Triunghi stanga-sus

Cod:

#triangletopleft {

width: 0;

height: 0;

border-top: 100px solid blue;

border-right: 50px solid transparent;

}

</style>

Rezultat:

…

Triunghi dreapta-sus

Cod:

#triangletopright {

width: 0;

height: 0;

border-top: 100px solid blue;

border-left: 50px solid transparent;

}

</style>

Rezultat:

…

Triunghi jos-stanga

Cod:

#trianglebottomleft {

width: 0;

height: 0;

border-bottom: 100px solid blue;

border-right: 50px solid transparent;

}

</style>

Rezultat:

…

Triunghi jos-dreapta

Cod:

#trianglebottomright {

width: 0;

height: 0;

border-bottom: 100px solid blue;

border-left: 50px solid transparent;

}

</style>

Rezultat:

…

Cerc si Oval cu CSS

Cerc si Oval create cu un singur tag HTML (DIV) si cateva proprietati CSS.

Cerc

#circle {

width: 180px;

height: 180px;

background: #abcdef;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

padding:15px;

}

</style>

<div id=”circle”><br/><br/>Cursuri online:<br/>CursCSS.net</div>

Rezultat:

Cursuri online:
CursCSS.net

Forma Ovala

– Raza trebuie sa fie jumatate din lungime si inaltime, la care se adauga valoarea padding-ului (in acest exemplu: (240 / 2) + 15 = 135, si (120 / 2) + 15 = 75).

#oval {

width: 240px;

height: 120px;

background: #89f899;

-moz-border-radius: 135px / 75px;

-webkit-border-radius: 135px / 75px;

border-radius: 135px / 75px;padding:15px;

}

</style>

<div id=”oval”><br/>Cursuri Programare Web:<br/>http://CoursesWeb.net</div>

Rezultat:

Cursuri Programare Web:
http://CoursesWeb.net

Poligoane cu CSS

Cateva forme de poligoane, create doar cu un singur tag DIV si proprietati CSS.

Paralelogram

– Continutul din paralelogram e distorsionat in functie de forma paralelogramului.
Cod:

#parallelogram{

margin:5px 0 5px 20px;

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: #abcdef;

}

</style>

<div id=”parallelogram”>Cursuri Jocuri Anime<br/>www.CursCSS.net</div>

Rezultat:

Cursuri Jocuri Anime
www.CursCSS.net

Pentagon

Cod:

#pentagon {

margin:70px 0 5px 20px;

position: relative;

width: 110px;

border-width: 100px 36px 0;

border-style: solid;

border-color: #abefcd transparent;

}

#pentagon:before {

content: „”;

position: absolute;

height: 0;

width: 0;

top: -170px;

left: -36px;

border-width: 0 90px 70px;

border-style: solid;

border-color: transparent transparent #abefcd;

}

/* Content in pentagon */

#pentagon div{

position:absolute;

top:-50px;

}

</style>

<div id=”pentagon”><div>CursCSS.net</div></div>

Rezultat:

CursCSS.net

Hexagon

Cod:

#hexagon {

width: 100px;

height: 55px;

background: #cdabef;

position: relative;

}

#hexagon:before {

content: „”;

position: absolute;

top: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid #cdabef;

}

#hexagon:after {

content: „”;

position: absolute;

bottom: -25px; left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid #cdabef;

}

</style>

<div id=”hexagon”>CursCSS.net</div>

Rezultat:

CursCSS.net

Octogon

Cod:

#octagon {

width: 100px;

height: 100px;

background: #a0e8a1;

position: relative;

}

#octagon:before {

content: „”;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid #a0e8a1;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

#octagon:after {

content: „”;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid #a0e8a1;

border-left: 29px solid #eee;

border-right: 29px solid #eee;

width: 42px;

height: 0;

}

</style>

Rezultat:

Forme Stea cu CSS

Forme Stea, 5, 6, 8 si 12 varfuri, create doar cu un tag DIV si proprietati CSS.

Stea 5 varfuri

Cod:

/* http://css-tricks.com/examples/ShapesOfCSS/ */

#star5 {

margin: 50px 0;

position: relative;

display: block;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #05ed08;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star5:before {

border-bottom: 80px solid #05ed08;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content:””;

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star5:after {

position: absolute;

display: block;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid #05ed08;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg); content:””;

}

</style>

Rezultat:

Stea 6 varfuri

Cod:

#star6 {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #05ed08;

position: relative;

}

#star6:after {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid #05ed08;

position: absolute;

content: „”;

top: 30px;

left: -50px;

}

</style>

Rezultat:

Stea 8 varfuri

Cod:

#star8 {

background: blue; width: 80px;

height: 80px;

position: relative;

-webkit-transform: rotate(20deg);

-moz-transform: rotate(20deg);

-ms-transform: rotate(20deg);

-o-transform: rotate(20eg);

}

#star8:before {

content: „”;

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: blue;

-webkit-transform: rotate(135deg);

-moz-transform: rotate(135deg);

-ms-transform: rotate(135deg);

-o-transform: rotate(135deg);

}

</style>

Rezultat:

Stea 12 varfuri

Cod:

#star12 {

background: blue;

width: 80px;

height: 80px;

position: relative;

}

#star12:before, #star12:after {

content: „”;

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: blue;

}

#star12:before {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

#star12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

}

</style>

Rezultat:

Butoane cu CSS

Butoane cu CSS, create numai cu proprietati CSS / CSS3, fara a folosi fisier cu imagine.

Buton Simplu

.buttons {

display: inline-block;

background-color: #ddd;

border: 1px solid #444;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-khtml-border-radius: 8px;

padding: 6px 10px;

font-weight: bold;

}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {

text-decoration: none;

color: #00f;

}

.buttons:hover {

background-color: #BBB;

color: yellow;

}

.buttons:active { background: #CCC; }

</style>

Rezultat:

Curs cssCurs CSS

Buton Pulse

.buttons {

display: inline-block;

background-color: #ddd;

border: 1px solid #444;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

-khtml-border-radius: 8px;

padding: 6px 10px;

font-weight: bold;

}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {

text-decoration: none;

color: #00f;

-webkit-animation: „pulse” 1s ease-in-out 0 infinite alternate;

-moz-animation: „pulse” 1s ease-in-out 0 infinite alternate;

animation: „pulse” 1s ease-in-out 0 infinite alternate;

box-shadow: 0px 0px 4px #00ACE6;

}

@-webkit-keyframes pulse {

0% { box-shadow: 0px 0px 4px #00ACE6; }

100% { box-shadow: 0px 0px 12px #00ACE6; }

}

@-moz-keyframes pulse {

0% { box-shadow: 0px 0px 4px #00ACE6; }

100% { box-shadow: 0px 0px 12px #00ACE6; }

}

@keyframes pulse {

0% { box-shadow: 0px 0px 4px #00ACE6; }

100% { box-shadow: 0px 0px 12px #00ACE6; }

}

.buttons:hover {

background-color: #BBB;

‘box-shadow: 0px 0px 4px #0001E6;’

color: yellow;

}

.buttons:active { background: #CCC; }

</style>

Rezultat:

Curs css Curs Ajax

Buton 3D-Umbra

/* http://www.cursCSS.net/curs_css/ */

.buttons {

-moz-text-blink: none;

-moz-text-decoration-color: -moz-use-text-color;

-moz-text-decoration-line: none;

-moz-text-decoration-style: solid;

background-color: #FEFEFE;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

box-shadow: 2px 3px 4px #6789DA inset;

color: red;

margin-bottom: 1px;

margin-left: 5px;

margin-right: 5px;

margin-top: 1px;

padding-bottom: 2px;

padding-left: 8px;

padding-right: 8px;

padding-top: 2px;

}

.buttons:hover {

-moz-text-blink: none;

-moz-text-decoration-color: -moz-use-text-color;

-moz-text-decoration-line: underline;

-moz-text-decoration-style: solid;

background-attachment: scroll;

background-clip: border-box;

background-color: yellow;

background-origin: padding-box;

background-position: 0 0;

background-repeat: repeat;

background-size: auto auto;

box-shadow: 2px 3px 4px #A0A0DA;

color: #0408FE;

}

</style>

Rezultat:

Curs cssCurs CSS

Buton Rotunjit Stanga

.buttons {

display: inline-block;

background-color: #ddd;

border: 1px solid #444;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

padding: 6px 10px;

font-weight: bold;

}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {

background-color: #007EBD;

border-color: #0000CC;

color: #FFF;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

margin-right: 0;

border-right-width: 0;

}

.buttons:hover {

background-color: #08aded;

text-decoration: none;

color: #ff1;

}

.buttons:active { background: #007EBD; }

</style>

Rezultat:

Curs HTML Curs CSS

Buton Rotunjit Dreapta

.buttons {

display: inline-block;

background-color: #ddd;

border: 1px solid #444;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

padding: 6px 10px;

font-weight: bold;

}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {

background-color: #8cc99e;

border-color: #0000CC;

color: #FFF;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

margin-left: 0;

border-left-width: 0;

}

.buttons:hover {

background-color: #08A009;

text-decoration: none;

color: #ff1;

}

.buttons:active { background: #08A009; }

</style>

Rezultat:

Curs HTML Curs CSS

Buton Inima-Sageata

.buttons {

display: inline-block;

background-color: #ddd;

border: 1px solid #444;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

padding: 6px 10px;

font-weight: bold;

}

.buttons:link, .buttons:visited, .buttons:hover, .buttons:active {

background-color: #007EBD;

border-color: #0000CC;

color: #FFF;

border-top-right-radius: 0;

border-bottom-right-radius: 0;

margin-right: 0;

border-right-width: 0;

}

.buttons:hover {

background-color: #08aded;

text-decoration: none;

color: #ff1;

}

.buttons:active { background: #5CB82E; }

.buttons:after {

content: „\2192”;

margin-left: 5px;

}

.buttons:before {

content: „\2665”;

margin-right: 5px;

}

</style>

<a href=”http://www.cursCSS.net/” title=”Cursuri Jocuri Anime” class=”buttons”>www.CursCSS.net</a>

<a href=”http://Curs css/javascript/” title=”JavaScript Courses” class=”buttons”>JavaScript Course</a>

Rezultat:

www.CursCSS.net JavaScript Course

Diamant cu CSS

Doua forme tip diamant, create simplu cu un tag DIV si cateva proprietati CSS.
Cod:

#diamond {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom: 20px solid #05ed08;

position: relative;

top: -50px;

}

#diamond:after {

content: „”;

position: absolute;

left: -50px;

top: 20px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top: 70px solid #05ed08;

}

</style>

Rezultat:

Diamant 2

Cod:

#diamond {

border-style: solid;

border-color: transparent transparent #0809fe transparent;

border-width: 0 25px 25px 25px;

height: 0;

width: 50px;

position: relative;

margin: 10px 0;

}

#diamond:after {

content: „”;

position: absolute;

top: 25px;

left: -25px;

width: 0;

height: 0;

border-style: solid;

border-color: #0809fe transparent transparent transparent;

border-width: 70px 50px 0 50px;

}

</style>

Rezultat:

Ecran TV cu CSS

Forma ecran TV creat doar cu un tag DIV si cateva proprietati CSS.
Cod:

#tvscreen {

position: relative;

width: 200px;

height: 150px;

margin: 20px 10px;

background: #0809fe;

border-radius: 50% / 10%;

color: white;

text-align: center;

text-indent: .1em;

}

#tvscreen:before {

content: „”;

position: absolute;

top: 10%;

bottom: 10%;

right: -5%;

left: -5%;

background: inherit;

border-radius: 5% / 50%;

}

</style>

<div id=”tvscreen”>CursCSS.net</div>

Rezultat:

CursCSS.net

Forma tip Clepsidra cu CSS

Forma tip Clepsidra creat cu un tag DIV si cateva proprietati CSS.
Cod:

#clepsydra {

height: 0;

width: 120px;

border-bottom: 120px solid #05ed08;

border-top: 120px solid #05ed08;

border-left: 65px solid transparent;

border-right: 65px solid transparent;

border-radius: 25%;

-moz-border-radius: 25%;

-webkit-border-radius: 25%;

-khtml-border-radius: 25%;

}

</style>

<div id=”clepsydra”>Cursuri Online:<br/>cursCSS.net</div>

Rezultat:

Cursuri Online:
cursCSS.net

Forma de Ou cu CSS

Forma de Ou creat cu un tag DIV si cateva proprietati CSS (fara fisier cu imagine).
Cod:

/* http://css-tricks.com/examples/ShapesOfCSS/ */

#egg {

display:block;

width: 180px;

height: 240px;

background-color: #09fb09;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

/* Continut in egg */

#eggsp div {

position:absolute;

padding:89px 2px 2px 9px;

}

</style>

<div id=”egg”><div>Cursuri Online<br/>www.cursCSS.net</div></div></div>

Rezultat:

Cursuri Online
www.cursCSS.net

Yin-Yang cu CSS

Cerc Yin-Yang creat cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:

#yinyang {

width: 100px; height: 50px;

background: #fff;

border-color: #000;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

#yinyang:before {

content: „”;

position: absolute;

top: 50%;

left: 0;

background: #fff;

border: 18px solid #000;

border-radius: 100%;

width: 14px;

height: 14px;

}

#yinyang:after {

content: „”;

position: absolute;

top: 50%;

left: 50%;

background: #000;

border: 18px solid #fff;

border-radius:100%;

width: 14px;

height: 14px;

}

</style>

Rezultat:

Forma Inima cu CSS

Forma de Inima creata cu un tag DIV si proprietati CSS (fara fisier cu imagine).
Cod:

#heartsp {

position: relative;

width: 100px;

height: 90px;

}

#heartsp:before, #heartsp:after {

position: absolute;

content: „”;

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heartsp:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

</style>

Rezultat:

Alte forme complexe cu DIV si CSS

Cateva forme complexe create doar cu un singur DIV si proprietati CSS, fara a folosi fisier cu imagine.

Forma 1

Cod:

/* http://www.cursCSS.net/curs_css/ */

#shp1 {

height: 0;

width: 170px;

background: #b1b0fb;

position: relative;

border-bottom: 110px solid #08fb09;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

padding:0 3px;

}

#shp1:before {

content: „”;

line-height: 0;

font-size: 0;

width: 0;

height: 0;

border-bottom: 28px solid #b1b0fb;

border-left: 14px solid transparent;

position: absolute;

bottom: 0;

left: -14px;

}

#shp1:after {

content: „”;

line-height: 0;

font-size: 0;

width: 0;

height: 0;

border-bottom: 28px solid #b1b0fb;

border-right: 14px solid transparent;

position: absolute;

bottom: 0;

right: -14px;

}

</style>

<div id=”shp1″><br/>Cursuri Online:<br/>http://www.cursCSS.net/</div>

Rezultat:

Cursuri Online:
http://www.cursCSS.net

Prezentare Mesaj

Cod:

/* http://css-tricks.com/examples/ShapesOfCSS/ */

#talkbubble {

margin: 10px 25px;

width: 200px;

height: 89px;

background: #05fb08;

position: relative;

-moz-border-radius: 14px;

-webkit-border-radius:

14px; border-radius: 14px;

padding: 2px 5px;

}

#talkbubble:before {

content:””;

position: absolute;

right: 100%;

top: 28px;

width: 0;

height: 0;

border-top: 8px solid transparent;

border-right: 26px solid #05fb08;

border-bottom: 13px solid transparent;

}

</style>

<div id=”talkbubble”><br/>Cursuri Online:<br/>http://www.cursCSS.net/</div>

Rezultat:

Cursuri Online:
http://www.cursCSS.net

Insigna Panglica

Cod:

#badgeribbon {

position: relative;

background: #08fb09;

height: 100px;

width: 100px;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

padding: 2px;

text-align: center;

}

#badgeribbon:before, #badgeribbon:after {

content: „”;

position: absolute;

margin-top: 8px;

border-bottom: 70px solid #01fb02;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

top: 70px; left: -5px;

-webkit-transform: rotate(-140deg);

-moz-transform: rotate(-140deg);

-ms-transform: rotate(-140deg);

-o-transform: rotate(-140deg);

}

#badgeribbon:after {

left: auto;

right: -5px;

-webkit-transform: rotate(140deg);

-moz-transform: rotate(140deg);

-ms-transform: rotate(140deg);

-o-transform: rotate(140deg);

}

</style>

<div id=”badgeribbon”><br/>CursCSS</div>

Rezultat:

CursCSS

Infinit

Cod:

#infinity {

position: relative;

width: 212px;

height: 100px;

}

#infinity:before, #infinity:after {

content: „”;

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid blue;

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0;

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

</style>

Rezultat:

Blazon

Cod:

#chevron {

position: relative;

text-align: center;

padding: 12px;

margin: 6px auto;

height: 60px;

width: 200px;

}

#chevron:before {

content: „”;

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 51%;

background: #efabcd;

-webkit-transform: skew(0deg, 6deg);

-moz-transform: skew(0deg, 6deg);

-ms-transform: skew(0deg, 6deg);

-o-transform: skew(0deg, 6deg);

transform: skew(0deg, 6deg);

}

#chevron:after {

content: „”;

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 50%;

background: #efabcd;

-webkit-transform: skew(0deg, -6deg);

-moz-transform: skew(0deg, -6deg);

-ms-transform: skew(0deg, -6deg);

-o-transform: skew(0deg, -6deg);

transform: skew(0deg, -6deg);

}

</style>

Rezultat:

CSS polygon

Vapor

Cod:

#ship {

margin:30px 0 5px 20px;

position: relative;

width: 200px;

border-width: 50px 28px 0;

border-style: solid;

border-color: #ccddef transparent;

font-weight: bold;

}

#ship:before {

content: „”;

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -15px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent #bbcdef;

}

/* Content */

#ship div{

position:absolute;

top:-30px;

}

</style>

Demo:

Curs css

Bottom of Form

Top of Form

Bottom of Form

CSS3 – Background proprietati noi 6

jQuery parent, children si nth-child() 21

Inregistrare evenimente la elemente incluse cu jQuery ajax 20

Schimba fisierul CSS cu jQuery 19

Drag si Drop cu jQuery UI 18

jQuery UI draggable – Muta /Trage elemente 17

Validare si trimitere formular 16

Lasă un răspuns Anulează răspunsul

Similar Posts

Lasă un răspuns Anulează răspunsul