Schimbarea imaginilor pentru rezistenta parola

Scris de Luky Vin Feb 25, 2011 8:37 pm

Schimbarea imaginilor pentru rezistenta parola

Codul CSS de mai jos ajuta la personalizarea a celor trei imagini care ne arata cat de puternica e parola atunci cand ne inregistram pe un forum. Aceste imagini semnifica trei lucruri priviind parola : cat e de slaba, buna sau rea. Dat fiind faptul ca de la un timp cam multa lume se ocupa cu spargerea parolelor a diferitor conturi v-as sfatui sa aveti o parola buna, una foarte buna.

Demo :
Inainte

Dupa

Pentru a pune in aplicatie acest lucru o sa lucram doar din CSS.

Schimbarea imaginilor pentru rezistenta parola Go-jum10

Panou de administrare

Schimbarea imaginilor pentru rezistenta parola Arrow10

Afisare

Schimbarea imaginilor pentru rezistenta parola Images_couleurs

Imagini si culori

Culori

Foaie de stil CSS si copiati codul de mai jos:

Cod:: .pwd_img { padding : 4px 0 3px 0; width : 150px; height : 14px; line-height : 14px; font-size : 11px; font-weight : bold; text-align : center; color : #000000; display : none; } #pwd_good { background:url('linkimagine1'); } #pwd_middle { background:url('linkimagine2'); } #pwd_bad { background:url('linkimagine3'); }

Explicatie si ghid de folosire :

width : 150px; - latimea imaginii;
height : 14px; - inaltimea imaginii;
line-height : 14px; - inaltimea linii in care se afiseaza textul, daca scrieti un numar mai mare textul coboara iar un numar mai mic textul urca;
font-size : 11px; - marimea fontului;
font-weight : bold; - stilul fontului ( boldat, italic, subliniat etc. );
text-align : center; - pozitia textului ( dreapta, centrat, stanga );
color : #000000; - culoarea textului.

#pwd_bad - Imaginea pentru parola slaba, #pwd_middle a doua imagine parola normala si #pwd_good a treia imagine parola foarte buna.