Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 28 February 2017

Word Wrap with Css

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        .wrap{ width: 400px;border: 1px solid #ccc;background:#f6f6f6;word-wrap: break-word;float:left; margin:0px auto; padding:15px; font-size:16px; font-family:Verdana;}
    </style>
</head>
<body>
    <span class="wrap"> Lorem Ipsum is simply dummynospacetextcontentyoucancheckdummynospacetextcontentyoucancheckdummynospacetextcontentyoucancheck text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</span>

</body>
</html>

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>


How to make blinking/flashig text with css3 and jquery

<section id="msg-blink" class="blink_me">This Will Blink</section>

you can use css3 or jquery both style are working
<style text="text/css">
.blink_me {
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;

    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }

}
</style>
<script type="text/javascript">

    function blinker() {
        $('.blink_me').fadeOut(500);
        $('.blink_me').fadeIn(500);
    }

    setInterval(blinker, 1000);
</script>

Thursday 16 February 2017

Centred Widthless floats

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Centred Widthless floats</title>
</head>
<style>
.navcentre {text-align:center;margin:10px auto;display:table;border:1px solid #000;padding: 2px;}
.navcentre ul { list-style:none;margin:0;padding:0;display:inline-block;white-space:nowrap;}
.navcentre ul li{display:inline-block }
.navcentre ul a{display:inline-block;padding: 6px 15px;text-decoration:none;background: #00e0c3;border: 1px solid #000000;color: #fff;font-size: 14px;font-family: verdana;}

.navcentre ul a:hover{background:red;color:#fff}
</style>
<body>
<div class="navcentre">
<ul>
<li><a href="#">Demo Text 1</a></li>
<li><a href="#">Demo Text 2</a></li>
<li><a href="#">Demo Text 3</a></li>
</ul>
</div>

</body>
</html>

Here is a example..




Monday 13 February 2017

CSS Gradient

You can add gradient in your website 

Ultimate CSS Gradient Generator

Just click here..

Border Add Before after CSS

<style type="text/css">
h1:before {content: ""; position: absolute; left: 0; top: 50%;  width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
h1:after {content: ""; position: absolute; left: 0; top: 50%;  width: 2px; height: 66px; background: #fff; transform: translateY(-50%);}
</style>
<h3>Demo Text here!</h3>

Thursday 9 February 2017

How to select first and last TD in a row?

tr td:first-child{ background:#f6f6f6; border:1px #ccc solid; color:#000;}
tr td:last-child { background:#eeeeee; border:1px #ccc solid; color:#000;}

Wednesday 8 February 2017

Dashed Border Effect

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dashed Border Effect</title>
</head>
<style>
.dashed { float: left; margin: 10% 0%; width: auto;}
.dashed a { background-color: #09c18c;display: block;    border: 2px dashed #000; padding: 30px 10px;  text-decoration: none; color: #fff;font-size: 24px; width: auto; width:250px; text-align:center;}
.dashed a:hover {border:2px dashed #fff;}
</style>
<body>

<div class="dashed"><a href="#">Dashed Border</a></div>

</body>
</html>


Wednesday 1 February 2017

CSS Notebook

<p class="paper">Notebook Paper
<br><br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rhoncus sem vel mauris porttitor sit amet adipiscing odio interdum. Nunc non magna sit amet augue rutrum laoreet in in nulla. Nunc et malesuada orci. Sed metus enim, venenatis tincidunt tincidunt a, malesuada nec dolor. Nam volutpat, augue fringilla mattis venenatis, odio ipsum porta sapien, et tincidunt tortor erat quis nulla. Mauris dictum laoreet purus, et gravida magna aliquet quis. Phasellus sollicitudin tortor ut leo fringilla sed scelerisque diam suscipit. Donec non tortor id ante adipiscing tempus vitae et massa. Donec risus nisl, tincidunt quis facilisis blandit, lacinia vestibulum nulla.<br>
</p>​
<style>
html, body { height: 100%; }
body {
    margin: 0;
    padding: 0;
    height: 100%;
/* gradients - second red border, first red border, top white space, blue lines */
    background-image:  -webkit-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -webkit-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -webkit-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -webkit-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -moz-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -moz-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -moz-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -moz-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -ms-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -ms-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -ms-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -ms-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  -o-linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), -o-linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), -o-linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), -o-repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-image:  linear-gradient(left, rgba(255,85,91, .2), rgba(255,85,91, .2)), linear-gradient(left, rgba(255,85,91, .8), rgba(255,85,91, .8)), linear-gradient(top, white 0px, white 69px, rgba(255,255,255,0) 70px), repeating-linear-gradient(white 0px, white 18px, #A6FFED 19px, white 20px);
    background-size: 1px, 1px, auto, auto 20px;
    background-repeat: repeat-y, repeat-y, no-repeat, repeat;
    background-position: 90% 0px, 10% 0px, 0px 0px, 0px 0px;
}

.paper {
margin: 0;
    display: block;
    font: 10pt Arial, sans-serif;    
    line-height: 20px;
    padding-top: 50px;
    padding-left: 10.5%;
    padding-right: 10.5%;
    text-align: justify;
}
.paper:first-line {
    font: 20pt Arial, sans-serif;
    line-height: 33px;
    vertical-align: baseline;
}
.paper:after {    
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: absolute;
    background: rgba(255,255,255,1);
    top: 40px;
    left: 2%;
    z-index: 10;
    -webkit-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    -moz-box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
    box-shadow: 
        inset 2px 2px 5px rgba(125,125,125,1),  
        2px 50.1em 5px rgba(255,255,255,1), 0px 50em rgba(125,125,125,.75),  
        2px 90.1em 5px rgba(255,255,255,1), 0px 90em rgba(125,125,125,.5),
        2px 130.1em 5px rgba(255,255,255,1), 0px 130em rgba(125,125,125,.25);
}

.paper:focus {
    outline: none;
}
</style>

Wednesday 25 January 2017

Banner Overlay Effect

<style>
#banner { padding: 20px 0; background: url(../images/img.jpg) no-repeat top; background-size: cover; position: relative;  background-position: 50% 30%;    min-height: 500px;}
#contact-page:before { position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.6);}
</style>
<section id="banner">
<h3>Banner Overlay Effect </h3>
</section>