skip to Main Content

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.

Kako dodatno ukrasiti sadržaj vaše web stranice?

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.

Kako dodatno ukrasiti sadržaj vaše web stranice?

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.

  1. 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

Kako dodatno ukrasiti sadržaj vaše web stranice?
Kako dodatno ukrasiti sadržaj vaše web stranice?

Gradient teksta:

p {

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

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

Kako dodatno ukrasiti sadržaj vaše web stranice?

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

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

Kako dodatno ukrasiti sadržaj vaše web stranice?

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

Kako dodatno ukrasiti sadržaj vaše web stranice?

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

Kako dodatno ukrasiti sadržaj vaše web stranice?
Kako dodatno ukrasiti sadržaj vaše web stranice?
Kako dodatno ukrasiti sadržaj vaše web stranice?

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.

Kako dodatno ukrasiti sadržaj vaše web stranice?

Made by Aleksandar Đurđević – Senior Web Developer @Digitizer