How to create shadow using pure css property

Hello Friends,

Now html5 and css3 are more important in web design. There are some browser where it does not fully support html5 and css3 like internet explorer. However microsoft trying to support fully html5 and css3 tags like firefox and chrome.   At present i am not comparing any browser, because our aim to  create shadow in div box using pure css property. So now lets see our main goal.

Following is a simple css scripts.

div
{
box-shadow: 10px 10px 5px #888888;
}

This will add shadow in each div box.   but suppose you want to shadow in any specific div then you can do as under

<style>#mydiv { box-shadow: 10px 10px 5px #888888; }</style>

<div id=”mydiv”> this is content of div </div>
supports

Primary syntax :

box-shadow: h-shadow v-shadow blur spread color inset;

The box-shadow property attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional inset keyword.  The box-shadow property allows designers to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.

With many other ‘experimental’ CSS3 properties, you’ll need to use the following prefixes to support Mozilla and Webkit:

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}

Understanding shadow property with dia gram :

shadow css property

Live example :

#testdiv{

    box-shadow: 0 0 5px 5px #888888;
    float: left;
    height: 65px;
    padding:7px;

text-align: center;

    width: 160px;
    display :block;

background-color: #EEEEEE;
}

 

 

this is test this is test this is test

Responsive CSS Framework By Gumby

Are you a web designer and planning to start or create responsive web design ? If yes, then i would like to refer you a Gumby Framework.  This css framework as following features

1) Fluid-Fixed layout self-optimizes for desktop and mobile resolutions.
2) Gumby Framework defaults to a 960 footprint. Designers and coders rejoice
3) Engineered to be there when you need it, and get out of your way when you don’t.
4) Gumby Framework includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project’s lifecycle. From concept to deployment, Gumby Framework follows your lead.
icon_codebaseGumby Framework includes several types of networks with different variations of that column to be flexible throughout the entire life cycle of a project. From concept to implementation, Gumby Marco follows suit.

For more detail you can visit http://gumbyframework.com/

Version : Gumby 2

 

Responsive web design – HTML 5

What is responsive web design ?

Responsive web design (often abbreviated to RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)

Elements of responsive web design :

It used css3 media query. Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser

Now learn how to create responsive web design :

portrait-landscape responsive web design

This shows the the most significant screen sizes, from the smallest to the largest.

Fashion phones:
128×220 Samsung F210
240×400 LG favorite. Prada and Viewty.
Handheld touchscreens of the iPhone variety:
240×440 Various Palm and HP
240×480 LG KF700
Typical Palm/Blackberry form factor. US enterprise with portrait or square displays:
240×240 Samsung F210
240×260 Blackberry Pearl 8100
320×240 Various
320×320 Palm and Samsung
Clamshell:
640×480 HTC X7500, Qtek 9000, etc.
800×352 Nokia E90 Communicator
800×400 Sony Ericsson Xperia X1

Example of responsive menu :

responsive-code

/* small screens */

@media screen and (max-width: 44em) {

body {

margin:1.5em 0;

}

nav[role=”full-horizontal”] {

ul {

padding:0 .5em;

}

ul > li {

width:100%;

padding:.45em .25em;

margin:0 0 .55em 0;

&:after {

box-shadow:none;

}

}

}

}

Output :

menu-responsive