CSS3 Gölgeli Kutular (2)

[Φ suaritiminet]

Safari ve Chrome 'da kusursuz çalışan gölgeli kutular yapmak isterseniz, aşağıdaki kodlardan faydalanabilirsiniz.

 

RESET.CSS

 

/*Tripoli is a generic CSS standard for HTML rendering.
_______________________________
RESET */
*{
margin:0;
padding:0;
}
code,kbd,samp,pre,tt,var,textarea,input,select,isindex,listing,xmp,plaintext{
font:inherit;
white-space:normal;
}
a,img,a img,iframe,form,abbr,acronym,object,applet,table,a abbr,a acronym{
border-width:0;
}
dfn,i,cite,var,address,em{
font-style:normal;
}
th,b,strong,h1,h2,h3,h4,h5,h6,dt{
font-weight:normal;
}
caption,th,td{
text-align:left;
}
html{
font-family:arial, sans-serif;
}
/* \*/
html{
font-family:sans-serif;
}
/* */
q{
quotes:"\201C""\201D""\2018""\2019";
}
ul,ol,dir,menu{
list-style:none;
}
sub,sup{
vertical-align:baseline;
}
a{
color:inherit;
}
/*_______________________________DISABLE DEPRECATED HTML */
font,basefont{
color:inherit;
font:inherit;
font-size:100%;
}
center,*[align]{
text-align:inherit;
}
s,strike,u{
text-decoration:inherit;
}
img{
border:none;
margin:0;
}
ol{
list-style-type:decimal;
}
/*body{
background-color:transparent;
}*/
tr,th,td{
width:auto;
height:auto;
background-color:transparent;
vertical-align:inherit;
*border:none;
}
nobr{
white-space:normal;
}
marquee{
overflow:visible;
-moz-binding:none;
}
blink{
text-decoration:none;
}
/*_______________________________GENERAL */
html{
font-size:100%;
}
body{
font-size:100%;
}
a{
text-decoration:underline;
}
strong,th,thead td,h1,h2,h3,h4,h5,h6,dt{
font-weight:bold;
}
cite,em,dfn{
font-style:italic;
}
code,kbd,samp,pre,tt,var,input[type='text'],input[type='password'],textarea{
font-size:100%;
}
pre{
white-space:pre;
}
pre *{
font-size:100%;
white-space:pre;
}
del{
text-decoration:line-through;
}
ins,dfn{
border-bottom:1px solid black;
}
small,sup,sub{
font-size:10px;
padding:0 0 20px 0;
}
big{
font-size:125%;
line-height:80%;
}
abbr,acronym{
text-transform:uppercase;
font-size:85%;
letter-spacing:.1em;
}
abbr[title],acronym[title],dfn[title]{
cursor:help;
border-bottom:1px dotted black;
}
sup{
vertical-align:super;
}
sub{
vertical-align:sub;
}
blockquote{
padding-left:2.2em;
}
hr{
display:none; /* We will re-reset it later for content */
}
:lang(af),:lang(nl),:lang(pl){
quotes:'\201E' '\201D' '\201A' '\2019';
}
:lang(bg),:lang(cs),:lang(de),:lang(is),:lang(lt),:lang(sk),:lang(sr),:lang(ro){
quotes:'\201E' '\201C' '\201A' '\2018';
}
:lang(da),:lang(hr){
quotes:'\00BB' '\00AB' '\203A' '\2039';
}
:lang(el),:lang(es),:lang(sq),:lang(tr){
quotes:'\00AB' '\00BB' '\2039' '\203A';
}
:lang(en-GB){
quotes:'\2018' '\2019' '\201C' '\201D';
}
:lang(fi),:lang(sv){
quotes:'\201D' '\201D' '\2019' '\2019';
}
:lang(fr){
quotes:'\ab\2005' '\2005\bb' '\2039\2005' '\2005\203a';
}
*[lang|='en'] q:before{
content:'\201C';
}
*[lang|='en'] q:after{
content:'\201D';
}
*[lang|='en'] q q:before{
content:'\2018';
}
*[lang|='en'] q q:after{
content:'\2019';
}
input,select,button{
cursor:pointer;
}
input[type='text'],input[type='password']{
cursor:text;
}
input[type='hidden']{
display:none;
}
/*_______________________________CONTENT */
h1{
font-size:1.6em;
line-height:1;
margin:1em 0 .5em;
}
h2{
font-size:1.5em;
line-height:1;
}
h3{
font-size:1.5em;
line-height:1;
margin:1.14em 0 .57em;
}

h4{
font-size:1.3em;
line-height:1;
margin:1.23em 0 .615em;
}
h5{
font-size:1.2em;
line-height:1;
margin:1.33em 0 .67em;
}
h6{
font-size:1em;
line-height:1;
margin:1.6em 0 .8em;
}
hr{
display:block;
background:black;
color:black;
width:100%;
height:1px;
border:none;
}
ul{
list-style:disc outside;
}
ol{
list-style:decimal outside;
}

hr,.content p,.content ul,.content ol,.content dl,.content pre, .content address,.content table,.content form{
margin:0;
}
p+p{
margin-top:0;
}
fieldset{
margin:1.6em 0;
padding:1.6em;
}
/* \*/
legend{
padding-left:.8em;
padding-right:.8em;
}
/* */
@media all and (min-width: 0px) /* for Opera 8 */{
legend{
 margin-bottom:0;
}
fieldset{
 margin-top:0;
}
[class^='content'] fieldset{
 margin-top:1.6em;
}
}
fieldset>*:first-child{
margin-top:0;
}
textarea,.content input[type='text']{
padding:0;
}
input{
padding:0;
}
select{
padding:0;
}
select[multiple]{
margin-bottom:0;
}
option{
padding:0;
}
button{
padding:0;
}
input[type='radio']{
position:relative;
bottom:0;
}
dt{
margin-top:0;
margin-bottom:0;
}
ul, ol{
margin-left:0;
}
caption,form div{
padding-bottom:0;
}
ul ul,content ol ul,.content ul ol,content ol ol{
margin-bottom:0;
}
/*_______________________________END */

 

3.ADIM İÇİN TIKLAYINIZ

Tarih: 27 Mart , 2012 Düzenleyen: suaritiminet