CSS JQuery

Wednesday, October 22, 2014

Animating a box with CSS3

<style type="text/css">

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; background:#0CF;} /* just to be sure these are full screen*/

.container { width:100%; height:100%; overflow:hidden; position:absolute; display:block; }

.ground {
width:100%;
height:50px;
background:url(http://corkeynet.com/test/images/ground_pattern_small.jpg) repeat-x;
position:absolute;
bottom:0px;
}

.cloud{ position:absolute; display:block; }

#cloud1 {
width:166px;
height:94px;
background:url(http://corkeynet.com/test/images/cloud1.png) no-repeat;
z-index:0;
left:1px;
/* Chrome, Safari, Opera */
-webkit-animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
/* Standard syntax */
animation: cloud1 5s linear 1, cloud1_loop 5s 5s linear infinite;
}

#cloud2 {
width:146px;
height:93px;
background:url(http://corkeynet.com/test/images/cloud2.png) no-repeat;
z-index:2;
/* Chrome, Safari, Opera */
-webkit-animation: cloud2 34s linear 1, cloud2_loop 10s 3s linear infinite;
/* Standard syntax */
animation: cloud2 3s linear 1, cloud2_loop 10s 3s linear infinite;
}

#cloud3 {
width:113px;
height:68px;
background:url(http://corkeynet.com/test/images/cloud3.png) no-repeat;
z-index:3;
/* Chrome, Safari, Opera */
-webkit-animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
/* Standard syntax */
animation: cloud3 8s linear 1, cloud3_loop 16s 8s linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes cloud1 {
0% {left:20px; top:10px;}
100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud1_loop {
0% {left:-166px; top:10px;}
100% {left:100%; top:10px;}
}

@-webkit-keyframes cloud2 {
0% {left:75%; top:30px;}
100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud2_loop {
0% {left:-146px; top:30px;}
100% {left:100%; top:30px;}
}

@-webkit-keyframes cloud3 {
0% {left:50%; top:50px;}
100% {left:100%; top:50px;}
}

@-webkit-keyframes cloud3_loop {
0% {left:-146px; top:50px;}
100% {left:100%; top:50px;}
}

/* Standard syntax */
@keyframes cloud1 {
0% {left:20px; top:10px;}
100% {left:100%; top:10px;}
}

@keyframes cloud1_loop {
0% {left:-166px; top:10px;}
100% {left:100%; top:10px;}
}

@keyframes cloud2 {
0% {left:75%; top:30px;}
100% {left:100%; top:30px;}
}

@keyframes cloud2_loop {
0% {left:-146px; top:30px;}
100% {left:100%; top:30px;}
}

@keyframes cloud3 {
0% {left:50%; top:50px;}
100% {left:100%; top:50px;}
}

@keyframes cloud3_loop {
0% {left:-146px; top:50px;}
100% {left:100%; top:50px;}
}

.box {
width:112px;
height:112px;
background:url(http://corkeynet.com/test/images/gift_box_small.png) no-repeat;
margin:auto;
z-index:4;
position: absolute;
left: 0;
top: auto;
bottom: 25px;
right: 0;
/* Chrome, Safari, Opera */
-webkit-animation: box_fall 8s linear 1;
/* Standard syntax */
animation: box_fall 8s linear 1;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes box_fall {
0% {bottom: 100%;}
100% {bottom: 25px;}
}
/* Standard syntax */
@keyframes box_fall {
0% {bottom: 100%;}
100% {bottom: 25px;}
}

</style>

<body>

<div class="container">
<div class="ground"></div>
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
<div id="cloud3" class="cloud"></div>
<div class="box"></div>
</div>

</body>

Output :)

1)

Saturday, October 18, 2014

Return of a transition in CSS

<!DOCTYPE html>

<style type="text/css">

html, body {
height: 100%;
}

body {
margin-top: 100px;
margin-bottom: 100px;
}

.wrap {
width: 85%;
margin: auto;
background: #F0FCFF;
box-shadow: 0 0 20px rgba(0,0,0,.5);
height: 400px;
padding: 30px;
}
.box {
height: 100px;
width: 100px;
background: blue;
position: absolute;
-webkit-transition: margin 1s cubic-bezier(.5, -.5, .3, 1.3) 0s, border-radius 1s linear 0s, background 1s linear 0s;
}
.box2 {
height: 100px;
width: 83%;
padding: 10px;
position: absolute;
-webkit-box-sizing: border-box;
opacity: 0;
-webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .2s;
}
.box2 span {
font-size: .90em;
margin-right: 10%;
float: left;
font-family: 'Georgia', sans-serif;
}

.wrap:hover .box {
border-radius: 50%;
margin-left: 73%;
background: coral;
}

.wrap:hover .box2 {
opacity: 1;
-webkit-transition: opacity .5s cubic-bezier(.5, -.5, .3, 1.3) .75s;
}

</style>
<body>

<div class="wrap">
<div class="box2">
<span>Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.aaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccc ddddddddddddddddddddddd eeeeeeeeeeeeeeeeee fffffffffffffffffff gggggggggggggggggg hhhhhhhhhhhhhhh iiiiiiiiiiii</span>
</div>
<div class="box"></div>
</div>

</body>

</html>

Output :)

Thursday, October 16, 2014

Expand Retract effect using JavaScript and CSS

HTML File :)

<!DOCTYPE html>
<html>
<head>
<title>MaHii : CSS with JS</title>
<link type="text/css" href="style.css" rel="stylesheet">
<script type="text/javascript" src="animate.js"></script>
</head>
<body>
<div id="container">

<div class="buttons">
<h1><a href="#" onClick="return false" onMouseDown="expand('first')">Expand Box</a></h1>
<h1><a href="#" onClick="return false" onMouseDown="retract('first')">Retract Box</a></h1>
</div>

<div class="box" id="first">
<p>JavaScript is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.</p>
</div>

</div>
</body>
</html>

CSS File :) style.css :)

#container{
width:350px;
padding:5px;
}

h1{
font-family: montserrat;
font-size:16px;
width:150px;
background:#33b5e5;
padding:6px;
border-radius:3px;
float:left;
margin:5px;
text-align:center;
}

h1 a{
text-decoration:none;
color: white;
}

h1 a:hover{
color: #e1e2e3;
}

.box{
background:#33b5e5;
width:342px;
height:0px;
overflow:hidden;
border-radius:5px;
color: white;
font-family: montserrat;
font-size:13px;
}

.box p{
padding:10px;
}

JavaScript File :) animate.js :)

function expand(el){

var target = document.getElementById(el);
var height = target.offsetHeight;
var sh = target.scrollHeight;
var loopTimer = setTimeout('expand(\''+el+'\')',10);

if(height < sh){
height += 5;
} else {
clearTimeout(loopTimer);
}

target.style.height = height+"px";
}

function retract(el){

var target = document.getElementById(el);
var height = target.offsetHeight;
var loopTimer = setTimeout('retract(\''+el+'\')',10);

if(height > 0){
height -= 5;
} else {
target.style.height = "0px";
clearTimeout(loopTimer);
}

target.style.height = height+"px";
}

Output :)

1)

Tuesday, October 14, 2014

Sticking a div to mouse cursor

<html>
<head>
<title>MaHiii : CSS Tution</title>
<style type="text/css">

div#myDiv1 {
position:absolute;
left:0;
top:0;
}

</style>
</head>

<body>

<div id="myDiv1">MaHiiiiiii</div>

<script type="text/javascript">

var mydiv1=document.getElementById("myDiv1");

document.addEventListener('mousemove', function (e) {
var x = e.pageX;
var y = e.pageY;
mydiv1.style.top = y + 'px';
mydiv1.style.left = x + 'px';
});

</script>
</body>
</html>

Output :)

Monday, October 13, 2014

Nice looking linear gradient background

<html>
<head>
<title>MaHiiii : CSS : Linear Gradient Background</title>

<style type="text/css">

html
{
height: 100%;
background-color: #f095ee;

background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));

background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

-webkit-background-size: 400px 400px;
-moz-background-size: 400px 400px;
background-size: 400px 400px;
}
</style>
</head>
<body>

</body>
</html>

Output :)

Simple ToolTip ...!

<style type="text/css">

.tooltip {
position: relative;
opacity: 0;
padding: 10px;
background: #9B59B6;
color: white;
font-family: comic sans ms;
border-radius: 5px;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
transition:all 0.2s ease-in;
}

a{
color: #bfd04d;
font-family: 'montserrat';
padding: 10px;
text-decoration: none;
}

a.show:hover + span.tooltip {
opacity:1;
}

</style>

<div class="wrapper">

<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is tooltip....</span>

<br />

<a href="#" class="show">Hover Me !</a>
<span class="tooltip">Hello ! This is another tooltip....</span>

</div>

Output :)

1)

Friday, October 10, 2014

Odd Even style in CSS

<style type="text/css">

.timeline-centered .timeline-entry:nth-of-type(odd) .timeline-entry-inner .timeline-name {
background-color: #fad839;
}

.timeline-centered .timeline-entry:nth-of-type(even) .timeline-entry-inner .timeline-name {
background-color: #21a9e1;
}

.timeline-label{
height: 10px;
}

</style>

<div class="timeline-centered" id="ulnotifications">

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

<article class="timeline-entry">
<div class="timeline-entry-inner">
<div class="timeline-name">MaHiiiiiiiiiiii</div>
<div class="timeline-label"></div>
</div>
</article>

</div>

Output :)