Mesaj de notificare CSS3/JQuery

Pentru astazi mi-am propus sa folosim functionalitatea CSS3 si jQuery pentru a afisa un mesaj de notificare pe o pagina web.

Acesta este mesajul care se afiseaza, fara folosirea 
unor imagini suplimentare pentru background. Doar CSS3.

 

Mesajul dvs. a fost postat!

x

Nota! Dintr-un motiv necunoscut Blogger nu accepta toate instructiunile CSS3 si prin urmare mesajul nu este afisat corect. Dar exemplul arata mecanismul de functionare al mesajului de notificare.

Primul şi cel mai important lucru care trebuie să-l facem atunci când încercăm să afişăm un mesaj de notificare atractiv, este sa alegem culorile şi pictogramele.
Astfel avem:

Galben-verzui = Succes
Roşu deschis = Eroare
Galben pal = Alertă
Sky Blue = Altă informaţie

Pasul 1 : HTML
Să începem prin introducerea unui simplu cod HTML în pagină:

<pre>

<div class="green">Mesajul dvs. a fost postat!

<div class="cross">x</div>

</div>

</pre>

Aceasta este structura de bază a unui mesaj de notificare, fără CSS şi Javascript. În acest cod este utilizată clasa green, pentru a seta fundalul notificarii pe galben-verzui. Cealaltă clasă, cross, este folosită pentru a închide caseta de notificare.


Pasul 2 : CSS

.green{

background:#e8f1c4 url(images/success.png) no-repeat left center;

background:url(images/success.png) no-repeat left center, -moz-linear-gradient(top, #eff7dc 5%, #e4efb6 6%, #e8f1c4 21%, #eaf7ca 50%, #e8f1c4 93%, #d6e0b8 100%); /* FF3.6+ */

background:url(images/success.png) no-repeat left center, -webkit-gradient(linear, left top, left bottom, color-stop(5%,#eff7dc), color-stop(6%,#e4efb6), color-stop(21%,#e8f1c4), color-stop(50%,#eaf7ca), color-stop(93%,#e8f1c4), color-stop(100%,#d6e0b8)); /* Chrome,Safari4+ */

background:url(images/success.png) no-repeat left center, -webkit-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Chrome10+,Safari5.1+ */

background:url(images/success.png) no-repeat left center, -o-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Opera11.10+ */

background:url(images/success.png) no-repeat left center, -ms-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* IE10+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7dc', endColorstr='#d6e0b8',GradientType=0 ); /* IE6-9 */

background:url(images/success.png) no-repeat left center, linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* W3C */

border:1px solid #cad883;

padding:10px 0px 10px 30px;

margin:10px 0;

color:#4e871c;

font-weight:700;

font-family:Verdana, Geneva, sans-serif;

font-size:11px;

width:400px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

.cross{

float:right;

margin:5px 5px 0 0;

font-size:12px;

line-height:10px;

font-variant:small-caps;

font-weight:bolder;

cursor:pointer;

}

.cross:hover{

color:#000;

}

Acesta este codul care creeaza întregul stil pentru caseta de notificare. CCS3 este destul de puternic pentru a creea fundaluri gradient, borduri cu colturi rotunjite, umbre. Acestea sunt principalele "ingrediente" pentru o caseta care sa atraga atentia.


Sa întelegem codul
Începem cu clasa green. Alaturi de o imagine am inclus un gradient în CSS3. Datorita functionalitatii CSS3, nu avem nevoie de o imagine pentru a creea un astfel de tip de fundal (ca în versiunile precedente). În acest mod, am redus utilizarea nefolositoare a marcatorilor (tag-urilor) img si div.
Un alt lucru important de remarcat este folosirea mai multor gradiente în loc de unul singur, cu doua culori.
Acum ca am stilizat containerul în care va sta mesajul nostru, trebuie sa oferim si un buton pentru a închide notificarea. În acest scop am folosit caracterul "x" (ASCII 088).

Atentie! În functie de imaginea folosita ca si pictograma de afisat, poate fi necesara ajustarea acesteia în caseta. Acest lucru se modifica pe liniile de tipul:
background:url(images/success.png) no-repeat left center

În loc de valoarea left si center atribuim o valoare numerica potrivita pâna obtinem rezultatul dorit.

Pasul 3 : JQuery
Pentru a ascunde mesajele de notificare vom folosi JQuery, desi acest efect poate fi obtinut si prin tranzitiile CSS3. În primul rând trebuie sa declaram biblioteca JQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Este foarte important sa specificam acest lucru, altfel functiile noastre nu vor merge.

$(document).ready(function(){

    $(".cross").click(function(){

    $(this).parent("div").fadeOut('slow');

    })

});

O funcţie simplă care este apelată când utilizatorul dă click pe elementul ce are clasa cross şi ascunde caseta de notificare.

În mod similar, prin CSS putem schimba culorile casetelor de notificare.