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:

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"

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:

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

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

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.

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

CSS3 Simple Horizontal menu

Creating a "Horizontal Menu" was simple as creating the vertical menu. In previous article's "Simple CSS Menu" and "Simple CSS menu 2". I had learned and created vertical menu's. In this article I have learned and created a horizontal menu with CSS3 and HTML.

To create a horizontal menu I have used jsfiddle so anyone wants to experiment with the code Click here.

Following is the horizontal menu that I wanted to create : 

For this we need to create a structure of elements that will act as a menu when CSS is applied, Following is the HTML that is used for the menu displayed above.

Then comes the most important part of the menu CSS.





Learning CSS and CSS3 are good experiments for me. Hope this article is useful to you as well.

Simple CSS menu 2

We can create different types of menus using CSS. The menu created in this article is simple and created using only CSS3 and HTML. This one is coded in jsfiddle, if any one wants to check the code they are sure welcome.

HTML

CSS

Final Result

Jquery CSS Arrow generator

I am learning jQuery and CSS3 is quite a fun. I wanted to create arrows for my tooltip using the jquery and CSS.But got interesting in creating arrows so I started creating "Arrow Generator", its still work in progress but sample code is ready.
I have coded it using the jsfiddle.

Online Editors for Blogs and Webpages

As a blogger I wanted to add feature like "try it yourself" editor on "www.w3schools.com" to my blog and allow visitors of my blog to test them.  Sometimes when having a problem, wanted to post code and show the live demonstration of the problem to the users on various forums.

There are a lot of options available on the Internet.

1. jsfiddle

                    The jsfiddle is one of the best option to test your HTML, CSS and JavaScript code. You just have to put the HTML code in HTML pane, CSS code in CSS pane and JavaScript code in JavaScript pane and execute the code.

  It even allows different JavaScript libraries like jQuery, Mootools etc..

The jsfiddle allows a lot of options:

1. Create different version of the code.

2. You can share the code with others. I have created the code for text shadow and its easy for me to share it just using the given link  "http://jsfiddle.net/avdhut/9V3Py/" .

 The code can also be embedded into your blog using the embed page option. This is a very cool feature and its very easy to add it to your blog. For first time I have added it to "CSS 3 Text Shadow" article. This gives result of exactly what I added.

We can add our own resources and work with them online.

2. jsbin

                 The jsbin is a very good online editor. It has similar features to jsfiddle. It can also be shared with other users. Interesting thing about jsbin is that it allows you to lock the version, giving more options for creating and saving versions. Its html pane contains <Doctype> , html, body and other tags that are used in webpage design. It auto executes the code allowing us to see the output as we code.

3. jsdo.it

                    This very unique editor, unlike the jsfiddle and jsbin you have to login using one of your account such as google , yahoo etc.. This allows you to share the code using the link. Also jsdo.it allows to upload your own resources to it. But unlike the jsifddle you can only see one pane at a time html or CSS or javascript or files. This allows you to link your code to github.

4. codepen

              It is another good option for the testing your code online. This also has similar features as jsfiddle.

It has additional features such as professor look. But many options of the codepen are paid. I found out about codepen from an article on css-tricks. 

I tried to create a try it yourself editor "Create Try It Yourself Online Editor", but its very primitive and raw as compared to the more advanced options that I have mentioned in this article.

CSS 3 Text Shadow

This property applies shadow to the text. Using this property we can create various effects for the text.

Syntax:

 text-shadow: <h-shadow> <v-shadow> <blur length> <color>;

Value	Description
h-shadow	This defines the horizontal shadow for the text.
v-shadow	This defines the vertical shadow for the text
blur	This defines the blur length or blur radius for the application.
color	This defines the color for shadow.

Following is the example of the text-shadow :


The text shadow property was introduced in CSS 2.0 but was removed in CSS 2.1. This property made its way back through CSS 3.0.

This property is supported by IE9+ , Firefox 3.5+ , Safari 3.1 + and Opera 11+.

CSS 3 Text Properties

    There is already a article on this blog for properties that were define prior to CSS 3, Text Properties.

   hanging-punctuation

In typography hanging punctuation is used for keeping the flow of the text for readers. It outdent’s the punctuation marks such as “quotes”, bullets. You can read more about “Hanging-punctuation” in typography.

Following image shows the example of the hanging punctuation. 

In the above image it is left side shows the outdented bullets. While on the right side of the image shows the bullets as part of text.

The hanging punctuation effect can be achieved by using CSS3’s “Hanging-punctuation”

Syntax:

 hanging-punctuation: <value>

Following are the values that are used for hanging-punctuation:

Value	Description
none	No punctuation marks are allowed outside of the box.
first	Allows the hanging of punctuation marks at start of first line of text in the box.
last	Allows the hanging of punctuation marks at end of last line of text in the box.
allow-end	The punctuation mark is allowed to hang outside at the end of all lines in box, but it’s optional. It may reside in the box if the justification is defined
Force-end	The punctuation mark is forced outside the box at end of all the lines.

The punctuation marks that are allowed to hang are as follow:

Uni-Code	Character(Punctuation mark)	Name
U+002C	,	COMMA
U+002E	.	FULL STOP
U+060C	،	ARABIC COMMA
U+06D4	۔	ARABIC FULL STOP
U+3001	、	IDEOGRAPHIC COMMA
U+3002	。	IDEOGRAPHIC FULL STOP
U+FF0C	，	FULLWIDTH COMMA
U+FF0E	．	FULLWIDTH FULL STOP
U+FE50	﹐	SMALL COMMA
U+FE51	﹑	SMALL IDEOGRAPHIC COMMA
U+FE52	﹒	SMALL FULL STOP
U+FF61	｡	HALFWIDTH IDEOGRAPHIC FULL STOP
U+FF64	､	HALFWIDTH IDEOGRAPHIC COMMA

Note: As this is an optional property most of the browsers do not support it.

   text-justify 

The text justification property aligns text, images equally in the given margin from both ends of the line. "text-justify" is used when text-align is set to justify. This property defines the method of justifying the text.

following are table contains the values for text-justify:

Value	Description
none	No justification is specified
auto	The browser decides the justification for text
inter-word	Decides the justification between the words in text.
inter-ideograph	Decides the justification for the ideographical text. It is used to specify the justification between ideographical text and symbols.
inter-cluster	It decides the justification for the text which does not have any inter-spacing between the words. It specifically designed for Asian languages.
newsletter	Decides the justification between the words and lines as and when necessary.
disturbute	It works as "newsletter" property, It is very useful for Asian languages.
kashida	Decides the justification by elongation the cursive text.

Syntax:

 text-align: justify;

 text-justify: none| auto| inter-word| inter-ideograph| inter-cluster| newsletter| disturbute| kashida

   text-outline 

       This property is used to define the outline for the text. Following is the simple example of effect that should get generated by text-outline property

Syntax:

    text-outline: <length> <length> <color>;

Value	Description
(First)<length>	This defines the outlines thickness
(second)<length>	This defines the blur radius for the blur effect of the outline
color	defines the color of the outline

Note: As this is an optional property most of the browsers do not support it.

   text-wrap

          This property defines the methods for wrapping the text in the box.

Syntax:

    text-wrap: none | normal | suppressed | unrestricted ;

Value	Description
none	Text is not wrapped and if the text does not fix the box it overflows.
normal	The lines are allowed to break at given breakpoints.
suppressed	Line breaking is suppressed within  the element.The line breaks only if there is no valid break point in the text. If the line break is there it is done as with normal.
unrestricted	The line may break between the two words/characters.

   
    word-break

This property specifies that the line can be broken between any two characters. Unlike the line breaks appear at white space or any punctuation mark.

Syntax:

    word-break:  normal | keep-all | loose | break-strict | break-all ;

Value	Description
normal	Breaks the lines according their own rules
keep-all	The lines are allowed to break at given breakpoints, same as normal. This is normal for all non-CJK characters. Breaks are not allowed in CJK text
loose	Normal for non-CJK characters. But for CJK characters line breaks are less restrective.
break-all	The break all works normal for CJK characters. But for all the non-CJK character content the line may break arbitrarily.
break-strict	The break strict works normal for CJK characters. But if the CJK characters contain the non-CJK characters. It is specifically useful for Korean language.

This property is supported by all the major browser except for Opera.

Example:
Following example shows the of break-all value.

<div style="border: 1px dotted black; height: auto; width: 52px; word-break: break-all;">
      This is simple text showing example of word-break property is used
</div>

This is simple text showing example of word-break property is used.