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.