JakaTopič

Cilji:

naučiti se narediti preprost meni,

naučiti se uporabljati psevdoelement :hover,

naučiti se uporabljati funckijo calc(),

naučiti se uporabljati selektor :first-letter.

Primer:

<body>
	<main>
		To je vsebina strani
	</main>
	<footer>
		To je sticky footer!
	</footer>
</body>

footer {
	background-color: rgb(150,151,163);
	height: 30px;
}

main { 
	min-height: calc(100vh - 30px);
}

Sticky footer

Sticky footer, je noga strani, ki je pripeta na dno tudi, če vmes ni dovolj vsebine.

Najprej v HTML napišemo <footer></footer>. V nogo lahko nato nekaj zapišemo, ali pa pustimo prazno.
Nato ga v CSS oblikujemo tako, da mu določimo barvo (background-color) in višino (height).

Na koncu še nastavimo najmanjšo višino vmesnega dela strani (<main>) na višino okna, minus višino noge (<footer>). To nato napišemo v funkcijo calc, ki bo izračunala višino vmesnega dela zato, da bo footer vedno na dnu zaslona (calc(100vh - 30px)).

Primer:

<a class="tooltip">Besedilo
	<span class="tooltip-text">Razlaga</span>
</a>

.tooltip {
	position: relative;
}

.tooltip .tooltip-text {
	display: none;
	background-color: #000;
	padding: 3px;
	border-radius: 5px;
	color: #FFF;
}

.tooltip:hover .tooltip-text {
	display: inline;
	width: 120px;
	position: absolute;
    top: 100%;
    left: calc(50%-60px);
}

Tooltip

Tooltip je kratka razlaga ali nasvet. Tooltip se nam prikaže, kadar je miška nad elementom s pseudorazredom :hover.

Najprej v <a class="tooltip"></a> zapišemo tisto besedo ali besedilo, za katerega želimo imeti tooltip, v <span class="tooltip-text"></span> pa zapišemo to, kar želimo, da bi se nam prikazalo. Nato v CSS določimo razredu "tooltip" relativno pozicijo, kar pomeni, da bo pozicija elementov pod tem razredom relativna.
V .tooltip .tooltip-text vpišemo oblikovne lastnosti oblačka (background-color, color, border-radius in padding). Display nastavimo na none, saj ne želimo, da bi bil oblaček vedno viden.
V .tooltip:hover .tooltip-text pa vpišemo višino (height) in pozicijo (top, left) oblačka. Display nastavimo na inline, in pozicijo (position) na absolute, saj želimo določiti točne koordinate. V leftu smo uporabili funkcijo calc, ki je oblaček sredinsko poravnala. V to funkcijo smo vpisali vrednost polovice tooltip elementa (50%) minus širina oblačka.

Primer:

<p class="crka">Besedilo</p>

.crka:first-letter{
	font-size: 3em;
	color: grey;
}

Velike črke

Selektor ::first-letter uporabimo, kadar želimo oblikovati prvo črko nekega besedila.

Deluje tako, da v HTML najprej zapišemo neko besedilo ki mu določimo nek razred (class). Nato v CSS temu razredu dodamo selektor :first-letter (.crka:first-letter) in dodamo oblikovne lastnosti naše črke, kot naprimer barvo (color) in velikost (font-size).