CSS: iragazkiak
Iragazkiek efektuak gehitzen dizkiote elementu bati eta haren edukiari. CSSk elementu bati iragazki bat esleitzeko filter propietatea eta hura sortzeko hurrengo funtzioak biltzen ditu.
- blur(balioa) —Funtzio honek lausotu egiten du. Pixeletan 1px-tik 10px-ra bitarteko balioak onartzen ditu.
- grayscale(balioa) —Funtzio honek grisen eskala bihurtzen ditu irudiaren koloreak. 0.1 eta 1 arteko zenbaki hamartarrak onartzen ditu.
- drop-shadow(x y tamaina kolorea) —Funtzio honek itzal bat sortzen du. x eta y atributuek itzalaren eta irudiaren arteko distantzia zehazten dute, tamaina atributuak itzalaren tamaina zehazten du, eta kolorea atributuak haren kolorea adierazten du.
- sepia(balioa) —Funtzio honek tonu sepia (okrea) ematen die irudiaren koloreei. 0.1 eta 1 arteko zenbaki hamartarrak onartzen ditu.
- brightness(balioa) —Funtzio honek irudiaren distira aldatzen du. 0.1 eta 10 arteko zenbaki hamartarrak onartzen ditu.
- contrast(balioa) —Funtzio honek irudiaren kontrastea aldatzen du. 0.1 eta 10 arteko zenbaki hamartarrak onartzen ditu.
- hue-rotate(balioa) —Funtzio honek errotazio bat aplikatzen die irudiaren koloreei. Onartzen du 1deg eta 360deg bitarteko balio bat gradutan.
- invert(balioa) —Funtzio honek irudiaren koloreak alderantzikatu eta negatibo bat sortzen du. 0.1 eta 1 arteko zenbaki hamartarrak onartzen ditu.
- saturate(balioa) — Funtzio honek irudiaren koloreak asetu egiten ditu. 0.1 eta 10 arteko zenbaki hamartarrak onartzen ditu.
- opacity(balioa) —Funtzio honek irudiaren opakutasuna aldatzen du. 0 eta 1 arteko zenbaki hamartarrak onartzen ditu (0 erabat gardena da eta 1 guztiz opakua).
header {
margin: 30px;
padding: 15px;
text-align: center;
background:-webkit-linear-gradient(top, #ea0505, #57ee05, #85d4ec);
/*filter: blur(5px);*/
#titulua {
font: bold 26px Verdana, sans-serif;
color:rgb(250, 250, 250);
Iragazkia baliogabetua daukat /*filter: blur(5px);*/
Iragazkirik gabe horrela ikusten da.
Iragazki horiek, irudiei ez ezik, dokumentuko beste elementu batzuei ere aplika dakizkieke. Hurrengo adibideak lausotze-efektua aplikatzen dio gure dokumentuaren goiburuari.
header {
margin: 30px;
padding: 15px;
text-align: center;
background:-webkit-linear-gradient(top, #ea0505, #57ee05, #85d4ec);
filter: blur(5px);
#titulua {
font: bold 26px Verdana, sans-serif;
color:rgb(250, 250, 250);
Goiburuari iragazki bat aplikatu diogu
Goiburua lausotu egin dugu
Egin ezazu zuk zeuk: Idatzi zure .css artxiboan goiko arauak eta ireki dokumentua zure nabigatzailean eta ikusi efektua. Jarraian frogatu atal honetan ikasitako funtzioak blur() funtzioa beste edozein funtzio erabilgarrirekin zer-nolako efektuak lor daitezkeen ikusteko.
filter:hue-rotate(120deg);Â ipini diot. Aldatu balioa eta ikusi efektua.
filter:opacity(0.4);Â ipini diot. Aldatu balioa eta ikusi efektua.
filter: drop-shadow(8px 8px 18px #336699);Â ipini diot. Aldatu balioak eta ikusi efektua.
filter: grayscale(0.8);Â ipini diot. Aldatu balioa eta ikusi efektua.
Frogak egiteko ‘frogalekua’
Estekak froga simpleak egiteko aproposa den aplikazio bat irekiko dizu elementuek zer-nolako itxura hartzen duten ikusteko, baina hor egindako frogak komeni da kode editorera eramatea eta bertan egiaztatzea gure nahiari hurbiltzen zaion egindakoa.