Side menu animation

In this tutorial you will learn how to create a side menu with animation and also hamburger button animation.

I used 2 elements on the page with class left_menu and page.
left_menu class consists of several elements:

  • menu_btn with 3 <span> elements used for creating hamburger menu icon
  • <ul> element that contains links of the menu

page class consists of two parts:


Neon glow text

If you love the neon effects, then this is the tutorial for you. In this tutorial I will show you how to make text with neon effect with several css lines that will allow you to use it immediately or just hover. Through the tutorial I used Ubuntu font with font weight of 700.  
Only thing you need is one <p> element with <span> element in it with text you want. The first element <p> will serve me for a permanent neon effect while a secont one will only be on hover. 


Simple material shadow scss function

In material design one of the most important thing is shadow that determines how far raised or close is element on page. Almost every panel, button, form have a shadow.
In this tutorial you can see"material-shadow" function in sass which you can use easly use on your website. There is 5 level of shadow, from the lowest ($level 1) to the highest ($level 5).


Bootstrap 3 and 4 material buttons with hover effects

Most of probably you used the Bootstrap css framework. It is one of the most popular html, css, and js framework used to develop responsive web pages.
But if you want to customize the bootstrap design to look a little more like google material design in this tutorial, you can see how in just a few css changes the bootstrap buttons can already be the in material design.
What you need to do is make this css set up after bootstrap css to override bootstrap's css.



Subscribe to RSS - html