OZD TASARIM » css

15+ Ücretsiz ve profesyonel XHtml/CSS Template

Ozd — Thu, 21 Oct 2010 07:28:34 +0000

Çoğu zaman hazır website template’lerden uzak dursak da bazen o kadar şık ve profesyonel işler çıkarıyorlar ki “bir gün mutlaka işime yarayabilir” düşüncesiyle arşivime kaydediyorum. Bu yazıda paylaştığım 15+ website template de bu sınıfa üst sıralardan girecek güzel ve profesyonel hazırlanmış. XHTML ve CSS yapısı, tipografi düzeni, renk yelpazesi, kategori çeşitliliği gibi bir çok sebepten, web tasarımcılar bu hazır site şablonlarını arşivine katmalı bence. Yeni başlayan web tasarımcıların işine çok yarayacağını düşünüyorum.

Web tasarımcıların haricinde, ücretsiz websitesi yaptırmak isteyenler de birazcık Html bilgisi ile içeriğini kendilerine göre düzenleyerek, otomobil, motorsiklet, bilişim, teknoloji, otel, evcil hayvan, yılbaşı, moda, müzik ve mimarlık gibi çeşitli sınıflarda istedikleri hazır siteye sahip olabilirler.

15+ ücretsiz ve profesyonel XHTML/CSS template’i resimlerin üstüne tıklayarak indirebilirsiniz.

IT World

High Technologies

Hotel Five Star

IT Technologies

Speed Racing

Pets Love

Motor Club

Whirlpool

Christmas

Real Estate

Communications

Magic Of Beauty

Interior Design

Architecture

Feel The Music

Stylish Retro

Ücretsiz 10+ Kurumsal CSS & XHTML hazır site şablonları

Ozd — Sat, 14 Aug 2010 19:42:26 +0000

Her ne kadar hazır site şablonu kullanmak istemesek de, zaman zaman ihtiyacı olan web tasarımcılar veya geçici olarak kullanmak isteyen müşteriler çıkabiliyor. En çok tercih edileceğini tahmin ettiğim kurumsal projeler için 10+ CSS & XHTML hazır site şablonlarını bir araya getirdim. Şablonların seçiminde özellikle titiz davrandım. Hazır tasarım kullanmak istemeseniz de kurumsal projelerinizde tipografi yapısını ve CSS çatısını kullanabileceğiniz şablonlar olmasına özen gösterdim. Bazılarında Blog sayfa tasarımları bile hazır. WordPress sitenize tema olarak da giydirebilirsiniz. Aşağıdaki başlıklardan ve resimlerden şablonlara giderek, önizlemesine bakabilir ve ücretsiz olarak indirebilirsiniz.

Internet Encyclopedia

Distinctive

Prestigious

Lawyer&Attorney

237 Extreme

Darkness

BizGroup

Mondays

Nova Studio

Lawyer Marketing

Aurelius

YIW Minimal

Sadece CSS3 ile sayfa çevirme efekti

Ozd — Sat, 19 Jun 2010 17:52:49 +0000

E-dergilerle birlikte web sitelerinde artık sıkça rastlanan sayfa çevirme efektini her halde aramızda görmeyen kalmamıştır. Her site kullanıcısını ilk görüşte etkileyen bu efekti hazırlamak için geçmişte Flash kullanmak zorundaydık. Oldukça zahmetli ve zaman alan bir çalışmaydı. Jquery‘nin yaygınlaşmasıyla birlikte bunun gibi hareketli efektler için Flash zahmetinden kurtulduk ve basit bir javascript koduyla zaman kaybetmeden bir çok efekti oluşturabiliyoruz artık. Şimdilerde ise CSS 3 ile tanışma sürecindeyiz ve tek başına neler yapabildiğini gösteren oldukça etkileyici örnekler yayınlanıyor internette. (CSS 3′ün 5 temel yeteneği başlıklı bir makale ile de CSS 3 ile gelen yeniliklere değinmiştim) İşte bu örneklerden bir tanesi de sayfa çevirme efekti. Roman Cortes isimli bir tasarımcı arkadaşımız hiç Javascript ya da Flash kullanmadan sadece CSS 3 ile bu efekti yapmayı başarmış.

Şimdilik tabiki sadece webkit tarayıcılarında (Google Chrome ve Safari) çalışıyor. Yine de CSS 3′ü neden öğrenmemiz gerektiğine çok güzel bir örnek olmuş. Gelelim efektin yapılışına…

Biraz CSS3 ve biraz da Html…Efektimiz hazır.

Gerçekten de öyle…Başka hiç bir şeye gerek yok. CSS 3′ün gradient, transform ve transition gibi yeni özelliklerinden oluşan özellikleri ile Html kodları aşağıda yer alıyor. Kendi projenizde kullanmak istiyorsanız sadece kopyalayın, yapıştırın ve kendinize göre düzenleyin. Tabiki bu yapıyı birebir kullanacaksanız Roman Cortes’i bu linkte yer alan yorum bölümünden haberdar etmeniz iyi olur.

CSS Yapısı

body
{
padding: 0;
margin: 0;
}
#all
{
width: 680px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
#page-flip
{
background-image: url(pagebg.jpg);
position: absolute;
padding: 40px 40px 40px 340px;
width: 300px;
height: 400px;
overflow: hidden;
}
#r1
{
position: absolute;
z-index: 2;
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
}
#p1
{
width: 1285px;
height: 1388px;
overflow: hidden;
}

#p1 > div
{
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1030px, 500px) rotate(32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
width: 285px;
height: 388px;
background-image: url(page1.jpg);
}
#p1 > div > div
{
width: 10px;
height: 388px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
}

#p2 > div
{
width: 285px;
height: 388px;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
position: absolute;
z-index: 1;
background-image: url(page2.jpg);
}
#r3
{
-webkit-transform-origin: 1315px 500px;
-webkit-transform: translate(-1030px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 2;
}

#s3
{
-webkit-transform-origin: 70px 500px;
-webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
z-index: 1;
}
#page-flip:hover #s3
{
-webkit-transform-origin: 325px 500px;
-webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3
{
width: 25px;
height: 1000px;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .25)), to(rgba(0,0,0,0)));
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
overflow: hidden;
}
#page-flip:hover #sp3
{
width: 11px;
}
.s
{
width: 285px;
height: 388px;
position: absolute;
overflow: hidden;
z-index: 3;
}
#s2
{
-webkit-transform-origin: 45px 500px;
-webkit-transform: translate(240px, -500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
position: absolute;
}
#sp2
{
width: 15px;
height: 1000px;
background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0,0,0,0)));
overflow: hidden;
}
#s4
{
opacity: 1;
-webkit-transition-duration: 0.5s;
}
#page-flip:hover #s4
{
opacity: 0;
}
#page-flip:hover #s2
{
-webkit-transform-origin: 300px 500px;
-webkit-transform: translate(-15px, -500px) rotate(0deg);
}
#p3
{
width: 1285px;
height: 1388px;
overflow: hidden;
}
#p3 > div
{
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1255px, 500px) rotate(-32deg);
-webkit-transition-property: -webkit-transform, -webkit-transform-origin;
-webkit-transition-duration: 1s;
-webkit-box-shadow: 0 0 11px rgba(0, 0, 0, .5);
width: 285px;
height: 388px;
background-image: url(page3.jpg);
overflow: hidden;
}
#p3 > div > div
{
width: 9px;
height: 500px;
float: right;
background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0,0,0,.20)));
}

#page-flip:hover #r1
{
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div
{
-webkit-transform-origin: 285px 0;
-webkit-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3
{
-webkit-transform-origin: 1570px 500px;
-webkit-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div
{
-webkit-transform-origin: 0 0;
-webkit-transform: translate(1000px, 500px) rotate(0deg);
}
a
{
display: block;
position: absolute;
margin: -20000px 0 0 0;
padding: 1px;
z-index: 3;
-webkit-transition-property: margin;
-webkit-transition-duration: 0.01s;
}
#coke
{
width: 253px;
height: 158px;
}
a:hover
{
padding: 0;
border: 1px dotted #92C7C1;
}
#page-flip:hover #coke
{
-webkit-transition-delay: .8s;
margin: 33px 0 0 14px;
}
#meninas
{
width: 253px;
height: 167px;
}
#page-flip:hover #meninas
{
-webkit-transition-delay: .8s;
margin: 203px 0 0 14px;
}

Html Kodları

Uygulamayı test etmek için;

ÖNİZLEME

CSS 3′ün 5 temel yeteneği

Ozd — Sat, 29 May 2010 11:36:04 +0000

CSS 3.0 yayınlandığından beri, bir yandan onunla neler yapılabildiğini hayretler içinde izliyorum, bir yandan da öğrenmeye çalışıyorum. Border-radius, box-shadow ve text-shadow özelliklerini zaten artık her projemde kullanıyorum. Ancak bunlardan başka, bütün tarayıcılar tarafından desteklenmediği için henüz kullanmaya alışmadığımız (veya tercih etmediğimiz) sıradışı yetenekleri var. Sıradışı diyorum çünkü bir gün sadece CSS ile nesnelere yansıma verebileceğimiz aklıma bile gelmezdi. Artık yavaş yavaş CSS 3′ün 5 yeni özelliğine alışıp, CSS deneyimimizi bir kaç adım daha öteye taşımak iyi olacaktır. Çünkü yakın gelecekte, bu temel özellikleri sık sık kullanmak durumunda kalacağımıza eminim.

1) Gradient

CSS 3.0′ın bize sunduğu en güzel nimetlerden biri olan Gradient özelliğinin Linear Gradient ve Radial Gradient olmak üzere 2 farklı kullanımı var. Ve bu özellikleri DIV, SPAN, P gibi bütün HTML elementlerinde kullanabiliyorsunuz. Bu özellik sayesinde, hiç resim dosyası kullanmadan gradientli butonlar ve arkaplan görüntüleri yapmak artık mümkün oluyor. Böylece web sitelerinin yüklenme hızları da katbekat artıyor.

Şimdilik destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Linear Gradient

Firefox için kullanım şekli:

background-image: -moz-linear-gradient(top, #F00, #F60)

Webkit tarayıcıları için kullanım şekli:

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))

Radial Gradient

Firefox için kullanım şekli:

background-image: -moz-linear-gradient(top, #F00, #F60)

Webkit tarayıcıları için kullanım şekli:

background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))



Örnekler: http://css-tricks.com/examples/CSS3Gradient/

2) Açılı Döndürme

CSS 3′ün transform özelliği ile birlikte gelen yeteneklerinden biri de, bütün html elementlerini verilen bir açı değerine göre döndürmesi.

Destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+

Kullanım Şekli:

-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);

Örnekler: http://css3.bradshawenterprises.com/

3) Yansıma

Favorilerimden biri kesinlikle bu özellik. Yazılara ve DIV’lere yansıma özelliği vererek harikalar yaratabiliyorsunuz. Şimdilik sadece Chrome ve Safari tarafından destekleniyor. Umarım yakında Firefox tarafından da desteklenir.

Kullanım Şekli:

-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));

Örnek: http://jcargoo.110mb.com/cssreflection/

4) Yeniden Boyutlandırma

CSS 3′ün resize özelliği ile DIV’leri mouse ile tutup sürükleyerek yatay ve dikeyde boyutlandırabiliyoruz. Yani bir kutunun büyüklüğünü gerçek zamanlı olarak istediğimiz kadar değiştirebiliyoruz. Aşağıdaki örnekten ne demek istediğimi daha iyi anlayacaksınız. Bu özelliği de şimdilik sadece Chrome ve Safari destekliyor.

Kullanım Şekli:

overflow: hidden;
resize: both;

Örnekler: http://www.css3.info/preview/resize/

5) Kenar Çizgi Aralığı

CSS 3′ün outline-offset özelliği ile sahip olduğu bu yetenek de kutulara verdiğimiz çerçeve çizgisine aralık vermeye yarıyor. Yani kutunun kenar çizgisini belirlediğimiz bir değer kadar kenarlardan uzaklaştırabiliyoruz. Chrome veya Safari ile aşağıdaki örnekte ne demek istediğimi görebilirsiniz.

Kullanım Şekli:

outline: solid 1px #f00;
outline-offset: 5px;

Örnek: http://www.css3.info/preview/outline/

CSS ve HTML 5 Özellik Şemaları

Ozd — Tue, 18 May 2010 20:08:53 +0000

CSS’in zamanımın büyük bölümünü kapladığı şu dönemde, CSS ile ilgili daha fazla makale yayınlamak benim için “eve iş taşımak” gibi bir durum oluyor:) Ama her CSS&Html kodlayıcısının işine kesinlikle yarayacak olan bu özellik şemalarını (cheat sheet) paylaşmamak olmazdı. CSS 2.1 ve CSS 3.0‘ın en önemli özelliklerini ve alabilecekleri değerleri ve anahtar kelimeleri gösteren bu şemalar GoSquared tarafından hazırlandı ve Smashing Magazine tarafından geçtiğimiz günlerde yayınlandı. CSS kodlaması yaparken o an için aklınıza gelmeyen özellik ya da değerler olduğunda bu özellik şemalarının elinizin altında olmasını isteyebilirsiniz.

CSS 2.1 şemasında Font, Text, Margin, Padding, Border, Position, Background, List ve Media özellikleri ile aldığı değerler gösteriliyor. CSS 3′te ise tanıştığımız günden bu yana neredeyse her projemizde kullanmak istediğimiz yuvarlak köşe ve gölge özelliklerinin yanında Multiple Column, RGBa, Font Face, Box Resize, Outline ve Gradient özelliklerini aldığı değerlerle birlikte görebiliyorsunuz. Tabi ki CSS’in bütün özellikleri bu şemada bulunanlarla sınırlı değil. Ama bu şemaların asıl amacının, en çok kullanılan özellikleri bir araya getirerek web tasarımcılara kullanım kolaylığı sağlamak olduğunu düşünüyorum.

Her iki şemayı da aşağıdaki linklerden isterseniz resim dosyası şeklinde görüntüleyebilir isterseniz PDF formatında bilgisayarınıza indirebilirsiniz.

CSS 2.1 Özellik Şeması: Görüntüle

CSS 2.1 Özellik Şeması: İndir (PDF, 0.2 MB)

CSS 3.0 Özellik Şeması: Görüntüle

CSS 3.0 Özellik Şeması: İndir (PDF, 0.2 MB)

Html 5

CSS ile ilgilenip de Html 5′ten haberi olmayan bir web tasarımcı olduğunu hiç sanmıyorum. Henüz bütün tarayıcılar tarafından bütün özellikleri ile birlikte desteklenmese de, meraklıları olarak Safari, Chrome gibi yeni nesil tarayıcılarla Html 5 örneklerini incelemeye çoktan başladık bile. CSS 3 ve Html 5‘in birlikte kullanımıyla ortaya ne derece müthiş çalışmaların çıktığına hepimiz şahit oluyoruz. Eğer siz de Html 5 yazmaya başladıysanız ya da bir an önce başlamak istiyorsanız, Veign.com tarafından hazırlanan Html 5 özellik şeması sizin için rehber niteliğinde bir kaynak olacaktır.

Aynı şekilde bu şemayı da aşağıdaki linklerden resim dosyası şeklinde görüntüleyebilir ya da PDF formatında indirebilirsiniz.

Html 5 özellik şeması: Görüntüle (.gif, 1017×836px)

Html 5 özellik şeması: İndir (76 Kb)

Online CSS Grid Sistemleri

Ozd — Sat, 15 May 2010 13:27:27 +0000

Biz web tasarımcılar için CSS’in öneminden söz etmeye gerek yok herhalde. Artık hayatımızın büyük bir bölümünü CSS ve Html kodlama oluşturuyor. Profesyonel web tasarımcı olmanın yollarından birinin de CSS’te grid çalışmak olduğunu daha önce makalelerimde söylemiştim. Grid metodu ile CSS ve Html kodlamaya karar veren tasarımcılar için işinizi kolaylaştıracak 10 online CSS Grid oluşturma sistemlerini bir araya getirdim. Bu sistemlerle hızlı bir şekilde istediğiniz ölçülerde CSS taslakları oluşturabilirsiniz.

1) 960 Grid System

2) Grid System Generator

3) Grid Designer

4) Variable Grid System

5) CSS Layout Generator

6) Simple Grid System

7) BlueTrip CSS Framework

8 ) Blue Print

9) ZURB CSS Grid Builder

10) YUI 2 – Grids CSS

Kusursuz web tasarımının 6 yolu

Ozd — Sun, 09 May 2010 15:53:01 +0000

İyi bir tasarımla kusursuz bir tasarım arasındaki çizgi çok ta kalın sayılmaz aslında. Ancak birbirinden ayıran çok önemli ayrıntılar vardır. İyi bir tasarım için nelere dikkat etmemiz gerektiğini daha önceki makalelerde de bahsettiğim üzere bir çoğunuz artık biliyor. Bir çok müşteri için iyi seviyede tasarladığınız web siteleri çoğu zaman yeterli olsa da, gelecekte portfolyonuza iyiden de öte kusursuz web tasarımları eklemek istiyorsanız bu makalede söyleyeceklerime kulak kabartın. Hatta tasarımda mükemmelleşmenin yollarını ana başlıklar halinde bir kenara not alıp, tasarımlarınızı bu yönde geliştirmeniz doğru bir çalışma şekli olabilir. O halde lafı fazla uzatmadan web tasarımlarınızı kusursuz yapmanın 6 yolunu sıralayalım:

1. Gradient kullanımına dikkat edin

2. Beyaz alan kullanmaktan çekinmeyin

3. Grid çalışmalar yapın

4. Tipografinizi geliştirin

5. Navigasyon menü tasarımına özen gösterin

6. Kullanışlı ve düzenli bir footer tasarımı yapın

Yeri gelmişken yukarıdaki maddeleri not alıp, monitörünüzün bir köşesine iliştirdiyseniz şimdi açıklamalarına geçebiliriz. Şayet açıklamaları olmadan maddeler hiç bir anlam ifade etmez. Onlar sadece size ne yapacağınızı hatırlatmak için gerekecektir.

1. Gradient kullanımına dikkat edin

Web sitelerinde gradient kullanımı o kadar önemli ki aynı siteyi, kötü gradient kullanımı ile amatör, iyi gradient kullanımı ile profesyonel gösterebiliriz. Bu nedenle gradient kullanımı konusunda çok dikkatli davranmalıyız ve günümüzün tercih edilen gradient stillerine göz atmalıyız. Mükemmel bir web sitesinde gradientteki renkler arasında uçurum olmamalı, aralarında ince (zarif) ve yumuşak bir geçiş oluşturulmalı. Bu görünüm, sitenin daha pürüzsüz ve temiz görünmesini ve etkili bir hitap şekline sahip olmasını sağlar.

Gradient kullanımında Bokeh efekti

Bilmeyenler için, Bokeh kavramı daha çok fotoğrafçılıkta kullanılan ve görüntüde oluşan bulanık yuvarlak bölümler için verilen bir isim. Son zamanlarda web tasarımında özellikle arka plan resminde Bokeh efekti ile ışık oyunları yaratılıp oldukça şık bir gradient elde ediliyor. Aşağıdaki örnekte de görebileceğiniz gibi gradientteki doğru renk geçişleri ve Bokeh efektinin kullanımıyla mükemmel bir tasarım çıkmış ortaya.

Gradient, gölge ve dokunun birlikte kullanımı

Tasarımda gradient, gölge ve dokuyu birlikte kullanarak gerçekçi bir etki yaratmanız mümkün. Mükemmel website tasarımları için, gradient haricinde gölge ve doku kullanımında da aynı özeni göstermeniz gerekiyor. Aşağıdaki örnek bunun en doğru örneklerinden. Resmin üzerine tıklayarak sitesinden ayrıntılara göz atabilirsiniz.

2. Beyaz alan kullanmaktan çekinmeyin

Her fırsatta belirtmeye özen gösterdiğim konulardan biri de sitedeki beyaz alan kullanımı. Daha önce yayınladığım bazı makalelerde de bahsetmiştim. Burada tekrar karşımıza çıkıyor. Öncelikle beyaz alanın tam sözlük anlamı olarak algılanmasının web tasarımdan yanlış bir kullanıma yol açabileceğini belirteyim. Web tasarımında bahsettiğimiz beyaz alan kullanımının, web elementleri arasındaki boşluğun doğru kullanılmasıyla tasarımı sıkıştırmamak ve rahat bir nefes aldırmak olduğunu söyleyebilirim. Sanırım bir çok tasarımcının en büyük sorunlarından biri de bu. Her alana “burası da boş kalmasın” mantığı ile bir element yerleştirmeye kalkıp, arayüzü tıka basa doldurmak kesinlikle yanlış bir düşünce. Bırakın boş kalsın. Tasarımda iyi bir kompozisyon yaratmak için gerekli olan anahtar kelime kesinlikle beyaz alandır. Bunun en doğru örneklerini de aşağıda görebilirsiniz.

3. Grid çalışmalar yapın

Grid’in tam olarak Türkçe karşılığı nedir bilmiyorum ama web tasarımda literatüre Grid kelimesi olarak çoktan geçti bile. Özellikle gazetelerde ve artık bloglarda da sıkça karşılaştığımız grid çalışmalar, belli eksenler ve ölçüler temel alınarak bloklar halinde yapılan tasarımlara deniyor. Yani tasarımda yer alacak Header, footer, navigasyon menü ve içerikte yer alacak her bölümün yerini ölçülü bir şekilde belirleyerek tasarımın daha düzgün bir şekilde oluşmasını sağlayarak sitenizi kusursuz bir hale getirebilirsiniz.Tasarımlarınızda bütün elementleri düzgün yerleştirmenin en doğru yolu Grid çalışmaktır. Bunu her tasarımınızda alışkanlık haline getirmeye çalışın.

Grid çalışmalar için The 960 Grid veya BluePrint gibi en popüler hazır CSS çatılarından da faydalanabilirsiniz.

4. Tipografinizi geliştirin

Tipografi, iyi tasarımcılar için bir saplantı haline gelmiş sanat dalıdır. Web sitenizin kalitesini bir basamak daha yükseltmek için mutlaka web tasarımında tipografi kullanımına dikkat etmeniz ve kendinizi bu konuda geliştirmeniz gerekiyor. Bir çok web tasarımcı, tipografiyi yazı tipi seçimi ve başlıkları daha büyük yazmaktan ibaret sanıyor. Bunlar tabiki de önemli noktalardır ancak tipografinin asıl amacı, hiyerarşik yapıya uygun bir yazı düzeni ile algıyı artırmak, odak noktalarını belirlemek ve okunaklılığı kolaylaştırmaktır. Tipografinizi geliştirmenizde işinize çok yarar bir kitap olan Emre Becer – Modern Sanat ve Yeni Tipografi kitabını şiddetle tavsiye ederim. Bu kitaptan tipografiyi öğrenip web tasarımına doğru bir şekilde uyarladığınız zaman ortaya kusursuz siteler çıkarabilirsiniz. Ayrıca web tasarımında tipografi için CSS bilgilerinizi de gözden geçirmenizde fayda var. Web tasarımında doğru tipografi kullanımı ile buradaki yazı dizisinin çok işinize yarayacağına eminim.

5. Navigasyon menü tasarımına özen gösterin

Sitenin ana menü tasarımı, website için çok önemlidir. Eğer site kullanıcıları aradıkları şeyi menüye bir bakışta bulamazlarsa, muhtemelen başka sitelere gideceklerdir. Bu nedenle navigasyon menü tasarımında sadeliğe, kullanış kolaylığına ve düzenli görünüme çok önem vermelisiniz. Menüde bir diğer dikkat etmeniz gereken nokta ise üstüne gelince alacağı görüntüyü (hover efekti) ihmal etmemenizdir. Bu efekt, menünün çok daha etkili kullanımını sağlar. Aşağıdaki sitede iyi tasarlanmış bir navigasyon menü örneği görebilirsiniz.

6. Kullanışlı ve düzenli bir footer tasarımı yapın

Daha önceleri çok ta önemsenmeyen Footer bölümü, özellikle de blogların yaygınlaşmasıyla önemli bir bölüm halini aldı. Ve dolayısıyla kusursuz bir web sitesi tasarlamanın önemli maddelerinden biri oluverdi. Bu nedenle artık Footer’ın sadece copyright cümlesinin yazıldığı bir bölüm olmadığını göz önünde bulundurarak, tasarımın geneline verdiğiniz önemin aynısını Footer bölümüne de vermeniz gerekiyor. Hem ayrıca Google’ın siteleri indekslerken Footer’da yer alan linklere çok önem vermesi de bu bölümün artık ne kadar önemli olduğunun bir göstergesi.

Tasarım yaparken bu maddelere dikkat ettiğinizde web sitelerinizi bir basamak daha öteye taşıyıp, “iyi”den “kusursuz”a yükseltebilirsiniz. Peki sizce kusursuz bir web tasarımı için başka hangi unsurlar önemlidir? Yorumlarınızı bekliyorum.

Html kodlamasında işinize yarayacak ipuçları

Ozd — Sat, 20 Mar 2010 19:31:53 +0000

Html kodlamasını kendisi yapan web tasarımcı arkadaşlar, genellikle bunun için kullandıkları html editörün araçları ile kodlamanın kendiliğinden oluşmasını sağlayarak html yapısını oluştururlar. Ben bunu pek tercih etmiyorum. Elbette bir editör (Dreamweaver) kullanıyorum ama bütün html kodlamasını sıfırdan tek tek, karakter karakter yazmayı tercih ediyorum. Diğer metoda göre daha fazla zamanımı alıyordur belki ama oluşabilecek hatalar ve daha sonra yapacağım düzenlemelerde html yapısına hakim olabilmek için, daha da önemlisi gereksiz satırlarla html’in şişmesini önlemek için bence siz de bu yolu kullanmalısınız. Hem hazır araçlar bana kalırsa html bilginizi köreltebilir.

Bu makalede html kodlamasını yaparken dikkat etmemiz gereken ipuçlarından bahsetmek istiyorum. Bu ipuçlarını dikkate alarak, html yapısının daha düzenli, daha sade ve dolayısıyla daha hızlı olmasını sağlayabilirsiniz. İpuçlarına geçmeden, daha önce yayınladığım Html kodlarınız düzenli mi? başlıklı makalemi okuyabilirsiniz. Şimdi gelelim bahsettiğimiz ipuçlarına…

1) CSS Sıfırlama Kullanın

Html ve CSS kodlamasını oluşturmaya başlamadan önce mutlaka aşağıdaki CSS sıfırlama satırlarını CSS dosyasının en başına ekleyin. Böylece bütün tarayıcıların, css değerlerini aynı yorumlamasını sağyalabilirsiniz ve her tarayıcı için ayrı ayrı düzenleme yapma zahmetinden kurtulursunuz. Özellikle CSS kullanmaya yeni başlayanların çok işine yarayacak, en basit çözüm yolu CSS sıfırlamadır.

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

2) @import kullanmayın

CSS dosyaları @import komutu ile de html sayfasına eklenebilir. Hatta birden bir html sayfasına birden fazla css dosyası ekleyeceğiniz zaman daha kullanışlı da olabilir. Ancak CSS dosyasını çağırırken daha yavaş çalışan bir komut olduğu için @import kullanmayı tercih etmemenizi tavsiye ederim. Onun yerine stylesheets şeklinde ekleyerek CSS dosyalarınızın okunmasını hızlandırabilirsiniz.

Yani;