Cum „rotunjeşti” o imagine + alte efecte (CSS)

*

*

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML.

Imaginile, ca orice alt element HTML, pot fi şi ele „stilizate”. De la dimensiuni până la transparenţă, modul în care sunt afişate imaginile poate fi modificat utilizând CSS.
Să zicem că aveţi o imagine inserată în body-ul:
<img src="imagine.jpg" alt="Imagine stilizată" class="imagine" />

Această imagine poate fi modificată editând fişierul cu extensia css, fişier ce conţine codurile de tip clasă + atribute ce „stilizează” celelalte elemente din pagină.
Concret, poţi adăuga următorul cod în CSS, lăsând numai atributele ce te interesează:
[css].imagine {
max-width: 400px; //lăţime maximă
max-height: 200px; //înălţime maximă
min-width: 200px; //lăţime minimă;
display: block !important; //e important ca imaginea să fie afişată
border: 1px solid red; //bordură roşie de un pixel în jurul imaginii
border-radius: 50%; //imaginea va fi rotunjită în stilul avatarelor Google+
border-radius: 3px; //imaginea va fi rotunjită doar pe colţuri
opacity: 0.4; //imaginea va avea 60% transparenţă (100% – 40%)
filter: alpha(opacity=40); //acelaşi lucru, dar pentru Internet Explorer
}
/* Atunci când mouse-ul este deasupra imaginii. Modul în care este afişată imaginea: */
.imagine:hover {
opacity: 1.0; //imaginea nu mai este transparent
filter: alpha(opacity=100); //pentru Internet Explorer
max-width: 50%; //lăţimea imaginii va fi maxim lăţimea ecranului înjumătăţită
}[/css]

Legătură scurtă: https://ww4.ro/2189

3 comentarii la "Cum „rotunjeşti” o imagine + alte efecte (CSS)"

  1. Desi eu stiam astea, sunt foarte bune pentru incepatori 😉

  2. Apropos de CSS, ai incercat si bootstrap? (este un framework css facut de twiter).
    Modul in care ai construit imaginea aici, cred ca este si responsive.

Adaugă un comentariu

Scrie comentariul tău în căsuța de mai jos. Publicând comentarii pe acest blog, accepți politica de confidențialitate.

Completează numele tău. Adresa de email și site-ul web sunt câmpuri opționale și le poți lăsa necompletate.