Zoom Hover Effect with CSS3 Only

In my opinion design is the thing which really and only matters for a great site. People use to come back where they got attracted to some thing, and design is the thing which can work as a magnet for your visitors. 

In this tutorial I'll describe a cool effect which is based upon CSS3 Transform property. We will use this effect to zoom any HTML element on mouse over. 

Below is the HTML code, so you can better understand the classes used in the CSS3:

<div class="dialog-popup">
    <div class="dialog-container">
        <h1>Hover On The Browser Icons</h1>
        <div class="browser-icon">
         <a href="#" class="chrome-icon"><i>&#160;</i></a>
         <a href="#" class="moz-icon"><i>&#160;</i></a>
         <a href="#" class="opera-icon"><i>&#160;</i></a>
         <a href="#" class="safari-icon"><i>&#160;</i></a>
         <a href="#" class="ie-icon"><i>&#160;</i></a>
     </div>
    </div>
</div>

I hope everyone understand the HTML shown in the above snippet. The <i> tags are used to show the icons in between there. And &#160 is an HTML Entity. It is used to show a space in the output.

CSS for class dialog-popup

.dialog-popup {
  background-color: #333;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: #333;
  font: 12px/20px Lato, "lucida grande", Arial, Tahoma, Verdana, sans-serif;
  z-index: 1;
}

Explanation: The things are rather simpler in the above code. The z-index: 1; specifies the stack order for the particular class.

CSS for class dialog-container

.dialog-container {
  width: 724px;
  padding: 30px 0;
  max-height: 290px;
  min-height: 290px;
  position: relative;
  top: 50%;
  margin: -145px auto 0;
  background-color: #fff;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-box-shadow: 0px 0px 10px #000;
  -webkit-box-shadow: 0px 0px 10px #000;
  box-shadow: 0px 0px 10px #000;
}

Explanation: The above CSS3 will change the div with class dialog-container into a popup. Here in this code, the top property sets the popup's top edge below 50% inside the dialog-popup. The shadow property will create a glowing effect. -webkit- and  -moz- are used with properties for Cross-Browser support.

CSS to create Zooming Effect

.dialog-container .browser-icon {
  margin: 50px 0;
  text-align: center;
}
.dialog-container .browser-icon a {
  padding: 10px;
  display: inline-block;
  border-radius: 2px;
  border: 1px solid #fff;
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.dialog-container .browser-icon a:hover {
  border: 1px solid #D5EAF2;
  border-bottom: 3px solid #A1CBDA;
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}
.dialog-container .browser-icon a:active, .dialog-container .browser-icon a:active:hover {
  background: #D5EAF2;
}

Explanation: In the above CSS3 we are styling the a tags, which we have used in the above HTML markup. Actually, these a tags are the real images that we wanted to zoom on hover. In the second set of CSS properties, there are just a simple couple o things related to general styling of a tags. Transition property is used to create a nice looking transitional effect on hover. So, the styling defined below appears with some effect rather than appearing at once, which don't look so nice to me :P.
Now, the third set of above Code, is the very very important part. In this part we have increased the size of the a tags. But not with that width and height technique. Here we are using CSS Transforms.  In .dialog-container .browser-icon a:hover we have used the  border and border-bottom properties. As, you all probably know, the border is used to create a thin line around the a tags on hover (mouse over). And border-bottom is used to change the bottom border separately. The overall border is set to 1px but the bottom border is set to 3px which will be a thinner than the overall border around the a tags.
Transform property is used to change the size of a tags and its contents. Scale(1.1,1.1) will increase the width and height of a tags, when you will hover over them. The last and final set of CSS is used to change the background color of a tags on click (active). This will also add some cool effect you will see.

CSS to Set the Icons into a tags

.dialog-container .browser-icon a i {
  display: inline-block;
  width: 104px;
  height: 104px;
  background: url(browsericons.png);
}
.dialog-container .browser-icon a.chrome-icon i {
  background-position: 0 0;
}
.dialog-container .browser-icon a.moz-icon i {
  background-position: -104px 0;
}
.dialog-container .browser-icon a.opera-icon i {
  background-position: -208px 0;
}
.dialog-container .browser-icon a.safari-icon i {
  background-position: -312px 0;
}
.dialog-container .browser-icon a.ie-icon i {
  background-position: -416px 0;
}

Explanation: The CSS under .dialog-container .browser-icon a i will set the background, width and height and display for <i> </i> tags inside a tags.
Here it is important to note that, we are not using separate images for each icon tag. But it's a single image (See image Here).
In the below sets, we have set the position of the background for all of a tags used in the HTML markup above.
When we use the background property it will set the image as a background image for a tags. Now, in the below parts of CSS, we are specifying that what part of image we want to see in the particular a tag, with the help of background-position property.
In .dialog-container .browser-icon a.chrome-icon i, background position is set to 0 0. It means, it will be showing the image's first 104 pixels (because the width and height of <i> tags is set to 104px).

Under .dialog-container .browser-icon a.moz-icon i, the background position is set to -104 px. Now, in this <i> tag, the second part of image will be visible. Which will consist of Mozilla Icon.

And so on... 

See the live working demo with all of code in the pen below: 

See the Pen Zoom Hover Effect by Asna Farid (@asna_farid) on CodePen.

Note: This post is inspired by Asna Farid's pen on Codepen. This is why, the original pen is shown above. 

Read more

Simple Drop Down Menu using CSS Only

In this article we will learn how to create a simple drop-down menu using CSS3 only.
I don't think if anybody isn't familiar with a drop-down menu. But if you don't know about drop-down menu, then this is a navigation bar on the top of web pages with some DROP-DOWN effect just like this one:

http://goo.gl/KTlvkM

Now  just look at this HTML code:

<ul id="top-menu">
  <li><a href="#">Languages</a>
    <ul>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">C++</a></li>
    </ul>
  </li>
  <li><a href="#">Browsers</a>
    <ul>
      <li><a href="#">Chrome</a></li>
      <li><a href="#">Opera</a></li>
      <li><a href="#">IE</a></li>
      <li><a href="#">Firefox</a></li>
      <li><a href="#">Safari</a></li>
    </ul>
 </li>
 <li><a href="#">Operation systems</a>
   <ul>
     <li><a href="#">Windows</a></li>
     <li><a href="#">Linux</a></li>
     <li><a href="#">FreeBSD</a></li>
     <li><a href="#">Mac OS</a></li>
   </ul>
 </li>
 <li><a href="#">Others</a></li>
</ul>

This will create simple looking nested lists, looking like this:

These are just multi level lists. Drop-Down menus are created using lists. CSS converts this multi-level lists into a drop down menu.
Let's look at the CSS. This CSS is divided into several groups. Each group has its own functionality.
Look at this code snippet:

#top-menu, li ul {
     list-style: none;
     margin: 0px;
     padding: 0px;
     }

The above CSS code has removed all bullets and aligned them in single line.

Now we need to align the main menu (Language, Browser, Operation Systems and Others) into a single line.

#top-menu li {
     float: left;
     position: relative;
     }
#top-menu li a {
     display: block;
     }

Above CSS code aligned the main menu in the single row on left

To place a sub menu item over the main menu item you must apply position: absolute; property to that sub menu item:

#top-menu li ul {
     position: absolute;
     }

Applying the above CSS will align the sub menu items under the main menu vertically.
Now this is the main part of the drop down menu. Now we have to write the code that will change all these menus in such a ways that, when we hover over some main menu item, the corresponding drop down menu should appear, otherwise it should be hidden under that main menu entry.

#top-menu li ul {
     visibility: hidden;
     }
#top-menu li:hover ul {
     visibility: visible;
     }

The first block of the above code is to hide the sub-menu entries in the normal position. The second part will be executed when we hove over the main menu options. It will show its effect if the main menu entry has some sub-menu underneath. When we hove over that entry, the corresponding sub menu entry will be shown in the drop down. You can apply padding to to make the entries separate to look readable.
Below pen shows the output and the code as well.

See the Pen simple CSS drop-down menu by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

Read more

Create a flashing/glowing button using CSS3 only

In this tutorial we will learn how can we create a cool and good looking glowing/flashing button on our web pages, that can highlight, which matters the most on our web page.
The glowing/flashing effect can be applied to both, links and the form buttons.

To create this effect we will be using CSS3 animations. If you don't know how to create CSS3 animations, please refer to our previous article "CSS3 ANIMATIONS - @KEYFRAMES RULE".

Animations are too easy to use to create nice looking effects on our web pages using CSS3. It can replace the traditional flash animations.
Let's get back to our work. Here is the simple HTML code which creates a simple LINK and BUTTON :

<a href="#" class="glowingbutton" > Click me! </a>
<button type="submit" class="glowingbutton"> Click me! </button>

Now the below CSS will change the basic properties (color, fonts, width, height, borders etc.) of the above two buttons:

.glowingbutton {
     background-color: #004A7F;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     border: none;
     color: #FFFFFF;
     cursor: pointer;
     display: inline-block;
     font-family: Arial;
     font-size: 20px;
     padding: 5px 10px;
     text-align: center;
     text-decoration: none;
     animation: glowing 1500ms infinite;
     }

The below part of CSS3 is the all, what we need to create the glowing effect.
We will use @keyframe rule to make this animation. There will be three keyframes in our animation. One will be at 0%, second will be on 50% and third on 100%.

At 0% the background color of the button will be dark red and the background shadow will be light red at 3px distance.
At 50% the background color of the button will be light red and the background shadow will also be light red but at 20px distance, so that it create a good glowing effect.
and At 100% the background color and background shadow will be as same as at 0%.

@keyframes glowing {
     0% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
     50% { background-color: #FF0000; box-shadow: 0 0 40px #FF0000; }
     100% { background-color: #B20000; box-shadow: 0 0 3px #B20000; }
     }

In the below code pen the sample output and the code is given. The code in the below pen is also useful for cross browser solution (will give same output in every browser).

See the Pen glowing/flashing button by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

Read more

CSS Image Filters - blur(), grayscale(), drop-shadow() etc...

CSS Image filters are tools that offer developers to create cool varying visual effects on HTML elements like blur and grayscale. These filters are just like filters in the photoshop.
Filters are commonly used to render the effects on images, backgrounds and borders etc.
You can use any of the below mentioned:

• blur()
  
• brightness()
  
• contrast()
  
• url()
  
• drop-shadow()
  
• grayscale()
  
• hue-rotate()
  
• invert()
  
• opacity()
  
• sepia()

The syntax:

element {
     filter: filter-function(value) | none;
     }

Multiple filters can be applied using space between each function.

Single Filter being used: 

grayscale() give a black and white effect on any element. Its value can vary from 0% to 100%. 

img {
     filter: grayscale(100%);
     } Output

Multiple filters being used:

You can also use multiple filter functions in the same line separating them with space between each other. 

img {
     filter: grayscale(60%) blur(2px);
     } Output

Filter Functions

To use filter functions, each functions is applied with some value. Some take values in %age and some in decimals. There are a also some functions which take values in pixels.

Below we will use all of the filter functions to this image:

1. grayscale()

filter: grayscale( %age );

This filter is provided with %age. The value 100% indicates the full grayscale effect. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen grayscale() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

2. sepia()

filter: sepia( %age );

This filter converts this image to sepia. The value provided to this filter is in %age. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed. 

See the Pen sepia() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

3. saturate()

filter: saturate( %age );

This filter saturates the input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen saturate() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

This filter doesn't show too much effect like others, but you can also use this one if  needed.

4. hue-rotate()

filter: hue-rotate( angle );

This filter applies hue rotation to the input image. The values is provided with some angle. Angle can be anything from 0deg to 350deg.

See the Pen hue-rotate() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

5. invert()

filter: invert( %age );

Inverts the samples in input image. %age value is provided to this filter. 0% will leave the element unchanged. You can provide it with any value between 0% to 100%. -ve values are not allowed.

See the Pen invert() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

6. opacity()

filter: opacity( %age );

Opacity function applies transparency to the samples in input image. This is the function for more developed property opacity. Its value is provided in %ages. 0% is full transparent and 100% will leave the content unchanged.

See the Pen opacity() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

7. brightness()

filter: brightness(100%);

This filter increases/decreases the brightness of content in image. The value is provided with %age. 0% will create full darkness. 100% is the original image's brightness. If no value is provided then 100% is used as default. The values more than 100% are allowed providing the brighter results. 

See the Pen brightness() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

8. contrast()

filter: contrast(%age);

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

See the Pen contrast() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

9. blur()

filter: blur(3px);

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

See the Pen blur() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

10. drop-shadow()

filter: drop-shadow(0px 0px 10px rgba(0,0,0,.5));

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image's alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type
This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

See the Pen drop-shadow() by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

Read more

CSS Gray-Scale Image Tint - Change the Color of Image on Hover

 Images are a big part of any site these days. As CSS3 allows us to decorate and stylize our sites to look more attractive and more elegant. So, it also comes with a lot tricks to customize images on our sites. You can create a lot of cool stuff using CSS3. 

The above images is Gray Scaled with CSS3. May be its's not such a good idea to use such old styles on our sites these days. But what if, when we hover over the image, it turns colorful? 

Yeah! It sounds cool. 

Check out here: Example

Now, let's see how to create this.
We can do this effect using CSS Image Filters. Image filters are like Photoshop Filters for browser.

Filters can be applied to any image with a simple line of code:

img {
     filter: grayscale(50%);
     }

To create the effect as it is in above example, there are many ways.
We will be using a simplest trick to do so. Just look at this code snippet:

.tint img {
     display: block;
     transition: all 0.7s linear;
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%);
     -o-filter: grayscale(100%);
     }
.tint img:hover { filter: grayscale(0);
     -webkit-filter: grayscale(0);
     -moz-filter: grayscale(0);
     -o-filter: grayscale(0);
     }

In the above snippet we have a div  named .tint , which contains image that on which we want to apply the style. transition: all 0.7s linear;   will create some cool transitional effect on hover, so it don't change its color at once.
The strategy we are using in creating this effect is very simple. When the image is loads its already gray-scaled to 100% (filter: grayscale(100%);).
And as we can see in the .tint img:hover , the grayscale  is turned to 0% , so that it comes into its original condition (full colored).

Have a look at this codepen:

See the Pen Simple but nice looking Image Tint by Muhammad Arslan Aslam (@jacksparrow43) on CodePen.

Read more

CSS3 Animations - @keyframes Rule

CSS3 animations can replace the old fashioned flash animations. You can lessen the bandwidth usage by replacing the flash animations with CSS3 animations.
This is a simple example of CSS3 animation, a div element changing its background from red to yellow:

Read more

CSS3 3D Transforms: rotateX() , rotateY()

CSS3 transforms extends CSS transforms to allow elements rendered by CSS to be transformed in three-dimensional space. 

In this chapter we will learn about some of 3D transforms methods:

• rotateX()
• rotateY()

 The rotateX() method:

rotateX(angle) method, rotates any element around its X-axis at a given degree(angle).

Look at the example below: 

div {
        -webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
        transform: rotateX(120deg);
        } Output

The rotateY() method: 

In rotateY() method, you can rotate any HTML element around its Y-axis at a given degree. 

div {
        -webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
        transform: rotateY(130deg);
        } Output

---

CSS3 transforms properties: 

Property	Description
transforms	Applies a 2D or 3D transformation to an element.
transform-origin	Allows you to change the position on transformed elements
transform-style	Specifies how nested elements are rendered in 3D space
perspective	Specifies the perspective on how 3D elements are viewed
perspective-origin	Specifies the bottom position of 3D elements
backface-visibility	Defines whether or not an element should be visible when not facing the screen
Source: W3Schools

Read more