Kuviin liittyviä CSS-ohjeita

Kuviin voidaan liittää kuvien omien CSS-ohjeiden muita kuvien sijoittamiseen tai käyttäytymiseen liittyiä ohjeita.

Taulukossa kuviin liittyviä CSS-ohjeita:

Atribuutti	Asetukset	Tarkoitus
align	top bottom middle left right	Tasaus, sijoittaminen johonkin tilaan esim. align: middle;
border	px	Kehyksen eli kehysviivan paksuus pikseleinä esim. border: 5px;
height	% px	Kuvan korkeus prosentteina tai pikseleinä esim. height: 200px;
hspace	px	Kuvan vasemmalle ja oikealle puolelle (horisontaali) asetettava tyhjä tila esim. hspace: 20px;
vspace	px	Kuvan ylä- ja ala-puolelle (vertikaali) asetettava tyhjä tila esim. vspace: 50px;

Esimerkissä suurehko kuva näytetään pienenä tekstin edessä align-, hspace- ja hspace asetuksilla-asetuksilla:

Pienen kuvan sijoittuminen suhteessa tekstiin

Nasa-logo CSS-ohjeena koko ja sijainti.

Nasa-logo CSS-ohjeena koko, sijanti ja pystysuunnan tyhjä tila.

Nasa-logo CSS-ohjeena koko, sijanti ja vaakasuunnan tyhjä tila.

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .logokoko{
    width: 42px;
    height. 42px;
    align: middle;
  }
  #tekstiVari{
    color: RGB(11,61,145);
    font-style: italic;
    font-weight: bold;
  }
  
  HTML-koodaus:
  
  <h3 id="tekstiVari" > Pienen kuvan sijoittuminen suhteessa tekstiin </h3>
  <p id="tekstiVari"><img src="NASA.png" class="logokoko" alt="Nasa-logo"> 
    CSS-ohjeena koko ja sijainti.</p>
  
  <p id="tekstiVari"><img src="NASA.png" class="logokoko" vspace="40" alt="Nasa-logo"> 
    CSS-ohjeena koko, sijanti ja pystysuunnan tyhjä tila.</p>

  <p id="tekstiVari"><img src="NASA.png" class="logokoko" hspace="40" alt="Nasa-logo"> 
    CSS-ohjeena koko, sijanti ja vaakasuunnan tyhjä tila.</p>

Esimerkissä tehdään div-elementtillä kuvalle ja tekstille laatikko, kuva ja teksti sijoitetaan keskelle:

Kuva https://www.architecturaldigest.com

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .kuvapoksiin {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  }
  .tekstipoksiin{
    text-align: center;
  }
  .poksi{
    background-color: RGB(15,43,82);
    width: 60%;
    border: 2px solid RGB(127,175,221);
    padding: 20px;
    margin: 20px;
    color: WHITE;
  }
  
  HTML-koodaus:
  
  <div class="poksi">
    <img class="kuvapoksiin" src="maybach.jpg" alt="avoauto">
    <p class="tekstipoksiin" > Kuva https://www.architecturaldigest.com </p>
  </div>

Kuvan läpinäkyvyys, opacity ja transparency

Kuva voidaan CSS-ohjeella asettaa osittain läpinäkyväksi. Läpinäkyvyyden eli opasity:n aste asetetaan numero-arvona 0.0 - 1-0 väliltä. Huomaa tässä yhteydessä, opasity-asetukset joutuu tekemään erikseen eri selaimille sekä Explorer 8 tai vanhemmat selaimet eivät tue asetusta.

Esimerkissä kuvalkla kolme opasity-asetusta, 0.2, 0.5 ja 0.8 sekä ilman asetusta:

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .opa2 {
    opacity: 0.2;
    filter: alpha(opacity=20); / IE8 tai aiemmat versiot */
  }
  .opa5 {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE8 tai aiemmat versiot */
  }
  .opa8 {
    opacity: 0.8;
    filter: alpha(opacity=80); /* IE8 tai aiemmat versiot */
  }
  
  HTML-koodaus:
  
  <img class="opa2" src="maybach.jpg" alt="Auto" width="20%">
  <img class="opa5" src="maybach.jpg" alt="Auto" width="20%">
  <img class="opa8" src="maybach.jpg" alt="Auto" width="20%">
  <img src="maybach.jpg" alt="Forest" width="20%">

Läpinäkyvyyttä voi hyödyntää esittämällä kuvat läpinäkyvänä ja kun hiiren osoitin on kuvan kohdalla näytetään kuva ilman läpinäkyvyyttä:

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .kuva5 {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE8 tai aiemmat versiot */
  }
  .kuva5:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* IE8 tai aiemmat versiot */
  }
  
  HTML-koodaus:
  
  <img class="kuva5" src="maybach.jpg" alt="Auto" width="20%">
  <img class="kuva5" src="maybach.jpg" alt="Auto" width="20%">
  <img class="kuva5" src="maybach.jpg" alt="Auto" width="20%">

Läpinäkyvyyttä kun hiiren osoitin on kuvan kohdalla:

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .korosta:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE8 tai aiemmat versiot */
  }
  
  HTML-koodaus:
  
  <img class="korosta" src="maybach.jpg" alt="Auto" width="20%">
  <img class="korosta" src="maybach.jpg" alt="Auto" width="20%">
  <img class="korosta" src="maybach.jpg" alt="Auto" width="20%">

Esimerkissä on kaksi div-elementtiä joilla on eri asteinen läpinäkyvyys, elementti jossa ei ole läpinäkyvyyttä sekä elementeissä musta teksti:

Asetuksena opacity 0.2

Asetuksena opacity 0.6

Väri alkuperäisenä

Esimerkin koodaukset:


  CSS-ohjeet:
  
  .esimerkki {
    background-color: RGB(153, 51, 255);
    padding: 10px;
  }
  div.kaksi {
    opacity: 0.2;
    filter: alpha(opacity=20);
  }
  div.kuusi {
    opacity: 0.6;
    filter: alpha(opacity=60);
  }
  
  HTML-koodaus:
  
  <div class="esimerkki kaksi"><h3> Asetuksena opacity 0.2 </h3></div>
  <div class="esimerkki kuusi"><h3> Asetuksena opacity 0.6 </h3></div>
  <div class="esimerkki"><h3> Väri alkuperäisenä </h3></div>

Soveltava esimerkki, taustakuva jonka päälle tekstiä sisältävä laatikko:

Ongelmallista saada teksti esille.

Esimerkin koodaukset:


  CSS-ohjeet:
  
  div.tausta {
    background: url(maybach.jpg) repeat;
    border: 2px solid black;
  }
  div.laatikko {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.8;
    filter: alpha(opacity=80);
  }
  div.laatikko p {
    margin: 5%;
    font-weight: bold;
    color: RED;
    font-size: 140%;
    opacity: 0.9;
    filter: alpha(opacity=90);
  }
  
  HTML-koodaus:
  
  <div class="tausta">
    <div class="laatikko">
      <p> Ongelmallista saada teksti esille. </p>
    </div>
  </div>

Yksinkertainen responsiivinen CSS-kuvagalleria

Kuvagallerian voi toteuttaa käyttämällä CSS-ohjeita mutta hienompien gallerioiden toteutuksissa käytetään esimerkiksi JavaScript:iä.
Esimerkin galleriassa, kukin galleriakuva sijoitetaan omaan div-elementtiin esitettäväksi pienessä koossa kuva-linkkinä jota klikkaamalla kuva avataan suurena.

Responsiivinen kuvagalleria ( kuvat: Pixabay).

Monarkkiperhon kukassa.

Melkeinen punainen lintu.

Lasikuula-efekti.

Auringon lasku merellä.

Kuva-gallerian CSS ohjeet:


  div.galleria {
    border: 1px solid #ccc;
	background-color: RGB(255, 250, 230);
  }
  div.galleria:hover {
    border: 1px solid #777;
	opacity: 0.5;
    filter: alpha(opacity=50);
	background-color: GRAY;
	color: WHITE;
  }
  div.galleria img {
    width: 100%;
    height: auto;
  }
  div.desc {
    padding: 15px;
    text-align: center;
  }
  * {
    box-sizing: border-box;
  }
  .kokomuutos {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
  }
  @media only screen and (max-width: 700px) {
   .kokomuutos {
      width: 49.99999%;
      margin: 6px 0;
    }
  }
  @media only screen and (max-width: 500px) {
   .kokomuutos {
      width: 100%;
   }
  }
  .clearfix:after {
    content: "";
    display: table;
    clear: both;
  }
  #otsikko{
    color: RGB(204, 0, 102);
  }

Kuva-gallerian HTML-koodaus:


  <h3 id="otsikko"> Responsiivinen kuvagalleria ( kuvat: Pixabay) </h3>

  <div class="kokomuutos" id="paluu">
    <div class="galleria">
      <a target="_self" href="perhonen.html">
        <img src="perhonen.jpg" alt="perhonen" width="600" height="400">
      </a>
      <div class="desc"> Monarkkiperhon kukassa. </div>
    <div>
  <div>

  <div class="kokomuutos">
    <div class="galleria">
      <a target="_self" href="kolibri.html">
        <img src="kolibri.jpg" alt="melkein kolipri" width="600" height="400">
      </a>
      <div class="desc"> Melkeinen punainen lintu. </div>
    <div>
  <div>

  <div class="kokomuutos">
    <div class="galleria">
      <a target="_self" href="pallo.html">
        <img src="pallo.jpg" alt="pallo" width="600" height="400">
      </a>
      <div class="desc"> Lasikuula-efekti.</div>
    <div>
  <div>

  <div class="kokomuutos">
    <div class="galleria">
      <a target="_self" href="puu.html">
        <img src="puu.jpg" alt="auringonlasku" width="600" height="400">
      </a>
      <div class="desc"> Auringon lasku merellä. </div>
    <div>
  <div>
  <div class="clearfix"></div>

Gallerian HTML-koodauksesta.

jokaisessa pienessä kuvassa on linkki kuvassa joka avaa kunkin kuvan HTML-tiedoston (alla esimerkki HTML-koodaus)
pientä kuvaa klikatessa avautuu kuvan sisältämä HTML-tiedosto selaimessa samaan välilehteen (target="_self" asetus)
käytettävät galleria-kuvat kannattaa muokata mitoiltaan saman mittaisiksi (pikseleinä) sekä kuvasuhteelta saman kokoisiksi
kuvagallerian koodauksen yläpuolelle tehdään "kirjanmerkki", tämä on h3-elementin alussa id="otsikko" tällä tunnisteella liitetään myös otsikoon CSS-ohje

Galleria-kuvien näyttäminen suurena, tarvitaan jokaiselle kuvalle oma HTML-tiedosto:


  <!DOCTYPE html>
  <html>
  <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="https://fonts.googleapis.com/css?family=Dokdo" rel="stylesheet">
   <style>
    img{
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
    body{
      background-color: RGB(41, 61, 61);
    }
   </style>
  </head>
  <body>

    <a target="_self" href="sivu7.html#otsikko">
      <img src="puu.jpg" alt="perhonen">
    </a>

  </body>
  </html>

Galleria-kuvan suurena esittävässä HTML-koodauksessa:

img-ohjeena voi kokeilla muitakin vaihtoehtoja
body-ohjeessa aseteaan ison kuvan taakse taustaväri, jolloin kuvien reunoilla ei näy valkoista
isossa kuvassa on linkki takaisin kuvagalleria sivulle ja tietyyn kohtaan sivulla. Punaisen h3-otsikon kohdalle (#otsikko)

Sprite, kuvan esittäminen eri kohdista

Sprite on tekniikka jossa näytetään eri kohta kuvasta kun esimerkiksi hiiren osoitin siirtyy kuvan näkyvissä olevan osan päälle (hover -asetus). Sprite-tekniikalla voidaan toteuttaa esimerkiksi painikkeita tai joitakin tapahtuma-efektejä.

Alla esimerkissä käytettävä kuva, sprite.png. Kuvan mitat: leveys 319 px ja korkeus 80 px.

Tarkoituksena on aluksi näyttää kuvan vasemman puoleinen painike ja kun hiiren osoitin siirretään painikkeen päälle, näytetään oikean puolen painike.

Kuvasta Paint-ohjelmalla selvitetään kuvasta painikkeiden reunojen koordinaattipisteet.

Kuvan vasemman painikkeen (Valitse):
* vasen yläkulman koordinaattipisteet on 3 px , 3 px
* oikean alakulman koordinaattipisteet on 153 px , 76 px

Kuvan oikean painikkeen (Siirry):
* vasen yläkulma koordinaattipisteet on 155 px , 3 px
* oikean alakulman koordinaattipisteet on 305 px , 76 px

Esimerkki. Siirrä hiiren osoitin Valitse-tekstin päälle (alla):

Esimerkin koodaukset:


  CSS-ohjeet:
  
  #valitse {
    left: 3px;
    width: 153px;
    background: url('sprite.png') 0 0;
  }
  #valitse a:hover {
    width: 154px;
    background: url('sprite.png') 166px 0;
  }
  #navigointi {
    position: relative;
  }
  #navigointi li {
    margin: 0px;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
  }
  #navigointi li, #navigointi a {
    height: 76px;
    display: block;
  }
  
  
  HTML-koodaus:
  
  <ul id="navigointi">
    <li id="valitse"><a href="#"> </a></li>
  </ul>

Tutustu lisää sprite-asiaan esimerkiksi täältä.

CSS-opas, CSS - Kuvia sivulle

Kuviin liittyviä CSS-ohjeita

Pienen kuvan sijoittuminen suhteessa tekstiin

Kuvan läpinäkyvyys, opacity ja transparency

Asetuksena opacity 0.2

Asetuksena opacity 0.6

Väri alkuperäisenä

Yksinkertainen responsiivinen CSS-kuvagalleria

Responsiivinen kuvagalleria ( kuvat: Pixabay).

Sprite, kuvan esittäminen eri kohdista