Archive

June 2016

Browsing

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.

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

How To Speed Up Your Website in Easy Way

How To Speed Up Your Website in Easy Way

Recent times everybody have a website or own blog and they knows speed of the website matters a lot in the today’s world. Speed is a main quality to maintain the services and standards.  Every client want to load their page quickly and nobody wants to wait too much time for loading, this is the first and best impression for the website over the client. so it is important to ensure you that in no way the visitors will leave your sight with any reason.  In this post, I am going to show you how effectively you can improve your WordPress site loading speed and also with this you can improve the performance.

Select a Good Hosting provider

Your choice of web hosting provider mainly affects your webpage speed. A good web host is the establishment where your site runs, it’s the first angle be tended to when taking a shot at improving webpage speed (regardless of the fact that not a WordPress powered website).

There are number of hosting companies out there, it is a highly competitive market and there is worth in shopping around. So take a short survey before choosing the host or you can also take the helps from the web experts. If not you can simply check out the reviews before selecting the host for your website.

Using a CDN

A Content Delivery Network or Content Distribution Network (CDN) is a system of distributed servers that deliver the web pages and other web resources to the user those based on his or her geographical location.

A CDN usually copies all the static files such as CSS, JavaScript, and media files etc. in use on your website and delivers them to users as fast as possible.

Caching

Caching is the temporary storage of content such as pages, images and any other files that has used to deliver your page. All this content saved on the visitor’s local drive as a cache, so that whenever they requested again by the same visitors, they delivered much faster. Caching also happens on the server. It is basically a technical area, but there are several popular WordPress plugins that you to configure and manage caching very easily. The best plugins for this purpose are W3 Total Cache and WP Super Cache.

Caching means to the cache memory that you have studied in your school or college time. It is short memory that stores in the every individual system’s memory.

Minify CSS and JavaScript Files

The process of ‘minifying’ your CSS and JavaScript files compresses the original files to the smallest possible sizes, thereby improving the speed at which the browser retrieves the files.

YUI Compressor will come in convenient way if you prefer a manual approach to minifying your site CSS and JavaScript files, or you can go for WP Minify which handles the work with an automated approach. Some caching plugins also offers minimization as a feature of them.

Compressing Images

Aside from the way that large image files contribute extraordinarily to the drowsiness of a WordPress site, they additionally expend transmission capacity as well. Images are a decent contender for improvement.

Using the free WPMU DEV WordPress Smush API, the WP Smush plugin will help you to reduce the size of these images without compromising their quality. I had used this plugin and found it very amazing that how much it reduces the image sizes. Small size of images is very good for increasing the loading speed of your website.

Compressing Site

In basic terms, site compression is similar to transforming your whole site into a ZIP archive. Also, when any of the pages of the site is asked for, a client’s browser acts like WinRAR and unzips the archive and afterward demonstrate the content. Despite the fact that this sounds like an additional work and would back things off, trust me, it doesn’t.

Even though the W3 Total Cache is very popular for the caching, it can also be used in the site compression. You can enable this feature by going to:

Admin page > Performance > Browser Cache > Enable HTTP (gzip) Compression

Optimizing Your Database

WordPress usually auto saves almost everything. This includes the unwanted revisions, track backs, pingbacks, trashed items, unapproved comments, or comments marked as spam, etc.

Just your hard drive become disintegrated, your WordPress database can also suffer from the similar problem. However, you can also use the WP Optimize plugin to optimize your database or WP DB Manager which enables you to optimize your database and as well as schedule dates for the regular database optimization.

Choosing the Right Plugin

Installing a great deal of plugins can include an enormous measure of garbage to your site and site files. There’s no reason for installing or keeping plugins you don’t generally require. Delete the unused plugins or extra plugins from your admin panel.

The best approach is to audit your WordPress Plugins, keeping the ones that are critical to the running of your site and remove the ones that are not. Collecting the plugins more and more is just like collecting the garbage and nothing else. So always try to keep the data or the plugins that you really need or want.

Disabling Trackbacks and Pingbacks

By default, every time another blog mentions you that your site gets be notified. These is called the pingbacks and trackbacks. You can also turn off this feature in WordPress here:

Admin page > settings > discussion and then uncheck the first two checkboxes.

Turning this WordPress feature will not harm your website. So doesn’t worry about this just do it if you want?

Choosing a Good Theme or Theme Framework

While some of the WordPress themes are extremely fast and well coded and on the other hand some are exactly opposite.

When choosing the theme, take a note of the load speed of the theme’s demo page, this will give you an idea of the impact that the theme would be adding to your site load speed.

Optimizing the Structure of Your Homepage

Indicating post portions and minimising the quantity of widgets and posts in a page is an excellent approach to keep your homepage optimised.

Not only doing this will help your site loading speed, it also improves your overall user experience. As I told you above you only got one chance for making a first impression. Try to do it best as much as you can.

Enabling Keep Alive

HTTP Keep Alive is the idea of using the single Transmission Control Protocol (TCP) connection to send and receive multiple HTTP requests, instead of opening a new connection for each request.

Your web host might already have these sorts of setting enabled so check with them first, but if you have a typical hosting account then you can simply copy the line of the code below into your .htaccess file to enable keep alive.

“Header set Connection keep-alive”

Conclusion

Using this concretion u make the website and speed and optimised websites. keep website very light and easy use loading. don’t dump the more widgets use some short code for some functionality

30 Page Preloading Image Style in Css

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       |

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);
	})		
});

Simple Image Overlay Title Hover Effects in css3

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

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%;
}