CSS kuvatyylit

oppia, miten CSS asettaa kuvien tyylit.

kaarekuva

käytä border-radius ominaisuus luo pyöreän kuvan:

esimerkki

kaarekuva:

img {
  border-radius: 8px;
}

Kokeile itse

esimerkki

pyöreä kuva:

img {
  border-radius: 50%;
}

Kokeile itse

esikatselukuva kuvaa

käytä border ominaisuus luo esikatselukuvan.

esikatselukuva:

Kahvi

esimerkki

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Kokeile itse

linkin esikatselukuvana:

esimerkki

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Kokeile itse

Vastaavat kuvat

Vastaavat kuvat mukautuvat automaattisesti näytön kokoon.

Jos haluat pienen kuvan, mutta et halua laajentaa sitä alkuperäisen kohteen suuremmaksi, lisää seuraava koodi:

esimerkki

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

Kokeile itse

Vinkki:meidän CSS RWD oppitunnit opeta lisää vastaavasta Web-suunnittelusta.

keskitetty kuva

Jos haluat keskittää kuvan, aseta vasen ja oikea ulkoreuna auto ja aseta se elementiksi:

Kahvi

esimerkki

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Kokeile itse

Polaroid-kuvat / kortit

Kukka

keltainen tuoksuva

Kukka

punainen tuoksuva

esimerkki

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;
}

Kokeile itse

Läpinäkyvät kuvat

opacity Ominaisuuden arvon alue on 0.0 - 1.0. Arvojen laskiessa, läpinäkyvyys kasvaa:

Kukka

opacity 0.2

Kukka

opacity 0.5

Kukka

opacity 1 (oletus)

esimerkki

img {
  opacity: 0.5;
}

Kokeile itse

Kuvatexti

Miten tekstiä sijoitetaan kuvassa:

esimerkki

CodeW3C.com Logo
Alareuna vasemmalla
Yläreuna vasemmalla
Yläreuna oikealla
Alareuna oikealla
Keskitetty

Kokeile itse:

Vasen yläreuna Oikea yläreuna Vasen alareuna Oikea alareuna Keskitetty

Kuvien suodattimet

CSS filter Ominaisuus lisää visuaalisia tehosteita (kuten hämärtämistä ja saturaatiota) elementtiin.

Huomioitavaa:Internet Explorer tai Edge 12 ei tue filter-ominaisuutta.

esimerkki

Vaihda kaikki kuvien värit mustavalkoiseksi (100% harmaaksi):

img {
  filter: grayscale(100%);
}

Kokeile itse

Vinkki:Vierailkaamme CSS-suodattimen viittausoppaasti，tiedosta lisää CSS-suodattimista.

Kuvan hiiren osoittimen yllä näkyvä lisävaikutus

Luo hiiren osoittimen yllä näkyvä lisävaikutus:

Esimerkki 1

Hämmentävä teksti:

Avatar
Hei maailma

Kokeile itse

Esimerkki 2

Hämmentävä kehys:

Avatar
Bill

Kokeile itse

Esimerkki 3

Liukuu ylös:

Avatar
Hei maailma

Kokeile itse

Esimerkki 4

Liukuu alas:

Avatar
Hei maailma

Kokeile itse

Esimerkki 5

Liukuu vasemmalle:

Avatar
Hei maailma

Kokeile itse

Esimerkki 6

Liukuu oikealle:

Avatar
Hei maailma

Kokeile itse

Käänteinen kuva

Siirrä hiiren osoittaja kuvan päälle:

Urheilupuisto

esimerkki

img:hover {
  transform: scaleX(-1);
}

Kokeile itse

Responsiivinen kuvakirjasto

Voimme luoda mukautuvan kuvakirjaston CSS:n avulla.

Tässä esimerkissä käytetään media-kyselyä kuvien uudelleenjärjestämiseen eri näyttökokojen mukaan. Aseta selaimen ikkuna suuremmaksi nähdäksesi vaikutuksen:

esimerkki

.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%;
  }
}

Kokeile itse

Vinkki:Vierailkaamme CSS RWD oppitunnit Opit lisää vastauskykyisestä Web-suunnittelusta täällä.

Kuvamodal (Image Modal)

Tämä on esimerkki siitä, miten CSS ja JavaScript toimivat yhdessä.

Ensiksi, luo modal-ikkuna (dialogi) CSS:n avulla ja piilota se oletuksena.

Sitten, kun käyttäjä napsauttaa kuvaa, näytä modal-ikkuna JavaScriptin avulla ja näytä kuva modalin sisällä:

Kasvilliset kentät

Kokeile itse