Pli fortaj koloroj kaj stiloj

Skip to content

Ĉi tio estas maŝine tradukita teksto kiu povas enhavi erarojn!

Ĝis nun vi uzis kolorojn kiel red, blue, green kaj simile, sed kiel ni povas ricevi kolorojn ĝuste kiel ni volas? Nu, ni povas uzi fargekodojn. Eble vi jam vidis tiujn fargekodojn antaŭe, ekzemple, tute ruĝa koloro estas #FF0000. Sed kion tio signifas?

Sesdekumaj nombroj (16-nombra sistemo)

Vi vidas la 10-nombrajn sistemon ĉiutage, ciferoj de 1-10. Komputiloj ne estas tiom bonaj en la 10-nombra sistemo. Komputiloj prefere preferas la 2-nombrajn sistemon kaj la 16-nombrajn sistemon.

Ĉi tie uzatas ciferoj kiuj preterpasas 9. A-F uzatas kiel 10, 11, 12, 13, 14, 15.

Jen ekzemplo de kiel ĝi aspektas:

10-nombra sistemo 16-nombra sistemo
0 00
9 09
10 0A
15 0F
16 10
31 1F
159 9F
255 FF
256 100

Kiel ni povas ligi tion al koloraj kodoj? Koloroj ĉiam estas agorditaj kiel: #RRGGBB. Estas du ciferoj por ruĝo, verdo kaj bluo. Kio signifas, ke ĉiu koloro havas kvanton de 00-FF, kie 00 estas nenio el tiu koloro kaj FF estas kiel eble plej multe, valoro de 0-255 en la 10-nombra sistemo.

Tasko 3.1

Provu krei kelkajn kolorojn per uzo de heksadecimalaj nombroj. En CSS, vi povas skribi tion kiel:

p {
    color: #ff0000; // Denne koden setter fargen på teksten til rød.
} // Ĉi tiu kodo metas la koloron de la teksto al ruĝa.

Provu krei: Ruĝa, Verda, Blua, Flava, Viola, Ciana. Provu ankaŭ proprajn kolorajn kodojn por vidi kio okazas.

Color picker

Se vi iras al la reto kaj serĉas “Color Picker”, vi ricevos kolor-elektron, kiu povas aŭtomate trovi la kolor-kodojn.

Gjennomsiktige farger

Se vi volas travidecon, vi povas aldoni du ciferojn kiuj diras la kvanton de travideco:

p {
    color: #ff000077;
}

RGB

Alia maniero skribi kolorojn en CSS estas per uzo de rgb(). Tio uzas dekuma sistemo anstataŭe.

p {
    color: rgb(255, 0, 0);
}
// Dette er en komento som forklarer fargen.
// Ĉi tio estas komento kiu klarigas la koloron.

Gjennomsiktige farger rgb()

Se vi volas travidecon ĉi maniere, vi povas uzi la funkcion rgba() kun nombro de 0.0 ĝis 1.0, kie 0 estas 0% kaj 1.0 estas 100%.

p {
    color: rgba(255, 0, 0, 0.5);
}

Sekundaraj Selektiloj en CSS

Se vi volas legi PLEJ multe pri selektiloj en CSS, iru tien CSS Selectors w3schools

Kiel ili povas esti uzataj kun ekzemplo:

<a class="epic-link" href="https://youtu.be/dQw4w9WgXcQ">Klikk her!</a>
<!-- Dette er en lenke til en morsom video. -->
<!-- Ĉi tio estas ligilo al amuza video. -->


.epic-link {
    color: #afaf00; // Koloro de la epika ligilo
}

.epic-link:hover {
    color: #00afaf; // Koloro kiam la muso estas super la epika ligilo
}

Jen uzeblas :hover, kiu diras kiel io aspektas se vi havas la muskurson super la elemento.

Tasko 3.2a

Provu uzi :hover sur elemento <div> por ŝanĝi la fonon se vi havas la muskaŝpililon super ĝi.

Tasko 3.2b

Uzu kelkajn el la selektiloj el ĉi tie CSS Selectors w3schools por stiligi elementojn.

Transiroj (Transitions)

Vi eble rimarkas, ke kiam vi uzas :hover, la transiro en koloro ktp. okazas tuj. Eblas solvi tion per la propraĵo transition.

p {
    background-color: #ff0000;
}

p:hover {
    background-color: #00ff00;
    transition: background-color 2s;
}

Tio diras, ke la koloro uzos 2 sekundojn por fari transiron al verda fono.

Tasko 3.3

Uzu transirojn por animacii vian retejon.

Legu pli pri transiroj ĉi tie: CSS Transitions.