Ultimele tutoriale de dezvoltare web
 

CSS Imagini


Aflați cum să stil imagini folosind CSS.


Imagini rotunjite

Utilizați border-radius proprietatea de a crea imagini rotunjite:


Paris

Exemplu

Imagine Rounded:

img {
    border-radius: 8px;
}
Încearcă - l singur »
Paris

Exemplu

Imagine încercuită:

img {
    border-radius: 50%;
}
Încearcă - l singur »

Imagini miniatură

Utilizați border proprietatea de a crea imagini în miniatură.

Imagine miniatură:

Paris

Exemplu

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
}

< img src="paris.jpg" alt="Paris" >
Încearcă - l singur »

Imagine miniatură ca link:

Exemplu

a {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    transition: 0.3s;
}

a:hover {
    box-shadow: 0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

< a href="paris.jpg" >
  < img src="paris.jpg" alt="Paris" >
< /a >
Încearcă - l singur »

Imagini Responsive

imagini responsive va ajusta în mod automat pentru a se potrivi cu dimensiunea ecranului.

Redimensionarea fereastra browser-ului pentru a vedea efectul:

Norvegia

Dacă doriți o imagine la scară în jos dacă are, dar niciodată nu scară până să fie mai mare decât dimensiunea sa inițială, se adaugă următoarele:

Exemplu

img {
    max-width: 100%;
    height: auto;
}
Încearcă - l singur »

Sfat: Cititi mai multe despre Responsive Web Design în nostru CSS RWD Tutorial .


Text imagine

Cum de a poziționa textul într-o imagine:

Exemplu

Norvegia
Bottom Left
Top Left
Top Right
Bottom Right
Centered

Încearcă-l singur:

Stânga sus » Dreapta sus» Stânga jos » dreapta jos» Centrat »

Polaroid Imagini / Carduri

Norvegia

Limba Troll în Hardanger, Norvegia

Norvegia

Northern Lights din Norvegia

Exemplu

div.polaroid {
    width: 80%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
    text-align: center;
    padding: 10px 20px;
}
Încearcă - l singur »

Filtre de imagine

CSS filter de proprietate adaugă efecte vizuale (like blur and saturation) la un element.

Notă: Proprietatea filtru nu este acceptată în Internet Explorer, Edge 12, sau Safari 5.1 și versiunile anterioare.

Exemplu

Modificarea culorii tuturor imaginilor alb - negru (100% gray) :

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
Încearcă - l singur »

Sfat: Du - te la nostru CSS filtru de referință pentru a afla mai multe despre filtrele CSS.


Receptivă Galeria de imagini

CSS poate fi folosit pentru a crea galerii de imagini. Acest exemplu a utiliza interogări media pentru a re-aranja imaginile de pe ecrane de dimensiuni diferite. Redimensionarea fereastra browser-ului pentru a vedea efectul:

Trolltunga Norvegia
Adăugați o descriere a imaginii aici
pădure
Adăugați o descriere a imaginii aici
Auroră boreală
Adăugați o descriere a imaginii aici
Munţi
Adăugați o descriere a imaginii aici

Exemplu

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}
Încearcă - l singur »

Sfat: Cititi mai multe despre Responsive Web Design în nostru CSS RWD Tutorial .


Image Modal (Advanced)

Acesta este un exemplu pentru a demonstra modul în CSS și JavaScript pot lucra împreună.

În primul rând, utilizați CSS pentru a crea o fereastră modal (dialog box) de (dialog box) , și ascunde - l în mod implicit.

Apoi, utilizați un JavaScript pentru a afișa fereastra modal și pentru a afișa imaginea în interiorul modal, atunci când un utilizator face clic pe imagine:

Northern Lights, Norvegia

Exemplu

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
Încearcă - l singur »