html

17 results found!

PhotoSonic - Website Template For Photography

 Techmates
 30 Mar, 2018

PhotoSonic - Free HTML5 Template For Photography Studio | Portfolio | Freelancer 

This is a free website template suitable for Photographers, Videographers or any Freelancer. You also can use this web template to showcase your Resume.

Having a professional and stunning website will bring you visitors to the site and ultimately those visitors will be your customers. Use this Bootstrap 3, HTML3 enabled, Mobile Responsive Web Site Template for your business and attract more customers.

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 menu popup 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!


Read more
html,   html template,   responsive

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!


Read more
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
Read more
html,   css,   one page template ... 

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.

Read more
html,   css,   creative ... 

Input Text Box Effects in CSS

 Techmates
 16 Feb, 2018

Hello folks, are you guys ready to explore the various kinds of styles/effects on  input text box? Then this demo will show you the basic shadow(inset/outset) effect on input, Spread shadow effect, Glow effect using shadow, Border animations, Shutter(in/out) effects, and border bottom animations.

You can modify the code according to you need.  There are no external libraries/js. The demo is implemented on pure CSS.

HTML Structure

  <input type="tyext" class="form-input basic" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic smooth-corner shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input basic round shadow-inset" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input spread-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input glow-shadow round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input border-dashed round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter smooth-corner" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter round" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in" placeholder="DD - Design Drastic">
<input type="tyext" class="form-input shutter-in smooth-corner" placeholder="DD - Design Drastic">

<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation left"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation right"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation center"></span>
</div>
<div class="form-group">
	<input type="tyext" class="form-input border-bottom" placeholder="DD - Design Drastic">
	<span class="border-bottom-animation both-side"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-1" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-2" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-3" placeholder="DD - Design Drastic">
	<span class="border-line-animation top"></span>
	<span class="border-line-animation left"></span>
	<span class="border-line-animation bottom"></span>
	<span class="border-line-animation right"></span>
</div>

<div class="form-group">
	<input type="tyext" class="form-input border-animation set-4" placeholder="DD - Design Drastic">
	<span class="border-line-animation top-bottom"></span>
	<span class="border-line-animation left-right"></span>
</div>

CSS Styles

* {
	box-sizing: border-box;
}
.form-group {
	position: relative;
}
.form-input {
	position: relative;
	font-family: "Source Sans Pro", sans-serif;
	font-weight: 600;
	width: 100%;
	height: 40px;
	border: none;
	padding: 0 10px;
	box-shadow: none;
	outline: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
} 
.form-input.smooth-corner {
	border-radius: 5px;
}
.form-input.round {
	border-radius: 50px;
}
.form-input.basic {
	border: 2px solid rgba(0, 0, 0, .15);
}
.form-input.basic:hover {
	border-color: rgba(0, 0, 0, .35);
	box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
.form-input.basic:focus {
	border-color: #4285F4;
	box-shadow: 0 0 10px rgba(66, 133, 244, .5);
}
.form-input.basic.shadow-inset:hover {
	box-shadow: 0 0 5px rgba(0, 0, 0, .2) inset;
}
.form-input.basic.shadow-inset:focus {
	box-shadow: 0 0 10px rgba(66, 133, 244, .5) inset;
}
/* Spread shadow */
.form-input.spread-shadow {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.spread-shadow:focus {
	background: #fff;
	box-shadow: 0 0 40px 5px rgba(0, 0, 0, .2);
}
/* Glow shadow */
.form-input.glow-shadow {
	border: 0;
	background: rgba(0, 0, 0, .1);
}
.form-input.glow-shadow:focus {
	box-shadow: 0 0 0 2px #4285F4;
	background: #fff;
	border-color: #4285F4;
}
/* Chagne Border */
.form-input.border-dashed {
	border: 2px solid rgba(0, 0, 0, .15);
	background: rgba(0, 0, 0, .1);
}
.form-input.border-dashed:focus {
	border: 2px dashed #999;
	background: #fff;
	border-color: #4285F4;
}
/* Shutter */
.form-input.shutter {
	border: 2px solid rgba(0, 0, 0, .15);
	box-shadow: 0 20px 0 0 #d5d5d5 inset, 0 -20px 0 0 #d5d5d5 inset;
}
.form-input.shutter:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, .3);
}

.form-input.shutter-in {
	border-bottom: 2px solid rgba(0, 0, 0, .2);
	background: transparent;
}
.form-input.shutter-in:focus {
	border-color: rgba(0, 0, 0, .3);
	box-shadow: 0 -50px 0 #d5d5d5 inset;
}

/* Border bottom effects */
.form-input.border-bottom {
	position: relative;
	background: transparent;
	padding: 0;
	border-bottom: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-bottom ~ .border-bottom-animation {
	position: absolute;
	content: "";
	width: 0;
	background: rgba(0, 0, 0, .2);
	height: 2px;
	z-index: 99;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
/* Border bottom left */
.form-input.border-bottom ~ .border-bottom-animation.left {
	left: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.left {
	background: #4285F4;
	width: 100%;
}
/* Border bottom right */
.form-input.border-bottom ~ .border-bottom-animation.right {
	right: 0;
	bottom: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.right {
	background: #4285F4;
	width: 100%;
}
/* Border bottom center */
.form-input.border-bottom ~ .border-bottom-animation.center {
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.center {
	background: #4285F4;
	width: 100%;
}
/* Border bottom both side */
.form-input.border-bottom ~ .border-bottom-animation.both-side {
	height: 0px;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	position: absolute;
	content: " ";
	bottom: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:before {
	left: 0;
}
.form-input.border-bottom ~ .border-bottom-animation.both-side:after {
	right: 0;
}
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:before,
.form-input.border-bottom:focus ~ .border-bottom-animation.both-side:after {
	background: #4285F4;
	width: 50%;
}

/* Border Animations */
/* Style 1 */
.form-input.border-animation {
	border: 2px solid rgba(0, 0, 0, .2);
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after{
	position: absolute;
	content: " ";
	right: 0;
	background: #4285F4;
	-webkit-transition: all .5s linear;
	   -moz-transition: all .5s linear;
	    -ms-transition: all .5s linear;
	     -o-transition: all .5s linear;
	        transition: all .5s linear;
}
.form-input.border-animation ~ .border-line-animation.top-bottom:before,
.form-input.border-animation ~ .border-line-animation.top-bottom:after,
.form-input.border-animation ~ .border-line-animation.top:before,
.form-input.border-animation ~ .border-line-animation.top:after,
.form-input.border-animation ~ .border-line-animation.bottom:before,
.form-input.border-animation ~ .border-line-animation.bottom:after
 {
	width: 0;
	height: 2px;
}
.form-input.border-animation ~ .border-line-animation.left-right:before,
.form-input.border-animation ~ .border-line-animation.left-right:after,
.form-input.border-animation ~ .border-line-animation.left:before,
.form-input.border-animation ~ .border-line-animation.left:after,
.form-input.border-animation ~ .border-line-animation.right:before,
.form-input.border-animation ~ .border-line-animation.right:after
 {
	width: 2px;
	height: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:before {
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.top-bottom:after {
	top: 0;
	right: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:before {
	left: 0;
	bottom: 0;
	left: 0;
}
.form-input.border-animation.set-1 ~ .border-line-animation.left-right:after {
	top: 0;
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-1:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}

/* Set 2 */
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:before {
	left: 50%;
	bottom: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.top-bottom:after {
	top: 0;
	left: 50%;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:before {
	top: 50%;
	left: 0;
}
.form-input.border-animation.set-2 ~ .border-line-animation.left-right:after {
	top: 50%;
	right: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
	left: 0;
}
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-2:focus ~ .border-line-animation.left-right:after {
	height: 100%;
	top: 0;
}

/* Set 3 */
.form-input.border-animation.set-3 ~ .border-line-animation.top:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.top:after {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:before {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.bottom:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:before {
	left: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.left:after {
	left: 0;
	bottom: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:before {
	right: 0;
	top: 0;
}
.form-input.border-animation.set-3 ~ .border-line-animation.right:after {
	right: 0;
	bottom: 0;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.top:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.bottom:after {
	width: 100%;
}
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.left:after,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:before,
.form-input.border-animation.set-3:focus ~ .border-line-animation.right:after {
	height: 100%;
}

/* Set 4 */

.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:before {
	left: 0;
	bottom: 0;
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before {
	transition-delay: 0s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:after {
	right: 0;
	bottom: 0;
	transition-delay: 1s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	transition-delay: .5s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.top-bottom:after {
	right: 0;
	top: 0;
	transition-delay: .5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	transition-delay: 1s;
}
.form-input.border-animation.set-4 ~ .border-line-animation.left-right:before {
	left: 0;
	top: 0;
	transition-delay: 0;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before {
	transition-delay: 1.5s;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.top-bottom:after {
	width: 100%;
}
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:before,
.form-input.border-animation.set-4:focus ~ .border-line-animation.left-right:after {
	height: 100%;
}


Hope you guys liked the demo. Comment below for any suggestions or query. Thank you.

Read more
html,   css,   creative ... 

Hamburger Circular Menu In CSS

 Techmates
 14 Feb, 2018

Hello geeks, This demo is used to create a hamburger circular menu effect using CSS and Javascript.

There are two variants of the menu. You can modify the demo and animation according to your need.

- data- attributes: dd-toggle to toggle the menu.

menu--top-left and menu--top-right are the position & animation classes. you can cusomize the code in CSS to change the animation/position.

HTML Structure

 <div class="menu menu--top-left" id="menu_top_left">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_left">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--top-right" id="menu_top_right">
	<a class="menu__hamburger_ico" dd-toggle="menu_top_right">
		<span></span>
		<span></span>
		<span></span>
	</a>
	<ul class="menu__nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS Styles

 .menu {
	position: fixed;
	width: 0;
	height: 0;
}
.menu.menu--top-left {
	top: 0;
	left: 0;
}
.menu.menu--top-right {
	top: 0;
	right: 0;
}
.menu:after {
	position: absolute;
	content: " ";
	background: #393E46;
	z-index: -1;
	width: 0;
	height: 0;
	-webkit-transition: all .5s cubic-bezier(0, 0, 0, 1);
	   -moz-transition: all .5s cubic-bezier(0, 0, 0, 1);
	    -ms-transition: all .5s cubic-bezier(0, 0, 0, 1);
	     -o-transition: all .5s cubic-bezier(0, 0, 0, 1);
	        transition: all .5s cubic-bezier(0, 0, 0, 1);
}
.menu.menu--top-left:after {
	border-bottom-right-radius: 100%;
	top: 0;
	left: 0;
}
.menu.menu--top-right:after {
	top: 0;
	right: 0;
	border-bottom-left-radius: 100%;
}
.menu.in:after {
	width: 50vh;
	height: 50vh;
}

.menu.in {
	width: 50vh;
	height: 50vh;
}

.menu .menu__hamburger_ico {
	position: relative;
	display: inline-block;
	background: #393E46;
	color: #fff;
	height: 70px;
	width: 70px;
	box-shadow: 0 0 0 20px #393E46;
	-webkit-transition: all .25s ease-in;
	   -moz-transition: all .25s ease-in;
	    -ms-transition: all .25s ease-in;
	     -o-transition: all .25s ease-in;
	        transition: all .25s ease-in;
	cursor: pointer;
	z-index: 99;
}
.menu.menu--top-right .menu__hamburger_ico {
	border-bottom-left-radius: 100%;
	float: right;
}
.menu.menu--top-left .menu__hamburger_ico {
	border-bottom-right-radius: 100%;
	float: left;
}

.menu .menu__hamburger_ico:hover {
	box-shadow: 0 0 0 10px #393E46;
}

.menu .menu__hamburger_ico span {
	position: absolute;
	display: inline-block;
	height: 3px;
	width: 40px;
	border-radius: 10px;
	background: #fff;
	-webkit-transition: all .25s cubic-bezier(0, 0, 1, 1);
	   -moz-transition: all .25s cubic-bezier(0, 0, 1, 1);
	    -ms-transition: all .25s cubic-bezier(0, 0, 1, 1);
	     -o-transition: all .25s cubic-bezier(0, 0, 1, 1);
	        transition: all .25s cubic-bezier(0, 0, 1, 1);
}
.menu.menu--top-left .menu__hamburger_ico span {
	left: 10px;
}
.menu.menu--top-right .menu__hamburger_ico span {
	right: 10px;
}
.menu .menu__hamburger_ico span:first-child {
	top: 20px;
}
.menu .menu__hamburger_ico span:nth-child(2) {
	top: 35px;
}
.menu .menu__hamburger_ico span:last-child {
	top: 50px;
}
.menu.menu--top-left .menu__hamburger_ico span:first-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:first-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico span:last-child {
	transform-origin: left;
}
.menu.menu--top-right .menu__hamburger_ico span:last-child {
	transform-origin: right;
}

.menu.menu--top-left .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu.menu--top-left .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:first-child {
	-webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}
.menu.menu--top-right .menu__hamburger_ico.in span:last-child {
	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu .menu__hamburger_ico.in span:nth-child(2) {
	opacity: 0;
}

.menu .menu__nav_list {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style: none;
	top: 50%;
	-webkit-transform: translateY(-65%);
	   -moz-transform: translateY(-65%);
	    -ms-transform: translateY(-65%);
	     -o-transform: translateY(-65%);
	        transform: translateY(-65%);
}
.menu.menu--top-left .menu__nav_list {
	left: 25%;
	text-align: left;
}
.menu.menu--top-right .menu__nav_list {
	right: 25%;
	text-align: right;
}
.menu .menu__nav_list li a {
	position: relative;
	display: inline-block;
	font-weight: 700;
	font-size: 24px;
	line-height: 40px;
	color: #fff;
	visibility: hidden;
	opacity: 0;
	text-decoration: none;
}
.menu.menu--top-left .menu__nav_list li a {
	-webkit-transform: translateX(-25px);
	   -moz-transform: translateX(-25px);
	    -ms-transform: translateX(-25px);
	     -o-transform: translateX(-25px);
	        transform: translateX(-25px);
}
.menu.menu--top-right .menu__nav_list li a {
	-webkit-transform: translateX(25px);
	   -moz-transform: translateX(25px);
	    -ms-transform: translateX(25px);
	     -o-transform: translateX(25px);
	        transform: translateX(25px);
}
.menu.in .menu__nav_list li a {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;

}
.menu.in .menu__nav_list li a:before {
	position: absolute;
	content: " ";
	width: 0;
	height: 2px;
	background: #fff;
	border-radius: 5px;
	top: 50%;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.menu.in.menu--top-left .menu__nav_list li a:before {
	margin-left: -5px;
	left: -20px;
}
.menu.in.menu--top-right .menu__nav_list li a:before {
	margin-right: -5px;
	right: -20px;
}
.menu.in .menu__nav_list li a:hover:before {
	width: 20px;
}
.menu.in .menu__nav_list li:nth-child(1) a { transition-delay: .15s; }
.menu.in .menu__nav_list li:nth-child(2) a { transition-delay: .30s; }
.menu.in .menu__nav_list li:nth-child(3) a { transition-delay: .45s; }
.menu.in .menu__nav_list li:nth-child(4) a { transition-delay: .60s; }
.menu.in .menu__nav_list li:nth-child(5) a { transition-delay: .75s; }
.menu.in .menu__nav_list li:nth-child(6) a { transition-delay: .90s; }
.menu.in .menu__nav_list li:nth-child(7) a { transition-delay: 1.05s; }
.menu.in .menu__nav_list li:nth-child(8) a { transition-delay: 1.2s; }
.menu.in .menu__nav_list li:nth-child(9) a { transition-delay: 1.35s; }
.menu.in .menu__nav_list li:nth-child(10) a { transition-delay: 1.5s; }

Javascript

 $('[dd-toggle]').on('click', function() {
	var menu_id = $(this).attr('dd-toggle');
	$('#'+menu_id).toggleClass('in');
	$(this).toggleClass('in');
});

Hope you liked the demo. Have fun!

Read more
html,   css,   creative ... 

Text Animation Effects with Box and Shadow

 Techmates
 14 Feb, 2018

Hello folks, Toady we're going to learn how to create a fancy text animation effects using box and shadow. In this demo we've included the Shutter(from left, right and center) style animation, Fade in/out style animation, Smoke style animation. 


You can modify the demo according to your need.

HTML Structure

 <div class="box shutter-effect center">
	<h2 class="title">Text Shutter Animation: Center Center</h2>
</div>
<div class="box shutter-effect to-left">
	<h2 class="title">Text Shutter Animation: Left -> Right</h2>
</div>
<div class="box shutter-effect to-right">
	<h2 class="title">Text Shutter Animation: Right -> Left</h2>
</div>
<div class="box shadow-clip-effect">
	<h2 class="title">Text Shadow: fade in style</h2>
</div>
<div class="box shadow-effect">
	<h2 class="title">Text shadow: smoke style</h2>
</div>

CSS Styles

 .title {
	font-family: "Montserrat Alternates", sans-serif;
	position: relative;
	font-size: 60px;
	font-weight: 900;
	color: #393E46;
}
.box {
	position: relative;
	border: 1px solid #ccc;
	background: #fff;
	margin: -1px 0;
}
.box:after {
	position: absolute;
	content: " ";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-transition: all 1.5s linear;
	   -moz-transition: all 1.5s linear;
	    -ms-transition: all 1.5s linear;
	     -o-transition: all 1.5s linear;
	        transition: all 1.5s linear;
	opacity: 1;
	background-position: 0 0;
}
.box.shutter-effect:after {
	background: radial-gradient(#fff 50%, rgba(221,221,221,0), #fff 50%);
	background-size: 100% 100%;
}

.box.shutter-effect.animate:after {
	opacity: .75;
}
.box.shutter-effect.center.animate:after {
	-webkit-transform: scaleX(0);
	   -moz-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	     -o-transform: scaleX(0);
	        transform: scaleX(0);
}
.box.shutter-effect.to-left.animate:after {
	left: 100%;
}

.box.shutter-effect.to-right.animate:after {
	right: 100%;
}

.box.shutter-effect.to-top.animate:after {
	top: 100%;
}
.box.shutter-effect.to-bottom.animate:after {
	bottom: 100%;
}

.box.shadow-effect .title {
	color: #2196f3;
}
.box.shadow-effect {
	position: relative;
	padding: 20px 50px;
	border: 0;
	border-radius: 3px;
	color: #fff;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background: #2196f3;
}
.box.shadow-effect:after {
	position: absolute;
	content: " ";
	margin: 0 auto;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, .1);
	box-shadow: 0 0 50px 0 rgba(255, 255, 255, .1);
	-webkit-transition: all 1.5s ease-out;
	   -moz-transition: all 1.5s ease-out;
	    -ms-transition: all 1.5s ease-out;
	     -o-transition: all 1.5s ease-out;
	        transition: all 1.5s ease-out;
	z-index: -1;
}
.box.shadow-effect.animate:after {
	box-shadow: 0 0 500px 1200px #ededed;
}
.box.shadow-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

.box.shadow-clip-effect {
	background: #ededed;
}
.box.shadow-clip-effect .title {
	color: transparent;
	text-stroke-width: -1px;
	-moz-text-stroke-width: -1px;
  	-webkit-text-stroke-width: -1px;
}
.box.shadow-clip-effect {
	position: relative;
	font-weight: 600;
	outline: none;
	overflow: hidden;
	-webkit-transition: all 1s ease;
	   -moz-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	     -o-transition: all 1s ease;
	        transition: all 1s ease;
	z-index: 99;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}
.box.shadow-clip-effect:after {
	-webkit-transition: all 15s ease;
	   -moz-transition: all 15s ease;
	    -ms-transition: all 15s ease;
	     -o-transition: all 15s ease;
	        transition: all 15s ease;
}
.box.shadow-clip-effect.animate:after {
	box-shadow: 0 0 400px 1200px #ededed;
}
.box.shadow-clip-effect.animate .title {
	-webkit-transition: all 3s ease;
	   -moz-transition: all 3s ease;
	    -ms-transition: all 3s ease;
	     -o-transition: all 3s ease;
	        transition: all 3s ease;
	color: #1565c0;
}

@media (max-width: 768px) {
	.title {
		font-size: 30px;
	}
}

Javascript

 $(document).ready(function(){
	setTimeout(function(){
		animateTexts();
	}, 250);
});
function animateTexts() {
	$('.box').addClass('animate');
}
$('#re_animate').click(function(event) {
	$('.box').removeClass('animate');
	setTimeout(function() { animateTexts() }, 1500);
});

Hope guys you liked the demo.

Read more
html,   css,   creative ... 

Loader Effects with Box/Characters in CSS

 Techmates
 13 Feb, 2018

Welcome guys, are you inquisitive to find beautiful loader box(loading characters) effect? Then this article is for you.

In this article we'd love to share a beautiful loader animation effects using CSS and JS with you.

This effect is fully dynamic  & customized. You can manage the loading speed change the animation etc... using the data- attributes.

List of the data- attributes to customize the effect.

  • dd-effect="{class-name}" to change the animation effect.
  • dd-transition-time="{time in ms}" to change the animation/transition time.
  • dd-remove-done-animated="{true/false}" to remove the animated elements.

Follow the code to create the loaders.

HTML Structure

 <div class="loading-characters padding-tb-l" dd-effect="layer" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="fade"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l" dd-effect="up-down"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="rotate-lf" dd-remove-done-animated="false" dd-transition-time="700"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="left-right" dd-remove-done-animated="false"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-in" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>
<div class="underline"></div>
<div class="loading-characters padding-tb-l ovn" dd-effect="zoom-out" dd-remove-done-animated="false" dd-transition-time="300"><span>L</span><span>O</span><span>A</span><span>D</span><span>I</span><span>N</span><span>G</span></div>

CSS Styles

 .loading-characters.ovn span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters span {
	position: relative;
	display: inline-block;
	padding: 10px;
	background: darkred;
	font-size: 30px;
	width: 30px;
	margin: 0 3px;
	color: #fff;
	border-radius: 3px;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
.loading-characters.effect-fade span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(.9);
	   -moz-transform: scale(.9);
	    -ms-transform: scale(.9);
	     -o-transform: scale(.9);
	        transform: scale(.9);
}
.loading-characters.effect-fade span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-layer span.active {
	background: #3D84D6;
}
.loading-characters.effect-up-down span {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
	        opacity: 0;
}
.loading-characters.effect-up-down span.active {
	opacity: 1;
/*	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
*/	animation: upDownAnimation 2s ease-in-out;
}

@keyframes upDownAnimation {
	0% {
		-webkit-transform: translateY(-50px);
		   -moz-transform: translateY(-50px);
		    -ms-transform: translateY(-50px);
		     -o-transform: translateY(-50px);
		        transform: translateY(-50px);
	}
	50% {
		-webkit-transform: translateY(-5px);
		   -moz-transform: translateY(-5px);
		    -ms-transform: translateY(-5px);
		     -o-transform: translateY(-5px);
		        transform: translateY(-5px);	
	}
	100% {
		-webkit-transform: translateY(0);
		   -moz-transform: translateY(0);
		    -ms-transform: translateY(0);
		     -o-transform: translateY(0);
		        transform: translateY(0);
	}
}

.loading-characters.effect-left-right span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translate(-25px);
	   -moz-transform: translate(-25px);
	    -ms-transform: translate(-25px);
	     -o-transform: translate(-25px);
	        transform: translate(-25px);
}
.loading-characters.effect-left-right span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate(0);
	   -moz-transform: translate(0);
	    -ms-transform: translate(0);
	     -o-transform: translate(0);
	        transform: translate(0);
}


.loading-characters.effect-rotate-lf span {
	opacity: 0;
	visibility: hidden;
}
.loading-characters.effect-rotate-lf span.active {
	opacity: 1;
	visibility: visible;
	animation: rotateLoadingEffect .75s ease-in-out;
}

@keyframes rotateLoadingEffect {
	0% {
		-webkit-transform: rotate(0deg);
		   -moz-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		     -o-transform: rotate(0deg);
		        transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(390deg);
		   -moz-transform: rotate(390deg);
		    -ms-transform: rotate(390deg);
		     -o-transform: rotate(390deg);
		        transform: rotate(390deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
		    -ms-transform: rotate(360deg);
		     -o-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}


.loading-characters.effect-zoom-in span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(0);
	   -moz-transform: scale(0);
	    -ms-transform: scale(0);
	     -o-transform: scale(0);
	        transform: scale(0);
}
.loading-characters.effect-zoom-in span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

.loading-characters.effect-zoom-out span {
	opacity: 0;
	visibility: hidden;
	-webkit-transform: scale(4);
	   -moz-transform: scale(4);
	    -ms-transform: scale(4);
	     -o-transform: scale(4);
	        transform: scale(4);
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.loading-characters.effect-zoom-out span.active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
}

Javascript

 // var total_length = $('.loading-characters span').length;
var transition_time;
$('.loading-characters').each(function() {
	var count = 0;
	var effect = 'effect-'+$(this).attr('dd-effect');
	var total_length = $(this).children('span').length;
	var transition_time = ( $(this).attr('dd-transition-time') == undefined ? 500 : Number($(this).attr('dd-transition-time')));
	$(this).addClass('effect-'+$(this).attr('dd-effect'));
	loadingEffect(count, effect, transition_time, total_length);
});
// loadingEffect(count);
function loadingEffect(count, effect, transition_time, total_length) {
	if( count < total_length ) {
		count++;
		setTimeout(function() {
			$('.loading-characters.'+effect+' span:nth-child('+count+')').addClass('active');
			loadingEffect(count, effect, transition_time, total_length);
		}, transition_time);
		setTimeout(function() {
			if( $('.loading-characters.'+effect).attr('dd-remove-done-animated') != 'false' ) {
				$('.loading-characters.'+effect+' span:nth-child('+(count - 1)+')').removeClass('active');
			}
		}, transition_time);
	} else {
		setTimeout(function() {
			$('.loading-characters.'+effect+' span').removeClass('active');
		}, transition_time);
		count = -1;
		loadingEffect(count, effect, transition_time, total_length);
	}
}

To run this script you must have to include the jQuery library.

Hope you guys like this demo and use it in your own projects.

Read more
html,   css,   creative ... 

Hamburger Menu to Slide Nav Animation

 Techmates
 13 Feb, 2018

Hello folks, are you guys curious to see how to use a hamburger button(FAB) for a quick navigation menu? Then this is the article for you.

In this article we'd love to share how you can use hamburger menu for navigation.

The code is fully customizable. You can change the animation, classes and add your own styles/animation.

To change the hamburger position and animation direction, below are the list of classes:

  • menu--top-left (top left corner)
  • menu--top-right (top right corner)
  • menu--bottom-left (bottom left corner)
  • menu--bottom-right (bottom right corner)
  • menu--center-center (center)

HTML Structure

 <div class="menu menu--top-left menu-closed" id="menu_top_left">
	<a class="menu__btn" dd-nav-expand="menu_top_left"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--top-right menu-closed" id="menu_top_right">
	<a class="menu__btn" dd-nav-expand="menu_top_right"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
<div class="menu menu--bottom-left menu-closed" id="menu_bottom_left">
	<a class="menu__btn" dd-nav-expand="menu_bottom_left"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#"><i class="fab fa-facebook"></i></a></li>
		<li><a href="#"><i class="fab fa-twitter"></i></a></li>
		<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
		<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
		<li><a href="#"><i class="fab fa-youtube"></i></a></li>
	</ul>
</div>
<div class="menu menu--bottom-right menu-closed" id="menu_bottom_right">
	<a class="menu__btn" dd-nav-expand="menu_bottom_right"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#"><i class="fab fa-facebook"></i></a></li>
		<li><a href="#"><i class="fab fa-twitter"></i></a></li>
		<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
		<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
		<li><a href="#"><i class="fab fa-youtube"></i></a></li>
	</ul>
</div>
<div class="menu menu--center-center menu-closed" id="menu_center_center">
	<a class="menu__btn" dd-nav-expand="menu_center_center"><i class="fa fa-bars"></i></a>
	<ul class="menu__list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

CSS Styles


 .menu {
	position: relative;
	padding: 0;
	display: inline-block;
	z-index: 9999;
	border-radius: 100%;
}
.menu.menu-closed {
	width: 50px;
	height: 50px;
}
.menu.collapse {
	border-radius: 4px;
}
.menu:after {
	position: absolute;
	content: " ";
	width: 50px;
	height: 50px;
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
	border-radius: 50%;
	z-index: -1;
	overflow: hidden;
	-webkit-transition: width .5s, height .25s;
	   -moz-transition: width .5s, height .25s;
	    -ms-transition: width .5s, height .25s;
	     -o-transition: width .5s, height .25s;
	        transition: width .5s, height .25s;
}
.menu.collapse:after {
	width: 100%;
	height: 100%;
	border-radius: 4px;
}
.menu.menu--top-left:after {
	top: 0;
	left: 0;
}

.menu.menu--top-right:after {
	top: 0;
	right: 0;
}

.menu.menu--top-left {
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
}

.menu.menu--top-right {
	position: absolute;
	right: 0;
	top: 0;
	text-align: left;
}

.menu.menu--bottom-left {
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
}

.menu.menu--bottom-left:after {
	bottom: 0;
	left: 0;
}
.menu.menu--bottom-right {
	position: absolute;
	bottom: 0;
	right: 0;
	text-align: left;
}
.menu.menu--bottom-right:after {
	bottom: 0;
	right: 0;
}

.menu.menu--center-center {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	     -o-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	text-align: left;
	margin: 0 auto;
}

.menu.menu--center-center:after {
	margin: 0 auto;
	top: 50%;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);

	left: 0;
	right: 0;
}

.menu .menu__btn {
	position: absolute;
	cursor: pointer;
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
}
.menu .menu__list {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	list-style: none;
	padding: 0;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
	visibility: hidden;
	opacity: 0;
}
.menu.collapse .menu__list {
	visibility: visible;
	opacity: 1;
	height: inherit;
}

.menu .menu__list li a {
	position: relative;
	display: inline-block;
	color: #393E46;
	width: 100%;
	padding: 10px 25px;
	text-decoration: none;
	font-weight: bolder;
	opacity: 0;
}

.menu.collapse .menu__list li a {
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	    -ms-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;
	opacity: 1;
}
.menu.menu--center-center .menu__list li a {
	-webkit-transform: translateY(-10px);
	   -moz-transform: translateY(-10px);
	    -ms-transform: translateY(-10px);
	     -o-transform: translateY(-10px);
	        transform: translateY(-10px);
}
.menu.collapse.menu--center-center .menu__list li a {
	-webkit-transform: translateY(0);
	   -moz-transform: translateY(0);
	    -ms-transform: translateY(0);
	     -o-transform: translateY(0);
	        transform: translateY(0);
}
.menu.menu--top-left .menu__list li a, .menu.menu--bottom-left .menu__list li a {
	-webkit-transform: translateX(-10px);
	   -moz-transform: translateX(-10px);
	    -ms-transform: translateX(-10px);
	     -o-transform: translateX(-10px);
	        transform: translateX(-10px);
}
.menu.collapse.menu--top-left .menu__list li a, .menu.collapse.menu--bottom-left .menu__list li a {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.menu.menu--top-right .menu__list li a, .menu.menu--bottom-right .menu__list li a {
	-webkit-transform: translateX(10px);
	   -moz-transform: translateX(10px);
	    -ms-transform: translateX(10px);
	     -o-transform: translateX(10px);
	        transform: translateX(10px);
}
.menu.collapse.menu--top-right .menu__list li a, .menu.collapse.menu--bottom-right .menu__list li a {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.menu.collapse .menu__list li:nth-child(1) a {transition-delay: 0s;}
.menu.collapse .menu__list li:nth-child(2) a {transition-delay: .2s;}
.menu.collapse .menu__list li:nth-child(3) a {transition-delay: .4s;}
.menu.collapse .menu__list li:nth-child(4) a {transition-delay: .6s;}
.menu.collapse .menu__list li:nth-child(5) a {transition-delay: .8s;}
.menu.collapse .menu__list li:nth-child(6) a {transition-delay: 1s;}
.menu.collapse .menu__list li:nth-child(7) a {transition-delay: 1.2s;}
.menu.collapse .menu__list li:nth-child(8) a {transition-delay: 1.4s;}
.menu.collapse .menu__list li:nth-child(9) a {transition-delay: 1.6s;}
.menu.collapse .menu__list li:nth-child(10) a {transition-delay: 1.8s;}

Javascript

 $('[dd-nav-expand]').on('click', function(){
	$(this).hide();
	var menu_id = $(this).attr('dd-nav-expand');
	$('#'+menu_id).removeClass('menu-closed');
	$('#'+menu_id).addClass('collapse');
});

$('html').on('click', function(){
	$('[dd-nav-expand]').each(function(){
		$(this).show();
		var menu_id = $(this).attr('dd-nav-expand');
		$('#'+menu_id).addClass('menu-closed');
		$('#'+menu_id).removeClass('collapse');
	});
});

$('.menu').on('click', function(event){
	event.stopPropagation();
});

Hope you guys liked the demo.

Read more
html,   css,   animation ... 

CardBox Heading CSS Snippet

 Techmates
 12 Jan, 2018

In this article we'll create a card/box header with beautiful css shapes.

Below is the code to create the card/box title heading.

HTML Markup

 <div class="box">
	<h2 class="ribbon blue bottom">Awesome Title!</h2>
	<h3>Normal Heading</h2>
	<h2 class="ribbon blue top">Another Awesome Title!</h2>
	<h3>Triangle to up</h2>
	<h2 class="ribbon blue crossed">Another Awesome Title!</h2>
	<h3>Triangle to up and down</h2>
	<h2 class="ribbon expand"><span>Awesome title here!</span></h2>
	<h3>Triangle to both side</h2>
	<h2 class="ribbon red-gradient">Awesome Title Here!</h2>
	<h3>Background gradient</h2>
</div>


Apply CSS Styles

 .box {
	position: relative;
	margin: 0 auto;
	background: #FFF;
	max-width: 500px;
}
.ribbon {
	background: #2D5699;
	color: #FFF;
	padding: 18px;
	text-align: center;
	margin-left: -20px;
	margin-right: -20px;
	/*border-radius: 3px 3px 0 0;*/
	position: relative;
}
.ribbon:before, .ribbon:after {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	top: 100%;
}
.ribbon.red-gradient {
	background: rgb(234,67,53); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(234,67,53,1) 0%, rgba(178,0,0,1) 100%, rgba(125,185,232,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(234,67,53,1) 0%,rgba(178,0,0,1) 100%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(234,67,53,1) 0%,rgba(178,0,0,1) 100%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea4335', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
.ribbon.red-gradient:before {
	border-top: 20px solid #861F1A;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.red-gradient:after {
	border-top: 20px solid #861F1A;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.blue {
	background: #4285F4;
}
.ribbon.blue.top:before{
	top: -20px;
	left: 0;
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
}
.ribbon.blue.top:after{
	top: -20px;
	left: calc(100% - 20px);	
	border-bottom: 20px solid #2D5699;
	border-right: 20px solid transparent;
}
.ribbon.blue.bottom:before{
	border-top: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.blue.bottom:after{
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.blue.crossed:before{
	top: -20px;
	left: 0;
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
}
.ribbon.blue.crossed:after{
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.expand {
	position: relative;
	padding: 0;
	background: #4285F4;
}
.ribbon.expand:after {
	border-top: 20px solid #2D5699;
	border-right: 20px solid transparent;
	left: calc(100% - 20px);
}
.ribbon.expand:before{
	border-top: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
}
.ribbon.expand span {
	position: relative;
	padding: 18px 0;
	display: inline-block;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
.ribbon.expand span:before, .ribbon.expand span:after {
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	content: "";
	top: 100%;
}
.ribbon.expand span:after {	
	top: -20px;
	left: calc(100% - 20px);
	border-bottom: 20px solid #2D5699;
	border-right: 20px solid transparent;
}
.ribbon.expand span:before{
	border-bottom: 20px solid #2D5699;
	border-left: 20px solid transparent;
	left: 0;
	top: -20px;
}

Copy the code snippets and get your card title. Have fun!


Read more
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!

Read more
html,   css,   creative ... 

Beautiful Menu(Lines) Effects

 Techmates
 15 Sep, 2017

In this article we'd love to share a menu hover border effect 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--shadow top">
	<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--shadow top-inset">
	<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--shadow 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>
<nav class="nav nav--shadow bottom-inset">
	<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--line 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--line 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--line bottom left-out">
	<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--line bottom right-out">
	<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--line 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--line 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--line 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--line 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>

Apply CSS Styles:

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

.nav .menu__list li a:hover {
	color: #4285F4;
}
.nav.nav--simple .menu__list li a:hover {
	border-bottom: 3px solid #4285F4;
	color: #4285F4;
}

.nav.nav--shadow.top .menu__list li a:hover {
	box-shadow: 0 -4px 0 #4285F4;
}

.nav.nav--shadow.top-inset .menu__list li a:hover {
	box-shadow: 0 4px 0 #4285F4 inset;
}

.nav.nav--shadow.bottom .menu__list li a:hover {
	box-shadow: 0 4px 0 #4285F4;
}

.nav.nav--shadow.bottom-inset .menu__list li a:hover {
	box-shadow: 0 -4px 0 #4285F4 inset;
}
/* Line: left */
.nav.nav--line.bottom.left .menu__list li a:after {
	left: 0;
	bottom: 0;
	height: 3px;
}
.nav.nav--line.bottom.left .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Right */
.nav.nav--line.bottom.right .menu__list li a:after {
	right: 0;
	bottom: 0;
	height: 3px;
}
.nav.nav--line.bottom.right .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Right */
.nav.nav--line.bottom.right-out .menu__list li a:after {
	bottom: 0;
	left: 0;
	height: 3px;
}
.nav.nav--line.bottom.right-out .menu__list li a:hover:after {
	width: 100%;
	right: 0;
	left: auto;
}

/* Line: Bottom Left */
.nav.nav--line.bottom.left-out .menu__list li a:after {
	bottom: 0;
	right: 0;
	height: 3px;
}
.nav.nav--line.bottom.left-out .menu__list li a:hover:after {
	width: 100%;
	left: 0;
	right: auto;
}

/* Line: Top Left */
.nav.nav--line.top.left .menu__list li a:after {
	top: 0;
	left: 0;
	height: 3px;
}
.nav.nav--line.top.left .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Top Right */
.nav.nav--line.top.right .menu__list li a:after {
	top: 0;
	right: 0;
	height: 3px;
}
.nav.nav--line.top.right .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Bottom Center */
.nav.nav--line.bottom.center .menu__list li a:after {
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 auto;
}
.nav.nav--line.bottom.center .menu__list li a:hover:after {
	width: 100%;
}

/* Line: Top Center */
.nav.nav--line.top.center .menu__list li a:after {
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 auto;
}
.nav.nav--line.top.center .menu__list li a:hover:after {
	width: 100%;
}

That's it guys. Have fun!


Read more
html,   css,   creative ... 

Box Ribbon CSS

 Techmates
 01 Aug, 2017

In this article we'd love to share a CSS Box Ribbon with you guys.

Follow the steps to generate a ribbon on the box.

HTML Markup

<!-- Ribbon 1 -->
<div class="box ofh">
  <div class="top-cross-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 2 -->
<div class="box">
  <div class="arrow-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 3 -->
<div class="box">
  <div class="bottom-ribbon">Offers</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 4 -->
<div class="box ofh">
  <div class="half-circle-ribbon">30% <br /> offer</div>
  Lorem ipsum dolor sit amet, adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>
<!-- Ribbon 5 -->
<div class="box">
  <div class="cross-shadow-ribbon">Offer Text!</div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga ad, non nostrum tenetur praesentium dolore maxime nihil officiis explicabo culpa ab facilis voluptatibus asperiores labore quos minima distinctio, tempora in.
</div>
<!-- Ribbon 6 -->
<div class="box">
  <div class="cover-ribbon">
     <div class="cover-ribbon-inside">Offers</div>
  </div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus, est rem asperiores, omnis quo, temporibus deserunt tempora obcaecati odio dolorem quaerat nesciunt assumenda maxime voluptate in. Velit, dignissimos, ut.
</div>

Now apply the CSS.

Applying CSS Styles

.box {
	border: 1px solid #CCC;
	padding: 40px 25px;
	background: #FFF;
	max-width: 400px;
	position: relative;
	border-radius: 3px;
  margin: 0 auto;
}
.box.ofh {
  overflow: hidden;
}
/* Ribbon 1 */
.top-cross-ribbon {
	background: #EA4335;
	padding: 7px 50px;
	color: #FFF;
	position: absolute;
	top: 0;
	right: -50px;
	transform: rotate(45deg);
	border: 1px dashed #FFF;
	box-shadow: 0 0 0 3px #EA4335;
	margin: 5px;
}

/* Ribbon 2*/
.arrow-ribbon {
  background: #EA4335;
  color: #FFF;
  padding: 7px 50px;
  position: absolute;
  bottom: 10px;
  right: -1px;
}
.arrow-ribbon:before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    content: "";
    left: -12px;
    border-top: 15px solid transparent;
    border-right: 12px solid #EA4335;
    border-bottom: 15px solid transparent;
    width: 0;
}

/* Ribbon 3 */
.bottom-ribbon {
  background: #EA4335;
  color: #FFF;
  padding: 7px 50px;
  position: absolute;
  bottom: 10px;
  right: -1px;
  border-radius: 20px 0 0 20px;
}
.bottom-ribbon:after {
  position: absolute;
  right: -25px;
  top: -18px;
  bottom: 0;
  z-index: 9999;
  content: "";
  border-bottom: 43px solid #EA4335;
  border-left: 38px solid transparent;
  border-right: 20px solid transparent;
  width: 42px;
  z-index: -1;
}

/*Ribbon 4 */
.half-circle-ribbon {
  background: #EA4335;
  color: #FFF;
  height: 60px;
  width: 60px;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  position: absolute;
  top: -1px;
  right: -1px;
  flex-direction: row;
  border-radius: 0 0 0 100%;
  border: 1px dashed #FFF;
  box-shadow: 0 0 0 3px #EA4335;
}

/* Ribbon 5 */
.cross-shadow-ribbon {
  position: absolute;
  background: #EA4335;
  top: -15px;
  padding: 10px;
  margin-left: 15px;
  color: #FFF;
  border-radius: 0 0 2px 2px;
}
.cross-shadow-ribbon:before {
  content: "";
  position: absolute;
  left: -15px;
  right: 0;
  top: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 15px solid #A42F25;
  border-left: 15px solid transparent;
}

/* Ribbon 6 */
.cover-ribbon {
  height: 115px;
  width: 115px;
  position: absolute;
  right: -8px;
  top: -8px;
  overflow: hidden;
}
.cover-ribbon .cover-ribbon-inside {
  background: #EA4335;
  color: #FFF;
  transform: rotate(45deg);
  position: absolute;
  right: -35px;
  top: 15px;
  padding: 10px;
  min-width: 127px;
  text-align: center;
}
.cover-ribbon .cover-ribbon-inside:before {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 10px solid #992C23;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  top: 35px;
  transform: rotate(-45deg);
}
.cover-ribbon .cover-ribbon-inside:after {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 10px solid #992C23;
  border-bottom: 7px solid transparent;
  position: absolute;
  left: 95%;
  right: 0;
  top: 34px;
  bottom: 0;
  content: "";
  transform: rotate(-45deg);
}

That's it guys. Have fun :)

Read more
html,   css,   creative ... 

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


Read more
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


Read more
html,   css

Gameswrap Gaming News HTML5 Teamplate

 Techmates
 01 Aug, 2017

Gameswrap Gaming News HTML5 Teamplate is a responsive html5 bootstrap template.

Features:

  • Easy to setup
  • Easy customisation.
  • You can use this template for any kind of blog/news application.
  • Free to use anywhere.

Purpose: Blog / News Layout

Technologies: HTML, CSS, Bootstrap, jQuery

Read more
html,   css,   template ... 

Tantra Techniques

 Techmates
 01 Aug, 2017

Tantra Techniques is a responsive HTML5 informative static template.

Features:

  • Easy to install
  • Easy customisation
  • Static & informative website
  • You can use this template for any type of static informative website.

Purpose: Informative Responsive Design

Technologies: HTML, CSS, Bootstrap, Daneden Animate(Animation), jQuery

Read more
html,   css,   animation ...