Osnove CSS prelivov in delovanje generatorja
CSS prelivi omogočajo ustvarjanje gladkih prehodov med dvema ali več barvami neposredno v kodi spletne strani. Namesto uporabe slikovnih datotek se preliv izriše programsko, kar zmanjšuje čas nalaganja strani in omogoča prilagajanje poljubnim dimenzijam elementov. Orodje Generator prelivov omogoča vizualno oblikovanje teh prehodov z izbiro vrste preliva, prilagajanjem smeri ali oblike ter določanjem barvnih točk.
Vsak preliv se izriše neposredno v vašem brskalniku. Nič od tega, kar nastavite tukaj, se ne prenaša na BroBroGo. To pomeni, da obdelava podatkov poteka lokalno na vaši napravi.
Začetno stanje orodja vsebuje dve barvni točki: #6366f1 0% in #ec4899 100%. Uporabnik lahko te vrednosti poljubno spreminja, dodaja nove točke ali spreminja vrsto preliva, pri čemer se vmesni rezultati sproti prikazujejo v vizualnem predogledu.
Vrste prelivov in njihove lastnosti
V spletnem oblikovanju se uporabljajo tri glavne vrste prelivov, ki določajo geometrijsko obliko in smer mešanja barv. Orodje omogoča izbiro naslednjih možnosti pod naslovom Vrsta preliva:
- Linearen (linear): Ta vrsta preliva meša barve vzdolž ravne črte. Smer prehoda določa kot, ki ga uporabnik nastavi ročno.
- Radialen (radial): Barve se širijo navzven iz središčne točke. Namesto kota se pri tej vrsti določa geometrijska oblika prehoda.
- Stožčast (conic): Barve se ovijajo okoli središčne točke v smeri urinega kazalca, kar ustvarja učinek, podoben barvnemu kolesu.
Linearni prelivi: Smer in koti
Pri izbiri možnosti Linearen (linear) se barve prelivajo vzdolž premice. Ključni parameter za prilagajanje te smeri je Kot.
Vrednost kota je številčna vrednost. Kot določa smer poteka preliva, pri čemer veljajo naslednja pravila:
- Pri kotu 0° poteka preliv navzgor.
- Pri kotu 90° poteka preliv v desno.
Z ustreznim nastavljanjem kota lahko natančno določite, kako bodo barve prečkale ozadje vašega elementa, kar je uporabno za prilagajanje postavitvi preostalega besedila in grafičnih elementov na strani.
Radialni prelivi: Oblike in širjenje
Ko izberete možnost Radialen (radial), se barve širijo navzven iz središča v obliki kroga ali elipse. Pri tej vrsti preliva drsnik za kot ni na voljo.
Namesto kota pod naslovom Oblika izberete eno od dveh možnosti:
- Elipsa
- Krog
Stožčasti prelivi
Možnost Stožčast (conic) ustvari preliv, kjer se barvni prehodi vrtijo okoli osrednje točke. Za razliko od radialnega preliva, kjer se barve širijo od znotraj navzven, se pri stožčastem prelivu barve vrstijo v krožnem loku okoli središča.
Tako kot pri linearnem prelivu tudi tukaj nastavitev Kot določa začetno točko, od koder se preliv začne vrteti.
Upravljanje z barvnimi točkami
Barvne točke določajo, katere barve bodo sestavljale preliv in kje natančno na osi preliva se bodo nahajale. Orodje omogoča natančno upravljanje teh točk pod naslovom Barvne točke:
- Število točk: Ustvarite lahko najmanj dve in največ osem barvnih točk. Ko dosežete omejitev osmih točk, se gumb Dodaj točko onemogoči.
- Položaj: Vsaka točka ima določen Položaj v odstotkih od 0 % do 100 %. Vrednost 0 % predstavlja sam začetek preliva, medtem ko 100 % predstavlja skrajni konec.
- Dodajanje novih točk: Ko kliknete gumb Dodaj točko, se nova točka privzeto ustvari s položajem na 50 %.
- Odstranjevanje: Vsako posamezno točko lahko odstranite s klikom na gumb Odstrani točko.
S spreminjanjem položaja posamezne barvne točke določate, kako oster ali mehak bo prehod med sosednjima barvama. Če sta dve različni barvni točki postavljeni zelo blizu skupaj, bo prehod med njima oster, medtem ko večja razdalja med točkami ustvari nežen in dolg prehod.
Izvoz in uporaba CSS kode
Ko dosežete želeni videz preliva, lahko generirano kodo prenesete v svoj projekt. Pod naslovom CSS se nahaja polje z generirano kodo, ki jo lahko neposredno kopirate.
Za poenostavitev postopka je na voljo gumb Kopiraj CSS. Ob kliku nanj se koda shrani v odložišče vaše naprave, napis na gumbu pa se spremeni v Kopirano, kar potrjuje uspešen prenos. To kodo nato preprosto prilepite v svojo datoteko CSS kot vrednost za lastnost background ali background-image.
Pogosta vprašanja (FAQ)
Kakšna je razlika med linearnimi, radialnimi in stožčastimi prelivi?
Linearni preliv (linear) meša barve vzdolž ravne črte, ki jo usmerite s kotom. Radialni preliv (radial) jih širi navzven iz središča v obliki kroga ali elipse. Stožčasti preliv (conic) pa jih vrti okoli središča kot barvno kolo.
Kaj so barvne točke?
Vsaka barvna točka (color stop) je barva, pritrjena na določen položaj vzdolž preliva — 0 % na začetku, 100 % na koncu. Premaknite točko, da spremenite mesto, kjer je barva najbolj izrazita, ali dodajte več točk za bogatejše mešanje. Uporabite lahko do osem točk.
Kako določim smer preliva?
Pri linearnem ali stožčastem (conic) prelivu drsnik za kot določa smer — 0° kaže navzgor, 90° desno. Radialni preliv nima kota; namesto tega izberite obliko kroga ali elipse, da spremenite način širjenja.