3d

4 results found!

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

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

css,   creative,   html ... 

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