Gyancode

A free library of HTML, CSS, JS

Search This Blog

Showing posts with label before after css. Show all posts
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>