Yo Yo Yo here is my personal portfolio website. Designed and Developed by Me… Please take a look.

Soon my rate list page and offer will available on the site

Visite on :-     mukulsoni.com

mukulsoni

Advertisements

How to change the background color automatically with CSS3 animation ?

Description:- In this example I’m gonna show you guys how you can easily animate your background and texts without using WOW.js but using CSS3 animation properties.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animation</title>
<style>
*{padding:0px; margin:0px;}
body{
 width:100%;
 background:rgba(51,51,51,1);
 position:relative;
 animation-name:demo;
 animation-direction:alternate reverse;
 animation-duration:10s;
 animation-iteration-count:infinite;
 animation-timing-function:linear;
}
@keyframes demo
{
    0%{background:rgba(51,51,51,1); height:1000px; left:0px; top:0px;}
    25%{background:rgba(0,102,153,1);left:0px;  top:0px;}
    50%{background:rgba(0,204,204,1); left:0px;top:0px;}
    75%{background:rgba(153,204,0,1); left:0px;  top:0px;}
    100%{background:rgba(51,51,51,1); left:0px; top:0px;}
    
}

.box > h1{font-family:Roboto; font-weight:300; font-size:36px; color:rgba(255,255,255,1);margin-left:500px;
margin-top:250px; animation:text .9s 1 ease alternate; position:relative; float:left; } 

@keyframes text
{
    0%{margin-left:0px;}
    25%{margin-left:500px; transform:rotate(0deg);}
    50%{margin-left:500px; transform:rotate(10deg);}
    75%{margin-left:500px; transform:rotate(-10deg);}
    100%{margin-left:500px; transform:rotate(0deg);}
}

.box2 > h1{font-family:Roboto; font-weight:300; font-size:26px; color:rgba(255,255,255,1);
 animation:sectext 3s 1 ease-in alternate; position:fixed; top:320px; margin-left:620px; opacity:1;} 

@keyframes sectext
{
    0%{opacity:0;}
    100%{opacity:1;}
}


</style>
</head>

<body>

<div class="box">
<h1>Keyframe Animation</h1>
</div>

<div class="box2">
<h1>By CSS3</h1>
</div>
</body>
</html>

 

How to make Vertical Drop-Down Navigation using HTML, CSS3 and jQuery ?

Description:- In today’s example I’m gonna show you how to make vertical drop-down navigation menu. You can use it in your site or in your admin dashboard like I did. So for this we need to download jquery file so go to http://code.jquery.com/jquery-1.11.3.min.js and download it and save it in your folder.

So, here is the finish product’s images in first image you can see only 5 menus with down arrow but after click on courses link it expands and the sub menus of courses will appear with the arrow facing to the upper direction.

pic1

pic2

Code is below just change the names of list items and use it or play with the colors or do whatever you want to do peeps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(e) {
$(".course-sub").click(function(e){
$(this).toggleClass("roll");
});
});

</script>
<style>
*{padding:0px; margin:0px;}
.nav{width:250px; background:rgba(51,51,51,1);}
.nav a{display:block;padding:10px 0px 10px 20px; text-decoration:none; border-bottom:1px dotted gray;color:#fff; letter-spacing:.2em; text-transform:uppercase; transition:all 0.3s linear;}
.nav a:hover{background:#dd0909;}
.nav li{list-style:none;}
.nav-ul ul{display:none;}
.nav-ul li.roll ul{display:block;}
.arrow:after{content:'\203A'; float:right; margin-right:20px; transform:rotate(90deg); font-size:20px;}
.nav li.tap .arrow:after{content:'\2039';}
.nav-ul ul a:before{content:'\203A'; margin-right:20px;}

</style>
</head>
<body>
<nav class="nav">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li class="course-sub"><a href="#">Courses<span class="arrow"></span></a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>


</nav>

</body>
</html>

*Note:- Don’t forget to include jQuery file.