Bir çok modern tarayıcının desteklediği CSS3 ve HTML5 kullanmaya başlayanlar için kolaylık sağlayan bir framework.

HTML5

52Framework, çok hızlı bir HTML5 desteği sağlamaktadır. HTML5 daha temiz kodlama imkanıyla büyük avantajlar sunmaktadır. Başlıca desteklediği header, nav, section, article ve footer HTML5 taglarının yanı sıra daha bir çok tag desteklemektedir.

CSS3

Dünyadaki bir çok web tasarımcısı CSS3′ü uzun zamandır bekledikleri en çarpıpıcı şey olarak nitelendirmektedirler. CSS3 zaman açısından sizlere tarasım ve şablon bölümlemede büyük bir avantaj sunmaktadır. Ayrıca CSS3′ün yazı ve çerçevelere gölge verme, köşe yuvarlatma ve animasyon gibi daha bir çok özelliği bulunmaktadır.

Site – Download – Demo

Kaynak

CSS kodları bazen gereğinden fazla uzayabiliyor. En azından birkaçını kısa yazabilmemiz mümkün. Aşağıdaki bu kodları örnekleri ile görebilirsiniz.

Background

Normal yazım:

background-image:  url("bg.png");
background-position: top center;
background-repeat:  no-repeat;

Kısa yazım:

background:  url(bg.png) no-repeat top center;

Padding

Normal yazım:

#div  {
padding-top:30px;
padding-right:30px;
padding-bottom:30px;
padding-left:35px;
}

Kısa yazım:

#div {
padding:10px 20px 50px 45px;
}

top, right, bottom, left şeklinde yazılır. Saat yönünden aklınıza gelebilir.

Border

Normal yazım:

#div {
border-width: 1px;
border-style:  solid;
border-color: #f2f2f2;
}

Kısa yazım:

#div {
border: 1px solid #f2f2f2;
}

Font

Normal yazım:

#div  {
font-variant:large-caps;
font-weight:bold;
font-size:2em;
line-height:1.8em;
font-family:Helvetica,  serif;
}

Kısa yazım:

#div {
font:  small-caps bold 1em/1.4em 'Georgia' ,serif;
}

Margin

Normal yazım:

#div {
margin-top: 30px;
margin-right:  30px;
margin-bottom: 30px;
margin-left:  15px;
}

Kısa yazım:

#div {
margin:  30px 30px 30px 15px;
}

top, right, bottom, left şeklinde yazılır. Saat yönünden aklınıza gelebilir.

Outline

Normal yazım:

#div {
outline-width:  250px;
outline-style: dotted;
outline-color: color || #hex ||  (rgb / % || 0-199);
}

Kısa yazım:

#div  {
outline:3px dotted gray;
}

Color

Normal yazım:

#body {color:red;}
h1 {color:#00ff00;}
p  {color:rgb(0,0,255);}

Kısa yazım:

#body  {
h1 color:#fff;
p color:#fff;
}

renk rgb veya hexedecimal olarak girilebilir

List

Normal yazım:

#ul li  {
list-style-type:square;
list-style-position:inside;
list-style-image:url(list.png);
}

Kısa yazım:

#ul  li {
list-style:square inside url(list.png);
}

Kaynak(Source)

Kaynak

CSS & jQuery ile animasyonlu menü

Demo Yapılışı

Kaynak