Latest web development tutorials

CSS obrazu

Ten rozdział pokaże Ci, jak wykorzystać CSS układu obrazu.

filet Zdjęcia

Przykłady

Filet Zdjęcia:

img {
border-radius: 8 pikseli;
}

Spróbuj »

Przykłady

Owalne obrazku:

img {
border-radius: 50%;
}

Spróbuj »

Miniatury

Używamy border nieruchomości do tworzenia miniaturek.

Przykłady

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

<Img src = "paris.jpg" alt = "Paris">

Spróbuj »

Przykłady

a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
Przejście: 0,3 s;
}

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

<A Href = "paris.jpg">
<Img src = "paris.jpg" alt = "Paris">
</ A>

Spróbuj »

responsive obrazu

Responsive obraz zostanie automatycznie dopasować gamę rozmiarów ekranu.

Przykładowo, można ustawić przeglądarkę, aby zobaczyć wielkość efektu:

Norwegia

Jeśli potrzebujesz swobodę skalowania obrazu, a obraz, aby powiększyć rozmiar nie większy niż maksymalna wartość oryginału, można użyć następującego kodu:

Przykłady

img {
max-width: 100%;
height: auto;
}

Spróbuj »

Wskazówka: zawartości sieci Web mogą być bardziej czułe referencyjna konstrukcja CSS tutoriale reaguje projektowe .

Obrazek Tekst

Jak znaleźć tekst obrazu:

Przykłady

Norwegia
W lewym dolnym rogu
W lewym górnym rogu
Prawym górnym rogu
Prawym dolnym rogu
centrum

Spróbuj:

W lewym górnym rogu >> górny prawy róg » lewy dolny róg» prawym dolnym rogu >> środkowy >>

Karta-image

Przykłady

div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8 pikseli 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;
}

Spróbuj »

Filtry graficzne

CSS filter atrybutów, aby dodać elementy z efektami wizualnymi (np nieostry i nasycenie).

Uwaga: Internet Explorer lub Safari 5.1 (i wcześniejszych) nie obsługuje tej właściwości.

Przykłady

Edycja wszystkich kolorów na czarno-białych zdjęć (100% szary):

img {
-webkit filtr: skala szarości (100% ); / * Chrome, Safari, Opera * /
Filtr: skala szarości (100%);
}

Spróbuj »

Wskazówka: Odwiedź CSS Instrukcja filtrów odniesienia , aby uzyskać więcej treści.

Responsive Galeria zdjęć

Przykłady

.responsive {
padding: 0 6px;
float: left;
Szerokość: 24,99999%;
}

@media tylko ekran i (max-width : 700px) {
.responsive {
Szerokość: 49,99999%;
margin: 6px 0;
}
}

@media tylko ekran i (max-width : 500px) {
.responsive {
width: 100%;
}
}

Spróbuj »

Zdjęcia modalne (modal)

Ten przykład pokazuje, jak połączyć ze sobą CSS i JavaScript do renderowania obrazu.

Po pierwsze, możemy użyć CSS do tworzenia modalnego okna (okno), jest domyślnie ukryty.

Następnie za pomocą JavaScript, aby wyświetlić okno modalne, gdy klikniemy, obraz zostanie wyświetlony w oknie pop-up:

Przykłady

// Pobierz modalne okno
var modal = document.getElementById ( 'myModal' );

// Pobierz tryb ramki na zdjęcia, alt obraz atrybuty w sposób opisany w niniejszym chińskiego popu
var img = document.getElementById ( 'myImg' );
var modalImg = document.getElementById ( "img01" );
var captionText = document.getElementById ( "podpis" );
img.onclick = function () {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}

// Pobierz <span> element, który zamyka modalna
var span document.getElementsByClassName ( "Zamknij" ) [0];

// Gdy użytkownik kliknie na <span > (x), zamknij modalna
span.onclick = function () {
modal.style.display = "none";
}

Spróbuj »