Created by Honza Šuráň
An OrgPage about CSS with examples
Doba animace:
animation-duration: 4s;
proč to bez toho nefunguje: doba trvání je totiž nastavena na nulu. animace se provede a vrátí do původního stavu
Základní styl animace:
animation-timing-function: linear/ease...;
Zpoždění:
animation-delay: 2s; <-animace se začne přehrávat po 2s
animation-delay:-2s; <-2s z animace už uběhly
Počet přehrání animace:
animation-iteration-count: 2; <-provede se dvakrát
animation-iteration-count: infinite; <-než zavřeme webovku
Směr animace:
animation-direction: normal/reverse/alternate/alternate-reverse;
alternate: provede se a vrátí do původního stavu
A nebo to shrneme v jedno:
animation: název doba-trvání styl zpoždění počet směr;
animation: red-to-black 4s ease 2s 2 alternate-reverse;
popř. různé prohlížeče: -webkit-animation: ...
pro celý efekt je potřeba správné užití pseudoselektorů a efektu přechodu
transition: co-se-mění za-jakou-dobu jakým-způsobem zpoždění
transition: attribute time transition-type delay
(ease, linear, ease-in, ease-out, ease-in-out,
+pseudoselektor, příklad:
nemusí to vždy fungovat na všech prohlížečích. proto se dá nastavit přechod pro každý prohlížeč jiný:
-webkit-transition... (chrome, safari)
-moz- (firefox)
-o- (opera)
více parametrů:
transition: [par1] [hodnota1], [par2] [hodnota2], ...;
Řekněme, že mám složku "css" a "html", každá slouží na ukládání buď css, nebo html souborů
jak nalinkuju index.css na index.html?
jdu do index.html a do sekce <head> zadám:
<link rel="stylesheet" type="text/css" href="..css/index.css">
Takto se přiřadí animace k určitému prvku. Ta však stále nebude fungovat, je potřeba tam přidat další vlastnosti - viz další buňka
transform: rotate("angle" deg);
e.g. transform: rotate(90deg);
transform: rotate(-45deg);
mustn't have a space between angle and unit!
other useful units: turn (=360°), rad (=180°/π)
Rotate along the X-axis:
looks as standard 2d rotation from the right side
transform: rotateX(30deg);
Rotate along the Y-axis:
looks as standard 2d rotation from the bottom
transform: rotateY(-0.4rad);
Rotate along the Z-axis:
is equal to standard 2d rotation
transform: rotateZ(0.25turn);
Save your time:
(mp = multiplier)
transform: rotate(x-,p, y-mp, z-mp, of-a-value);
transform: rotate3d(0.5, -0.75, 0.3, 0.1turn);
instead of rotateX(18deg);
rotateY(-27deg);
rotateZ(0.1turn);
li:first-child{ - první řádek seznamu či tabulky
color: green;
}
first-child;
last-child;
nth-child(n);
li:only-child - pokud má některý seznam či tabulka pouze 1 prvek
grid-area: row-start / col-start / row-span / col-span
(or row-end instead of row-span/col-end, respectively)
grid-row: 2 / 4;
grid-column: 1 / 4;
↓
grid-area: 2 / 1 / span 2 / span 3;
is basically a rectangle with its top left vertex [x; y] and a vector →(x; y) leading up to its bottom right vertex
#odkaz:hover{
color: red;
}
co se stane?
když přejedu myší po daném prvku, který je svázán s tímto ID, barva se změní na červenou
div > span{
...}
every direct child - in this example (div→span) every span in a div, but if the structure was div→p→span, this selector wouldn't apply on the span
základní schéma
příklady na dalších stránkách
animace se bude měnit různě v jejich různých stadiích:
@keyframes jméno-animace{
první-část {funkce-1: argument; ...funkce-n: argument-n;}
atd., obdobně
basic syntax:
transform: function(parameters);
classy tvoříme k tomu, abych je použili víckrát = u více prvků
ID používáme pouze u jednoho prvku
opačně by to sice vzhled stránky nijak nezměnilo, ale je to taková úmluva pro lepší přehlednost
proto mají vlastně ID přednost, protože jsouo pouze na jedno použití. pro nějakou classu můžeme něco specifikovat, pomocí ID pak můžeme udělat výjimku
mají speciální vlastnosti
nemusí se vztahovat pouze na elementy, ale i classy a ID
p a:link {
color:red;
}
in this example, all links which are anywhere inside a paragraph get red color
textarea ~ button{
...
}
every button that is in the same layer and has the same parent element
calc(calculation) - allows us to calculate some dimensions more dependent on other sizes
transform: scale(2.5);
content, padding, border, margin - all ×2.5
scaleX(arg);
scaleY(arg);
where "arg" is the multiplier
translate(Δx Δy)
move an object Δx a long the x-axis, Δy along the y-axis (can also be defined in 3d with "translate3d(Δx, Δy, Δz)"with Δz=0)
HTML:
<p>...</p>
CSS:
p{
} - vybere všechny sekce html souboru s tímto tagem
CSS:
What happened? Element nr. 1 starts on the start of the first column and ends on the end of the second/start of the third → therefore 1 / 3
equivalent to this would be:
grid-column: 1 / span 2;
grid-row: 1 / span 2;
=start on the first row/col and take up two of them in the flex-direction
in-line specifikace (style)
ID
class
element
*ano, je to prasárna*
a:link - defaultní vzhled odkazu
a:visited - po kliknutí
atd.
we use them whenever there is any dependency between styled elements
zjednodušeně:
grid-gap/gap: <řádkování> <sloupcování>;
grid-gap: 150px 250px;
HTML:
<p class="cl8ss">...</p>
<h3 class="cl8ss">...</p>
CSS:
.cl8ss{
} - vybere všechny classy takto pojmenované
h2 + a{
...
}
only adjacent links: they have to be directly after h2 header
zarovnání prvků v řádcích
příklady na další straně
pomocí nich se vybírá určitý prvek html dokumentu, který poté bude vizual
grid-template-columns: sloupec1 sloupec2 sloupec3 ...;
grid-template-rows: řada1 řada2 řada3 ...;
zkráceně:
grid-template: řada1 řada2 řada3 ... / sloupec1 sloupec2 sloupec3 ...;
definuje řady mřížky, jak mají být každá vysoká
na druhé straně
ale grid je chytrý! :-)
h2[class=subtitle]{
...}
vybere všechny h2 nadpisy, které mají class se jménem "subtitle"
jak to využít u obrázků?
HTML:
<img src="../obrazky/vlci_mak.jpg" width="120" height="80">
<img src="../obrazky/pampeliska.jpg" width="180" height="120">
CSS: jak vyberu oba naráz?
img[src^="../obrazky/"]{
border: 8px solid red;
}
-> každý obrázek, u kterého atribut "src" začíná takto
nebo vše co takto končí:
img[src$=".jpg"]{
...}
nebo vše co to někde obsahuje:
img[src*="razky/"]{
...}
hledá, zda se někde tato třída nachází
HTML:
<p id="ahaha">...</p>
<p id="ahaha">...</p>
CSS:
#ahaha{
}
zarovnání řádků dle mřížky
příklady na dalších stranách
color:
background-color: #RRGGBB
or background: #RRGGBB
pixely:
napůl to i to - záleží na přístroji. velká telka může mít stejné rozlišení jako mobil, ale pixely jsou větší.
DPI (dots per inch): čím větší DPI, tím více pixelů se vejde na jeden palec -> tím jsou menší -> to znamená, že např. mobily mají větší DPI než televize
->vybere všechny h2 nadpisy, které mají classu "article-subtitle" nebo "article-subtitle-..."
k čemu? větší projekt:
alignment of all columns given the grid width
examples on following pages
similar to flexbox
attribute: value;
another-attribute: another-value;
color: rgba(r, g, b); <- nic se nestane
color: rgba(r, g, b, a); (a=alpha)
color: rgba(200, 50, 85, 0); <- viditelnost 0 (0 %)
color: rgba(200, 50, 85, 1); <- viditelnost 1 (100 %)
background-repeat: repeat; <- defaultní nastavení
backgroundrepeat: no-repeat; <- použije obrázek, ale jeho rozměry zůstanou stejné a část prostoru nevyplněná
background-repeat: no-repeat;
background-color:red;
-> zabarví se červeně, část pozadí bude nahrazena obrázkem
background-size: 50px 100px; ->nejprve šířka, pak výška
backround-size: cover; <-pokryje celý displej bez opakování, aby se zachoval poměr stran -> např. na celý displej přetransformuje velikost na 1920px 1080px
background-size: contain <- pokusí se resizenout, aby velikost zůstala stejná
width: 70 % (zabere 70 % šířky displeje no matter what)
2em: všechny fonty 2krát větší než v běžné velikosti
vh (view height), vw (view width): 1vh/vw = jedna setina body width nebo height
mm
cm
pt: typografický bod - trochu větší než pixel
pc: pica - 12krát větší než pt
in: palec ~ 2,54cm
zarovnání jednotlivých prvků vzhledem ke sloupcům mřížky
bez předpony "grid-" na rozdíl od flexboxu
příklady na dalších stranách
=barevný přechod
color: linear-gradient(to right, yellow, purple);
to right: to znamená, že barevný přechod půjde doprava (zleva)
poté se dají přidat různé barvy, různé množství barev
dá se požít také jako přechod do bezbarvého pruhu:
color: linear-gradient(0deg, rgb(0, 0, 0), rgba(0, 0, 0, 0)
.container{
...
flex-direction:row; <-defaultní
}
flex-wrap: wrap;
flex-wrap: nowrap;
complete list
Uniform common border):
border: [border size] [border style] [border color];
border: 0.5vw dotted rgba(153, 255, 0,0.5);
funguje jako zjednodušení těchto tří základních atributů: flex-basis, flex-grow, flex-shrink
v tomto pořadí:
flex: grow shrink basis;
zmenšeno:
zvětšeno:
color: radial-gradient(yellow, green, blue, purple);
ale to není vše! můžeme si zvolit, jaká barva bude mít jaké zastoupení.
konkrétně zde:
color: radial-gradient(yellow 15%, green, 50%, blue 25%, purple 30%);
tvar: ellipse, circle:
color: radial-gradient(circle, yellow 15%, green, 50%, blue 25%, purple 30 %);
problém je, že jakmile bude místo na prvek menší než hodnota flex-basis, či přímo v css kódu u container-itemu, přesune se daný prvek na další řádek v daném kontejneru. co když to ale nechci?
defaultní hodnota: 1: povolí automatické zmenšování prvků
0: zablokuje automatické zmenšování prvku - př.: "D"
flex-shrink>1 - např. 3: daný prvek se zmenšuje 3x rychleji než ty ostatní
HTML:
flex-basis: základní velikost
U třetího prvku "C" trochu pozměníme kód: Ten prvek dostane 2x více místa co ostatní.
Musíme to přidat všude!
Jinak totiž daný prvek sežere všechno místo!
defaultní hodnota je 0, neboli žádný prvek nemůže zabírat místo navíc.
podle toho, kolik jakáý prvek má, se rozdělí místo navíc podle hodnoty flex grow v daném prvku: hodnota v prvku/celková hodnota*(místo celkem-zabrané místo).
když zvětším/zmenším okno prohlížeče, prvky se automaticky zvětší/zmenší.
visibility: visible/...;
visible - je vidět
hidden - není vidět
collapse -tabulky atd. - např. zmizí nějaký řádek, neovlivní to ale layout zbytku
initial - výchozí
inherit - převezme od parent elementu
Can also be written like this with the same effect:
čára v textu:
.odkazy1{
text-decoration: none; <--odstraní čáry z textu
}
dále: underline, line-through, overline
změna velikosti písmen:
h2{
text-transform: capitalize; <-1. písmeno v každém slově je velké
}
uppercase - vše velké, lowercase - vše malé
zarovnání textu:
h1{
text-align: center;
}
left, right, center, justify
řádkování/velikost řádku:
line-height: 14px;
align-self: auto, flex-start, flex-end, center, baseline, stretch
má větší prioritu než zarovnání celého kontejneru
příklad využití na druhé straně
příklad (HTML):
top, bottom, right, left
diagonálně: bottom right atd.
stupně: -90deg atd.
spousta vlastností pojmou 1-4 parametry pro všechny 4 směry, např. margin, border. v tom případě je vyjmenováváme v pořadí
všechny 4 směry zvlášť:
[top] [right] [bottom] [left]
nebo vertikální + horizontální:
[top+bottom] [right+left]
nebo 1, jednotný:
[top+right+bottom+left]
nebo 3 - čtvrtý směr duplikuje druhý:
[top] [right+left] [bottom]
nemusí to nutně být shora po směru, např. /layout/okraje/kulaté se definují shora zleva po směru. spíše to tedy obecně znamená po směru hodinových ručiček.
h2{
position: absolute;
left: 30vw;
top: 200px;
}
bude vždy 200px a 30vw od levého horního rohu
#rozcestník{
position: fixed;
top: 10vh;
left: 0;
}
scrollováním se nebude hýbat
bez některého z dalších dvou parametrů či nastavením jeho hodnoty na "auto" se prvel přizpůsobí výchozímu formátování bez atributu position
position: static;
má fixní pozici vzhledem k toku strany;
position: relative;
left: 10vw;
levý okraj posunut o 10vw vzhledem k běžné pozici objektu (pokud např. bude prvek ještě zarovnaný na střed, bude spíš vpravo)
position: sticky;
top: 3vw;
prvek je scrollovatelný, ale jakmile bude prvek 3vw od vrchnu stránky, zafixuje se jeho pozice
co jsem tak zjistil, nefunguje to, pokud je prvek v <header> v HTML. TAK POZOR!
font-size: 24px, 1.25em atd. (24 pixelů, 1.25x větší než běžně)
font-weight: 100, 200, 300 atd. (tloušťka fontu)
font-style: italics, oblique (trošku víc italics)
YT 2:38:00-2:49:15
align-items: v jaké výšce jsou zarovnány v prvky v řádku/řádek vzhledem ke kontejneru (justify content pro vertikální roztažitost)
align-self: jednotlivé prvky, má přednost před align-items
justify-content: prvky v rádku vzhledem k sobě (jako ve wordu na střed, nalevo, napravo, do bloku...)
align-content: rádkování
HTML:
<div id="container123"">
<div class="container-item123">A</div>
<div class="container-item123">B</div>
<div class="container-item123">C</div>
<div class="container-item123">D</div>
</div>
#container123{
backgound-color: rgb(245, 245, 245);
margin: 10px;
height: 300px;
display: flex; <-vytvoří flex container
}
#id123{
display: none;
}
úplně zmizí - není vidět, nezabírá místo
display: inline-block;
např. u tabulek, které jsou defaultně bloky
display: inline;
je vidět rozdíl:
font-family: sans-serif;
font-family: "Times New Roman", sans-serif;
pokud je TNR dostupný font, použij ho, jinak použíj standartní sans-serif font
HTML:
<div class="container">
<div class="container-item" style="order: 4;">A</div>
<div class="container-item" style="order: 3;">B</div>
<div class="container-item" style="order: 5;">C</div>
<div class="container-item" style="order: 1;">D</div>
<div class="container-item" style="order: 2;">E</div>
</div>
.prvek{
background-color: rgb(36, 130, 39);
color: white;
font-size: 25px;
text-align: center;
width: 70px;
line-height: 50px;
margin: 10px;
v levém horním rohu se dá nastavit preview pro různá zařízení
justify-content: center/flex-start/flex-end/atd.;
flex-start @ flex-direction start
margin="okraj"
padding="obal"
padding: 20px; <-vyrobí 20px místa okolo obrázku
margin: 20px <-udělá taky 20px místa
rozdíl: padding udělá před borderem, margin po borderu
padding-right, padding-top...udělá pouze na dané straně
margin: 100px 40px 60px 0; <-definuje všechny strany zvlášť po směru hodinových ručiček, počínaje horní stranou
margin: 50px 20px; <-definuje (top+bottom) (left+right)
Jaký je mezi nimi rozdíl? Praktický příklad: Máme tlačítko, které se při najetí na něj zvětší. Margin by zařídilo, že by to dalo vše ostatní stranou a vzniklo by volné místo, zatímco padding by zvětšilo celé tlačítko, takže kliknutí na uvolněnou část by mohlo aktivovat tlačítko.
align-items: center/flex-start/flex-end/atd.;
border: size style color;
style:
HTML:
CSS:
.right-pic{
float: right/left; <-funguje i pro text, tabulky atd.
}
obrázek se šoupne úplně doprava a uvolní se místo -> obsah po něm se šoupne nahoru na jeho původní místo
float: inherit;
vezme float parent elementu, taky velmi užitečné
float:none;
resetuhe formátování, které tomu bylo dáno, na defaultní
border-radius: [jednotný poloměr];
border-radius: [vlevo nahoře] [vpravo nahoře] [vpravo dole] [vlevo dole];
border-radius: [vlevo nahoře + vpravo dole] [vpravo nahoře + vlevo dole];
border-radius: [vlevo nahoře] [vpravo nahoře + vlevo dole] [vpravo dole]
