Dd makes you design drastic

An unique collection of HTML5/CSS3 Snippets, Free HTML Templates and Photoshop Mockups. Get to know about what is trending in web designing and related technologies.

Browse Snippets!

Featured Snippets

Get In Touch Contact Information Icon Designs CSS

 Techmates
 21 Apr, 2018

In this demo we're going to create a creative get in touch contact information icon designs and their hover effects.


Let's dive into the code:


- HTML Structure

 <div class="card">
	<div class="social-icon marker-style">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon marker-style pin">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon marker-style icon-bg">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon perspactive-style">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style round">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon perspactive-style between">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>

<div class="card">
	<div class="social-icon hexagon-style square-sm">
		<i class="fas fa-phone"></i>
	</div>
	<br />
	<label>xxx-xxx-xxxx</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style square-lg">
		<i class="fas fa-envelope-open"></i>
	</div>
	<br />
	<label>example@domain.com</label>
</div>
<div class="card">
	<div class="social-icon hexagon-style pentagon">
		<i class="fas fa-map-marker-alt"></i>
	</div>
	<br />
	<label>Address Address...</label>
</div>


- CSS Styles

 :root {
    --clr-blue: #4285F4;
    --clr-red: #EA4335;
}
.section {
    padding: 50px;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    margin: -1px 0;
}
.card {
    display: inline-block;
    width: 300px;
    cursor: pointer;
}

Hope you guys liked the demo!

creative,   animation,   hover ... 

Radio Button And Checkbox Designs CSS

 Techmates
 18 Apr, 2018

In this post, we're creating a radio button and checkbox elements designs using CSS.


The web browsers are not support all the properties/designs for this kind elements. So, in this demo we manipulating the elements(radio-button, checkbox) and replace the core elements with HTML tag(label) and CSS design.

The demo has 2 types of color themes. You can change the theme by replacing the variable file in index.html

The code snippets:


- HTML Structure

 <div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_1" />
    <label for="radio_border_zoomOut_1">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_2" />
    <label for="radio_border_zoomOut_2">Radio button</label>
</div>	
<div class="box-group basic zoomOut">
    <input type="radio" name="radio_border_zoomOut" id="radio_border_zoomOut_3" />
    <label for="radio_border_zoomOut_3">Radio button</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_1" />
    <label for="checkbox_border_zoomOut_1">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_2" />
    <label for="checkbox_border_zoomOut_2">checkbox</label>
</div>
<div class="box-group basic zoomOut">
    <input type="checkbox" name="checkbox_border_zoomOut" id="checkbox_border_zoomOut_3" />
    <label for="checkbox_border_zoomOut_3">checkbox</label>
</div>

<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_1" />
    <label for="radio_border_zoomIn_1">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_2" />
    <label for="radio_border_zoomIn_2">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="radio" name="radio_border_zoomIn" id="radio_border_zoomIn_3" />
    <label for="radio_border_zoomIn_3">Radio button</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_1" />
    <label for="checkbox_border_zoomIn_1">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_2" />
    <label for="checkbox_border_zoomIn_2">checkbox</label>
</div>
<div class="box-group basic zoomIn">
    <input type="checkbox" name="checkbox_zoomIn_border" id="checkbox_border_zoomIn_3" />
    <label for="checkbox_border_zoomIn_3">checkbox</label>
</div>

<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_1" />
    <label for="radio_solid_1">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_2" />
    <label for="radio_solid_2">Radio button</label>
</div>
<div class="box-group solid">
    <input type="radio" name="radio_solid" id="radio_solid_3" />
    <label for="radio_solid_3">Radio button</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_1" />
    <label for="checkbox_solid_1">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_2" />
    <label for="checkbox_solid_2">Checkbox</label>
</div>
<div class="box-group solid">
    <input type="checkbox" name="checkbox_solid" id="checkbox_solid_3" />
    <label for="checkbox_solid_3">Checkbox</label>
</div>

<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__1" />
    <label for="radio_solid_border__1">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__2" />
    <label for="radio_solid_border__2">Radio button</label>
</div>
<div class="box-group solid border">
    <input type="radio" name="radio_solid_border_" id="radio_solid_border__3" />
    <label for="radio_solid_border__3">Radio button</label>
</div>

<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_1" />
    <label for="checkbox_solid_border_1">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_2" />
    <label for="checkbox_solid_border_2">Checkbox</label>
</div>
<div class="box-group solid border">
    <input type="checkbox" name="checkbox_solid_border" id="checkbox_solid_border_3" />
    <label for="checkbox_solid_border_3">Checkbox</label>
</div>

<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__1" />
    <label for="radio_solid_border_bg__1">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__2" />
    <label for="radio_solid_border_bg__2">Radio button</label>
</div>
<div class="box-group solid border-bg">
    <input type="radio" name="radio_solid_border_bg_" id="radio_solid_border_bg__3" />
    <label for="radio_solid_border_bg__3">Radio button</label>
</div>

<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_1" />
    <label for="checkbox_solid_border_bg_1">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_2" />
    <label for="checkbox_solid_border_bg_2">Checkbox</label>
</div>
<div class="box-group solid border-bg">
    <input type="checkbox" name="checkbox_solid_border_bg" id="checkbox_solid_border_bg_3" />
    <label for="checkbox_solid_border_bg_3">Checkbox</label>
</div>

<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-linux"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_1" />
    <label for="radio_card_1">Option 1</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-apple"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_2" />
    <label for="radio_card_2">Option 2</label>
</div>
<div class="box-group card radio" data-check-element="radio">
    <i class="mdi mdi-windows"></i>
    <div class="cf"></div>
    <input type="radio" name="radio_card" id="radio_card_3" />
    <label for="radio_card_3">Option 3</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-bike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_1" />
    <label for="checkbox_card_1">Checkbox 1</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-motorbike"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_2" />
    <label for="checkbox_card_2">Checkbox 2</label>
</div>
<div class="box-group card checkbox" data-check-element>
    <i class="mdi mdi-car"></i>
    <div class="cf"></div>
    <input type="checkbox" name="checkbox_card" id="checkbox_card_3" />
    <label for="checkbox_card_3">Checkbox 3</label>
</div>

- CSS Styles


- style.css

 .grid {
    border-top: 1px solid var(--grid-border-clr);
    border-bottom: 1px solid var(--grid-border-clr);
    margin-bottom: -1px;
}
.col-2 {
    width: 50%;
    float: left;
    padding: 25px 0;
}
.box-group {
    position: relative;
    display: inline-block;
    margin: 0 10px;
}
.box-group input[type="radio"], .box-group input[type="checkbox"] {
    display: none;
}
.box-group label {
    position: relative;
    cursor: pointer;
    font-weight: 700;
    color: var(--clr-gray);
}
.box-group.basic label {
    font-size: 16px;
    padding-left: 25px;
    transform: var(--transition);
}
.box-group.basic label::before, .box-group.basic label::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transition: var(--transition);
}
.box-group.basic label::after {
    border: 1px solid var(--clr-gray);
}
.box-group.basic label::before {
    left: 1px;
    font-family: "Material Design Icons";
    opacity: 0;
}
.box-group.basic input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.basic input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.basic.zoomOut label::before {
    transform: scale(0);
}
.box-group.basic.zoomIn label::before {
    transform: scale(2);
}
.box-group.basic input[type="radio"] + label::after {
    border-radius: 50%;
}
.box-group.basic:hover label {
    color: var(--clr-gray);
}
.box-group.basic:hover label::after {
    box-shadow: 0 0 5px rgba(0, 0, 0, .15) inset;
}
.box-group.basic input[type="radio"]:checked + label, .box-group.basic input[type="checkbox"]:checked + label {
    color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::after, .box-group.basic input[type="checkbox"]:checked + label::after {
    border-color: var(--clr-green);
}
.box-group.basic input[type="radio"]:checked + label::before, .box-group.basic input[type="checkbox"]:checked + label::before {
    opacity: 1;
    transform: scale(1);
    color: var(--clr-green);
}
.box-group.solid label {
    padding: 10px 25px;
    border-radius: 2px;
    transition: var(--transition);
}
.box-group.solid.border label {
    border: 1px solid rgba(0, 0, 0, .25);
}
.box-group.solid.border-bg label {
    background: rgba(0, 0, 0, .1);
}
.box-group.solid:hover label {
    background: rgba(0, 0, 0, .05);
}
.box-group.solid input[type="checkbox"]:checked + label, .box-group.solid input[type="radio"]:checked + label {
    color: #ffffff;
    background: var(--clr-green);
    border-color: var(--clr-green);
}
.box-group.solid label::before {
    position: absolute;
    content: "";
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    font-family: "Material Design Icons";
    color: #ffffff;
    text-align: center;
    line-height: 20px;
    border-radius: 3px;
    transform: scale(0) translateX(-20px);
    opacity: 0;
    transition: var(--transition);
}
.box-group.solid input[type="checkbox"] + label::before {
    content: "\F12C";
}
.box-group.solid input[type="radio"] + label::before {
    content: "\F0DA";
}
.box-group.solid input[type="checkbox"]:checked + label::before, .box-group.solid input[type="radio"]:checked + label::before {
    opacity: 1;
    transform: scale(1) translateX(0);
}
.box-group.card {
    position: relative;
    padding: 15px 25px;
    min-width: 120px;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s;
    z-index: 9;
}
.box-group.card.checked {
    background: rgba(0, 0, 0, .15);
}
.box-group.card::after {
    position: absolute;
    font-family: "Material Design Icons";
    top: 5px;
    left: 5px;
    font-size: 24px;
    color: var(--clr-green);
    transform: scale(0);
    opacity: 0;
    transition: all .5s;
}
.box-group.card.radio::after {
    content: "\F01A";
}
.box-group.card.checkbox::after {
    content: "\F790";
}
.box-group.card.checked::after {
    transform: scale(1);
    opacity: 1;
}
.box-group.card label {
    font-weight: 700;
    font-size: 16px;
    z-index: -1;
}
.box-group.card i {
    font-size: 55px;
    color: var(--clr-gray);
    display: inline-block;
    margin-bottom: 10px;
    transition: all .5s;
}
.box-group.card:hover {
    background: rgba(0, 0, 0, .1);
}
.box-group.card:hover i {
    color: var(--clr-black);
    transform: translateY(5px);
}
.box-group.card.checked i {
    color: var(--clr-black);
    transform: translateY(5px);
}

- black-theme.css

 :root {
    --transition: .25s;
    --clr-blue: #4285F4;
    --clr-gray: #ccc;
    --clr-black: #fff;
    --clr-green: #4baf4b;
    --grid-border-clr: rgba(255, 255, 255, .1);
}
.dd-center-p-content {
    background: #1C1C1C;
}
.dd-title {
    color: #fff;
}

- white-theme.css

 :root {
    --clr-blue: #4285F4;
    --clr-gray: #6c6c6c;
    --clr-black: #3c3c3c;
    --clr-green: #4baf4b;
    --grid-border-clr: #cccccc;
    --transition: .25s;
}

- Javascripts


 $('[data-check-element]').on('click', function() {
	if( $(this).attr('data-check-element') == 'radio' ) {
		$('.box-group.card.radio').removeClass('checked');
		$(this).addClass('checked');
	} else {
		$(this).toggleClass('checked');
	}
});

Hope you guys liked the demo!


css,   creative,   focus ... 

Loading Spinners in CSS

 Techmates
 13 Mar, 2018

In this post we're creating the animated loading spinners with pure CSS.

In this demo we're sharing the dot spinner, moon spinners, rotators, half circle & square spinners.

HTML Structure

 <div class="spinner dot"></div>
<div class="spinner line"><span></span></div>
<div class="spinner line two"><span></span></div>
<div class="spinner line three"><span></span></div>
<div class="spinner moon"></div>
<div class="spinner moon two"></div>
<div class="spinner moon three"></div>
<div class="spinner filled half"></div>
<div class="spinner filled fourth">
	<div></div>
	<div></div>
</div>
<div class="loader solid square rotate"></div>
<div class="loader solid circle rotate"></div>
<div class="loader solid square fade"></div>
<div class="loader solid circle fade"></div>
<div class="loader circle-full blink-half"></div>
<div class="loader circle-full blink"></div>
<div class="loader circle-full zoomIO-half"></div>
<div class="loader circle-full zoomIO"></div>

CSS Styles


.box {
	border-bottom: 1px solid #ccc;
}
.card {
	position: relative;
	width: 175px;
	height: 200px;
	display: inline-block;
} 

.card > div {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.col {
	min-width: 20%;
	float: left;
}
.spinner {
	position: relative;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 40px;
}
/* Dot spinner */
.spinner.dot {
	border: 1px solid #e5e5e5;
	border-radius: 50px;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.dot:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background: #4c4c4c;
	z-index: 9;
}
/* Moon style */
.spinner.moon:after {
	position: absolute;
	content: " ";
	top: 5px;
	left: 5px;
	width: 50px;
	height: 50px;
	border-radius: 50px;
	border-right: 2px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	z-index: 9;
}
.spinner.moon.two:after {
	border-left: 2px solid #4c4c4c;
}
.spinner.moon.three:after {
	border-top: 2px solid #4c4c4c;
	border-bottom: 2px solid #4c4c4c;
}
/* Line spinner */
.spinner.line span {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top: 3px solid #4c4c4c;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.line.two span {
	border-bottom: 3px solid #4c4c4c;
}
.spinner.line.three span {
	border-left: 3px solid #4c4c4c;
	border-right: 3px solid #4c4c4c;
}
.spinner.filled.half:before,
.spinner.filled.half:after {
	position: absolute;
	content: " ";
	height: 25px;
	width: 50px;
	background: #EA4335;
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.half:before {
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
	transform-origin: bottom;
}
.spinner.filled.half:after {
	top: 50%;
	background: #FACD47;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	transform-origin: top;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
}
.spinner.filled.fourth div {
	display: inline-block;
	float: left;
}
.spinner.filled.fourth div:before,
.spinner.filled.fourth div:after {
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}
.spinner.filled.fourth div:first-child:before {
	top: 0;
	left: 0;
	border-top-left-radius: 50px;
	background: #FACD47;
	transform-origin: bottom right;
}
.spinner.filled.fourth div:first-child:after {
	top: 0;
	right: 0;
	border-top-right-radius: 50px;
	background: #EA4335;
	transform-origin: bottom left;
}
.spinner.filled.fourth div:nth-child(2):before {
	bottom: 0;
	left: 0;
	border-bottom-left-radius: 50px;
	background: #34A853;
	transform-origin: top right;
}
.spinner.filled.fourth div:nth-child(2):after {
	bottom: 0;
	right: 0;
	border-bottom-right-radius: 50px;
	background: #4285F4;
	transform-origin: top left;
}
@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.solid {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
}
/* Fade */
.loader.solid.fade {
	-webkit-animation: loader 1.5s infinite linear;
	animation: loader 1.5s infinite linear;
}
@-webkit-keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
@keyframes loader {
	0%{
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -25px 0 -15px #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 -15px #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 -15px #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 -15px #4c4c4c;
	}
}
.loader.solid.square {
	border-radius: 2px;
}
.loader.solid.circle {
	border-radius: 50%;
}
.loader.rotate {
	-webkit-animation: rotate 1s linear  infinite;
	-moz-animation: rotate 1s linear  infinite;
	-ms-animation: rotate 1s linear  infinite;
	-o-animation: rotate 1s linear  infinite;
	animation: rotate 1s linear  infinite;
}
@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -25px 0 0 #4c4c4c, 0 25px 0 0 #4c4c4c, 25px 0 0 0 #4c4c4c, -25px 0 0 0 #4c4c4c;
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.loader.circle-full {
	display: inline-block;
	color: #ffffff;
	width: 25px;
	height: 25px;
	border-radius: 100%;
}
/* Circle(dot) Animation */
.loader.circle-full.blink {
	-webkit-animation: loderBlinkAnimation 1s linear infinite;
	-moz-animation: loderBlinkAnimation 1s linear infinite;
	-ms-animation: loderBlinkAnimation 1s linear infinite;
	-o-animation: loderBlinkAnimation 1s linear infinite;
	animation: loderBlinkAnimation 1s linear infinite;
}
@-webkit-keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
@keyframes loderBlinkAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
}
.loader.circle-full.zoomIO {
	-webkit-animation: loderZoomIOAnimation 1s linear infinite;
	-moz-animation: loderZoomIOAnimation 1s linear infinite;
	-ms-animation: loderZoomIOAnimation 1s linear infinite;
	-o-animation: loderZoomIOAnimation 1s linear infinite;
	animation: loderZoomIOAnimation 1s linear infinite;
}
@-webkit-keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
@keyframes loderZoomIOAnimation {
	0%,
	100% {
		box-shadow: 0 -50px 0 -25px #4c4c4c, 35px -35px 0 -15px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 -25px #4c4c4c, 50px 0 0 -15px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 -25px #4c4c4c, 35px 35px 0 -15px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 -25px #4c4c4c,
		0 50px 0 -15px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 -25px #4c4c4c, -35px 35px 0 -15px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 -25px #4c4c4c, -50px 0 0 -15px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 -25px #4c4c4c, -35px -35px 0 -15px #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 -15px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 -25px #4c4c4c;
	}
}
.loader.circle-full.blink-half {
	-webkit-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-moz-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-ms-animation: loaderBlinkHalfAnimation 1s linear infinite;
	-o-animation: loaderBlinkHalfAnimation 1s linear infinite;
	animation: loaderBlinkHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
@keyframes loaderBlinkHalfAnimation {
	0% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	50% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 transparent, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 transparent, -35px -35px 0 0 transparent;
	}
	75% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 transparent;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 transparent, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 transparent, 50px 0 0 0 transparent, 35px 35px 0 0 transparent,
		0 50px 0 0 transparent, -35px 35px 0 0 transparent, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
}
.loader.circle-full.zoomIO-half {
	-webkit-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-moz-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-ms-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	-o-animation: loaderZoomIOHalfAnimation 1s linear infinite;
	animation: loaderZoomIOHalfAnimation 1s linear infinite;
}
@-webkit-keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}
@keyframes loaderZoomIOHalfAnimation {
	0%, 100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	12.5% {
		box-shadow: 0 -50px 0 -35px #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	25% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 -35px #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	37.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 -35px #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	50% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 -35px #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	62.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 -35px #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	75% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 -35px #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	87.5% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 -35px #4c4c4c, -35px -35px 0 0 #4c4c4c;
	}
	100% {
		box-shadow: 0 -50px 0 0 #4c4c4c, 35px -35px 0 0 #4c4c4c, 50px 0 0 0 #4c4c4c, 35px 35px 0 0 #4c4c4c,
		0 50px 0 0 #4c4c4c, -35px 35px 0 0 #4c4c4c, -50px 0 0 0 #4c4c4c, -35px -35px 0 -35px #4c4c4c;
	}
}



Hope you guys liked the demo.

html,   css,   creative ... 

Beautiful Menu(Layer) Effects

 Techmates
 18 Sep, 2017

In this article we'd love to share a menu layer effects with you guys.

Follow the steps and markup to create the beautiful effect:

HTML Markup:

<nav class="nav nav--simple">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-down">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-up">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-left-to-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-right-to-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-left">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-right">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-bottom-center">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<nav class="nav nav--layer-top-bottom">
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Work</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav> 

Apply CSS Styles:

 .nav {
	padding: 3em 0;
	border-top: 1px solid #AAA;
	margin: -1px 0;
}
.nav .menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav .menu__list li {
	display: inline;
}
.nav .menu__list li a {
	position: relative;
	display: inline-block;
	padding: 15px 20px;
	font-weight: 700;
	color: #4C4C4C;
	text-decoration: none;
	transition: .35s ease;
}
.nav .menu__list li a:hover {
	color: #FFF;
}
.nav .menu__list li a:after,
.nav .menu__list li a:before {
	position: absolute;
	content: " ";
	background: #4285F4;
	width: 0;
	height: 0;
	z-index: -1;
	transition: .35s ease;
}

/* Simple navbar */
.nav.nav--simple .menu__list li a {
	transition: .35s ease;
}
.nav.nav--simple .menu__list li a:hover {
	background: #4285F4;
	color: #FFF;
}
/* Layer down */
.nav.nav--layer-down .menu__list li a:after {
	top: 0;
	left: 0;
	width: 100%;
}
.nav.nav--layer-down .menu__list li a:hover:after {
	height: 100%;
}

/* Layer up */
.nav.nav--layer-up .menu__list li a:after {
	bottom: 0;
	left: 0;
	width: 100%;
}
.nav.nav--layer-up .menu__list li a:hover:after {
	height: 100%;
}

/* Layer left */
.nav.nav--layer-left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 100%;
}
.nav.nav--layer-left .menu__list li a:hover:after {
	width: 100%;
}

/* Layer right */
.nav.nav--layer-right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 100%;
}
.nav.nav--layer-right .menu__list li a:hover:after {
	width: 100%;
}

/* Layer left in right out */
.nav.nav--layer-left-to-right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 100%;
	transition-property: width;
}
.nav.nav--layer-left-to-right .menu__list li a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}

/* Layer right in left out */
.nav.nav--layer-right-to-left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 100%;
	transition-property: width;
}
.nav.nav--layer-right-to-left .menu__list li a:hover:after {
	width: 100%;
	right: 0;
	left: auto;
}


/* Layer center */
.nav.nav--layer-center .menu__list li a:after {
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	margin: 0 auto;
	width: 100%;
}
.nav.nav--layer-center .menu__list li a:hover:after {
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-left .menu__list li a:after {
	top: 0;
	left: 0;
}
.nav.nav--layer-top-left .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-right .menu__list li a:after {
	top: 0;
	right: 0;
}
.nav.nav--layer-top-right .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-left .menu__list li a:after {
	left: 0;
	bottom: 0;
}
.nav.nav--layer-bottom-left .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-right .menu__list li a:after {
	right: 0;
	bottom: 0;
}
.nav.nav--layer-bottom-right .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-center .menu__list li a:after {
	left: 0;
	right: 0;
	top: 0;
	margin: 0 auto;
}
.nav.nav--layer-top-center .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-bottom-center .menu__list li a:after {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.nav.nav--layer-bottom-center .menu__list li a:hover:after {
	width: 100%;
	height: 100%;
}

/* Layer top left */
.nav.nav--layer-top-bottom .menu__list li a:before {
	left: 0;
	right: 0;
	top: 0;
	width: 100%;
}
.nav.nav--layer-top-bottom .menu__list li a:after {
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
}
.nav.nav--layer-top-bottom .menu__list li a:hover:before,
.nav.nav--layer-top-bottom .menu__list li a:hover:after {
	height: 100%;
}

That's it guys. Have fun!

html,   css,   creative ... 


Featured Templates

Digital Agency HTML5 Free HTML Template

 Techmates
 28 Mar, 2018

Your Technology Mate - Digital Agency HTML5 Template is a profession and responsive business template. This is a singlepage multipurpose template that you can use for your web agency, business, portfolio or company profile. 


This template is suitable to present your digial presence in a creative way. This template is recommended for any kind of agency like Web Development Services, Freelancing Services, Tax Advisors, Creative Printing Businesses, Consulting Firms and also can be used for any kind of Individual Business or Professional Website. 


This web page includes all basic elements necessary to build an eye-catching website. You can use your images or directly use the images provided with the template. The great animation effects used in this hero unit will grab your visitors attention and gives mesmerizing look while they browse your website and they will never leave your website, thus more business to you!


html,   css,   landing ... 

Sports Casino Landing Page Template

 Techmates
 23 Mar, 2018

Sports Casino Landing Page Template is a responsive HTML5 Bootstrap template.

This template has a beautiful and unique design that will be best suited for your online web presence.  If you are a person who is engaged in the field of Sports/Casino then it is of main importance that you make use of this template to create a website which will bring leads to your business. 

This template will help you give the best presence in the web-virtual-world.

Features:

  • Easy to setup
  • Ready to upload
  • Easy customization
  • You can use this template for any of your business needs
  • Free to use anywhere
html,   css,   one page template ... 

Consulting Firm HTML5 Template

 Techmates
 01 Aug, 2017

Consulting Firm HTML5 Template is a HTML5 responsive consulting template. 

Features:

  • Easy to use.
  • Easy customisation.
  • You can use this template for any kind of consulting website.
  • Cross browser compatible.


Purpose: 
HTML Responsive Business Template

Technologies: HTML, CSS, jQuery, Bootstrap


html,   css

Foodapp Landing Page

 Techmates
 01 Aug, 2017

Foodapp landing page is a one page HTML5 template.

Foodapp is simple promotion landing page for the apps(Android or iOS).

Features:

  • Easy to setup
  • Easy customisation.
  • You can use this template for any kind of app promotion landing pages.
  • Cross browser compatible.


Purpose: Landing page / One page application.

Technologies: HTML, CSS, jQuery, Bootstrap


html,   css


Featured Mockups

Coffee Mug In-Hand Mockup

 Techmates
 31 Jul, 2017

Today’s special is a hand held coffee cup mock-up you can use freely to showcase your package design projects in a photo realistic manner. The PSD file is fully editable, allowing you to add your design via the smart objects.


Mockup

Abstract Cup Design Mockup

 Techmates
 25 Jul, 2017

Whether you are designing a poster for yourself or a client that needs an abstract realistic cup mockups, it will be of great help to you!

Mockup

iPhone 6 Mobile App Mockup

 Techmates
 14 Jul, 2017

White iPhone 6s Mockup to promote your next mobile application. The Creative white iPhone 6s mockup to represent your apple iPhone 6s application design. Smart object included.

Mockup


Design Drastic

HTML5

CSS3

Javascript

Photoshop Mockups

Animation

HTML5 Templates