Firma de web design
Creare si promovare pagini web
Telefon
0730 518 614
Email:
office@2webdesign.ro

Tutorial Efecte CSS3: Caseta Web Glass Style (efect de sticla)

Recomanda articolul

Astăzi vom crea o casetă “de sticlă” folosind doar CSS 3. Noua propunere pentru implementarea regulilor CSS aduce foarte multe îmbunatăţiri faţă de vechea versiune. Aceste lucruri permit mai multă adaptabilitate pentru designeri şi în multe cazuri oferă posibilitatea eliminării complete a imaginilor.

Compatibilitatea între browsere continuă să fie o problemă majoră, dar browserele mai importante ca Firefox, Safari sau Opera au implementate reguli proprietare care sunt în mare parte compatibile cu noile standarde.

Partea de HTML folosită la realizarea casetei este elementară. Doar se crează conţinutul pe care îl dorim adăugat în casetă în interiorul unui element de tip block, în cazul de faţă un div.

<div class="box">
<h2>Casetă de sticlă cu CSS 3</h2>
<p>Această casetă “de sticlă” nu conţine nici o imagine pentru stilizare. Aspectul este realizat prin reguli CSS 3, inclusiv pentru realizarea transparentei şi a umbrelor.</p>
<p>Ca un bonus, caseta poate fi mutată dacă se trage de tag-ul header cu mouse-ul. Nu prezintă nici o funcţionalitate, dar aceste tehnici pot fi aplicate în crearea de interfeţe interactive.</p>
<p>Acesta este doar un exemplu a ce se poate realiza prin noile tehnici CSS 3 şi JavaScript, în cazul de faţă jQuery.</p>
</div>

Tag-ul header va fi folosit pentru mutarea casetei cu ajutorul jQuery. Am adăugat tag-ului div o clasă “box” pentru a permite stilizarea acestuia şi pentru a permite adăugarea mai multor casete asemănătoare pe aceeaşi pagină, dacă se doreşte acest lucru.

CSS

Regulile CSS sunt destul de complicate, în mare parte deoarece se doreşte compatibilitatea intre browsere. Pentru început vom da casetei noastre câteva stilizări legate de font, mărimea acestuia şi poziţionarea în pagină. Vom face acelaşi lucru şi cu tag-ul H2 şi paragrafe, pentru a scăpa de lucrurile simple.

div.box {
font-family: Trebuchet MS, Helvetica, sans-serif;
width: 400px;
margin: 20px auto;
padding: 0 10px 10px;
color: #fff;
}
div.box h2{
display: block;
padding: 0 10px;
font-size: 18px;
margin: 0;
background: rgba(255, 255, 255, 0.2);
cursor: move;
}
div.box p{
font-size: 13px;
}

Mai adăugăm casetei un fundal şi o bordură semitransparentă. Acest lucru este realizat prin folosirea proprietăţii rgba. Pentru cei care nu ştiu cum se foloseşte, lucrurile stau destul de simplu: primele trei valori reprezintă valorile culorilor de baza (Red, Green, Blue) şi sunt cuprinse între 0 şi 255. A patra valoare este transparenţa alpha, cuprinsă între 0 şi 1, unde 0 înseamnă complet transparent, iar 1 este opac.

div.box{
background: rgba(0,0,0,0.25);
border: 1px solid rgba(0,0,0,0.5);
}

Pentru a face caseta mai prezentabilă, vom rotunji puţin colţurile. Putem face ca acestea să fie uniforme, dar în cazul de faţă cele de sus vor avea o curbura mai mare decât cele de jos, pentru a crea un aspect mai interesant. Mozilla şi Webkit au diferite implementări proprietare ale acestei reguli, dar sintaxa este identică.

div.box{
border-radius: 10px 10px 2px 2px;
-moz-border-radius: 10px 10px 2px 2px;
-webkit-border-radius: 10px 10px 2px 2px;
}

Ultimul lucru pe care dorim să-l facem este să decorăm caseta cu diferite umbre pentru a imita cât mai bine aspectul uneia din sticlă. Aici lucrurile devin puţin mai complicate. Regula box-shadow permite adăugarea mai multor umbre aceluiaşi element. Pentru aceasta le vom scrie una după alta, despărţite prin virgulă. Mai jos găsiţi şi ce face fiecare dintre ele.

box-shadow:
0 2px 6px rgba(0,0,0,0.5), /* o umbra întunecată de jur împrejur */
inset 0 1px rgba(255,255,255,0.3), /* o dungă fină albă în partea superioară pe interior  */
inset 0 10px rgba(255,255,255,0.2), /* o strălucire albă în partea superioară pe interior */
inset 0 10px 20px rgba(255,255,255,0.25), /* un halou alb interior */
inset 0 -15px 30px rgba(0,0,0,0.3); /* o umbră interioară în partea inferioară */

Aplicarea pentru browserele care suportă aceste proprietăţi se face prin reguli proprietare pentru fiecare: Opera, Mozilla, Safari. Sintaxa este identică, dar până nu se implementează un standard comun, vor trebui declarate individual.

div.box{
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}

Acum am terminat tot ce ţinea de stilizarea casetei noastre, iar rezultatul este destul de reuşit. Dacă dorim să ducem acest lucru mai departe, putem să facem caseta “draggable”, adică să poată fi mutată cu ajutorul mouse-ului.

Pentru asta vom folosi jQuery şi jQuery UI. Nu are rost să scriem o întreagă librărie JavaScript dacă alţii au făcut deja una special dedicată acestui lucru. Vom încărca librăriile de pe Google Code, dar puteţi folosi şi copii ale acestor fişiere salvate local.

Activarea posibilităţii de mutare a unei casete se face foarte simplu prin jQuery UI. Tot ce ne trebuie este o singură funcţie aplicată elementelor cu clasa “box” şi câţiva parametri, dar aceştia sunt opţionali.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<script>
$(function(){
$('div.box').draggable({
cursor: 'move',  // cursorul în timpul tragerii ferestrei
handle: 'h2',  // elementul de care putem trage caseta
stack: '.box'  // dacă sunt mai multe casete, o aduce pe cea curentă în faţă
});
});
</script>

Asta e tot. Vă aşteptăm cu alte articole din domeniul web design-ului în viitorul apropiat.

Share

Avand o experienta de aproape un deceniu in materie de web design si propulsati de o nemarginita pasiune pentru programare va invitam sa ne vizitati situl si sa va bucurati de cele mai interesante articole din domeniu.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *