GyanCode: before after css

Showing posts with label before after css. Show all posts

Thursday, 23 February 2017

Border Design Css with Before & After Css

<!DOCTYPE html>
<html>
<style>
.titlehome {
font-size: 24px;
line-height: 24px;
text-align: center;
padding: 7px 15px 10px 15px;
color: #000;
font-weight: bold;
margin-bottom: 10px;
position: relative;
z-index: 1;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.titlehome span {
color: #000;
text-align: center;
background: #fff;
padding: 0 50px;
}

.titlehome:before {
border-top: 1px solid #f67519;
content: "";
margin: 0 auto;
position: absolute;
top: 3%;
left: 0;
right: 0;
bottom: 0;
width: 150px;
z-index: -1;
}
.titlehome:after {
border-top: 1px solid #f67519;
content: "";
margin: 0 auto;
position: absolute;
top: 90%;
left: 0;
right: 0;
bottom: 0;
width: 150px;
z-index: -1;
}
</style>
<body>
<div class="titlehome"><span>Border Design Css with Before & After Css</span></div>
</body>

</html>

Monday, 28 November 2016

How To Create a border with Before & after css

<!DOCTYPE html>
<html>
<style>
.titlehome {font-size:24px;line-height:24px; text-align:center; padding:7px 15px 10px 15px; color:#000; font-weight:bold; margin-bottom:10px;position: relative;z-index: 1;}
.titlehome span { color: #000; text-align: center; background: #fff; padding: 0 50px;}
.titlehome:before {border-top: 2px solid #f67519;content: ""; margin: 0 auto; position: absolute; top: 50%; left: 0;right: 0;bottom: 0; width: 100%; z-index: -1;}

</style>
<body>
<div class="titlehome"><span>Border Design Css with Before & After Css</span></div>
</body>

</html>

Saturday, 12 November 2016

Right arrow with before after css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Right arrow with before after css</title>
</head>
<style>
.left-box { background: #27aae0; color: #fff; padding: 10px 15px; position: relative; margin: 10px 0px; border-radius: 9px; width: 440px; float: left;}
.left-box h5 { font-size: 20px; margin:0px;}
.left-box p { font-size: 14px;}
.left-box:after {bottom: 100%; left: 28%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(213,222,227,0); border-width: 11px; margin-left: 21em; border-left-color: #27aae0; top: 20px;}
</style>
<body>
<div class="left-box">
<h5>Is your website shunning your customers away?</h5>
<p> Does your customers on an ecommerce website come and abandon from buying in your website. Do they just leave and buy the same product from a competitor website then for sure you need to relook at your website usability design.</p>
</div>
</body>
</html>

Gyancode

A free library of HTML, CSS, JS

Search This Blog