Global Style Sheet

Standard

Hi Friends,

Today I am gonna to share with you a style file which I feel are including some of the classes/styles which we almost use in every web project on which we are working. We are repeating writing the same code across different web projects, if you are not but atleast i am doing the same. 🙂

Today after getting some time I thought why not to make a general style sheet which will contain some of the common styles which we require almost in all projects. Atleast we can save some time and our patience. Let me show you all the styles code in that file first and then explain each one of them.

*
{
padding: 0px;
margin: 0px;
}

BODY, HTML
{
height: 100%;
width: 100%;
}

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

img
{
border: none;
}

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}
/*------ For Clear ------- */
.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}
/*------ For Floats ------- */
.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

/*------ For Border Radius ------- */
.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

/*------ For Box Shadow ------- */

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}
/*------ For Text Shadow ------- */

.textShadow

{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}
/*------ For Color Gradient ------- */

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

&nbsp;

/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}

&nbsp;

/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}

&nbsp;

/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}

&nbsp;

By simply going through the above code you might had got the idea what i am trying to do by making the general style sheet file. Basically I have tried to separate those common/repetitive styles from the general style file and then saving them separately as commons.css file. Later on I can link this style sheet to any web project/file and do some color and font settings as per the requirements and use the same as and when I require them. I know I haven’t as yet put all the possible commonalities inside this style sheet and would definitely update this sheet as and when i find anything which should be in this file. I am also humbly requesting you friends to kindly suggest and update this files if you find any interesting style which should become part of this file. Let me explain all the styles and their functionality one by one First i have wrote global browser resetting style, which goes like this

*
{
padding: 0px;
margin: 0px;
}

The above style helps to reset different browser specific style settings. Star (*) means all the DOM elements and set their padding and margins to zero(0). I would also like to inform here that it is not the recommander way to reset the browser, rather we have a good approach which is from YAHOO. 2nd style tends to set all webpage HTML, BODY element height and width to 100%. This depends on your project requirements and you can edit the code as per the requirements. The code looks like this

BODY, HTML
{
height: 100%;
width: 100%;
}

3rd style is the general BODY element. It is my usual practice to define the general font styles in body tag and specifically changing the font style properties where ever is required. The code of which looks like this

BODY
{
font-family: 'Arial' , 'Helvetica' , 'Sans-Serif';
font-size: 12px;
color: #323232;
}

4th style is to reset the <img> tag and set its border property to none, as i had seen many browsers unnecessarily showing the blue border across the image.

img
{
border: none;
}

5th styles is to keep the general and modern style look and feel of links. By default there won’t be any underline and on hover link will show the underline and this also helps in user experience.

a
{
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

6th styles is to clear the floating of divs

.clear
{
clear: both;
}
.clearLeft
{
clear: left;
}
.clearRight
{
clear: right;
}

7th style is for floats. If you want any div to float left or right, you now need to just add the appropriate class to that div.

.floatLeft
{
float: left;
}
.floatRigth
{
float: right;
}

8th styles talks about border radius which we commonly use across different divs and have to tirelessly write browser specific code across the divs. You can add border radius to any div to which you want border radius, simply you have to just add this class to that div in markups. This code of which is like this.

.borderRadius
{
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}

9th style is to add box shadow to the divs, both inner and outer shadows. Code to add outer shadow looks like this

.boxOuterShadow
{
box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: 1px 1px 5px rgba(0,0,0, 0.3);
}

and code for inner shadow looks like this

.boxInnerShadow
{
box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-webkit-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-moz-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-o-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
-ms-box-shadow: inset -1px -1px 5px rgba(0,0,0, 0.3);
}

10th style is to add shadow to the text.

.textShadow
{
text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-webkit-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-moz-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-o-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
-ms-text-shadow: 1px 1px 1px rgba(0,0,0, 0.5);
}

11th styles is for color gradients. Designers/developers can change the color values and get the desired color as per their requirements.

.colorGradient
{
background: #a6a6a6; /* Old browsers */
background: -moz-linear-gradient(top, #a6a6a6 1%, #eaeaea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a6a6a6), color-stop(100%,#eaeaea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a6a6a6 1%,#eaeaea 100%); /* IE10+ */
background: linear-gradient(to bottom, #a6a6a6 1%,#eaeaea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6a6a6', endColorstr='#eaeaea',GradientType=0 ); /* IE6-8 */
}

</pre>
/*------- For flexible images ----*/

img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
 box-shadow:inset 0px 0px 5px #E88738;
}
<pre>

The above code helps to make images responsive in responsive design.

</pre>
/*------- For flexible videos ----*/

video embed,
video object,
video iframe {
 width: 100%;
 height: auto;
}
<pre>

The above codes makes videos responsive in responsive design.


</pre>
/*------- Adjust text size in iPhone ----*/

html {
 -webkit-text-size-adjust: none;
}
<pre>

The above code does text adjustments in webkit supporting browsers for iPhone devices.


</pre>
/*------- Adjust overflow in 100% width (if padding applied) ----*/

.boxSizing
{
 -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
 box-sizing:border-box;
}
<pre>

Box-sizing is interesting CSS3 property. When we apply padding to a div whose width is 100%, its width start to increase, in-order to keep it 100% and have some padding, we should include box-sizing property into the divs code.
Please note as i already mentioned this is not the end of the styles which can be put in this file, as and when i come up with other style snippets which i feel should be in this file shall be definately updated, in the same breath i am requesting you all friends to suggest few if you feel we can make this file much usable and interesting. Thanks in advance and enjoy reading.

CSS only Dropdown menu

Standard

Hi Friends!

Today i am gonna to talk about how to create CSS ONLY DROPDOWN MENU for our web project. I know you had been though lots of dropdown menus, but many use CSS/Javascript/JQuery dropdown menus. But what today i am gonna to show you how to create pure css dropdown menu.

Below given is the screen shot which we will get after writing down CSS and HTML code about which i am going to discuss later.

CSS only Dropdown menu

Let me first show you the CSS code i had created for above dropdown menu:


/*------ Main Nav starts -------*/

 .mainNav
{
    height: 40px;
    border: solid 1px #a6a6a6;
	background: #a6a6a6;
	background: -webkit-gradient(linear, left top, left bottom, from(#d3d3d3), to(#f7f7f7));
	background: -moz-linear-gradient(top,  #d3d3d3,  #f7f7f7);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d3d3d3', endColorstr='#f7f7f7');
    margin: 40px 15px;
}

.mainNav ul
{
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.mainNav ul li
{
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.mainNav ul li.nav
{
    font-family: SegoeUI;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height:40px;
    padding: 0 20px;
    border-right:1px solid #d3d3d3;
}

.mainNav ul li.nav:hover
{
    background: rgba(8,102,198,0.8);
    border-right:1px solid rgba(6,80,155,1);
    cursor:pointer;
    color:#fff !Important;
}

.mainNav ul li.nav span
{
    cursor:pointer;
}

.mainNav ul li.nav .dropdown
{
    display:none;
}

.mainNav ul li.nav:hover .dropdown,
.mainNav ul li.nav:hover .dropdown:focus
{
    position:absolute;
    display: block;
    background: rgba(8,102,198,0.8);
    height:auto;
    max-width:150px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    margin:0 0 0 -20px;

}

.mainNav ul li.nav:hover .dropdown ul
{
    list-style: none;
    padding: 0px;
    margin:0;
    overflow:hidden;
}

.mainNav ul li.nav:hover .dropdown ul li
{
    width:100%;
    padding:0px;
    margin: 0px;
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav
{
    display:inline-block;
    min-width:100%;
    font-family: SegoeUI;
    color: #fff;
    font-size: 12px;
    padding:0 0 0 25px;
    line-height:30px;
    text-transform:none;
    border-bottom:1px dotted rgba(68,208,254,0.8);
}

.mainNav ul li.nav:hover .dropdown ul li a.subNav:hover
{
    background-color: rgba(6,80,155, 0.4);
}

/*------- Menu icons starts-----------*/

li.file
{
    background:url(../Images/Icons/1.png) no-repeat 4px center;
}

li.chart
{
    background:url(../Images/Icons/11.png) no-repeat 4px center;
}

li.home
{
    background:url(../Images/Icons/17.png) no-repeat 4px center;
}

li.meeting
{
    background:url(../Images/Icons/18.png) no-repeat 4px center;
}

li.stickynote
{
    background:url(../Images/Icons/26.png) no-repeat 4px center;
}

li.save
{
    background:url(../Images/Icons/22.png) no-repeat 4px center;
}

li.briefcase
{
    background:url(../Images/Icons/27.png) no-repeat 4px center;
}

li.print
{
    background:url(../Images/Icons/16.png) no-repeat 4px center;
}

/*------- Menu icons ends-----------*/

/*------ Main Nav Ends -------*/

and now let me show you the HTML code for dropdown menu:

</pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>:: Multi level DD menu ::</title>
 <link href="CSS/Menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div class="mainWrapper">
 <div class="mainNav boxShadow borderRadius">
 <ul>
 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Home</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">About Us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">products</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Print</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">services</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">FAQ's</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New File</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Charts</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Home</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Meeting</a></li>
 <li class="stickynote"><a href="http://www.vitizon.com" class="subNav">Sticky Notes</a></li>
 <li class="save"><a href="http://www.vitizon.com" class="subNav">Save</a></li>
 <li class="briefcase"><a href="http://www.vitizon.com" class="subNav">Business Files</a></li>
 <li class="print"><a href="http://www.vitizon.com" class="subNav">Solutions overviews</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Careers</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">New Jobs</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Company Tour</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Why to join us</a></li>
 <li class="meeting"><a href="http://www.vitizon.com" class="subNav">Submit resume</a></li>
 </ul>
 </div>
 </li>

 <li class="nav"><span onclick="javascript:window.open('http://www.vitizon.com','_blank')">Contact us</span>
 <div class="dropdown">
 <ul>
 <li class="file"><a href="http://www.vitizon.com" class="subNav">Location</a></li>
 <li class="chart"><a href="http://www.vitizon.com" class="subNav">Office Address</a></li>
 <li class="home"><a href="http://www.vitizon.com" class="subNav">Enquiry</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </div>
</body>
</html>
<pre>

Create a HTML page say index.html with in any editor of your choice and paste the HTML code with in it. Now copy the CSS code and create new css file namely “Menu” and put it is CSS folder of the project.

Note i have used some dummy icon images you can use your own and name them as per your needs and put them within the image folder. The Icon image size is 16×16. I had used the icons from site . I hope you will like this and i am eagerly waiting for your comments/suggestions and i would like to mention that all are free to use this code in their projects and update the same.