Najnowsze tutoriale tworzenie stron internetowych
 

CSS Galeria obrazów


CSS może być wykorzystywane do tworzenia galerii obrazu.

Trolltunga Norwegii
Dodaj opis obrazu tutaj
Las
Dodaj opis obrazu tutaj
Northern Lights
Dodaj opis obrazu tutaj
Góry
Dodaj opis obrazu tutaj

Galeria obrazów

Poniższa galeria obraz jest tworzony z CSS:

Przykład

<html>
<head>
<style>
div.img {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.img:hover {
    border: 1px solid #777;
}

div.img img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="img">
  <a target="_blank" href="fjords.jpg">
    <img src="fjords.jpg" alt="Fjords" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="forest.jpg">
    <img src="forest.jpg" alt="Forest" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="lights.jpg">
    <img src="lights.jpg" alt="Northern Lights" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="img">
  <a target="_blank" href="mountains.jpg">
    <img src="mountains.jpg" alt="Mountains" width="300" height="200">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>
Spróbuj sam "

Przykłady

Więcej przykładów

Responsive Galeria zdjęć
Jak korzystać z CSS3 zapytań o media, aby stworzyć elastyczne galeria zdjęć.

Zaawansowane: Klikalne modalne Obrazy (JS)
Przykładem, jak używać JavaScript wraz z CSS do wyświetlania obrazów kliknął w pudełku modalnej.