Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / HT M L5 / R esp o n si ve HT M L5
Responsive HTML5 Vatanay Özbeyli tarafından 14 Temmuz 2013 tarihinde yazıldı. ~ 2 Yorum + Değiştir
Günümüzde profesyonel tasarımlar artık WWW (World Wide Web) erişimine sahip tüm cihazlara uygun olarak hazırlanmakta. Bu liste ne yazık ki akıllı telefonlar ve tabletler ile bitmiyor. Her geçen gün farklı ekran boyutlarına sahip yeni cihazlar çıkmaya devam ediyor. Bu makalemizde taşınabilir cihazlara uyumlu HTML5 taslağı oluşturacağız.
Responsive Responsive‘i Türkçeleştirecek olursak hassas veya duyarlı kelimelerini kullanırdık. Bir tasarımın, küçük veya büyük ekran boyutlarına sahip cihazlarda da düzgün görünmesi, cihazların ekran boyutuna uyum sağlaması onu hassas ve duyarlı kılmakta. Gelişen teknoloji de web geliştiricilerini responsive tasarımlar üretmeye teşvik etmekte.
Neden HTML5? HTML5 ile web sayfalarının iskeleti basitleştirildi. Birçok kod tarihin tozlu sayfalarına kaldırılırken yenilikler de beraberinde geldi. Bu örneğimizde HTML5′in aşağıdaki elemanlarını kullanacağız. 1. <header> 2. <nav> 3. <article> 4. <footer>
Tasarım Artık tasarımımızı oluşturmaya başlayabiliriz. Sitemizi üstten aşağıya doğru
hazırlayalım.
İskelet Sayfamızın genel yapısını oluşturmakla başlayalım. 1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <head> <title>Adobewordpress.com ~ Responsive HTML5</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> Sayfa içeriği buraya gelecek. </body> </html>
CSS dosyamıza da body tanımlamamızı yapalım. Beraberinde Google Fonts üzerinden Carrois Gothic isimli yazı tipini de çekelim. 1 @import url(http://fonts.googleapis.com/css? family=Carrois+Gothic+SC); 2 3 4 5 6 7
body { margin: 0; color: #d2d2d2; font: 1.3em/1.6 'Carrois Gothic SC',sans-serif; }
Bu kodlarını kullanarak .html dosyamızı oluşturalım. Ayrıca yukarıda gördüğünüz gibi style.css isimli bir dosyayı HTML sayfamıza bağlattık. HTML dosyasının yanına style.css isimli CSS dosyamızı da oluşturalım. Aşağıdaki HTML kodlarının hepsi <body> içerisine, CSS kodları da style.css içine yerleştirilecek.
Çerçeveleyici : Wrapper Web sayfamızı en dıştan body çerçevelemekte. Body’nin içerisinde de oluşturacağımız wrapper bu işlemi yapacak. HTML Kodları 1 <div class="wrapper"></div> Şimdi wrapper için tasarımımızı atayalım. Sadece ortalama boyut belirtiyoruz. Ayrıca margin:auto kullanarak sayfanın ortasında durmasını sağlıyoruz. CSS Kodları 1 2 3 4
.wrapper { margin: auto; width: 90%; }
Header Şimdi sitemizin üst kısmını kapsayan header elemanımızı hazırlayacağız. Özel bir içerik eklemiyoruz, sadece logo için ayrı bir span tanımlıyoruz. HTML Kodları 1 2 3 4 5
<div class="wrapper"> <header> <span class="logo">sayfa açiklamasi</span> </header> </div>
CSS Kodları Üst kısmı biraz yuvarlamak için border-radius kullandık. 1 2 3 4 5 6 7
header{ background: #2a2a2a; text-align: center; border-radius:10px 10px 0 0; } .logo{width:100%; height:100px; line-height:100px; text-align:center;}
Nav Üst kısımdaki yatay menümüzü oluşturalım. HTML Kodları 1 <div class="wrapper"> 2 <header> 3 <span class="logo">sayfa açiklamasi</span>
4 5 6 7 8 9 10 11 12 13
<nav> <ul> <li>anasayfa</li> <li>dersler</li> <li>makaleler</li> <li>portfolio</li> <li>kontak</li> </nav> </header> </div>
CSS Kodları Navigasyon için list-style:none ile baştaki işaretleyicileri kaldırıyoruz. Ayrıca ul ve li tanımlamalarımızı da yapıyoruz. 1 2 3 4 5 6 7 8 9 10 11 12 13 14
nav {width:100%; background-color:#454545;} nav ul{list-style:none; display: inline-block;} nav ul li{ display: inline-block; text-decoration: none; padding: 0 .75em; border-right: 1px solid; font-size: .8em; line-height: 1rem; } nav ul li:last-child {border-right: none;}
Content Yanyana bulunan sidebar ve içerik alanlarını content classı atanmış bir div içine yerleştirelim ve taşmaları önlemek için overflow kullanalım. Aynı zamanda header alanındaki taşmaları da engelleyeceğiz. HTML Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14
<div class="wrapper"> <header> <span class="logo">sayfa açiklamasi</span> <nav> <ul> <li>anasayfa</li> <li>dersler</li> <li>makaleler</li> <li>portfolio</li> <li>kontak</li> </nav> </header> <div class="content"></div> </div>
CSS Kodları 1 .logo, 2 .content, 3 header{
4 overflow: hidden; 5 }
İçerik alanları Şimdi sırada icerik ve sidebar olarak isimlendirilen alanları eklemek var. Bu iki alanı da kolon kelimesiyle classlayarak ikisine özgün bir tasarım oluşturacağız. HTML Kodları 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<div class="wrapper"> <header> <span class="logo">sayfa açiklamasi</span> <nav> <ul> <li>anasayfa</li> <li>dersler</li> <li>makaleler</li> <li>portfolio</li> <li>kontak</li> </nav> </header> <div class="content"> <div class="icerik kolon"> <article>yazilar</article> </div> <div class="sidebar kolon"> sidebar </div> </div> <footer> footer </footer> </div>
CSS Kodları 1 2 3 4 5 6 7 8 9 10 11 12
.kolon { height: 240px; } .icerik { background: #5f5f5f; } .sidebar { display: none; background: #787878; }
Footer Footer için ise headera yakın bir tasarım oluşturacağız. HTML Kodları 1 <div class="wrapper">
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
<header> <span class="logo">sayfa açiklamasi</span> <nav> <ul> <li>anasayfa</li> <li>dersler</li> <li>makaleler</li> <li>portfolio</li> <li>kontak</li> </nav> </header> <div class="content"> <div class="icerik kolon"> <article>yazilar</article> </div> <div class="sidebar kolon"> sidebar </div> </div> <footer> footer </footer> </div>
CSS Kodları 1 footer, 2 .kolon {padding:2%;}
Mobil cihazlar Cep telefonları için en küçük genişliği 481 piksel olan, ve sol tarafta bulunan içeriğin boyutlandırmasını yapan bir CSS kodu ekleyelim. 1 2 3 4 5 6 7 8
@media only screen and (min-width: 481px) { .kolon {padding:2%; float: right; } .icerik { width: 97.872340425532%; } }
Tablet, masaüstü ve türevi cihazlar için CSS tanımlayalım. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
@media only screen and (min-width: 769px) { .logo { float: left; } nav { float: right; } .icerik { width: 72.595744680851%; } .sidebar { display: block; width: 19.404255319149%; } }
17 18 19 20 21 22
@media only screen and (min-width: 1024px) { .wrapper { width: 980px; } }
Kapanış Unutmayın ki bu örnek sadece temel anlamda hazırlanmıştır. Gelişen HTML ve CSS mobil cihazlara uyumlu tasarımlar oluşturmamızı kolaylaştırmakta. Yukarıdaki taslağın örneğinde, alanların üzerine gelindiğinde küçük renk geçişleri yapılmasını sağlayan bir adet CSS kodu daha kullanmıştık. Eğer ilginizi çekerse; 1 2 3 4 5 6 7 8 9 10 11 12 13
.logo:hover, nav:hover, .icerik:hover, .sidebar:hover, footer:hover{ position:relative; background-color:#aa484a; color:white; transition: background 1s; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; }
Benzer Konular: Sadece CSS ile Yatay Menü HTML ile Mavi Ekran Hatası CSS ile Etkileyici İnteraktif Logo HTML5 ile Tam Ekran (Full Screen) CSS ile 3D, Blur, Ateş, Buz, Neon, Asit, Alfa ve Anaglyph…
Yazı Kategorisi : HTML5 , Tasarım Unsurları
Anahtar Kelimeler : article , cep , content , CSS3 , duyarlı , footer , genişleyen , hassas , header , html , html5 , mobil , nav , responsive , tablet , telefon , uyumlu , wrapper , www