creative

7 results found!

Hover Text Effect

 Techmates
 02 Nov, 2017

In this article we'd love to share a hover text effect with you.

Follow this simple steps to create hover effect.

HTML Markup

 <h2 class="title top" data-letters="Text hover effect from top!">Text hover effect from top!</h2>
<h2 class="title bottom" data-letters="Text hover effect from bottom!">Text hover effect from bottom!</h2>
<h2 class="title left" data-letters="Text hover effect from left!">Text hover effect from left!</h2>
<h2 class="title right" data-letters="Text hover effect from right!">Text hover effect from right!</h2>

Applying CSS Styles

 .title {
  font-size: 5em;
  margin: 0;
  position: relative;
  color: #4C4C4C;
  display: inline-block;
  -webkit-text-stroke-width: 0px;
  text-stroke-width: 0px;
}
.title:before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: attr(data-letters);
  overflow: hidden;
  white-space: nowrap;
}
.title.top:before {
  transition: height 1s;
  color: #EA4335;
  height: 0;
  z-index: 999;
}
.title.top:hover:before {
  height: 100%;
}

.title.bottom {
  color: #EA4335;
}
.title.bottom:before {
  transition: height 1s;
  color: #4C4C4C;
  height: 100%;
  z-index: 999;
}
.title.bottom:hover:before {
  height: 0;
}
.title.left:before {
  transition: width 1s;
  color: #EA4335;
  width: 0;
  z-index: 999;
}
.title.left:hover:before {
  width: 100%;
}
.title.right {
  color: #EA4335;
}
.title.right:before {
  transition: width 1s;
  color: #4C4C4C;
  width: 100%;
  z-index: 999;
}
.title.right:hover:before {
  width: 0;
}

That's it guys. Have fun!

csscreativeanimation

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!

htmlcsscreativeanimation

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!


htmlcsscreativeanimation

Box Ribbon

 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 :)

csscreative

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

3D Button Effect

 Techmates
 28 Jul, 2017

In this article we'd love to share a 3d button effect(using pure CSS and HTML) with you guys.

To create a 3d button effect follow the below steps:

- First we'll create an HTML markup

HTML Markup

<div class="dd-center-content">
	<div class="dd-elements">
		<button class="btn btn-shadow">3D Button!</button>
		<button class="btn btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-shadow-layer">3D Button!</button>
		<button class="btn btn-shadow-layer-inverse">3D Button!</button>
	</div>
	<div class="clearfix"></div><br/>
	<div class="dd-elements">
		<button class="btn btn-round btn-shadow">3D Button!</button>
		<button class="btn btn-round btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-round btn-shadow-layer">3D Button!</button>
		<button class="btn btn-round btn-shadow-layer-inverse">3D Button!</button>
	</div>
	<div class="clearfix"></div><br/>
	<div class="dd-elements">
		<button class="btn btn-perspective btn-shadow">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-inverse">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-layer">3D Button!</button>
		<button class="btn btn-perspective btn-shadow-layer-inverse">3D Button!</button>
	</div>
</div> 


- Apply the css

Applying CSS Styles

.btn {
	border: 1px solid transparent;
	background: #4285F4;
	color: #FFF;
	text-transform: uppercase;
	font-weight: bolder;
	display: inline-block;
	padding: 20px 50px;
	transition: .5s;
	outline: none;
	cursor: pointer;
	margin: 20px;
}

.btn-shadow {
	box-shadow: 6px 6px 0 0 #C6C6C6, 5px 5px 0 0 #C6C6C6, 4px 4px 0 0 #C6C6C6, 3px 3px 0 0 #C6C6C6, 2px 2px 0 0 #C6C6C6, 1px 1px 0 0 #C6C6C6;
}
.btn.btn-shadow:hover {
	transform: translateY(5px);
	box-shadow: none;
}
.btn-shadow-inverse {
	box-shadow: none;
}
.btn.btn-shadow-inverse:hover{
	transform: translateY(-5px);
	box-shadow: 6px 6px 0 0 #C6C6C6, 5px 5px 0 0 #C6C6C6, 4px 4px 0 0 #C6C6C6, 3px 3px 0 0 #C6C6C6, 2px 2px 0 0 #C6C6C6, 1px 1px 0 0 #C6C6C6;
}

.btn-shadow-layer {
	box-shadow: 9px 9px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2);
}
.btn.btn-shadow-layer:hover {
	transform: translateY(5px);
	box-shadow: none;
}

.btn.btn-shadow-layer-inverse {
	box-shadow: none;
}
.btn.btn-shadow-layer-inverse:hover {
	box-shadow: 9px 9px 0 rgba(0, 0, 0, .2), 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2);
	transform: translateY(-5px);
}

.btn.btn-round {
	width: 150px;
	height: 150px;
	text-align: center;
	padding: 0;
	border-radius: 100%;
}

.btn.btn-perspective {
	padding: 25px 50px;
	transform: perspective(500px) rotateX(25deg);
} 

That's it guys. Have fun!

csscreative3d

3D Text & Hover Effect

 Techmates
 28 Jul, 2017

In this article we'd love to share 3d text and their hover effect with animation.

Create the 3d text effect with simple steps.

HTML Markup

<h1 class="heading layer-shadow">3d Text Title</h1>
<br />
<h1 class="heading layer-shadow-reverse">3d Text Title</h1>
<br />
<h1 class="heading shadow">3d Text Title</h1>
<br />
<h1 class="heading double-shadow">3d Text Title</h1>	
<br />
<h1 class="heading perspective perspective-x">Your Title!</h1>
<br />
<h1 class="heading perspective perspective-y">Your Title!</h1> 

And

Applying CSS Styles


.heading {
	font-size: 6em;
	color: #363636;
	text-transform: uppercase;
	display: inline-block;
	transition: .5s;
	margin: .5em;
}
.heading.layer-shadow {
	text-shadow: 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2), 9px 9px 0 rgba(0, 0, 0, .2);
}
.heading.layer-shadow:hover {
	transform: translateY(5px);
}

.heading.layer-shadow-reverse:hover{
	text-shadow: 6px 6px 0 rgba(0, 0, 0, .2), 3px 3px 0 rgba(0, 0, 0, .2), 9px 9px 0 rgba(0, 0, 0, .2);
	transform: translateY(-5px);
}
.heading:hover{
	text-shadow: none;
}
.heading.shadow {
	text-transform: none;
	text-shadow: 1px 0px 1px #999, 0px 1px 1px #AAA, 
  2px 1px 1px #999, 1px 2px 1px #AAA,
  3px 2px 1px #999, 2px 3px 1px #AAA,
  4px 3px 1px #999, 3px 4px 1px #AAA,
  5px 4px 1px #999, 4px 5px 1px #AAA,
  6px 5px 1px #999, 5px 6px 1px #AAA,
  7px 6px 1px #999;
}
.heading.shadow:hover {
	text-shadow: none;
	transform: translateY(5px);
}

.heading.double-shadow {
	text-transform: none;
	text-shadow: 4px 3px 0 #F5F5F5, 9px 8px 0 rgba(0,0,0,0.2);
}
.heading.double-shadow:hover {
	text-shadow: none;
	transform: translateY(5px);
}

.heading.perspective {
	text-shadow:  2px 3px 0 #ECECEC, 5px 6px 0 #A9A9A9;
	overflow: hidden;
}
.heading.perspective.perspective-x {
	transform: perspective(600px) rotateX(45deg);
}
.heading.perspective.perspective-y {
	transform: perspective(600px) rotateY(-15deg);	
}
.heading.perspective:hover {
	transform: none;
}

 


That's it guys. Have fun!


csscreative3d