CSS
pagrindai

From zero to hero

 

Parengė: Martynas Kašelionis

Kas yra CSS?

CSS (angl. Cascading Style Sheets – pakopiniai stilių šablonai) – kalba, skirta nusakyti kita struktūrine kalba aprašyto dokumento vaizdavimą.

Kodėl reikia naudoti CSS?

Kodėl buvo sukurtas CSS?

<tr><td><a href="#"><font color="black"> Tekstas </font></a></td></tr>

Kaip CSS veikia?

CSS naudojimo būdai

Elemento atributas:

<div style="color:red;">......</div>


HTML elementas:

<style>
  ....
</style>

 

Išorinis stiliaus failas:

<link rel="stylesheet" href="css/style.css">

CSS sintaksė

CSS sintaksė

 

 

article {
    background-color:red;

    color: silver;
 }

 

 

 

 

 

 

Selektoriai (taisyklės)

Norint taikyti stilių konkrečiam HTML elementui arba elementams, naudojame selektorius.

Selektorių tipai:

  •  #id   - Elemento ID atributo reikšmė
  • elementas - Elemento pavadinimas (pvz. div)
  • .class - Elemento klasės atributo reikšmė 
  • [attr] - Elemento atributas (galima nurodyti atributą ir jo reikšmę su patternu)
  • :pseudo-class - Pseudo klasė
  • ::pseudo-element - Pseudo elementas
  • * - Visi elementai

Universalus selektorius

HTML:

<div id="logo">
<div><p>Tekstas</p></div>
<span>Super tekstas</span>
</div>
CSS:

*{
color:red;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

Selektoriai (elementas)

HTML:

<div id="message">
<h3>Gavote naują žinutę</h3>
</div>


CSS:

h3{
color:red;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

Selektoriai (ID)

HTML:

<div id="logo">
<img src="img/logo.png" alt="logo"/>
</div>


CSS:

#logo{
border-radius:10px;
}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

Selektoriai (klasė)

HTML:

<div id="logo center">
<img src="img/logo.png" alt="logo"/>
</div>


CSS:

.logo{
border-radius:10px;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

Selektoriai (atributas)

HTML:

<ul>
<li><a href="http://www.kitm.lt">KITM</a></li>
<li><a href="http://www.delfi.lt">DELFI naujienos</a></li>
</ul>
CSS:

a[href="http://www.kitm.lt"] {
color:blue;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Pseudo klasės

Pseudo klasė, gali būti taikma selektoriui apibrėžiant elemento būseną. Pvz.:  :hover (kas nutinka užvedus žymeklį ant nuorodos)

Dažniausia naudojamos pseudo klasės:

  • :hover
  • :link
  • :active
  • :visted
  • :nth-child()

Visos pseudo klasės:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Pseudo klasės

Pseudo klasės naudojimas

HTML:

<ul>
<li><a href="http://www.web-training.lt">WEB training</a>
</ul>


CSS:

a:hover{
color:red;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors

Pseudo elementai

Pseudo elementai taikomi dokumento turinio daliai. Pvz.: p::first-letter


Dažniausiai naudojami pseudo elementai:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line

 

Visi pseudo elementai:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Pseudo elementai 

HTML:

<p>
man labai patinka WEB technologijos.
</p>


CSS:

p::first-letter{
text-transform:uppercase;
​}

Papildoma informacija:

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

Selektorių naudojimas

Rašydami CSS kodą turime laikyti DRY principo, kuris sako: "Don't repeat yourself"

 

Selektorių kombinacijos:

th, td - turi tuos pačius stilius

section article - article yra kažkur section viduje

div > a - a yra iškart div viduje

h2 ~ p - p yra kažkur už h2

h2 + p - p yra iškart už h2

Žinių apie selektorius įtvirtinimas

https://flukeout.github.io/

Pakopos

Kodėl CSS vadinami pakopiniais stilių šablonais?

 

Kadangi daugiau negu viena taisyklė, gali būti taikomos konkrečiam HTML elementui. Reikalingas būdas, kaip spręsti konfliktus. Būtent pakopos leidžia nuspręsti, kuri taisyklė bus taikoma.

  • Svarbumas
  • Specifiškumas
  • Rikiavimas

Pakopos

Pakopos. Svarbumas

Pakopos. Specifiškumas

Pakopos. Specifiškumas

Pakopos. Rikiavimas

 

 

 

Laimi paskiausiai deklaruota taisyklė

Pakopos. Important

Pakopos. Important

Pakopos. Important

Pakopos. Abibendrinimas

  • Kai įvyksta stilių konfliktas visada laimi labiau specifikuotas stilius.
  • Svarbi taisyklės vieta
  • Eilės tvarka
  • Tikslumas (ID selektorius svarbesnis už klasės selektorių, o klasės selektorius svarbesnis už elemento selektorių)

Paveldėjimas

 

 

 

Paveldėjimu vadinamas procesas, kai elemento css taisyklės taikomos visiems viduje esantiems elementams.

Paveldėjimas

 

Elementų išdėstymas, paraštės, fono spalvos, rėmeliai negali naudoti paveldėjimo.

Matavimo vienetai

CSS matavimo vienetai naudojami, kai norime nustatyti:

  • paraštes (margin)
  • postumį (padding)
  • kraštinės plotį (border-width)
  • elementų plotį (width)
  • šrifto dydį (font-size)
  • kt. (fono pozicija, kampų užapvalinimas, ...)

 

CSS matavimo vienetai yra absoliutūs (visada išlieka tokio pačio dydžio) ir realityvūs (santykiniai).

 

Matavimo vienetai

Absoliutūs matavimo vienetai:

  • px (pikseliai)
  • cm
  • mm
  • in (coliai)
  • pt (1/72 colio)
  • picas (12 taškų)

 

  Iš absoliūčių matavimo vienetų dažniausiai naudojami pikseliai.

Matavimo vienetai

Realityvūs (santykiniai) matavimo vienetai.

 

Realityvūs matavimo vienetai:

  • em - Santykis su naudojamo šrifto aukščiu. 1em yra lygus 16px Tai populiariausias realityvusis matavimo vienetas
  • rem (root em) - Santykis su numatytojo šrifto aukščiu. Šis dydis neveikia senesnėse naršyklėse.
  • vw, vh - 1/100 matomo dokumento pločio ir 1/100 matomo dokumento aukščio

 

Matavimo vienetai

 

Procentai

 

Šrifto dydžiui, paraštėms, elementų pločiui ir aukščiui nurodyti galima naudoti procentus.

 

Dažniau naudojama, kuriant prie ekrano pločio prisitaikantį(adaptyvų)  išdėstymą (layout).

 

 

Matavimo vienetai

Egzistuoja vienetiniai matavimo vienetai.

pvz.:

  margin: 0;
 

Dažnai naudojami, kai norime pašalinti dydžio nustatymus (paraštės, postūmiai ir kt.)

 

Kitas pavyzdys line-height ypatybė, kuri nustato eilutės aukštį. 

line-height: 1.5;    /* Naudojamas dauginimas */

 

 

 

Matavimo vienetai

Procentai

HTML

<div>
  <div class="boxes">Tekstas</div>
  <div class="boxes">Tekstas</div>
</div>

CSS

div .boxes {
  font-size: 200%;   /* Koks bus šrifto dydis pikseliais?
  margin: 10px;
}

 

 

Stilių savybės

  • Tekstas ir šriftai (Text and Fonts)
  • Nuorodos
  • Sąrašai (Lists)
  • Spalvos ir fonai (Colors Backgrounds)
  • Lentelės (Tables)

Teksto formatavimas

CSS teksto formatavimo ypatybės skirstomos į dvi kategorijas:

  • Šrifto stiliai (šriftas, stilius, dydis ir kt.)
  • Teksto išdėstymo stiliai (lygiavimas, tarpai tarp eilučių ir kt.)

 

HTML

CSS

<h1>Mokomės CSS</h1>

<p>Tinklapis be CSS</p>

<p>Kaip žmogus be rūbų.</p>
p {
  color: red; /* Šrifto spalva */
  font-family: arial; /* Šriftas */
  font-size: 1.2em;  /* Šrifto dydis */
}

Šriftas

WEB safe fonts:

Šriftas

Norėdami užtikrinti, kad svetainės lankytojas matytų korektiškai atvaizuotą tekstą, turime naudoti saugius šriftus (WEB safe fonts) arba pridėti alternatyvius šriftus, kurie bus kraunami konkrečoje operacinėje sistemoje neradus reikiamo šrifto.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

Šriftas

Dažnausiai naudojamos savybės:

  • Šrifto dydis (font-size)
    • px
    •  em
    • rem
    • %
  • Šrifto stilius (font-style):
    • normal  - normalus šriftas, stilius italic išjungiamas
    • italic - šriftas atavaizduojamas kursyvu, jeigu šriftas palaiko šį stilių
    • oblique - simuliuota italic stiliaus versija. 

Šriftas

  • Šrifto paryškinimas (font-weight)
    • normal - paryškinimas yra išjungtas
    • bold - paryškinimas yra įjungtas
    • lighter - nustatoma vienu žingsniu šviesesnis šriftas
    • bolder - nustatoma vienu žingsniu paršykintas šriftas
    • 100 : 900 - paryškinimo nurodymui galima naudoti skaičius (jeigu palaiko šriftas)

lighter ir bolder atveju atsižvelgiama į tėvinio elemento šrifto paryškinimą

Šriftas

  • Teksto transformavimas (text-transform)
    • none - išjungtas
    • uppercase - transformuoja raides į didžiąsias
    • lowercase - transformuoja raides į mažąsias
    • capitalize - transformuoja raides į mažąsias
  • Teksto dekoravimas (text-decoration)
    • none - išjungtas
    • underline - Pabraukimas po tekstu eilute
    • overline - Pabraukimas virš teksto eilutės
    • line-through - perbraukta teksto eilutė

 

​

Šriftas

  • Teksto šešėlis (text-shadow)​

Teksto šešėliui sukurti naudojamos 4 reikšmės:

  1. Horizontalusis ofsetas
  2. Vertikalusis ofsetas
  3. Blur efektas pagal radiusą
  4. Pagrindo spalva

Teksto išdėstymas

  • Teksto lygiavimas (text-align)
    • left - lygiuojama į kairę pusę
    • right - lygiuojama į dešinę pusę
    • center - tekstas centruojamas
    • justify - lygiuojama pagal abi puses
  • Eilutės aukštis (line-height)
    • Naudojama norint nustatyti eilutės aukštį
       
  • Kitas savybes rasite:
    • ​https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts

 

​

Sąrašų formatavimas

Sąrašus sudaro ženklinimo elementai ir tekstas. Teksto formatavimas veikia sąrašuose, taip, kaip aptarta ankščiau

Pagrindinės sąrašų savybės:

  • Sąrašo stilius (list-style):
    • none - sąrašo ženklinimas išjungiamas
    • inside - sarašo ženkliukai perkeliami į sąrašo vidų
    • url - standartinius ženkliukus pakeičiam į grafines ikonas (dažnai svg formatu)
  • Kitas savybes rasite:
    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters

Nuorodos

Nuorodos formatuojamos, kaip tekstas, tačiau jos turi būsenas, kurios pateikiamos pseudo klasių pavidalu.

Kiekvienai būsenai galima, taikyti skirtingą formatavimą

Būsenos:

  • :link -  neaplankyta
  • :visted - aplankyta
  • :hover - nuoroda ant, kurios užvestas pelės žymeklis
  • :focus - nuoroda kuri pasirinkta klaviatūra pvz.: TAB mygtuku
  • :active - nuoroda ant, kurios paspausta

​Rekomenduojama stiliaus faile apibrėžti visas būsenas

Spalvos ir fonai

CSS galima naudoti spalvas esančias RGB paletėje. Tai pat su spalva galima naudoti alpha kanalą, kai norime fonui nustatyti permatomumą.

 

Spalvos reikšmė gali būti nurodyta naudojant:

  • Spalvos raktažodį (blue, red ar kt.)
  • Naudojant RGB kubo sistemą su hex (šešioliktainiu) kodu. Pvz.: #000
  •  Naudojant RGB kubo sistemą su rgb(). Pvz.: rgb(200,120,55)
  • Naudojant RGB kubo sistemą su rgba(), kai norime nurodyti alpha kanalą. Pvz.: rgba(200,120,55,0.6)

 

 

 

Spalvos ir fonai

Hex kodą sudaro skaičiai nuo 0 iki 9 ir raidės A, B, C, D, E, F

 

Spalvose viskas prasideda nuo tamsiausių ir einą iki šviesiausių t.y. kuo mažesnis skaičius ir pirmesnė raidė abecelėje bus naudojama, tuo spalva bus tamsesnė.

 

#000 - juoda spalva

#FFF - balta spalva 

 

 

 

 

 

Spalvos ir fonai

Norint pasirinkti spalvą galite naudoti šį įrankį:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

 

 

 

 

 

 

Spalvos ir fonai

RGB kubas:

Spalvos ir fonai

Galima naudoti šių tipų fonus:

  • background-color - vienspalvis fonas
  • background-image - fonui naudojamas pavei
  • background - gali būti  naudojama ir spalva ir paveikslėlis. Jeigu paveikslėlis neužkraunamas rodoma fono spalva.

HTML

CSS

<h1>Mokomės CSS</h1>

<p>Tinklapis be CSS</p>

<p>Kaip žmogus be rūbų.</p>
body {
  background-color: red; 
/* Nustatyta fono spalva */
  background-image: url('..img/bg.jpg'); 
/* Paveikslėlis nustatytas, kaip fonas */
  background: #eee url('..img/bg.jpg');  
/* Fonui naudojams paveikslėlis ir spalva */
}

Fonų savybės

body {
  background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                    url("../img/fonai/bg.png"); 
/* Nustatytas gradientas ir paveikslėlis */
}

Fonų savybės

Kitos fonų savybės:

  • background-position: nustato fono poziciją elemente
  • background-repeat: galima įjungti fono kartojimą, kai elementas didesnis už fono paveikslėlį.
  • background-attachment: naudojama norint užfiksuoti fona, kai viduje esantys elementai arba turinys slenkamas žemyn
  • background-size: Fono paveikslėlio keitimui dinamiškai

Fono pozicija

 

body {
  background:#eee url("../img/fonai/bg.png");
  background-position: top;
/* Nustatyta fono paveikslėlio pozicija top

Galimos pozicijos: 

top
left
center
 
Procentinės:

pvz.: 

background-position: 25% 75%; Pirmas skaicius x ašyje, o antras y ašyje


*/
}

Fono kartojimas

 

body {
  background: #eee url("../img/fonai/bg.png");
  background-repeat: repeat;

/* Fonas kartojamas pagal x ir y ašis */

  background-repeat: repeat-x;

/* Fonas kartojamas pagal x ašį */

 background-repeat: repeat-y;

/* Fonas kartojamas pagal y ašį */

 background-repeat: no-repeat;

/* Fono kartojimas išjungtas */
}

Fono kartojimas

 

body {
  background: #eee url("../img/fonai/bg.png") no-repeat;

/* Galima naudoti sutrumpintą shorthand variantą */

}

Fono dydis

 

body {
  background: #eee url("../img/fonai/bg.png") no-repeat;
  background-size: contain;

/* Padidina fono paveikslėlį, kiek įmanoma pagal elementą. 
   Paveikslėlis neapkarpomas. */

  background-size: cover;

/* Padidina fono paveikslėlį, kiek įmanoma pagal elementą.
   Jeigu elemento ir paveikslėlio dydis skiriasi, jis yra apkarpomas. */




}

Gradientai

CSS gradientai tai spalvų perėjimai tarp dviejų ar daugiau spalvų.

 

Gradientų tipai:

  • linijinis (linear-gradient)
  • radialinis(radial-gradient) 

 

Gradientai dažniausia naudojami fonams

​

Gradientai

header {
  background: linear-gradient(blue, pink);
}

/* Krypties keitimas */


.box {
  background: linear-gradient(to bottom right, blue, pink);
}

Gradientai

.section {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

Gradientai

/* Radialiniai gradientai */

.box2 {
  background: radial-gradient(red, blue);
}


.logo {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Gradientai

/* Radialiniai gradientai */

.stacked-radial {
  background: 
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

Daugiau:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

Lentelės

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: left;
    padding: 8px;
    border:1px solid;
}

Lentelės

Visas savybes susijusias su lentelėmis rasite:

 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables

CSS transformacija, perėjimai ir animacija

Ankščiau norint animuoti objektus tinklalapyje, buvo naudojama GIF arba Adobe Flash. Tačiau abi technologijos šiandien netinkamos, nes tai tik įterpiami objektai, kurie negali sąveikauti su HTML. Todėl ankščiau vienintelis būdas kurti animacijas su HTML buvo  JavaScript.

CSS3 suteikia galimybes kurti efektus ir animaciją, naudojant elementų transformaciją, perėjimus ir animaciją.

Transformacija

 

​

CSS3 nadoja kelias ypatybes elementų transformacijai:

  • pasukimui (rotate)
  • dydžio keitimui (scale)
  • iškreipimui (disorting)

x ir y ašyje. 

Transformacija. Rotate

Elemento pasukimui naudojama rotate reikšmė su laipsniais.

Senesnėms naršyklėms yra būtina nurodyti prefiksus.

 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 transform: rotate(10deg);

Elementas, kuriam nustatyta transformacija neįtakoja kitų elementų.

 

Rotate reikšmė yra nuo 0 iki 360

Transformacija, Rotate

Transformacija. Rotate

Transformacija. Scale

Scale leidžiai didinti arba mažinti elementą. Jeigu reikia elementą padidinti du kartus, naudojame:

 -webkit-transform: scale(2);
 -moz-transform: scale(2);
 -o-transform: scale(2);
 -ms-transform: scale(2);
 transform: scale(2);

Didinimas skaičiuojamas dauginant dabartinį elemento dydį iš nurodyto funkcijoje scale. Galima naudoti ir 0.5, jeigu norima padidinti pusę karto.

Transformacija. Scale

Transformacija. Scale

.button {
       font: .9em Arial, Helvetica, sans-serif;
       border-radius: .5em;
       background-color: rgb(34,255,23);
       border: 1px solid rgba(0,0,0,.5);
       padding: .5em;
}
.button:hover {
       -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
       -o-transform: scale(1.2);
       -ms-transform: scale(1.2);
       transform: scale(1.2);
}

Transformacija. Scale

transform: scale(.5,2); /* Pirma reikšmė x, antra y*/

/* arba */
transform: scaleX(3);
transform: scaleY(2);

/* galima naudoti negatyvias reikšmes */

transform: scale(-1);

Elemento didinima x ir y galima nurodyti skirtingomis reikšmėmis.

Galima apsukti arba apverst elementą, naudojant negatyvias reikšmes

transform: scale(-1,1);

Transformacija. Scale

Translate

Translate suteikia galimybę judinti elementą iš jo esamos pozicijos. Elementas, kuriam naudojama translate turi turėti erdvės nustatyto veiksmo atlikimui, todėl jam reikia nustatyti position:absolute

Translate

.button:active {
      -webkit-translate(1px,2px);
      -moz-translate(1px,2px);
      -o-translate(1px,2px);
      -ms-translate(1px,2px);
      translate(1px,2px);
    }

Translate reikšmės gali būti nurodytos x ir y atskirai.

transform: translateY(-.5em);

Skew

Skew leidžia pakreipti elemento kraštines x yr y ašyse. 

 -webkit-transform: skew(45deg, 0);
 -moz-transform: skew(45deg, 0);
 -o-transform: skew(45deg, 0);
 -ms-transform: skew(45deg, 0);
 transform: skew(45deg, 0);

Viršuje esančiame pavyzdyje pakrepiamos vertikalios linijos 45 laipsniais.

Skew

Transformacija

CSS ypatybė transform, nurodant reikšmę leidžia naudoti kelias funkcijas.

transform: skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);

Transformacija

CSS ypatybė transform, nurodant reikšmę leidžia naudoti kelias funkcijas.

transform: skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg);

Transform origin

Yprastai, kai elementui taikoma transform ypatybė imamas elemento centras, transformacijos taškui nustatyti.

Transformacijos taško poziciją, galima pakeisti, naudojant transform-origin ypatybę. Ji veikia panašiai, kaip background-position

transform-origin: left top;
transform-origin: 100% 100%;

Transform origin

3D transformacija

CSS3 palaiko ir 3D transformaciją. Apie jos taikymą galite susipažintim čia:

https://www.smashingmagazine.com/2012/01/adventures-in-the-third-dimension-css-3-d-transforms/

Transition

Transition (perėjimas) savybė yra animacija iš vieno CSS savybių rinkinio į kitą. 

Praktiškai kalbant transition sukuria elegantišką perėjimo efektą per laiką, kai keičiasi nustatytos savybės.

pvz. galima pritaikyti elemento transformacijai per 2s.

Norint naudoti transition, reikia:

  • Dviejų taisyklių (pvz.: mėlyna mygtuko spalva ir raudona mygtuko spalva)
  • transitinion ypatybės
  • Veiksmo, kuris sukelia pasikeitimą, tarp taisyklių (trigger). Tam gali būti naudojamos pseudo klasės.

Transition

navButton {
      background-color: orange;
      transition-property: background-color;
      transition-duration: 1s;
}
    .navButton:hover {
        background-color: blue;
}
  • transition-property nurodo, kuriai ypatybei bus taikoma transition. Galima naudoti ypatybę transition-all, kad būtų taikoma visoms ypatybėms.
  • transition-duration nurodo animacijos trukmę

Transition

transition-property: color, background-color, border-color;
    transition-duration: .25s, .75s, 2s;

Transition timing function

Kai paminėta ankščiau transition-duration nurodo animacijos trukmę,  t.y. per kiek laiko bus įvykdyta animacija. Tačiau yra kita ypatybė transition-timing-function, kuri atsakinga už animacijos parodymą (kaip animacija prasidės ir kaip pasibaigs).

transition-timing-function, gali turėti šias reikšmes:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out

Transition timing function

Jeigu transition-timing-function nenurodyta, naršyklė naudos ease metodą, kuris pradeda animaciją lėtai, pagreitina per vidurį ir sulėtina pabaigoje. Tokiu būdu sukuriamas animacijos efektas.

 -webkit-transition-timing-function: ease-in-out;
 -moz-transition-timing-function: ease-in-out;
 -o-transition-timing-function: ease-in-out;
 transition-timing-function: ease-in-out;

https://www.the-art-of-web.com/css/timing-function/

Perėjimo užlaikymas

Jeigu norim nepradėti perėjimo efekto iskarto, galima nustatyti užlaikymo laiką.

.navButton {
      color: black;
      background-color: #FF6603;
      border: 5px solid #660034;
      transition-property: color, background-color, border-color;
      transition-duration: 1s, 1s, .5s;
      transition-delay: 0, 0, 1s;
}
    .navButton:hover {
      color: white;
      background-color: #660034;
      border-color: #FF6603;
}

Transition

Nurodant transition reikšmę ir susijusių ypatybių reikšmes, galima nurodyti vienoje eilutėje.

transition: all 1s ease-in .5s;  
/*taikom visom savybėm, trukmė 1s, 
timing function ease-in, užlaikymas 
pusė sekundės*/

transition: all 1s;

transition: background-color 1s;

transition: color 1s, background-color 1s, border-color .5s 1s;

Animacija

...

Visi klausimai ir pastabos

martynas.kaselionis@kitm.lt

CSS pagrindai

By Martynas Kašelionis

Made with Slides.com

CSS pagrindai

  • 1,023

More from Martynas Kašelionis