html

Side menu animacija

U ovom tutorialu naučit će te kako se kreira side menu sa animacijom, te animaciju hamburger menu tipke.

Koristio sam 2 glavna elementa na stranici sa class-om left_menu i page.
left_menu class se sastoji od nekoliko elemenata, a to su:

  • menu_btn u kojem se nalaze 3 span elementa koja služe za hamburger menu ikonu
  • <ul> element u kojem se nalaze linkovi menu-a

page class se sastoji od dva djela, a to su:

  • title class koja sadrži naslov stranice
  • text class u kojoj se nalazi text stranice sa lorem ipsum textom

Balkan

Text sa neonskim efektom

Ako volite neonske efekte, onda je ovo pravi tutorial za vas. U ovom tutorialu ću vam pokazati kako možete sa nekoliko css linija napraviti text sa neonskim efektom  koji će te moći koristiti odmah vidljiv ili samo na hover. Kroz čivat tutorial sam koristio Ubuntu font sa 700 debljine.
Jedino što trebate je jedan <p> element sa <span> elementom unutar njega s teekstom koji želite. Prvi element <p> će mi služiti za stalni neon efekt dok će drugi biti samo na hover. 

Balkan

Jednostavna tipka sa klik animacijom

U ovom tutorialu možete naučiti jednostavne hover animacije sa funkcijom klika. Za ovaj tutorial korišten je samo jQuery i Font Awesome

Prvo što trebate napraviti jest dodati tag <p> sa klasnom btn, a boju koju koju će te dodjeliti btn -u možete koristiti po želji. Zatim dodate dva <span> taga, prvi se koristi za prikaz teksta, a drugi za prikaz font-awesome ikone.

Balkan

Jednostavna sass funkcija za meterijal dizajn sjene

U materijal dizajnu jedna od najvažnijih stvari je sjena na elementima koja određuje koliko je element podignut od same stranice. Gotovo svaki panel, tipka, forma ima sjenu.
U ovom tutorial-u možete vidjeti "material-shadow" funkciju u sass-u koji možete jednostavno koristi na svojoj web stranici. Postoje 5 levela sjene, od najmanjeg ($level 1) do najvećeg ($level 5).

Balkan

Bootstrap 3 i 4 material dizajn tipke sa hover efektom

Vjerovatno vas je većina koristila Bootstrap css framework. On je jedan od najpopularnijih html, css, i js framework koji se koristi za razvoj prilagodljivih (responsive) web stranica. 
No ako želite prilagoditi bootstrap dizajn da izgleda malo više kao google material design u ovom tutorialu možete vidjeti kako u samo nekoliko css izmjena bootstrap tipke već mogu biti material dizajna.

Balkan

Pages

Subscribe to RSS - html