Dd makes you design drastic

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

Browse Snippets!

Featured Snippets

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

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

Button Text Animation

 Techmates
 28 Jul, 2017

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

To create the effect. Follow this steps:

HTML Markup

<button class="btn fade" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn top" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn bottom" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn left" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn right" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn zoomIn" data-content="Yes!"><p>Hover me!</p></button>
<button class="btn zoomOut" data-content="Yes!"><p>Hover me!</p></button> 

Applying CSS Styles

.btn {
  background: #4285F4;
  padding: 5px;
  min-width: 200px;
  border: none;
  border-radius: 3px;
  color: #FFF;
  font-weight: bolder;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: .25s;
  cursor: pointer;
}
.btn:after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  content: attr(data-content);
  opacity: 0;
  visibility: hidden;
  transition: .25s;
}
.btn p{
  transition: .15s;
  opacity: 1;
}
.btn:hover p {
  opacity: 0;
}
.btn:hover:after {
  opacity: 1;
  visibility: visible;
}
.btn.top:after {
  top: 100%;
}
.btn.top:hover:after {
  top: 0;
}
.btn.top:hover p {
  opacity: 0;
  transform: translateY(-40px);
}

.btn.bottom:after {
  top: -100%;
}
.btn.bottom:hover:after {
  top: 0;
}
.btn.bottom:hover p {
  transform: translateY(40px);
}

.btn.left:after {
  left: -100%;
}
.btn.left:hover:after {
  left: 0;
}
.btn.left:hover p {
  transform: translateX(100px);
}

.btn.right:after {
  left: 100%;
}
.btn.right:hover:after {
  left: 0;
}
.btn.right:hover p {
  transform: translateX(-100px);
}

.btn.zoomIn:after {
  transform: scale(1.5);
}

.btn.zoomOut:after {
  transform: scale(0.5);
}
.btn.zoomIn:hover:after, .btn.zoomOut:hover:after {
  transform: scale(1);
}

.btn.fade p {
  transition: 1s;
}
.btn.fade:after {
  transition: 1s;
  opacity: 0;
}

.btn.fade:hover:after {
  opacity: 1;
} 

That's it guys. Have fun!

cssanimation

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


Featured Templates

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


htmlcss

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


htmlcss

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



Featured Mockups

Coffee Mug In-Hand Mockup

 Techmates
 31 Jul, 2017

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


Mockup

Abstract Cup Design Mockup

 Techmates
 25 Jul, 2017

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

Mockup

iPhone 6 Mobile App Mockup

 Techmates
 14 Jul, 2017

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

Mockup


Design Drastic
#keeplearning

HTML5

CSS3

Javascript

Photoshop Mockups

Animation

HTML5 Templates