Sanwebcorner | Programming Blog

Simple Gradient Background for webpage using css3 code

Today we will see how to create simple gradient background using css3 code. The css3 code allows the linear-gradient attribute to display the gradient background. The below code is the one to display the background gradient.

 background-image: linear-gradient(to bottom right, green, orange);

 Here we can used to bottom right position, it displays gradient from top left to bottom right, You can use the different position like, to left, to right, to bottom, to top, etc... This simple background gradient you can use instead of plain background color for body or any sections. This is very very simple and easy to use, Here is the css code you can use it and also demo link check it out , I hope this is is useful.


Simple Gradient Background for webpage using css3 code

Code for Simple Gradient Background:


<!DOCTYPE html>
<html>
<title>Simple Background Gradient for Website</title>
<head>
<style>
body {
background-image: linear-gradient(to bottom right, green, orange);
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:780px;
}
</style>
</head>
<body>
<center>
<h1>Simple Background Gradient for Website</h1>
<p>This linear gradient starts at top left. It starts green, transitioning to orange:</p>
<h1>Simple Background Gradient for Website</h1>
<h2>www.sanwebcorner.com</h2>
</center>
</body>
</html>

Underline Animation Effect on hover the text using simple css

Using css we can animated several things, This is one of the different and interesting thinking to animated text underline bar with gradient with animation effect. Now will see how to create underline animation effect on hover the underline text using css.

In this underline animation the underline bar background gradient moves the left to right with different gradient background colors. You can change the gradient background colors by changing the background color codes in the below example code

background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 

This types of effects is really different thinking. Here is the full code for how to do the underline animation effect on hover the text using the simple css, You can download the full code here to use this underline animation. And also having the demo links to display the result of this example. I hope this example really helpful.

Html code for Underline Animation Effect on hover the text :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Underline Animation Effect on hover the text using simple css</title>
<link rel="stylesheet" href="css/style.css">  
</head>
<body>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect<br/></a>
</div>
<br/> <br/>
<div class="page-example">
<a href="http://www.sanwebcorner.com" target="_blank">Underline Gradient Animation Effect on hover<br/></a>
<br/><br/>
</div>

<div class="page-example">
<h2><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
<br/><br/>
</div>
</body>
</html>

Css Code for Underline Animation Effect on hover the text :

html{

line-height: 1.15;
}

a {
color: transparent;
display: inline-block;
overflow: hidden;
position: relative;
text-decoration: none;
text-shadow: 0 0 #141414, 0.08em 0 0 #fff, 0 0, -0.08em 0 0 #fff;
vertical-align: bottom;
}
a:after {
background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 5px no-repeat;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 400%;
will-change: transform;
z-index: -1;
}
a:hover:after {
-webkit-animation: underline-gradient 6s linear infinite;
animation: underline-gradient 6s linear infinite;
background-image: linear-gradient(90deg, rgba(122, 95, 255, 0.8) 15%, rgba(1, 255, 137, 0.6) 35%, rgba(122, 95, 255, 0.8) 85%);
}

@-webkit-keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}

@keyframes underline-gradient {
0% {
-webkit-transform: translate3d(0%, 0%, 0);
transform: translate3d(0%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-75%, 0%, 0);
transform: translate3d(-75%, 0%, 0);
}
}
/* page layout */
html,
body {
height: 90%;
}


.page-example {
font-size: 3vw;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}

How to Create 3d text effect using simple css code

Today I will tell you how to create 3d text using simple css3 code. The 3D Text is used to highlight the text of the heading in the web pages. This is very easy to create the following code is used to create this types of 3D Text.

.a3d_text {
font-size: 75px;
text-transform: uppercase;
color: #673AB7;
text-shadow:
-6px 6px 10px rgba(103, 58, 183, 0.33),
1px -1px 0px rgba(235, 235, 235, 0.75),
2px -2px 0px rgba(215, 215, 215, 0.75),
-1px 1px 0px rgba(160, 160, 160, 0.75),
-2px 2px 0px rgba(190, 190, 190, 0.75),
-3px 3px 0px rgba(200, 200, 200, 1),
-4px 4px 0px rgba(186, 186, 186, 1),
-5px 5px 0px rgba(172, 172, 172, 1),
-6px 6px 0px rgba(158, 158, 158, 1),
-7px 7px 0px rgba(144, 144, 144, 1),
-8px 8px 0px rgba(130, 130, 130, 1),
-7px 7px 15px rgba(0, 0, 0, 0.2),
-7px 7px 18px rgba(0, 0, 0, 0.2),
-7px 7px 20px rgba(0, 0, 0, 0.1),
-6px 8px 20px rgba(0, 0, 0, 1);
}

You can change the 3D text color by changing the color code of color: #673AB7;  This types of 3D texts looks very nice.The text-shadow is the css property is used to give the shadows to the text in 3D effects.Multiple shadows in different positions will give the perfect 3D effects to the text.

In this example i given the css code for 3D text just use this your sites and also check the demo link for live check the result of the example. I hope this will be useful. 





How to Create 3d text effect using simple css code

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D Text Effect</title>
<style>
body {
background-color: #eee;
font-family: sans-serif;
text-align: center;
}
.a3d_text {
font-size: 75px;
text-transform: uppercase;
color: #673AB7;
text-shadow:
-6px 6px 10px rgba(103, 58, 183, 0.33),
1px -1px 0px rgba(235, 235, 235, 0.75),
2px -2px 0px rgba(215, 215, 215, 0.75),
-1px 1px 0px rgba(160, 160, 160, 0.75),
-2px 2px 0px rgba(190, 190, 190, 0.75),
-3px 3px 0px rgba(200, 200, 200, 1),
-4px 4px 0px rgba(186, 186, 186, 1),
-5px 5px 0px rgba(172, 172, 172, 1),
-6px 6px 0px rgba(158, 158, 158, 1),
-7px 7px 0px rgba(144, 144, 144, 1),
-8px 8px 0px rgba(130, 130, 130, 1),
-7px 7px 15px rgba(0, 0, 0, 0.2),
-7px 7px 18px rgba(0, 0, 0, 0.2),
-7px 7px 20px rgba(0, 0, 0, 0.1),
-6px 8px 20px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<h1 class="a3d_text">San Web Corner</h1>
<h3><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a>
</body>
</html> 

Transparent button on Mouse hover effect using css

Transparent button on mouse hover effect is one the simple effect , it is very easy to create using simple css and html code. This types of transparent buttons are commonly used in the websites. It is simply looking nice and attractive.

In this example the transparent button visible when hover the button. First it shows the full background color when you mouse hover it shows only border for the buttons.You can also create this types of button inversion means transparent button on mouse hover it fills the color, you can done this using simple css code.

The below code is used to create the transparent button.

button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;

}

Here is the example with the download button, you can download the full code for transparent button just by clicking the download button, you can use it for your websites. And also i provided the Live demo link, you can click and view the demo page.you can able to know how the buttons are working. I hope this simple concept help you lot.


Code for Transparent button on Mouse hover effect using css

<html>
<head>
<title>Transparent button on Mouse hover effect using css</title>
<style>
button.green-button{
padding: 7px 20px !important;
border-radius: 2px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 2px solid #1ec279;
transition: 0.6s;
}

button.green-button a {
text-decoration: none;
color: #fff;
}

button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;

}
button.green-button:hover a{
color: #1ec279;
}
</style>

</head>
<body>
<div class="footer-text-cta">
<p>Do you want offer<button class="green-button"><a href="#" class="manual-optin-trigger">Check Offer</a></button></p>

<p>Do you want offer<button class="green-button"><a href="#" class="manual-optin-trigger">Check Offer</a></button></p>

<h1 style="text-align:center;"><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h1>

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

customize Upload Button using Pure Css

customize the upload button is one of the important thing, when you use the upload button on your forms. Because the default upload button is not looking good and user friendly but when you can customize the upload button user can easily know the upload button and it is perfectly highlighted.

You can use the <div> before the button and then you just call this class "upload-btn-wrapper" to this div, this class contain some customized css codes, the code is
.upload-btn-wrapper {
position: relative;
overflow: hidden;
display: inline-block;
}

and you can customize the input field and buttons using the below simple css code, the customized upload buttons will work as a normal upload button but lookwise it will different. Most of the cases will customize the upload buttons in different types of ways. you can also implement drag and drop file customization using jquery.

In this example the upload input field has been customised through the simple css code. Here is the full code you can download and use it to your website/applications. And also i will provided the live demo link you can visit the link, will see the customized upload button. I hope this is very useful, will see another web concept.


Full Code for customize Upload Button:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>customize File Upload Button With Pure CSS</title>
<style>
body{
margin:15em 37em;

}

.upload-btn-wrapper {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.btn {
border: 1px solid #9B6A20;
    color: #FFFFFF;
    padding: 10px 49px;
    border-radius: 5px;
    font-size: 20px;
    background-color: #EE8E00;
}

.upload-btn-wrapper input[type=file] {
  font-size: 100px;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>
</head>
<body>
<div class="upload-btn-wrapper">
<button class="btn"><img src="customized-upload-icon.png" style="width:25px; margin-right:15px; vertical-align: middle;"/>Upload File</button>
<input type="file" name="myfile" />
</div>
</body>
</html>

Simple Activate / De-Activate switch using Simple Css

In this section i want to explain about how to create simple activate deactivate switch using the simple css3. Here we design the buttons with the help of css3. The button design css code is below

.switch {
position: relative;
display: inline-block;
width: 75px;
height: 34px;
}

This code is used to design the button you can change here height and width of the switch / button. Inside the button we have one slider circle the following code is used to create that white circle inside the button.

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}


Normal position of the switch is in red. When you clicked it turns in to green that means active status when you clicked again it turns in red that means de-active status. that will be done below css code.

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

This is very useful you can use this activate and deactivate button in several web applications. It is very simple and nice and also you can create this using simple css3 code. Here is the full code available. you can download the code and use it your projects. And also provided demo page, please checkout the demo page then you can know how the buttons are working...

Code for Activate De-Activate Switch :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Simple Activate / De-Activate switch using Simple Css </title>
<style>
.switch {
position: relative;
display: inline-block;
width: 75px;
height: 34px;
}

.switch input {display:none;}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: green;
}

input:focus + .slider {
box-shadow: 0 0 1px green;
}

input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Toggle Switch using simple css</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<label class="switch">
<input type="checkbox" >
<span class="slider round"></span>
</label>
</body>
</html> 

Attractive Css3 On Hover Animation Buttons

In this tutorial i explain about how to create attractive css3 on hover animation buttons. This is very simple on hover effect done by using the css3 animation. Here i provided two types of button animation on hover. the first one is when hover the small pieces joined together and filled with the background color. Then the next button hover effect is blinding effect. This animation effect contains number of  thin lines combining together and filled the background color in buttons. The two different class we called in the button, one class is btn-1, btn-2

This buttons animation is really attractive for the clients or users. You can use the buttons to your website to attractive your users. It is very useful and easy one. here we have full code you can download and use this code to your projects. And here also have the demo link to check out the animation buttons, then you can get to know how the animation buttons are working. I hope this example is really helpful to you. 



Full Html, Css3 Code for Animation Buttons:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Attractive Css3 On Hover Animation Buttons</title>
<style>
body {
background: #efefef;
letter-spacing: 0.125em;
text-align: center;
text-transform: uppercase;
}

.btn {
background: none;
border: 2px solid;
border-bottom-width: 4px;
font: inherit;
letter-spacing: inherit;
margin: 1em;
padding: 1em 2em;
text-transform: inherit;
width: 30%;
transition: color 1s;
}

.btn-1 {
color: #F59200;
}
.btn-1:hover {
-webkit-animation: halftone 1s forwards;
animation: halftone 1s forwards;
background: radial-gradient(circle, #FDAA2F 0.2em, transparent 0.25em) 0 0/1.25em 1.25em, radial-gradient(circle, #FDAA2F 0.2em, transparent 0.25em) 6.25em 6.25em/1.25em 1.25em;
color: #6D4407;
}

@-webkit-keyframes halftone {
100% {
background-size: 2.375em 2.375em, 0.1em 0.1em;
}
}

@keyframes halftone {
100% {
background-size: 2.375em 2.375em, 0.1em 0.1em;
}
}


.btn-2 {
color: #E91E63;
}
.btn-2:hover {
-webkit-animation: blinds 0.75s linear forwards;
animation: blinds 0.75s linear forwards;
background: linear-gradient(0deg, #E91E63 25%, transparent 25%) 0 0/0.5em 0.5em, linear-gradient(0deg, #E91E63 50%, transparent 50%) 0 0/1em 1em;
color: #5F0F2A;
}

@-webkit-keyframes blinds {
100% {
background-position: 0 0, 0 -3em;
background-size: 0 0, 1em 6em;
}
}

@keyframes blinds {
100% {
background-position: 0 0, 0 -3em;
background-size: 0 0, 1em 6em;
}
}

</style>
</head>
<body>
<h1>Hover</h1>
<p>
<button class="btn btn-1">Hover me</button>
</p>
<p>
<button class="btn btn-2">Hover me</button>
</p>
</body>
</html>

Hide and show vertical menu on mouse hover using simple css

This is one of the vertical menu to show hide the menu text on hover the particular icon in the vertical menu. This is very simple to create with the help of pure css code. When you hover the icon it shows the menu bar. When you leave the icon it hides the menu and show only icon. Most of the website, web application projects developers using this types of menus. Now will show how to create this menu with the help of simple css code. 

First we will write html code to display icons and menus. So the below code is used to display the menus and icons. 


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>

In the nav-text span is the orginal navigation text. This text only we should hide and display on the mouse hover. So that we need some css code for this. On hover the menus are expanding using this below css code . The css code says the extend the width on hover the menu icon. the below code specified the width of the menu is 250px. Before that it was 60px, So the menu expands when on hover the icon. The expands have some css animation, So some transition applied for this. 

.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;


}





Here i provided the full code to develop this types of hide and show vertical menu. This example have the demo link. Please check out the demo links to shows the result of the menu. You can download the menu by clicking the download button. I hope this menu is very useful.


Html code for Hide/show vertical menu using simple css:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Hide and show vertical menu on mouse hover</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<html>
<head>
</head>
<body><div class="area"></div><nav class="main-menu">
<ul>
<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-home fa-2x"></i>
<span class="nav-text">
Dashboard
</span>
</a>
</li>


<li class="has-subnav">
<a href="http://www.sanwebcorner.com">
<i class="fa fa-laptop fa-2x"></i>
<span class="nav-text">
Stars Components
</span>
</a>
</li>


<li class="has-subnav">
<a href="http://www.sanwebcorner.com">
<i class="fa fa-list fa-2x"></i>
<span class="nav-text">
Forms
</span>
</a>
</li>


<li class="has-subnav">
<a href="http://www.sanwebcorner.com">
<i class="fa fa-folder-open fa-2x"></i>
<span class="nav-text">
Pages
</span>
</a>
</li>


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-bar-chart-o fa-2x"></i>
<span class="nav-text">
Graphs and Statistics
</span>
</a>
</li>


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-font fa-2x"></i>
<span class="nav-text">
Quotes
</span>
</a>
</li>


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-table fa-2x"></i>
<span class="nav-text">
Tables
</span>
</a>
</li>


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-map-marker fa-2x"></i>
<span class="nav-text">
Maps
</span>
</a>
</li>


<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-info fa-2x"></i>
<span class="nav-text">
Documentation
</span>
</a>
</li>
</ul>

<ul class="logout">
<li>
<a href="http://www.sanwebcorner.com">
<i class="fa fa-power-off fa-2x"></i>
<span class="nav-text">
Logout
</span>
</a>
</li>
</ul>
</nav>

<h2 style="margin-left:40%;"><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h2>
</body>
</html>
</body>
</html>


Css Code for show / Hide menu:

.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:#FF8100;
border-right:1px solid #FF5E00;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#fff;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#FF9800;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

Awesome Moving Sliders for website using Simple Css and Jquery

Today i shared a script of Nice Moving slide script for website using the simple css and Jquery. Every website attract the customers by website sliders. Sliders are very important for every website. This type of awesome moving sliders really attracting the users. This effect is slider is moving from right to left slowly like video animation and it is disappear suddenly and the second slider moving right to left like that the sliders continue their works. 

This awesome moving sliders images is specified in css file. This nice slider is full width and full height slider you can modify the height and width of the sliders to change the css code. the moving functions defined using css code using css keyframe.  This is one of the responsive slider. Moving slider will display all of the screens in perfect manner.

This is very interesting script, I will provided the full source code in download page you can download and use this script in your projects. It is also done by using the Jquery , css, javascript. You can change this code according to your design(website). Here i provided the demo link, In the demo link you can view the live moving slide effect. I hope this example is very helpful. 



Html code for Awesome Moving Slider:

<section id="ph-background" class="ph-background">
<div class="slides-box">
<ul class="slides">
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
<li style="background: url('') center no-repeat"></li>
</ul>
</div>
</section>


Css for Moving Animation:


ul li {
  list-style-type: none;
}

.slides-box {
  width: 100%;
  height: 100%;
  margin: auto;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  top: 0;
}

.slides {
  position: relative;
  height: 100%;
  width: 100%;
  margin: auto;
  float: left;
}

@-webkit-keyframes MOVE-BG {

    from { left: 0; }
    to { left: -200px; }
}
@keyframes MOVE-BG {
    from { left: 0; }
    to { left: -200px; }
}

.bg{
  width: 900px;
  animation-name: MOVE-BG;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  -webkit-animation-name: MOVE-BG;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
}

.slides li {
  display: none;
  position: absolute;
  /*width: 100%;*/
  height: 100%;
}

.slides li img {
  display: block;
  width: 100%;
  margin: auto;
}

.prev,
.next {
  position: absolute;
  z-index: 99;
  top: 50%;
  margin-top: -40px;
  left: 0;
  height: 70px;
  width: 30px;
  color: #fff;
  cursor: pointer;
  background-color: #000;
  opacity: .5;
}

.prev:hover,
.next:hover {
  opacity: .7;
}



@media(max-width: 767px){
  
  @-webkit-keyframes MOVE-BG {
      from { left: 0; }
      to { left: -300px; }
  }
  @keyframes MOVE-BG {
      from { left: 0; }
      to { left: -300px; }
  }
  .bg{
    width: 1218px;
  }
  .slides :first-child {
    background:  url('../Banners/Banner1_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(2) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
  }
  .slides :last-child {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
  }
}

@media(min-width: 768px){
  @-webkit-keyframes MOVE-BG {
      from { left: 0; }
      to { left: -300px; }
  }
  @keyframes MOVE-BG {
      from { left: 0; }
      to { left: -300px; }
  }
  .bg{
    width: 1218px;
  }
  .slides :first-child {
    background:  url('../Banners/Banner1_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(2) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
  }
  .slides :last-child {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
  }
}
@media(min-width: 992px){
  .bg{
    width:1662px;
  }
  .slides :first-child {
    background:  url('../Banners/Banner1.jpg') center no-repeat !important;
  }
  .slides :nth-child(2) {
    background:  linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2.jpg') center no-repeat !important;
  }
  .slides :nth-child(3) {
    background:  linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3.jpg') center no-repeat !important;
  }
  .slides :last-child {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4.jpg') center no-repeat !important;
  }
}
@media(min-width: 1400px){
  .bg{
    width: 2218px;
  }
  .slides :first-child {
    background: url('../Banners/Banner1_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(2) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner2_big.jpg') center no-repeat !important;
  }
  .slides :nth-child(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner3_big.jpg') center no-repeat !important;
  }
  .slides :last-child {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.2)), url('../Banners/Banner4_big.jpg') center no-repeat !important;
  }
}




Simple Expanding Menu with Jquery and Css

This Expanding Menu with Jquery and Css is very simple and nice concept. Now we will see how to create this Expanding Menu. This is also called as a accordion. This is one of the best and simple. Some of the expanding menu not having the collapse when click the same menu again. Here when you click the menu title it expanding the Sub Menus and will display the Sub Menus. When you click the same menu again it collapse the menu that means it hides the menu. This all are done by using the simple css code and javascript.

Here i can set the standard size (width) to the menus you can set it in percentages or you can use bootstrap or css media query with Jquery to made this expanding menu responsive. You can easily customize this simple code. you can change the color combination according to your choice. Here i can use the font icon you may keep or remove according to your website standard. 

Here i given the demo link and downloaded link, You can download and use this code for your websites or applications. Checkout this example demo page then you can know it is working. I hope this code is really helpful.




Html Code for Expanding Menu:

<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Expanding Menu1</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>  
<li><a href="#">Sub menu2</a> </li>  
<li><a href="#">Sub menu3</a> </li>  
<li><a href="#">Sub menu4</a> </li>  
</ul>  
</li>

<li>
<h3><span class="icon-user"></span>Simple Expanding2</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>  
<li><a href="#">Sub menu2</a> </li>  
<li><a href="#">Sub menu3</a> </li>  
<li><a href="#">Sub menu4</a> </li>  
</ul>  
</li>
<li>
<h3><span class="icon-calendar"></span>Calendar</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>  
<li><a href="#">Sub menu2</a> </li>  
<li><a href="#">Sub menu3</a> </li>  
<li><a href="#">Sub menu4</a> </li>   
</ul>  
</li>
<li>
<h3><span class="icon-heart"></span>Favorites</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>  
<li><a href="#">Sub menu2</a> </li>  
<li><a href="#">Sub menu3</a> </li>  
<li><a href="#">Sub menu4</a> </li>   
</ul>  
</li>    
<!-- will add more later -->
</ul>
</div>
<br/> <br/>
<center><h4><a style="color:#000;" href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h4></center>



Css Code for Expanding Menu:

@import url(http://fonts.googleapis.com/css?family=Nunito);
* {margin:0; padding:0;}
body { background:gray; font-family:Nunito;}
#accordian {background:#004050; 
width: 450px; margin: 100px auto 0 auto;
color:white; box-shadow: 0 5px 15px 1px rgba(0,0,0,.6), 0 0 200px 10px rgba(255,255,255,.5);}

#accordian h3 {
  font-size:12px;
  line-height:34px;
  padding: 10px 10px;
  cursor:pointer;
  background:linear-gradient(#003040, #002535);
  
}

#accordian li {
  list-style:none;
  
}

#accordian ul ul li a {
  color:snow;
  text-decoration:none;
  font-size:11px;
  line-height:27px;
  display:block;
  padding:10px 15px;
  transition: all .15s;
}

#accordian ul li li a:hover {
  background: #003545;
  border-left:5px solid lightgreen;
  
}

#accordian ul ul {display:none;}


#accordian h3 span {
  font-size: 16px;
  margin-right:10px;
}

Javascript for Expanding Menu:

  <script>
$(function(){
  $("#accordian h3").click(function(){
  $("#accordian ul ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }
  });
});
</script>



Expanding Menu Full Code:

<html>
<head>
<title>Simple Expanding Menu with Jquery and Css</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  <script>$(function(){

  $("#accordian h3").click(function(){
  $("#accordian ul ul").slideUp();
    if ($(this).next().is(":hidden")){
    $(this).next().slideDown();
    }


  });


});</script>
</head>
<body>
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>
<li><a href="#">Sub menu2</a> </li>
<li><a href="#">Sub menu3</a> </li>
<li><a href="#">Sub menu4</a> </li>
</ul>
</li>


<li>
<h3><span class="icon-user"></span>Add Member</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>
<li><a href="#">Sub menu2</a> </li>
<li><a href="#">Sub menu3</a> </li>
<li><a href="#">Sub menu4</a> </li>
</ul>
</li>
<li>
<h3><span class="icon-calendar"></span>Calendar</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>
<li><a href="#">Sub menu2</a> </li>
<li><a href="#">Sub menu3</a> </li>
<li><a href="#">Sub menu4</a> </li>
</ul>
</li>
<li>
<h3><span class="icon-heart"></span>Favorites</h3>
<ul>
<li><a href="#">Sub menu1</a> </li>
<li><a href="#">Sub menu2</a> </li>
<li><a href="#">Sub menu3</a> </li>
<li><a href="#">Sub menu4</a> </li>
</ul>
</li>  
<!-- will add more later -->
</ul>
</div>
<br/> <br/>
<center><h4><a style="color:#000;" href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h4></center>
</body>
</html>