Saturday, September 21, 2013

CSS 3D Ribbons and Stitched Effect

We can create various effect with CSS. We can add new design style to the menu by using ribbons created using CSS. This artciel explains about two effects created using CSS

1. Stitch Effect
2. 3D Ribbon Effect

  Following is the HTML used for creating effects:

<div>
    <div class="stitched">&nbsp;</div>
</div>

There is one class used in above HTML  "stitched".

1. stitch Effect:

  Stitch effect can be created using CSS box-shadow and border style.
   To get the stitched effect keep the border style to dashed and use the box-shadow with x=0 y=0 and blur to zero as well.

.stitched {
position: relative;
    border:2px dashed #fff;
    background: #ff0030;
    width: 356px;
    height: 40px;
    margin: 30px 10px 10px 20px;
    line-height: 120px;
    text-align: center;                                                                       /*The box shadow x=0 y=0 blur=0 and the spread radius is 8px*/                            box-shadow: 0 0 0 8px #ff0030;
    -moz-box-shadow: 0 0 0 8px #ff0030;
    -webkit-box-shadow: 0 0 0 8px #ff0030;
    z-index: 10;
}

Following is the effect created using the above class:



2. Ribbon Effect:
     
           Ribbon effect can be created using :after and :before pseudo elements.
Following is the arrow created using :after class:

Following is the class used to create the arrow shown in the above image.

.stitched:after {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:0px solid transparent;
    border-left:14px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    left: -9px;
    background: transparent;
    z-index: -1;
}




Following is the arrow created using :before class:


Following is the class used to create the arrow shown in the above image.

.stitched:before {
    content:"";
    position:absolute;
    border-bottom:14px solid transparent;
    border-right:14px solid transparent;
    border-left:0px solid transparent;
    border-top:14px solid #99001D;
    margin-top:49px;
    right: -9px;
    z-index: -1;
}

Following is the final effect created using .stitched , .stitched:after and .stitched:before.


Following is the Final code for the Stitched ribbon:



Following is another example for ribbon with stitched effect:


Tuesday, September 17, 2013

Adding Arrow to Menu

While working on the menu's. I wanted to add a new features of Arrow to the menus. To add a Arrow where a child menu is present with the "Parent Menu".
Following is the sample of what we are going to create:

The "Product" and "Services" menus are the ones with sub/child menu. To indicate that these menus are having the child menus arrows are displayed on right side of the menu.


Along with the parent menu "Product" first child menu "Product 1" is also having the arrow to indicate the arrow for multilevel sub-menu.

Now following is the HTML code for the menu:





Each level of menu is assigned a class for parent menu "parent_menu"  and for child menu "child_menu".
Another class is added for "Arrow" to the parent menus "has_child".

Following is the CSS code for creating and displaying the "Arrow" for the parent menu:
:after and :before pseudo classes are used to create the arrow.
For creating the arrow use the content property and set the position to "absolute".  Also note that to use only use the one property out of top, bottom, right, left and also use the margin property to set the proper position of the arrow.


  • .menucontainer li.has_child:after
  • {
  •     content: '';
  •     position: absolute;
  •     border: 7px solid transparent;
  • /* This will set the direction of the arrow.*/
  •     border-top: 7px solid white;
  •     top: 34px;
  •     margin-left: 5px;  
  • }
Following is the hover effect for the arrow with menu.
  • .menucontainer li.has_child:hover:after
  • {
  •     content: '';
  •     position: absolute;
  •     border: 7px solid transparent;
  •     border-top: 7px solid black;
  •     top: 34px;
  •     margin-left: 5px;  
  • }

You can find the complete code on the jsFiddle: "Arrow to Menu"

Sunday, September 8, 2013

CSS 3 Gradient

Gradient is a way of smooth image color transition from one color to other color. Now as of 2013 all the major browsers support the gradient. With support of the gradient we can have any number of combination of color using programming, unlike creating and deploying the images.
   Following are the type of gradients:
   1. Linear Gradient
   2. Radial  Gradient  
   3. Repeating Linear Gradient
   4. Repeating Radial Gradient  

When the gradients was introduced it was not supported so there are many prefixes used by different browser.
The gradient is used as the CSS <image>, so we can use the gradients with background property or background-image property.

1. linear-gradient

      The  linear gradient is defined by a line and the colors arranged by the line. Also each line has a color. The lines are perpendicular to the direction of the line.
          
Syntax:

linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

[angle] :
           The angle for the direction of the gradient can be decided by this.

to [side-or-corner] :
               It decides the starting point for the gradient. It has two attributes required, one decides the left or right horizontal line and thee other one decides the top or bottom vertical line. So it can be "to top" or "to bottom" or "to left bottom".

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.

Example:

Following example will be supported by version of those which support above syntax of the gradient


In the beginning the gradient property was not supported by the major browser and their syntax was not unified. Hence each browser had its own syntax, following is list of some browsers and their synatx:

Mozilla(From version 3.6 to 15.0)

-moz-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.


Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? : Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);


For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 11.1+ version, earlier version did not support the gradient.

-o-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);


Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9
   The internet explorer supported the browser using different syntax: 

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

Or

-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=green);

GradientType:  Can be 0 or 1.

But the above syntax supports only two colors for gradient.

IE 10
   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);

IE11+
      For this version onward's syntax without prefix is used :
linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);



Example With Browser Support:



   2. Radial  Gradient  

     The radial gradient is defined from a center point and transition of the colors from one to another happens in a circular manner.
Following is the syntax for radial gradient:

Syntax:
radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


<ending-shape> : 
              This can be circle or ellipse, it decides the shape of gradient either circle or ellipse.

<position> :
          This decides the center of the radial gradient. Default value for this is circle.

<size>:
          This decides the size of the ending shape. It has various values and defined as follow :


  1. closest side :  The ending shape will be shaped at the closest side of the gradient center.
  2. farthest side : The ending shape will be shaped at the farthest side of the gradient center.
  3. closest corner: The ending shape will be sized so that it passes through the closest corner of gradient center.
  4. farthest corner: The ending shape will be sized so that it passes through the farthest corner of gradient center.

[color-stop] :
               The color stop defines the colors for the gradient. It defines the color and length of the color along the image. The length can be define in pixels or in percentage.


Like the linear gradient, there are different gradient syntax for the radial gradient. Following is the browser wise syntax for the radial gradient:


Mozilla(From version 3.6 to 15.0)

-moz-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )

-moz- prefix is used for the Gecko browsers from the version 3.6 to 15.0. After 16.0 the syntax without prefix is used.


Webkit Browsers

   The syntax for the webkit browsers Chrome version 4.0 to 10.0, Safari 4.0 and 5.0 is as follows:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);

<type>: It can be linear or radial.

<point> [, <radius>]? Start or end point for the linear and radius for the radial gradient.

<stop>: Color stops.

The webkit syntax for Chrome 11.0+ and safari 6.0 + is as follow:

-webkit-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ );


For chrome 26+ and safari 7+ sypport non prefix syntax for Gradient.

Opera Browser

The Opera has used a -o- prefix for gradient support of gradient since 12.1+ version, earlier version did not support the gradient.

-o-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


Internet Explorer Browser

The support for gradient in IE can be distinguished with as IE 6-9, IE 10 and IE 11+.

IE 6-9
   These versions of  internet explorer does not support radial gradient.


IE 10
   Microsoft also used a prefixed synatx for IE10 version, the prefix is -ms-

-ms-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )
(Consumer Preview version)

IE11+
      For this version onward's syntax without prefix is used :
radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


(Released version of IE 10 also supported above syntax)


Example With Browser Support:











   3. Repeating Linear Gradient

The repeating linear gradient is same as the linear gradient, only the colors are repeated in both the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

repeating-linear-gradient: ([angle | to <side-or-corner>] ,[ [color-stop], [color-stop]+);


Example:




  3. Repeating Radial Gradient

The repeating radial gradient is same as the linear gradient, only the colors are repeated in all the directions. The browser support for this is same as the linear gradient, except for IE which started support after IE10.


Syntax:

-repeating-radial-gradient( [ [ <ending-shape> || <size> ] [ at <position> ]? , | at <position>, ]? <color-stop> [ , <color-stop> ]+ )


Example:



Saturday, September 7, 2013

CSS Drop Line Menu

There are various types of the menus available on the web. I wanted to learn and create a drop line menu.
A menu as shown in the image below:





When creating a menu always start with a simple HTML menu structure containing ul and li tags.
Following is the structure created for the menu. (The entire code is written on the jsfiddle, so you can change it as you like).

HTML


While creating a drop down menu we can set the
position:relative
but for Drop Line Menu set the
position: absolute

Following is the CSS used for creating the menu. I have included using the jsfiddle and its commented. If you have any doubts please leave a comment.


CSS

FINAL RESULT

Thursday, September 5, 2013

CSS3 Horizontal Menu with Search box

There are lots of websites that contain the search box alongside with their menu. I wanted to create a similar menu for one my projects.  First thing is to create the <ul> <li> structure for the menu. The menu without any CSS would look like as shown in the following image:




Following is the HTML that was used to create the menu.

HTML



CSS



Final Result


Monday, September 2, 2013

CSS3 Circular Drop Down menu

I have created horizontal menu having circular menu items. We can also create drop down menu that contains circular menu items. It is somewhat similar to "Horizontal drop down menu". The major difference is that we have to use the border-radius property so that all menu items are circular.
    To create a drop down menu we first need to define the HTML code for it. Following is the HTML code that we are going to use:

HTML




CSS
The entire code is written in jsfiddle. Proper comments are placed before the respective selectors.


Final Result
The entire code is written in jsfiddle. Proper comments are placed before the respective selectors.



Sunday, September 1, 2013

CSS3 Circular Menu

Creating menu using CSS3 is quite easy and fun. To create a circle for each menu item you need to work with border-radius.  While creating the circular menu I used the "CSS3 Simple Horizontal menu". While doing it removed unnecessary CSS code.
  To create a circle using border-radius property make sure that values for height, width and border-radius are same.
For example if the height and width of the menu is 90px, then the border-radius should be kept to 90px as well.
I have created the code using the jsfiddle. If you want to change it according to your need "Click here".

Note: The border-radius property is supported in : IE9+, FF 4+ , Opera 10.5 +, Safari 5+ and chrome.

For older version of FF and Safari -moz and -webkit prefix are used.

HTML



CSS


After completing the code menu would look like as follow:

Result