Anasayfa

Html & Css

Google anasayfa tasarımı PNG to CSS Ders 2
Facebookta Paylaş

Google anasayfa tasarımı PNG to CSS Ders 2

Daha önce Google anasayfa tasarımı PNG to CSS - Ders 1 konumuzda google anasayfa tasarımının PNG den html css 'e dökümü işlemine başlamıştık. Logo yerleşimi, PNG tasarımdan fireworks ile resimlerin alınması gibi bölümleri bu konuda detaylıca anlatmıştım. Şimdi ki konumuzda diğer konuda yarım kalan arama çubuğu, buton ve footer tasarımlarının eklenmesini anlatarak anasayfa tasarımını bitiriyor olacağız.

index.html dosyamızın son hali şöyleydi;

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/google.css" />
</head>
<body>
<div id="logo"></div>
</body>
</html>

google.css dosyamızın son hali ise şu şekilde idi;

body {margin:0;padding:0;background:#fff;}
a {text-decoration:none;}
img {border:none;}
#logo {width:275px;height:93px;background:url(../images/logo.png) no-repeat;margin:0 auto;display:block;margin-top:174px;}

Şimdi ilk olarak yapacağımız eklemeler yukarıdaki resimde de işaretlediğim üzere arama çubuğu ve butonlar.

Css dosyamıza arama çubuğu ve butonlar için gerekli eklemeleri yapalım.

#content {width:572px;margin:0 auto;}
.aramacubugu {width:572px;height:30px;border:1px solid #D8D8D8;margin-top:25px;outline-color: #156BEB;outline-width: 1px;padding: 0 10px;}

#butonlar {margin: 0 auto;width: 300px;margin-top: 15px;}
.btn {padding: 5px 10px;height:30px;border:1px solid #DBDBDB;font-family:Arial;font-size:12px;color:#000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.btn:hover {-moz-box-shadow:0px 1px 2px #888888;-webkit-box-shadow: 0px 1px 2px #888888;box-shadow:0px 1px 2px #888888;}

Kısaca açıklamak gerekirse, content isimli id ile arama çubuğu ve butonların sayfada ortalanmasını sağladık. 
aramacubugu isimli class ile arama çubuğuna ait özellikleri belirledik. Burada daha önce karşılaşmamış olabileceğiniz kod outline-color ve outline-width olabilir. Bu kodlar arama çubuğuna tıkladığımızda arama çubuğunu çevreleyen aktif olduğunu belirten bir çizgi çıkmasını ve bu çizginin kalınlığının 1px ,renginin mavi olmasını sağlamaktadır.
Sonrasında butonlar isimli bir id tanımlayarak butonların ortalanmasını sağladık. btn classı ile butonun stil özelliklerini belirledik ve :hover ile de buton üzerine mouse imleci ile geldiğimizde ne olacağını belirledik.

Şimdi yazdığımız bu css kodlarının sayfamızda etkin olabilmesi için gerekli olan kodları index.html 'e ekleyelim.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/google.css" />
</head>
<body>
<div id="logo"></div>
 
<div id="content">
<input type="text" class="aramacubugu"/>
 
<div id="butonlar">
<input type="submit" class="btn" Value="Google'da Ara"/>
<input type="submit" class="btn" Value="Kendimi Şanslı Hissediyorum"/>
</div>
</div>
 
</body>
</html>

Yukarıda da gösterdiğim şekli ile html kodlarımızı da ekledikten sonra anasayfada footer dışında genel yapıyı oluşturmuş olduk.
Footer için ise aşağıdaki kodları css dosyamıza ekliyoruz.

#footer {width: 100%;height: 40px;padding: 5px;position: fixed;bottom: 0;background:#f2f2f2;border-top:1px solid #e4e4e4;padding:0 20px;}
#footer a{float:left;font-family:Arial;font-size:12px;color:#666;float:left;margin-right:10px;line-height:40px;}
#footer a:hover{text-decoration:underline;}

ve son olarak index.html içerisine footer ile ilgili kodlarımızı yazıyoruz.

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/google.css" />
</head>
<body>
<div id="logo"></div>
 
<div id="content">
<input type="text" class="aramacubugu"/>
 
<div id="butonlar">
<input type="submit" class="btn" Value="Google'da Ara"/>
<input type="submit" class="btn" Value="Kendimi Şanslı Hissediyorum"/>
</div>
</div>
 
<div id="footer">
<a href="#">Reklam</a>
<a href="#">İşletme</a>
<a href="#">Hakkında</a>
</div>
 
</body>
</html>

Footer için olan kodlarımızı da yazdıktan sonra temel anlamıyla google anasayfasını PNG to CSS yapmış olduk.

11 Ocak 2014 12:36 Kategori :Html & Css3166
Sitene Ekle :
Yukarıdaki kodu sitenize ekleyerek bu konuyu sitenizde yayınlayabilirsiniz.