GyanCode

Thursday, 23 February 2017

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>

Gyancode

A free library of HTML, CSS, JS

Search This Blog