responsive

5 results found!

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.

html,   css,   creative ... 

Text Animation Effects with Background and Gradient using Background Clip

 Techmates
 15 Feb, 2018

Hello folks, are you guys curious to see the background animation/effects inside the text itself? Then this demo is for you. The demo will show you the different animations/effects with background and gradient using the CSS background clip property inside the text.

**The demo is using advanced CSS properties. Only latest browsers which supports the CSS background-clip property will support this demo.

HTML Structure

<div class="box gradient-bg">
	<h2 class="title">Gradient Background Inside Text</h2>
</div>
<div class="box moving-gradient-block">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-gradient-block fast">
	<h2 class="title">Moving Gradient Bg Inside Text</h2>
</div>
<div class="box moving-piece-bg">
	<h2 class="title">Flash Text Animation Effect</h2>
</div>
<div class="box moving-piece-bg torch">
	<h2 class="title">Torch Text Animation Effect</h2>
</div>
<div class="gray-bg">
	<div class="box gradient-img smoke">
		<h2 class="title">Smoke Text Animation Effect</h2>
	</div>
</div>
<div class="box gradient-img">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div>
<div class="box gradient-img animate">
	<h2 class="title">Backgorund Image Inside Text</h2>
</div> 

CSS Styles

.title {
	font-family: "Montserrat Alternates", sans-serif;
	font-size: 70px;
	font-weight: 900;
	color: transparent;
}
.gray-bg {
	background: #1c1c1c;
}
.box {
	position: relative;
	display: inline-block;
	border-bottom: 1px solid #ccc;
}

.box.gradient-bg {
	display: inline-block;
	background: -webkit-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background: linear-gradient(to right, #EB3535 0%, #FBBC05 50%, #34A853 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.box.moving-gradient-block {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 50%, #EB3535 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200% auto;
	-webkit-animation: animateBg 7.5s infinite linear;
	animation: animateBg 7.5s infinite linear;
}
.box.moving-gradient-block.fast {
	background-position: 0;
	background-size: 150px;
	animation-timing-function: linear;
}
@keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
@-webkit-keyframes animateBg {
	100% {
		background-position: 200%;
	}
}
.box.moving-gradient-block .title {
	padding: 50px 20px;
	border: 10px solid rgba(255, 255, 255, .5);
	border-radius: 5px;
}

.box.moving-piece-bg {
	background: -webkit-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: -o-linear-gradient(left, #EB3535 0%, #4285F4 100%);
	background: linear-gradient(to right, #EB3535 0%, #4285F4 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 150px 100px;
	background-repeat: no-repeat;
	animation: animateBlockEffect 5s linear infinite;
}
.box.moving-piece-bg.torch {
	display: inline-block;
	background: -webkit-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: -o-linear-gradient(left, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background: linear-gradient(to right, rgba(235, 53, 53, 0) 0%, #4285F4 40%, #4285F4 60%, rgba(66, 133, 244, 0) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px 100px;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}
@keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		background-position: 115%;
	}
}
@-webkit-keyframes animateBlockEffect {
	0% {
		background-position: -25%;
	}
	100% {
		-webkit-background-position: 115%;
	}
}

.box.gradient-img {
	display: inline-block;
	background: url('../2.jpg');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent; 
}

.box.gradient-img.smoke {
	display: inline-block;
	background: url('../1.png');
	background-position: center;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200px;
	background-position: 0;
	background-repeat: no-repeat;
	-webkit-animation: animateBlockEffect 5s linear infinite;
	animation: animateBlockEffect 5s linear infinite;
}

.box.animate {
	animation: animateBg 5s linear infinite;	
}

@media(max-width: 768px) {
	.title {
		font-size: 30px;
	}
	.box.moving-piece-bg, .box.moving-piece-bg.torch {
		background-size: 50px 100%;
	}
} 

Hope you guys enjoyed the demo. Feel free to modify the code according to your need.


css,   creative,   animation ... 

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

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

html,   css,   animation ... 

Medicare Business HTML5 Responsive Template

 Techmates
 01 Aug, 2017

Medicare Business is a HTML5 Responsive Bootstrap Informative Template.

Features:

  • Easy to setup.
  • Easy customisation.
  • You can use this template for any kind of static informative website.
  • Cross browser compatible.
  • Free to use anywhere.
  • Static informative layout.

Purpose: Static Informative Template.

Technologies: HTML5, CSS, Bootstrap, Animation, jQuery

css,   creative,   animation ...