Radial image cover

Posted Posted in CSS

Your HTML markup <div class=”holder”> <img src=”http://lorempixel.com/500/500/sports/”/> <div class=”radial”></div> </div> Your CSS .holder { width: 500px; height: 500px; position: relative; } .radial { position: absolute; […]

Burger menu button

Posted Posted in CSS, Javascript

Let’s say you need a burger button to toggle your primary menu which as the class primary-menu The HTML markup <span class=”menu-toggle” data-toggle=”.primary-menu”> <span class=”menu-toggle-lines”></span> […]

Cross browser image grayscale filter

Posted Posted in CSS

img.grayscale { filter: url(“data:image/svg+xml;utf8,&lt;svg xmlns=\’http://www.w3.org/2000/svg\’&gt;&lt;filter id=\’grayscale\’&gt;&lt;feColorMatrix type=\’matrix\’ values=\’0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 […]

Vertical align center

Posted Posted in CSS

If you want to align a div vertically center and you don’t know its height use the below code: .element { position: relative; top: 50%; […]

Pulse animation

Posted Posted in CSS

Create a circle and animate it forever! .cirlce { border: 1px solid #777; border-radius: 100%; height: 30px; width: 30px; background-color: #eee; animation: pulse 1s ease-out; […]