CSS-kuvakokoelma

CSS voidaan käyttää kuvagallerian luomiseen.

Keltainen krokus
Keltainen krokus
Punainen krokus
Punainen krokus
Kukat ja kasvit
Kukat ja kasvit
Kukat ja kasvit
Kukat ja kasvit

Kuvagalleria

Alla oleva kuvagalleria on luotu CSS:n avulla:

Esimerkki

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
  <a target="_blank" href="/i/photo/tulip-yellow.jpg">
    <img src="/i/photo/tulip-yellow.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Lisää kuvauksen kuvauksen tässä</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Lisää kuvauksen kuvauksen tässä</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Lisää kuvauksen kuvauksen tässä</div>
</div>
<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Lisää kuvauksen kuvauksen tässä</div>
</div>
</body>
</html>

Kokeile itse

Lisää esimerkkejä

Responsiivinen kuvakokoelma
Miten CSS media-kyselyjä käytetään responsiivisen kuvakokoelman luomiseen, joka näyttää hyvältä työpöytäkirjoissa, tabletteissa ja älypuhelimissa.