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:
CSS-ohjeena koko ja sijainti.
CSS-ohjeena koko, sijanti ja pystysuunnan tyhjä tila.
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>
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:
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>
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.
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.
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:
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ä.