CSS3 Archives - Developer Desks

CSS September 29, 2016

20 Classic Sidebar Menu Layout Design with Examples

There is many sidebar menu layout designs there. but the more classic designs attract the clients and customers. The sidebar menu was most common back in the early days of web design, but these days we’re starting to see designers ditch the horizontal navigation bar in favour of the vertical list once again. The sidebar menu seems to be coming back into fashion once again after it was left behind for horizontal navigation bars.Today’s web design showcase features 20 sites that all feature modern examples of the classic sidebar menu layout.

Keep Reading

CSS September 28, 2016

Creating a Side Menu Floating Using CSS only

For this tutorials, We are try to create a Left Side Menu Floating Using CSS only. It means we are going to fixed the side menu while scroll the page. For the long page with contains many paragraph, readers difficult to drag up and click the next articles . so wen need to scrool the side menu it is the easy way to client for select next articles. That why we are going to do this articles.

So here we go Creating a Side Menu Floating Using CSS only

Demo |

Download

Step 1 – HTML

  <div id="page-wrap">
	
	
		<div id="main">

		  <p>Scroll down and watch the sidebar on the right follow.</p>
		
		  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>		
		  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
		
		</div>
		
		<div id="sidebar">
				
		  	<ul>
			    <li><a href="https://www.developerdesks.com/multi-select-filter-option-for-mysql-data-using-ajax/1192">Multi select filter</a></li>
			    <li><a href="https://www.developerdesks.com/file-upload-with-progress-bar-using-ajax/1647">File upload using ajax</a></li>
			    <li><a href="https://www.developerdesks.com/simple-image-overlay-title-hover-effects/1820">Image Overlay Effects css3</a></li>
			    <li><a href="https://www.developerdesks.com/30-page-preload-image-style-css/1830">30 Page Preloading</a></li>
			    <li><a href="https://www.developerdesks.com/how-to-speed-up-your-website-in-easy-way/1838">Speed Up Your Website</a></li>
			</ul>
		
		</div>
	
	</div>

Step 2 – CSS

* { margin: 0; padding: 0; }
 body { font: 14px/1.4 Georgia, serif; }
 #page-wrap { width: 600px; margin: 15px auto; position: relative; }
 p { margin: 0 0 15px 0; }
 p:first-child { background: #fffcde; padding: 10px; }
 #sidebar ul { background: #eee; padding: 10px; }
 li { margin: 0 0 0 20px; }
 #main { width: 390px; float: left; }
 #sidebar { width: 190px; position: fixed; left: 50%; top: 90px; margin: 0 0 0 110px; }

using the css “position fixed & top”, you can make scroll the left side menu.

This is simple code and enjoy it.

Keep Reading

Php tutorials June 27, 2016

How to Create Basic Slider Using only Css

There is a lot of slider over-here. We can make slider using jquery, Css, JavaScript and also using WordPress plugin. If we create slider using jquery and JavaScript we have to include library functions and also script. It may casue our website slow the loading speed. So we can a make slider using css in easy way. Its is reduce website weight.

Demo

So here we are going to learn how to create basic slider using only css

Step 1 – HTML

<div id="images">
  <img id="image1" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image2" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image3" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
  <img id="image4" src="https://www.developerdesks.com/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg" />
</div>
<div id="slider">
  <a href="#image1">1</a>
  <a href="#image2">2</a>
  <a href="#image3">3</a>
  <a href="#image4">4</a>
</div>

Step 2 – CSS

body {
  text-align: center;
}

#images {
  width: 400px;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}

#images img {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 0;
  left: -400px;
  z-index: 1;
  opacity: 0;
  transition: all linear 500ms;
  -o-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -webkit-transition: all linear 500ms;
}

#images img:target {
  left: 0;
  z-index: 9;
  opacity: 1;
}

#images img:first-child {
  left: 0;
  opacity: 1;
}

#slider a {
  text-decoration: none;
  background: #E3F1FA;
  border: 1px solid #C6E4F2;
  padding: 4px 6px;
  color: #222;
}

#slider a:hover {
  background: #C6E4F2;
}

This is code. have a fun

Keep Reading

CSS June 24, 2016

30 Page Preloading Image Style in Css

In every website we have seen an image preloader in their websites. There is a lot of images we can make as a page preloaded image. Here we are going to make 30 preloaded images using css. It’s very simple to make preloader in our website. We used jQuery for hiding the loading images in this website. You can hide loading image when click the website.

The animations are very easy to customize since they made out of just CSS, you will have to change jQuery code so that it fades out the loading screen once the content loads. I will explain to you how the first example works.

Demo |

Download

Step 1: HTML

<div id="loading">
<div id="loading-center">
<div id="loading-center-absolute">
<div class="object" id="object_one"></div>
<div class="object" id="object_two"></div>
<div class="object" id="object_three"></div>
<div class="object" id="object_four"></div>
<div class="object" id="object_five"></div>
<div class="object" id="object_six"></div>
<div class="object" id="object_seven"></div>
<div class="object" id="object_eight"></div>

</div>
</div>
 
</div>

This is the loading functionality

<div id="wrapper">
<div id="wrapper-center">
<h1>welcome to home page </h1>
</div>
</div>

and you can add inner pages with your own content

Step 2: CSS
we have to create a fixed div element that can float above and center spot that always will remain centered.

#loading{
	background-color: #f0c600;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 0px;
}
#loading-center{
	width: 100%;
	height: 100%;
	position: relative;
	}
#loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150px;
	width: 150px;
	margin-top: -75px;
	margin-left: -75px;
    -moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;

}
.object{
	width: 20px;
	height: 20px;
	background-color: #FFF;
	position: absolute;
	-moz-border-radius: 50% 50% 50% 50%;
	-webkit-border-radius: 50% 50% 50% 50%;
	border-radius: 50% 50% 50% 50%;
	-webkit-animation: animate 0.8s infinite;
	animation: animate 0.8s infinite;
	}


#object_one {
	top: 19px;
	left: 19px;	

	}
#object_two {
	top: 0px;
	left: 65px; 
	-webkit-animation-delay: 0.1s; 
    animation-delay: 0.1s;

	}
#object_three {
	top: 19px;
	left: 111px; 	
	-webkit-animation-delay: 0.2s; 
    animation-delay: 0.2s; 

	}
#object_four {
	top: 65px;
	left: 130px; 
	-webkit-animation-delay: 0.3s; 
    animation-delay: 0.3s; 
}
#object_five {
	top: 111px;
	left: 111px; 
	-webkit-animation-delay: 0.4s; 
    animation-delay: 0.4s; 
}
#object_six {
	top: 130px;
	left: 65px;
	-webkit-animation-delay: 0.5s; 
    animation-delay: 0.5s; 
}
#object_seven {
	top: 111px;
	left: 19px;
	-webkit-animation-delay: 0.6s; 
    animation-delay: 0.6s; 
}
#object_eight {
	top: 65px;
	left: 0px;
	 -webkit-animation-delay: 0.7s; 
    animation-delay: 0.7s; 
}




@-webkit-keyframes animate {
 
  25% {
	-ms-transform: scale(1.5); 
   	-webkit-transform: scale(1.5);   
    transform: scale(1.5);  
	  }


  75% {
	-ms-transform: scale(0); 
   	-webkit-transform: scale(0);  
    transform: scale(0);  
	  }


}

@keyframes animate {
  50% {
	-ms-transform: scale(1.5,1.5); 
   	-webkit-transform: scale(1.5,1.5); 
    transform: scale(1.5,1.5); 
	  }
 
  100% {
	-ms-transform: scale(1,1); 
   	-webkit-transform: scale(1,1); 
    transform: scale(1,1); 
	  }
  
}

You will notice that i used keyframe twice ‘@-webkit-keyframes’ and ‘@keyframes animate’ first is for webkit based browsers second one is for internet explorer.
Step 3: Jquery

This is just used for on-click to hide loading images

$(window).load(function() {
	$("#loading-center").click(function() {
	$("#loading").fadeOut(500);
	})		
});

Keep Reading

CSS June 16, 2016

Simple Image Overlay Title Hover Effects in css3

In this tutorial, we are going to create a basic image overlay title hover effects with CSS3. When we will hover the image its need to transition and showing the content or title or icon of the image.

In old days, a small curse over trick make people to click the images and show the description and its tool lot of coding, But nowadays we can make people just hover the images and read the description easy way using css3 transition, we want smooth transition and make it attractive for users. its look more presence for your websites.

Next File Upload With Progress Bar

Demo

Step 1

Create a Html code

<div class="container">
  <h3 class="title">Text fadeIn bottom</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-bottom">
        <h3 class="content-title">This is a title</h3>
        <p class="content-text">This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn top</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-top">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn left</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-left">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn right</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-right">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn top left</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-top fadeIn-left">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn top right</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-top fadeIn-right">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn bottom left</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-bottom fadeIn-left">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

<div class="container">
  <h3 class="title">Text fadeIn bottom right</h3>
  <div class="content">
    <a href="https://unsplash.com/photos/HkTMcmlMOUQ" target="_blank">
      <div class="content-overlay"></div>
      <img class="content-image" src="/wp-content/uploads/2016/06/Simple-Image-Overlay.jpg">
      <div class="content-details fadeIn-bottom fadeIn-right">
        <h3>This is a title</h3>
        <p>This is a short description</p>
      </div>
    </a>
  </div>
</div>

Step 2

Add css3 transition

body{
  font-family: 'Raleway', sans-serif;
}

.main-title{
  color: #1d1d1d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

.container{
  padding: 2em 0;
  float: left;
  width: 50%;
}

.container .title{
  color: #333;
  text-align: center;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}body{
  font-family: 'Raleway', sans-serif;
}

.main-title{
  color: #1d1d1d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

.container{
  padding: 2em 0;
  float: left;
  width: 50%;
}

.container .title{
  color: #333;
  text-align: center;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 1;
}

.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom{
  top: 80%;
}

.fadeIn-top{
  top: 20%;
}

.fadeIn-left{
  left: 20%;
}

.fadeIn-right{
  left: 80%;
}

Keep Reading

CSS3

20 Classic Sidebar Menu Layout Design with Examples

20 Classic Sidebar Menu Layout Design with Examples

Design Council

2Creative

PFD

TriplAgent

Kick Point

Broken Twill

Drawtoclick

Gareth Emery

Sculpt Communications

Georgina Bousia

ZINDHAI

PUSH Collective

The Conference by Media Evolution 2014

Q Ideas

Niche

FLIPP

Hyperakt

Electrik Company

Wallmob

Mammoth Media

Creating a Side Menu Floating Using CSS only

Creating a Side Menu Floating Using CSS only

So here we go Creating a Side Menu Floating Using CSS only

How to Create Basic Slider Using only Css

30 Page Preloading Image Style in Css

30 Page Preloading Image Style in Css

Simple Image Overlay Title Hover Effects in css3

Simple Image Overlay Title Hover Effects in css3

Next File Upload With Progress Bar