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

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!


css,   creative,   3d ... 

Beautiful Menu(Layer) Effects

 Techmates
 18 Sep, 2017

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

Follow the steps and markup to create the beautiful effect:

HTML Markup:

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

Apply CSS Styles:

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

That's it guys. Have fun!

html,   css,   creative ... 

3D Button Effects in CSS

 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!

css,   creative,   3d

3D Text & Hover Effects in CSS

 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!


css,   creative,   3d


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


html,   css

Foodapp Landing Page

 Techmates
 01 Aug, 2017

Foodapp landing page is a one page HTML5 template.

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

Features:

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


Purpose: Landing page / One page application.

Technologies: HTML, CSS, jQuery, Bootstrap


html,   css

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 ... 


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