Wednesday 31 October 2012

Used to css Reset

Used to css Reset

Now Used To Css Reset for Best Result of your Website Layout

Used to Normal Css Reset of your Layout
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
img{
    vertical-align:top;
}

If you are using HTML5 Than used to this css Reset
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0; 
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Source By One
Source By Two

Tuesday 30 October 2012

Created Inner Text Shadow

It's very Simple Created Inner Text Shadow

Example As Like this

Css
.inner_text_shadow{
width:500px;
  margin:0 auto;
  font-size:5em;
  color:transparent;
  text-shadow:3px 3px 2px rgba(0,0,0,0.4);
  -moz-text-shadow:3px 3px 2px rgba(0,0,0,0.4);
  -webkit-text-shadow:3px 3px 2px rgba(0,0,0,0.4);
}
HTML
<div class="inner_text_shadow">Inner Text Shadow</div>

Live Demo

Wednesday 24 October 2012

How to create only Ie Stylesheet ?

How to create only Ie Stylesheet

It's very simple now you just create a css file in sap-rate  only for ie and apply in your page


Example as like this

link to css file in your page
Target ALL VERSIONS of IE

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Target everything EXCEPT IE

<!--[if !IE]><!-->
    <link rel="stylesheet" type="text/css" href="not-ie.css" />
 <!--<![endif]-->

Target IE 7 ONLY

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

Target IE 6 ONLY

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Target IE 5 ONLY

<!--[if IE 5]>
    <link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

Target IE 5.5 ONLY

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Target IE 6 and LOWER

<!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 and LOWER

<!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Target IE 8 and LOWER

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Target IE 6 and HIGHER

<!--[if gt IE 5.5]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Target IE 7 and HIGHER

<!--[if gt IE 6]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Target IE 8 and HIGHER

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Hacks for all IE
IE-6 ONLY

* html #div {
    height: 300px;
}

IE-7 ONLY

*+html #div {
    height: 300px;
}

IE-8 ONLY

#div {
  height: 300px\0/;
}

IE-7 & IE-8

#div {
  height: 300px\9;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

Hide from IE 6 and LOWER:

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

Source By Css Tricks

Tuesday 23 October 2012

How to make media queries standard Devices ( Write css all standard Devices)

How to make media queries standard Devices ( Write css all standard Devices)


CSS
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Reference URL

Friday 19 October 2012

How to create a inline-block element in cross browser

How to create a inline-block element in cross browser


EXAMPLE

CSS
div {
        width: 100px;
        min-height: 150px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 10px;
        zoom: 1;
        *display: inline;
        _height: 150px;
}
Live Demo

more information

Link 1
Link 2

Monday 15 October 2012

How to give parent opacity but not effect in child

How to give parent opacity but not effect in child


it's very simple now you can used to RGBA format
r=red
g=green
b=blue
a=alpha


EXAMPLE

HTML
<div class="parent">
<p>
Give to parent opacity but not effect in child
</p>
</div>
CSS
.parent{
background:rgba(0,0,0,0.2);
}
Live Demo

Tuesday 9 October 2012

How to Image center align vertically and horizontally in css ?

Image center align vertically and horizontally

 

They are many method you can do this.

1. Used to table-cell Property

HTML
<div class="parent">
<img src="dummypic.jpg">
</div>
Css
.parent{
width:200px;
height:200px;
text-align:center;
display:table-cell;
vertical-align:middle;
}

.parent img{
width:150px;
height:150px;
vertical-align:top;
}
Live Demo

2. Used to Position Method

HTML
<div class="parent">
<img src="dummypic.jpg">
</div>
Css
.parent{
width:200px;
height:200px;
position:relative;
}

.parent img{
width:150px;
height:150px;
vertical-align:top;
position:absolute;
left:50%;
top:50%;
margin-left:-75px; 
margin-top:-75px; 
}
Live Demo

3. Used to line Height Method

HTML
<div class="parent">
<img src="dummypic.jpg">
</div>
Css
.parent{
width:200px;
height:200px;
text-align:center;
line-height:200px;   
}
.parent img{
width:150px;
height:150px;
vertical-align:middle;
}
Live Demo