Web sajt je lična karta vašeg biznisa. Njegov izgled i korisničko iskustvo koje pruža mogu biti od presudnog značaja za njegov uspeh, a samim tim i za uspeh vašeg biznisa. U nastavku teksta pogledajte savete kako dodatno ukrasiti sadržaj na vašem sajtu.

Kako dodatno ukrasiti sadržaj

Pored obične boje slova/fonta, mogu se koristiti i gradijant boje/prelaz boja (color gradient), senka (text shadow), kontura (conture), providnost (transparency), ovo se odnosi i na druge elemente stranice.

Zašto koristiti CSS, a ne obične slike? Postoji nekoliko razloga zašto je mnogo racionalnije koristiti CSS, nego obične slike.

Veličina slike (File size)

Veličina slika je uglavnom najveci problem kod web sajtova,i obično jedna ili dve slike zauzimaju više prostora na stranici, nego ceo html/css/js kod strane zajedno, tako da to negativno utiče na vreme preuzimanja i prikazivanja.

Održavanje (Maintenance)

Većina developera ne koristi ili ne ume da koristi Photoshop ili neki drugi program za editovanje slika. Sa druge strane dizajneri rade druge stvari i nemaju vremena da pomažu u izmenama. Takođe mnogo više vremena treba da se izmeni slika, nego da se zameni nekoliko linija html/css fajla.

Performanse (Performance) 

Najveća predonst CSS-a u poređenju sa slikama su performanse. Svaki put kad neko pošalje zahtev/upit (HTTP Request) tj. otvori neku web stranicu, klikne na sublink, osveži stranu i sl, svaki taj zahtev pokreće više procesa (fajlovi moraju da se uporede, informacija o zaglavlju treba da se provere, izmene datumi itd.), što dodatno usporava prikazivanje sajta. Takođe verovatno ćete morati da pravite dodatne slike za male uređaje, jer su različitih proporcija i tekst verovatno neće biti vidljiv. Sve bi se to izbeglo korisćenjem html/css-a.

Prednosti slika

Problem kod CSS-a je što se mora pripaziti na izgled kod svih pretraživača i uređaja (browser-a).

Postoje situacije kada je lakše koristiti sliku i rešiti takve probleme.

Ukrašavanje teksta

Pored obične boje slova, uz malo truda može se napraviti da slova budu lepša i istaknutija.
Naravno moramo paziti da ne budu previše kičasta.


Providnost (opacity):

Ako želite da koristite providan tekst koristite “opacity” svojstvo:

p {

  opacity: 0.5; 

}

raspon se kreće izmedju 0.0 do 1.0, kao procentualna vrednost između 0% i 100%

0.0 = skroz providno

1.0 = maksimalno vidljivo, boja ce biti najjača

Opacity može da se koristi i na ostalim elementima, ne samo na tekstu.

Boja pomoću RGB ili RGBA vrednosti

Vrednost RGBA boje predstavlja Red, Green, Blue i Alpha (Crvena, Zelena, Plava i Alpha) izvore svetlosti.

Red, Green, Blue i Alpha (Crvena, Zelena, Plava i Alpha) 

Definiše intenzitet crvene, zelene i plave boje kao ceo broj između 0 i 255.

Kao i kod Opacity-a, Alfa (Alpha – providnost) raspon se kreće izmedju 0.0 do 1.0. Procentualna vrednost između 0% (skroz providno) i 100% (puna boja).

p {

  color: rgba(127, 255, 127, 0.3); 

}

p {
  /*crvena boja*/

 color: rgb(255, 0, 0); 

}

Senka i Kontura:

p {

 text-shadow: 3px -2px 2px #CE5937;

}

1. parametar 3px, pomeranje senke za tri piksela po horizontali u levo u odnosu na tekst.
2. parametar -2px pomeranje senke za dva piksela po horizontali na gore u odnosu na tekst.
3. parametar je zamućenost senke, kada je 0px senka je čista i više liči na konturu bez zamućenosti,

što je broj veći senka će biti mutnija i providnija.

4. parametar je boja senke prikazan kao heks boja (hex color)

Više o temi možete pogledati na sledećem linku: https://www.w3schools.com/colors/colors_hexadecimal.asp

Gradient teksta:

p {

  background: linear-gradient(#eee, #333);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

background: linear-gradient(#eee, #333); 

Prvo postavljamo pozadinsku boju u ovom slucaju “linearni gradijant”.

postoji i radial gradijant (kružni prelaz boja od centra ka spolja)

Primer gradient-a sa tri boje

Linear-gradient (45deg, #FF0000 0%, #00FF00 50%, #0000FF 100%);
1. Parametar je ugao boje, kada je ugao 0°, linija gradienta je horizontalna, kada je ugao 90° linija je vertikalna.
2,3 i 4.  Paramatetar su boja + početak boje na liniji, recimo 50% znači da boja počinje od sredine linije (može se koristiti i više od tri boje)

Sajt za probu: https://cssgradient.io

Zatim koristimo parametar background-clip: text;

Što znači da će pozadinska boja koja je gradient biti isečena po konturi našeg teksta.

Više o isecanju pozadinske boje možete naći ovde. 

I treća stvar postavljamo da je boja teksta transparentna, tako da se vidi samo pozadinska boja.

-webkit-text-fill-color: transparent; 

ili

-webkit-text-fill-color: rgba(0, 0, 0, 0);

-webkit-, -moz-, -khtml-, -ms-, -o-

ovo su “vendor” prefiksi o kojima ćemo drugi put

više o njima na https://css-tricks.com/how-to-deal-with-vendor-prefixes/

Online generator za pozadinsku boju, prelaze i slično možete naći ovde.

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.