CSS Tutorial Advanced Techniques for More Sophisticated Design

Cascading Style Sheet or CSS, as it is more popularly known, is used to combine dynamic effect to website design. Its purpose does not need much elaboration as every developer knows about it. What is great about CSS is the ready availability of tutorials including those for advanced techniques. Advanced tutorials really push the limits of creativity through CSS. Building on the basic knowledge of developers, such tutorials describe techniques and the use of sophisticated tools for advanced effects to the website design. Indeed, there are too many tools and techniques to be learnt in one sit. However, some advancement made in this department is worth a mention, though brief.

IE Print Protector

IE Print Protector makes IE render elements of HTML5 correctly on screen as well as for printing. It is a section of JavaScript used for this purpose.

Less Framework 2

Less Framework is not related to LESS CSS, which is another framework for extension of CSS with operations, mix-ins, variables and nested rules. The former is a cross-device layout and has minimal features-set, which does not include predefined classes and similar properties. A grid, a typography preset and media-queries are all that it contains. The typography presets are aligned to 24-pixel baseline grid, the column sizes of which are noted within CSS comments. The tool provides a zipped archive of the features that users select to include in their framework files.

Minify

Minify is developed in HTML5 and is a supportive application for CSS. It helps developers follow Yahoo Rules for High Performance Websites. It combines multiple JavaScript and CSS files, removes comments and unnecessary space and returns them with optimal cache header at the client-side and gzip encoding.

Modernizr

Modernizr simplifies a very important part of coding for specific browser functionality. It lets users target browser-specific functionality on their style sheet by adding classes to concerned elements. Hence, users do not have to write JavaScript code for the purpose.

CSS Tutorial Advanced Techniques

My DebugBar

DebugBar IE Tester provides the JavaScript and rendering engines of IE9 to as old as IE5.5 for Windows 7 to XP and the installed IE simultaneously.

Spritebaker

It is a great tool to decrease the number of long http requests. With gzip-compression enabled at the server-side, the effect results into massive improvement in speed. It parses the CSS code and returns a copy of it including all the external media as datasets encoded in Base64.

Switch CSS

Switch CSS is a production-ready, feature-loaded and Apache-based CSS pre-processor. It runs as a command-line tool or with mod_python in the Apache environment.

Toucan CSS Reset

There are not many reset style sheets available as good as this one. Toucan CSS Reset removes the default styles of HTML elements and rebuilds new generic rules for tables, forms, list, paragraphs, headings, typography, etc. Moreover, it is browser-friendly, flexible and light.

Learn How to Create a Tool-Tip Just Using Pure CSS

Pure CSS is replacing usage of jQuery incredibly fast. Developers are pushing the limits by doing new things purely with CSS and creating tool-tips without using any other coding technique is an example of that. Thus, knowing how to create a tool-tip just using pure CSS is a very relevant and applicable now-a-days. A tutorial dealing with this concern will help all in their quest for pure CSS development.

How to Create a Tooltip

The evolution of Cascading Style Sheet (CSS) has helped and still helps web designers in creation of beautiful projects within relatively small time. Addition of tool-tips to HTML elements is traditionally done with jQuery. However, the same result can be obtained with pure CSS too. In this tutorial, anchor tags have been targeted for the tooltip. CSS pseudo elements have been used to make the tool-tip functional. The following is the code that has to be internally or externally added to CSS to create a tool-tip just using pure CSS.

body{margin:auto;text-align:center;}

/*For the anchor tag*/

a:link{position:relative;text-decoration:none;}

/*Pseudo element before*/

a:before

{

content: “”;

position: absolute;

border-top: 20px rgba(0,0,0,1) solid;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

display: none;

top: -17px;

left: -20px;

}

/*Pseudo element after*/

a:after

{

content:attr(ajotip);

position:absolute;color:#FFFFFF;top:-33px;left:-26px;background:rgba(0,0,0,1);padding:5px 15px;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

white-space:nowrap;display:none;

}

/*Display tool-tip on hover link */

a:hover:after,a:hover:before{display:block;}

Once CSS has been added, HTML document has to be created to which the CSS document can be added or the external CSS file can be linked to. Following is the code to create the mark-up:

<p>Hover any link and you will find a black tooltip above the hyperlink which is actually generated with only CSS Pseudo elements<br /><br /><br />Utwisienim<a href=”http://www.allwebdesigninfo.com” ajotip=”allwebdesigninfo”>allwebdesigninfo</a>Loremipsumdolorit met, cnsectetueradifdiscingelit, ssdfeddiamnonummynibheuismodtinciduntutlaoreetdolore magna aliquameratvolutpatff. Utwisienim<br /><a href=”#” ajotip=”Additional”>additional</a>Loremipsumdoitaet, ectetueradipiscng lit, se diamnoeuisoeuismodtincffssiduntutlaoreetdolore magna aliquameratvolutpat. Utwisienimoeuisoeuis</p>

How to Use CSS3 Columns?

Monitors are available in various sizes today which is the reason why designing single texts that can take the space of the entire screen has become almost impractical. Manually splitting the text into columns has been the traditional method but it demands considerable time. Splitting the text dynamically using JavaScript is another method but is not implemented universally. However, since this issue is related to presentation, it should be solved with CSS without floats or grid system.

CSS3 has the features that allow developers to format texts into various columns and even enables them to set gutters or the space between columns. Thus, in this way developers have the full control rather than grid systems or frameworks setting those gaps. Moreover, CSS3 degrades so gracefully that websites do not break when it is viewed on, say, Netscape Navigator.

Browser Support

All the latest browsers including Internet Explorer10 support CSS3 columns but IE9 do not. Though the browser support is good, developers will need browser prefixes for Mozilla and webkit. There is no such need for other browsers as they either fully support the features or do not support at all.

How to Use CSS3 Columns

The Properties

The properties of new Column feature in CSS3 include:

  • Column-Count: Developers can specify how many columns they want.
  • Column-Width: Column-width is tricky as it changes according to browser.
  • Column-Gap: The space between columns.
  • Column-Rule-Width: Borders of columns are referred to as column-rule-width, where developers can specify border-width.
  • Column-Rule-Style: Developers can specify the style for column-rule.
  • Column-Rule-Colour: Developers can specify colour for column-rule.
  • Column-Span: Developers can specify how many columns any specific element such as heading spans. It works like rowspan and colspan.

All these properties leave little scope for the requirement of other tools. While all these features may not be necessary, column-count and column-gap will be needed.

First, two lines are required to implement:

/* This will produce a 3 column layout with a gap of 20px between each column */

.cols3 {

column-count: 3;

column-gap: 20px;

}

Extra properties have to be added to apply rules to columns:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */

.cols3 {

column-count: 3;

column-gap: 20px;

column-rule-width: 1px;

column-rule-style: solid;

column-rule-color: #000;

}

Colour, width and style can be stacked on the same line by:

.cols3 {

column-count: 3;

column-gap: 20px;

column-rule: 1px solid #000;

}

To span heading over all the columns, one line is required:

/*This h1 will take up the space of the 3 columns*/

.cols3 h1{

column-span: all;

}

The full code is:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title>CSS3 column demo</title>

<style type=’text/css’>

.cols3 {

-webkit-column-count: 3;

-webkit-column-gap: 20px;

-webkit-column-rule: 1px solid #000;

-moz-column-count: 3;

-moz-column-gap: 20px;

-moz-column-rule: 1px solid #000;

column-count: 3;

column-gap: 20px;

column-rule: 1px solid #000;

}

.cols3 h1 {

-webkit-column-span:all;

-moz-column-span:all;

column-span:all;

}

</style>

</head>

<body>

<div class=’cols3′>

<h1>Proudly was from before </h1>

<p>This helps us prevent automated submissions even pages, a ridiculous mouse will be born. Read School football or football lion soft goals. Vehicles such as a glass of that Item and that’s no pain in forums. This soft, comfortable is not grief, but was shot around the world, including the laboratory needs moms Finance. We will be sure to post a comment. Lake visitors live performances or organizational makeup of the throat pain. Welcome to Oklahoma but no drink driving.</p>

<p>Tomorrow is a comprehensive online travel booking. Proudly was previously sterilized by reducing commercial outdoor workers. Even large-scale expansion gate soft loans. Even large-scale expansion gate soft loans. Read School football or football lion soft goals. More bikes, development and marketing opportunities, improve the macro environment analysis, just as the main mass Community. We will be sure to post a comment.</p>

<p>This helps us prevent automated submissions evenpages, a ridiculous mouse will be born. More bikes, development and marketing opportunities, improve the macro environment analysis, just as the main mass Community. Lake visitors live performances or organizational makeup of the throat pain. We have good lion. We play a lot more than the concrete porch. Read School football or football lion soft goals. Welcome to Oklahoma but no drink driving.</p>

<p>Wow, exciting time here. Tomorrow is a comprehensive online travel booking. We drink more but no more. Until that customers do not need to look at the big gate, my fears. Wow, exciting time airline.</p>

</div>

</body>

</html>

Conclusion

Indeed, CSS3 columns offer significant advantages. Developers do not have to ponder over much maths, floats and content breaking when users resize browsers. Moreover, it makes writing codes more semantic. Above all, every browser supports it.

Learning How to Use CSS Specificity?

For someone who is planning how to use CSS specificity on a daily basis, it is quite essential in developing a clear idea of what the thing actually is. Other than positions and floats, specificity is quite hard to get used to. The selectors that one uses in their CSS have different weights that specificity controls. Because of this reason, when a rule is applied to an element it doesn’t get reflected in the design.

The first and foremost thing that one must know is how CSS is actually read by the browser and how the rules are overridden.

A style sheet gets read by a browser with this code:

/*Line 10*/

ul li a {

color: red;

}

/*Line 90*/

ul li a {

color: blue;

}

CSS Specificity

How to Use CSS Specificity

The things mentioned above can only be applied if one is using the exact weight on each and every selector. If someone is specifying the ID’s stacking elements or classes, then they are providing them with weight, which is specificity.

CSS specificity selector level can be defined by four levels: inline styles, Classes, ID’s and elements. Specificity gets measured in points- Elements= 1 point, Classes= 10 points and ID’s= 100 points.

Knowing this, if a selector is used like: #content .sidebar .module li a

Then the total weight= 122 points (100+ 10+ 10+ 1+ 1).

Certain things need to be remembered

  • ID’s weigh too much compared to elements and classes, so one should limit their ID use to the minimum.
  • Styles embedded in the HTML trump the styles in style sheets.
  • The inline styles can only be overridden by using the !important statement.
  • Attributes and pseudo classes have the exact weight as that of normal classes.
  • No weight is hold by the universal selector (*).
  • Pseudo elements weigh the same as that of normal element.

Examples:

ul li a {

color: red;

}

This selector will be weighing 3, meaning that by just adding a class somewhere, one can override it.

.content #sidebar {

width: 30%;

}

This selector is weighing 110 points

.post p:first-letter {

font-size: 16px;

}

This selector is weighing 12 points

p {

font-family: Helvetica, arial, sans-serif;

}

This selector is weighing 1 point only

One must always remember that at the time of overriding an ID selector, they need to write 256 classes for the same element.

#title {

font-weight: bold;

}

.home .page .content .main .posts .post .post-content .headline-area .wrapper /* … etc. … */ .title {

font-weight: normal;

}

This is the only way in which the second selector can beat the one using ID.

CSS Specificity is not at all a flashy CSS aspect but to the opinion of many, this is the most overlooked area. Getting the right specificity not only helps in avoiding the bugs, but it speeds up the development and the final site as well.

Learn How to Use CSS3 Transitions

With its use it allows in modifying a property incrementally, crafting a motion sensation and instilling designs with emotion and subtlety. Motion is loved by everyone and the addition of the fourth dimension (time) to the design of a site is the reason why screen based design excels more than print design. Element properties get animated with the help of CSS transitions that helps in enriching certain events in the web design, without JavaScript or Flash.

Browser support

CSS transitions are supported by every modern browser today. However, if the transitions are not supported by the browser, then they will get ignored and instantly, the property changes shall be applied.

How to Use CSS3 Transitions

Vendor prefixes can be used if one is thinking about extending the browser support range. It allows the feature to include Opera 10.5- 12, Firefox 4- 15 and most of the versions of Safari and Chrome. The code looks like this (including vendor prefix alternatives):

div {

-o-transition: all 1s ease;

-moz-transition: all 1s ease;

-webkit-transition: all 1s ease;

transition: all 1s ease;

}

At the stack’s bottom, the non- prefixed property gets added so as to ensure that final implementation trumps all others as it moves to finished status from draft.

Transition Parameters

For CSS transitions, there are 4 parameters: property, duration, timing- function and delay. Addition to this, shorthand properties can also be used.

Transitioned properties

Properties that can be translated to a mathematical value can only be transitioned. For example, the font size can be transitioned but it is not possible with font face.

The entire list of properties is given below that can be transitioned currently:

z- index, word- spacing, width, vertical- align, top, text- shadow, text- indent, right, padding-top, padding- right, padding- left, padding- bottom, outline- width, outline- colour, opacity, min- width, min- height, max- width, max- height, margin- top, margin- right, margin- left, margin- bottom, letter- spacing, left, height, font- weight, font- size, colour, clip, bottom, border- top- width, border- top- colour, border- spacing, border- right- width, border- right- colour, border- left- width, border- left- colour, border- bottom- width, border- bottom- colour and background position.

Learning how to use CSS3 transitions

The following code can be used in setting up a basic paragraph and menu of text. This is styled in such a way that the items change their colour when rolled over.

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″ />

<title>CSS transition demo</title>

<style type=’text/css’>

/*

STATIC PROPERTIES

*/

body {background:#fff; }

ul { padding:0; margin:20px; }

li { display:inline; padding:5px 0; }

.nav a { padding:5px; }

p { padding:0; margin:21px; }

a { text-decoration:none; }

/*

PROPERTIES TO TWEEN

*/

.nav a

{

color:#bee0bf;

background:#1a9e5c;

}

.nav a:hover

{

color:#fff;

background:#38b476;

}

p a

{

color:#3fa32d;

border-bottom:1px solid #fff;

}

p a:hover

{

color:#bee0bf;

border-bottom:1px solid #3fa32d;

}

</style>

</head>

<body>

<ul class=’nav’>

<li><a href=’#’>Business</a></li>

<li><a href=’#’>Code</a></li>

<li><a href=’#’>Design</a></li>

<li><a href=’#’>Inspiration</a></li>

<li><a href=’#’>Miscellaneous</a></li>

<li><a href=’#’>Mobile</a></li>

<li><a href=’#’>News</a></li>

<li><a href=’#’>Resources</a></li>

<li><a href=’#’>Usability</a></li>

</ul>

5 Useful Responsive CSS Frameworks for Outstanding Designs

This is the age of responsive design and the useful responsive CSS frameworks not only streamline design processes but also assist towards saving huge amount of development time. It also makes sure that the website scales properly across every device.

1. Less Framework

Consisting of typography pre-sets of three types along with catering towards four layouts (wide mobile, mobile, tablet and default) this framework is used to design adaptive websites. 992 pixel default layout is served it and several child layouts like 320, 480 and 768 pixel are served by CSS media queries. The default layout is used only by mobile and old desktop browsers. Desktop apps like CodeKit and Less.app make it quite simple to utilize less through automatic compiling.

2. Foundation

This is a lightweight, advanced and front-end responsive CSS framework. It is based on a twelve column flexible grid which scales to arbitrary size giving the indication that complicated layouts can be built without the need to create several custom elements. It also consists of add-ons for different functionality like icon fonts, HTML templates and more. More functionality can be obtained through JavaScript Libraries present in it.

Responsive CSS Frameworks

3. Skeleton

It serves as small boilerplate for mobile friendly responsive development. Built on lightweight 960 grids it can elegantly scale down to mobile phones, tablets and downsized windows. The tool is ideal for rapid development as it consists of well-structured grid, organized file structure, and developed with best practices of CSS, etc. When it comes to development kit, it maintains style-agnostic approach and supplies basic styles as foundation however, it is always ready to adopt the styles and designs chosen by the designer.

4. Base

This simple framework has been developed to function on desktop computers, netbooks, tablets and mobile devices. Developed on less, this CSS pre-processor allows designers to write in an organized, cleaner as well as easy maintained CSS. Basic styles for tables, heading, forms, blockquotes, etc. are easily available. The framework functions splendidly in modern day browsers, IE7 and up. Apart from all these features, it also consists of default JavaScript file along with fallbacks and base enhancements.

5. Gumby Framework

Developed with the combination of SASS and Compass this responsive CSS framework foundation is based on a hybrid grid which allows the designers to create layouts simply by defining grid to be used anywhere on the page. It consists of a built-in user interface catering to latest design trends allowing the designers to mix and choose flat design with graduated design styles. It has a robust framework with lots of features which make it a great toolset. The impressive Entypo Icons included within it are resolution independent.

These useful responsive CSS frameworks help with the rapid development of websites without requiring the designer to write common CSS styles. It definitely makes the work easier and quicker for the designers.

How to Create Shapes in CSS3

CSS generated shapes are of great many use other than creating something cool for the websites to give them a different and bold look. They can be used in replacing big images in a web page which in turn helps in speeding up the web page loading time. Apart from that, it also helps the website in being more SEO-friendly as the actual text enables in rendering the keywords. Learn how to create Shapes in CSS3 with the help of the simple guidance that is given below helping you in creating some simple shapes.

How to Create Shapes in CSS3

Creating basic shapes with CSS is not that very difficult. One only needs to blend in some basic ideas and concepts in the mind with which they can create almost anything by CSS these days.

First, the users need to know the basic properties of CSS:

  • Content
  • Border
  • Border-radius

Content

This property was introduced a long time back. It can be used only with the pseudo elements: before and :after. Basically, this property is used so as to enhance the page’s functionality.

.product-name:before {

content: “Product Name: “;

}

iphone 4

Result:

Product Name: iPhone 4

Border

This is quite an amazing property. Border basically, is the short form of CSS’ multiple other properties such as border style, border colour and border width.

div {

height: 100px;

width: 100px;

}

.border {

border-width: 1px;

border-color: black;

border-style: solid

}

.singleLine-border {

border: 1px solid black;

}

Border Radius

This property is used in rounding off the corners. A number of shapes can be created by using this property. With this property, the CSS can be extended to a completely another level altogether.

Cross Browser Compatibility:

  • -moz (i.e -moz-border-radius) support firefox
  • -webkit (i.e -moz-border-radius) support Safari & Google Chrome

div {

height: 100px;

width: 300px;

}

.rounded-corners {

border-radius: 15px;

-moz-border-radius:15px;

-webkit-border-radius:15px;

}

Square

The idea behind the square shape is quite simple, just assuming equal width and height, defining the border and setting up the background colour so as to distinguish.

#square {

width: 100px;

height: 100px;

background: black;

}

Triangle:

#triangle {

width: 0px;

height: 0px;

border-style: solid;

border-width: 0 50px 50px50px;

border-color: transparent transparent black transparent;

}

Diamond:

#diamond {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom-color: black;

position: relative;

top: -50px;

}

#diamond:after {

content: ”;

position: absolute;

left: -50px;

top: 50px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top-color: black;

}

Rectangle:

#rectangle {

width: 200px;

height: 100px;

background: black;

}

Trapezoid:

#trapezoid {

width: 100px;

height: 0;

border-bottom: 100px solid black;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

}

Pentagon:

#pentagon {

width: 54px;

position: relative;

border-width: 50px 18px 0;

border-style: solid;

border-color: black transparent;

}

#pentagon:before {

content: “”;

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent black;

}

Parallelogram:

#parallelogram {

width: 150px;

height: 100px;

background: black;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

}

Hexagon:

#hexagon {

width: 100px;

height: 55px;

background: black;

position: relative; }

 

#hexagon:before {

width: 0;

height: 0;

content: “”;

position: absolute;

top: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid black;

}

#hexagon:after {

width: 0;

height: 0;

content: “”;

position: absolute;

bottom: -25px;

left: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid black;

}

Circle:

#circle {

width: 100px;

height: 100px;

background: black;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

Oval:

#oval {

width: 200px;

height: 100px;

background: black;

border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

}

Bookmark Ribbon:

#bookmarkRibbon{

width:0;

height:100px;

border-right:50px solid blue;

border-left:50px solid blue;

border-bottom:30px solid transparent;

}

Quarter Circle Top Left:

#quarterCircleTopLeft{

width:100px;

height:100px;

border:1px solid #000;

background: orange;

border-radius: 90px 0 0 0;

-moz-border-radius: 90px 0 0 0;

-webkit-border-radius: 90px 0 0 0;

}

Quarter Circle Top Right:

#quarterCircleTopLeft{

width:100px;

height:100px;

border:1px solid #000;

background: orange;

border-radius: 90px 0 0 0;

-moz-border-radius: 90px 0 0 0;

-webkit-border-radius: 90px 0 0 0;

}

Chart Top:

#chartTop{

width:0;

height:0;

border-right:60px solid purple;

border-top:60px solid transparent;

border-left:60px solid purple;

border-bottom:60px solid purple;

border-radius: 60px;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

}

Chart Bottom:

#chartBottom{

width:0;

height:0;

border-right:60px solid purple;

border-top:60px solid purple;

border-left:60px solid purple;

border-bottom:60px solid transparent;

border-radius: 60px;

-moz-border-radius: 60px;

-webkit-border-radius: 60px;

}

Half Circle:

#halfCircle{

height:45px;

width:90px;

border-radius: 90px 90px 0 0;

-moz-border-radius: 90px 90px 0 0;

-webkit-border-radius: 90px 90px 0 0;

background:green;

}

Tutorial on How to Create a CSS3 Dropdown Menu

There is simple 4-step solution if you want to know how to create a CSS3 dropdown menu that does not require tremendous effort and is efficient to use. There are four simple programming steps that can be executed to achieve this goal.

1) HTML Mark-up

The first step towards how to create a CSS3 dropdown menu involves the creation of an unordered list using an anchor tag and a list item for every menu link. Sub menus can be created by addition of further unordered lists inside the parent list.
Code<ul class="menu">

<li><a href="#">My dashboard</a></li>

<li><a href="#">Likes</a></li>

<li><a href="#">Views</a>

<ul>

<li><a href="#" class="documents">Documents</a></li>

<li><a href="#" class="messages">Messages</a></li>

<li><a href="#" class="signout">Sign Out</a></li>

</ul>

</li>

<li><a href="#">Uploads</a></li>

<li><a href="#">Videos</a></li>

<li><a href="#">Documents</a></li>

</ul>

2. Menu Layout

In the second step, border, margin, padding and outline are to be removed from every element on the menu. The CSS3 gradients, fixed height and width and rounded corners have to be added to the menu. The lists have to be floated to the left for horizontal alignment of the links. The position needs to be set to relative for further alignment of submenus.

Code:  .menu,

.menu ul,

.menu li,

.menu a {

margin: 0;

padding: 0;

border: none;

outline: none;

}

.menu {

height: 40px;

width: 505px;

background: #4c4e5a;

background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

.menu li {

position: relative;

list-style: none;

float: left;

display: block;

height: 40px;

}
Styling the first level can be made easier by temporarily hiding the sub menu by

.menu ul{ display: none; }

CSS3 Dropdown Menu

3. Menu Links

Colour, font, padding, etc. are some of the basic CSS properties that have to be added to the design of menu links. For smooth effect of change in colour when the pointer hovers over the list, colour transition and dark text shadow has to be applied. Left and right borders are required to separate the links. Change of text colour would be the effect for hover-state.

Code.menu li a {

display: block;

padding: 0 14px;

margin: 6px 0;

line-height: 28px;

text-decoration: none;

border-left: 1px solid #393942;

border-right: 1px solid #4f5058;

font-family: Helvetica, Arial, sans-serif;

font-weight: bold;

font-size: 13px;

color: #f3f3f3;

text-shadow: 1px 1px 1px rgba(0,0,0,.6);

-webkit-transition: color .2s ease-in-out;

-moz-transition: color .2s ease-in-out;

-o-transition: color .2s ease-in-out;

-ms-transition: color .2s ease-in-out;

transition: color .2s ease-in-out;

}

.menu li:first-child a { border-left: none; }

.menu li:last-child a{ border-right: none; }

.menu li:hover> a { color: #8fde62; }

4. Sub Menu

At last, to create a CSS3 dropdown menu, the sub menu has to be unhidden by removing the code added at last of step 2. Appropriate margin has to be chosen for the position of sub menu. This one shall have rounded corners. The opacity has to be set to 1 for hover state and to 0 otherwise to get the fade-in/fade-out effect. The list height would be 0px for hidden state and 36px for hover state.

Code.menu ul {

position: absolute;

top: 40px;

left: 0;

opacity: 0;

background: #1f2024;

-webkit-border-radius: 0 0 5px 5px;

-moz-border-radius: 0 0 5px 5px;

border-radius: 0 0 5px 5px;

-webkit-transition: opacity .25s ease .1s;

-moz-transition: opacity .25s ease .1s;

-o-transition: opacity .25s ease .1s;

-ms-transition: opacity .25s ease .1s;

transition: opacity .25s ease .1s;

}

.menu li:hover>ul { opacity: 1; }

.menu ul li {

height: 0;

overflow: hidden;

padding: 0;

-webkit-transition: height .25s ease .1s;

-moz-transition: height .25s ease .1s;

-o-transition: height .25s ease .1s;

-ms-transition: height .25s ease .1s;

transition: height .25s ease .1s;

}

.menu li:hover>ul li {

height: 36px;

overflow: visible;

padding: 0;

}

Now appropriate width for sub menu link has to be set. Bottom border would be added instead of right or left ones.

Code.menu ul li a {

width: 100px;

padding: 4px 0 4px 40px;

margin: 0;

border: none;

border-bottom: 1px solid #353539;

}

.menu ulli:last-child a { border: none; }

An icon has to be added to every sub menu link to complete the task. A custom class has to be created for each link and a background image has to be added to it.
Code.menu a.documents{ background: url(../img/docs.png) no-repeat 6px center; }

.menu a.messages{ background: url(../img/bubble.png) no-repeat 6px center; }

.menu a.signout{ background: url(../img/arrow.png) no-repeat 6px cen

Thus these four steps help to create a CSS3 dropdown menu.

Top 10 Tips to Learning CSS

CSS styling is known to be one of the easiest tasks in the field of web designing. But the quantity of materials that are available might confuse people. It is important to make the task as easy as possible and understand the whole picture. The top 10 tips to learning CSS are:

Tips to Learning CSS

  1. Before one starts learning CSS they must make sure that they know what CSS really is. If people know the importance of CSS and the place it will be applied then the process will be much easier. While learning the basics of CSS one will get to know a lot about server side scripting and java Script.
  2. While going through this course one should also try to understand DOM and HTML model. Among the 10 tips to learning CSS this can act as one of the most important part as it talks about DOM and HTML. Once the person gets the knowledge of DOM and HTML then he will be on the half way mark of learning CSS. With the knowledge of these one will easily get to know how to apply selectors.
  3. While applying CSS in any scenario the CSS syntax is mainly divided into two different parts. One is selector and the other one is declaration. The first step is to identify the HTML part of the website that requires attention. Affected CSS part is known to be the selector and the change that needs to be done forms declaration. Beginners should make it a habit of using only one selector and try to keep all the declarations at one point. Once the person advances further then he can start combining all the selectors.
  4. To learn CSS people should divide it into two important areas that include CSS best practices and CSS elements. If these two areas are started at the same time then one can expect to get a better and a faster start to their course. There are different elements in this and one should start by focusing on the element that makes him feel comfortable.
  5. One should try to break the whole CSS course into different modules. Then the person should identify different areas and divide them into different segments. Having a look at some well-designed websites can prove to be of great help. People can consult expert articles that can help in understanding the features that can be achieved with the help of this web application technology. Some modules can be selectors, text modifications, layout, transitions, etc.
  6. After learning the elements of CSS one should start learning best practices. One of the most important best practices elements are the use of CSS style sheet. This will help in understanding the inconsistencies that appear with different browsers.
  7. Among the 10 tips to learning CSS it is important to keep visiting new forums and new blogs. This helps in learning the latest updates.
  8. Once people finish learning the application of CSS. They should try to look at the new features that are there in the block.
  9. It is very important to learn from the right sources or the whole work will go to waste.
  10. People should keep noting the codes and trying them out. While the learning phase is on they should also try them out in their browsers.

These are some of the top 10 tips to learning CSS that help everyone learn and become better at CSS.

PSD to HTML5/CSS3 Conversion with W3C Validation

PSD to HTML5 and CSS3 conversion can be made easily through clean coding and a little bit of effort. Read on to know the basics and the steps involved in the conversion.

Today, the popularity of the search engines has gone across the wire and now webmasters are making every bit of effort to make their website compatible with the search engines. In this Regard, the World Wide Web Consortium has regulated guidelines that they will now put more focus on newly launched HTML5 than the older one XHTML. It means now there will be more compatibility benefits could be availed by the websites with the web browsers and search engines with the new HTML5.

Now with the advent of HTML5, the debate also started about the PSD to HTML5/CSS3 conversion. It almost seems like urgency for the website developers to integrate the functionality of HTML5 and CSS to their existing websites in order to attract more visitors and get better organic traffic for the website. One of the most vital benefits of HTML5 is the error handling and coding capability that will make any website to load faster and crawl well by the search engine bots.

Though following the W3C standards and with a mutual agreement with W3c there are now many organizations insisting on following HTML5 and CSS as per the guidelines from the W3C. But, the major point to consider is the PSD to HTML5 conversion in order to attain the majority of the benefits of the website. The newly introduced the HTMML5 comes with semantic code with the semantic tags which has improved the website’s performance in the browser and hence getting more visibility in the search engines.

Tools used

There are now many tools and applications available for PSD to HTML5/CSS3 conversion. PSD files are saved in the PSD extension format within the Photoshop. While converting the PSD files in HTML5, one of the most important things to consider is the functionality. Most of the conversion tools offer open cart conversion which is valid as per the W3C standards, so there remains no problem in inducing the valid HTML5 and CSS. What it requires in the software is the extensive coding and scripting. All the PSDF files are scripted and coded in a unique code before they went for the conversion. It is must to assign a neutral code to all PSD files before conversion otherwise it will not be a healthy conversion and will not follow as per the W3C standards.

Techniques and best practices

Just converting PSD to HTML5 is not enough, rather the conversion to CSS is most required in order to attain the same look, feel and functionality. The PSD to HTML5/CSS3 conversion companies need to remain on their toes while doing conversions. They need to keep their promises with the W3C and any fault scripting or coding used in the conversion will be held breach of the promise for which they have to suffer many consequences. The HTML5 is very much search engine friendly and it allows integration of third party open cart for improving the functionality of the website. While PSD to HTML5/CSS conversion it should be kept in mind that the website will not lose any existing functionality that might hamper website’s visibility across the search engines.