• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Vasile Ruscior

Vasile Ruscior

Totul, mai ușor

  • Confidențialitate
  • Contact

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

Scris pe 26 noiembrie 2014 3 comentarii

*

*

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]

Partajează asta:

  • Dă clic pentru a partaja pe Twitter(Se deschide într-o fereastră nouă)
  • Dă clic pentru a partaja pe Facebook(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe Telegram(Se deschide într-o fereastră nouă)
  • Dă clic pentru partajare pe WhatsApp(Se deschide într-o fereastră nouă)

Similare

Din categoria: HTML, CSS, PHP si C++ Etichete: css, html

Abonează-te la blog prin email

Introdu adresa de email pentru a te abona la acest blog și vei primi câte un email de fiecare dată când scriu un nou articol.

Reader Interactions

Comentarii

  1. Buculesei blog a zis

    28 noiembrie 2014 la ora 20:18

    Desi eu stiam astea, sunt foarte bune pentru incepatori 😉

    Răspunde
  2. claudiu a zis

    29 noiembrie 2014 la ora 19:17

    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.

    Răspunde
    • Vasile Ruscior a zis

      29 noiembrie 2014 la ora 19:44

      Nu. Am citit despre el pe blogul tău chiar în ziua alegerilor, când nu-mi funcţiona un Javascript din cauză că nu aveam jquery.

Lasă un răspuns Anulează răspunsul

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

Bara principală

Modul întunecat

Blogroll și recomandări

  • Around
  • Stiri Timisoara
  • Breev
  • Blog Star
  • Grig
  • IIRON
  • Stiri de ultima ora
  • Ciurcaș Dan
  • Francisc Vasile
  • Fii Modern

Footer

Au avut ceva de spus

  • Grig la Cum am economisit astăzi 6 lei
  • Vasile Ruscior la Cum am economisit astăzi 6 lei
  • Stefan la Cum am economisit astăzi 6 lei
  • Grig la Sameday EasyBox văzut de AI

Ultimele articole de pe blog

  • Cum am economisit astăzi 6 lei
  • Am cumpărat online de la Mega Image
  • Acțiuni ce se pot realiza cu o mașină de rindeluire
  • Sameday EasyBox văzut de AI

Cauți altceva? Caută aici:

Confidențialitate și cookie-uri: acest site folosește cookie-uri. Dacă continui să folosești acest site web, ești de acord cu utilizarea lor.
Pentru a afla mai multe, inclusiv cum să controlezi cookie-urile, uită-te aici: Politică cookie-uri

© 2012–2023 Vasile Ruscior 🤳 Poți ajunge ușor pe acest blog accesând usor.ro

Sus, Deluță