Posts Tagged "css"

15+ Ücretsiz ve profesyonel XHtml/CSS Template

21 Eki 2010 tarihinde eklendi. Blog | 8 yorum

15+ Ücretsiz ve profesyonel XHtml/CSS Template

Ç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.

Devamını Oku

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

14 Ağu 2010 tarihinde eklendi. Blog | 6 yorum

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

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.

Devamını Oku

Sadece CSS3 ile sayfa çevirme efekti

19 Haz 2010 tarihinde eklendi. Blog | 1 yorum

Sadece CSS3 ile sayfa çevirme efekti

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ı

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
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ı

1
2
3
4
5
6
7
<div id="all">
<div id="page-flip">
            <a id="coke" title="Pure CSS Coke Can" href="http://www.romancortes.com/blog/pure-css-coke-can/"></a>
            <a id="meninas" title="CSS 3D Meninas" href="http://www.romancortes.com/blog/css-3d-meninas/"></a></div>
</div>

Uygulamayı test etmek için;

ÖNİZLEME

Devamını Oku

CSS 3′ün 5 temel yeteneği

29 May 2010 tarihinde eklendi. Blog | 1 yorum

CSS 3′ün 5 temel yeteneği

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:

1
2
3
background-image: -moz-linear-gradient(top, #F00, #F60)
<img class="size-full wp-image-3522 alignnone" title="css-3-linear-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg" alt="" width="200" height="150" />

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

1
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:

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

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

1
2
3
4
5
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))
<img class="size-full wp-image-3525 alignnone" title="css-3-radial-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg" alt="" width="200" height="150" />
<strong>Örnekler:</strong> <a href="http://css-tricks.com/examples/CSS3Gradient/">http://css-tricks.com/examples/CSS3Gradient/</a>

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:

1
2
3
4
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
<img class="alignnone size-full wp-image-3526" title="css-3-transform" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-transform.jpg" alt="" width="234" height="197" />

Ö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:

1
2
3
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
<a href="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg"><img class="alignnone size-full wp-image-3527" title="css-3-reflection" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg" alt="" width="232" height="188" /></a>

Ö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:

1
2
3
4
overflow: hidden;
resize: both;
<img class="alignnone size-full wp-image-3528" title="css-3-resize" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-resize.jpg" alt="" width="223" height="136" />

Ö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:

1
2
3
4
5
6
outline: solid 1px #f00;
outline-offset: 5px;
<img class="alignnone size-full wp-image-3530" title="css-3-outline-offset" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg" alt="" width="225" height="167" />
<strong>
</strong>

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

Devamını Oku

CSS ve HTML 5 Özellik Şemaları

18 May 2010 tarihinde eklendi. Blog | 1 yorum

CSS ve HTML 5 Özellik Şemaları

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)

Devamını Oku

Online CSS Grid Sistemleri

15 May 2010 tarihinde eklendi. Blog | 1 yorum

Online CSS Grid Sistemleri

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

Devamını Oku

Kusursuz web tasarımının 6 yolu

9 May 2010 tarihinde eklendi. Blog | 1 yorum

Kusursuz web tasarımının 6 yolu

İ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.

Devamını Oku

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

20 Mar 2010 tarihinde eklendi. Blog | 0 yorum

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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;

1
2
3
4
<style type="text/css>
@import url('a.css');
@import url('b.css');
</style>

kullanmak yerine,

1
2
<link rel='stylesheet' type='text/css' href='a.css'>
<link rel='stylesheet' type='text/css' href='proxy.css'>

şeklinde yazmanızı tavsiye ederim.

Bu konuda, CSS dosyalarının yüklenme hızlarını her iki metodla birlikte test ederek elde edilen sonuçları bu adresten inceleyebilirsiniz.

3) Javascript’i sayfanın en altına ekleyin

Bir alışkanlıktır gidiyor. 90′ların sonunda kullanmaya başladığımız javascriptleri nedense çoğunlukla <head>…</head> tag’leri arasına yerleştiriyoruz.  Bu kullanım şekli, sayfa açılırken önce javascriptin yüklenmeye başlamasıyla, sayfanın açılmasını bariz bir şekilde yavaşlatıyor. Tarayıcıların web sitelerinizi daha hızlı açmasını istiyorsanız, alışkanlıktan kurtulup javascript satırlarını sayfanın en altına </body> ‘nin hemen öncesine eklemeni tavsiye ediyorum. Böylece önce site içeriği daha sonra da javascript yüklenecektir.

1
2
...
<script src="jquery.js?ver=1.3.2" type="text/javascript"><!--mce:0--></script>

4) CSS stillerinizi Html olarak yazmayın

Sayfanın CSS değerlerini attribute yani özellik şeklinde Html’e ekleyerek CSS ve Html’i içiçe kullanmak, Html yapısını düzensiz ve kirli gösterir. Aşağıdaki kullanım şekli bu düzensiz ve karışık yapıya örnektir.

1
<a style="background: #069; padding: 3px; font-weight: bold; color: #fff;" href="http://wwwozdtasarim.com">OZD Tasarım</a>

CSS değerlerini bu şekilde yazmak bazı durumlar için kullanışlı olsa da çoğu zaman karışık bir görünüme yol açıyor. Bu nedenle ben de tercih etmiyorum. CSS dosyasını,

1
<link rel='stylesheet' type='text/css' href='style.css'>

şeklinde sayfanıza ekleyin ve böylece Html yapısında en sade ve düzenli görünümü elde edebilirsiniz.

Devamını Oku

CSS3 & Jquery Uygulamaları

11 Mar 2010 tarihinde eklendi. Blog | 5 yorum

CSS3 & Jquery Uygulamaları

Her geçen gün CSS 3 ve Jquery’nin kullanımı yaygınlaşıyor ve ikisinin birlikte kullanımıyla, flash (ve actionscript) ile uğraşmadan yaratıcılığın sınırlarını zorlayan şahane uygulamalara rastlıyorum. Yapılan çalışmaları gördükçe CSS’in geleceğini iyice merak etmeye başladım şahsen.Jquery de aynı şekilde Javascript’in animasyon ve görsel efekt konusunda gelebileceği en iyi yerde şu an.

“Bunu kesinlikle web sitemde kullanmalıyım” dediğim ve  sizin de mutlaka beğeneceğinizi düşündüğüm tam 10 adet  CSS3 & Jquery çalışmasını bir araya getirdim. Özellikle düzenli olarak takip ettiğim Tympanus.net bu konuda etkileyici örnekler sunmaya ve ücretsiz paylaşıma açmaya devam ediyor. Ben de bu makaleyi hazırlarken  Tympanus’tan faydalandım.

Bu uygulamaları kullanmak için dosyaları indirip, javascript ve css dosyası ile birlikte html sayfasındaki ilgili yapıyı kendi sayfanıza ekleyin. Daha ayrıntılı bilgi için resimlere tıklayarak istediğiniz uygulamanın orijinal sayfasına gidebilir ve ingilizce açıklamalardan faydalanabilirsiniz. Ayrıca yine hatırlatmakta fayda var: Bu uygulamaların bir çoğu Internet Explorer’da çalışmıyor. Bütün özellikleri ile birlikte görüntülemek için Safari’yi tercih edin.

Kayarak açılan buton

Photoshop.com‘da Flash kullanılarak yapılan bir butondan etkilenerek hazırlanmış sevimli bir uygulama. Ve hiç imaj dosyası kullanmadan sadece CSS 3 ile şekil verilip Jquery ile de hareketlendirilerek hazırlanmış.

Demo | İndir

Kayarak ortaya çıkan nagivasyon menü

Menüdeki butonların üstüne gelindiğinde kayarak ortaya çıkan butonlarda gidilecek sayfayla ilgili bir de açıklama yer alıyor. Menünün siyah-beyaz olması da ayrı bir güzellik katmış.

Demo | İndir

Grunge tarzı açılı sayfa ve kayan menü

CSS 3′ün transform özelliği ile sayfanın ve menünün belli bir açıda görünmesi sağlanarak hazırlanmış konsept bir çalışma. Butonlar üstüne gelindiğinde farklı açılarda kayarak ortaya çıkıyor.

Demo | İndir

Yeniden boyutlandırılabilen menü

Bazı durumlarda navigasyon menünüzü bulunduğu alana göre kısaltmak ya da uzatmak isteyebilirsiniz. Bunu, CSS 3 ve biraz da Jquery ile hazırlanmış bu çalışmayı kullanarak sağlayabilirsiniz.

Demo | İndir

Kayarak ortaya çıkan navigasyon menü

Üstüne gelindiğinde ikon ile birlikte ortaya çıkan butonlardan oluşan çok güzel bir navigasyon.

Demo | İndir

Gündüz & Gece Animasyonu

Gündüzden geceye dönüşümü animasyon şeklinde gösteren, ağırlıklı olarak Jquery ile hazırlanmış oldukça yaratıcı ve güzel bir çalışma.

Demo | İndir

Reklam Panosu Şeklinde Resim Galerisi

Reklam panosunda hareketli değişen resimlerden oluşan çok yaratıcı bir resim galerisi.

Demo | İndir

Kayarak gelen mesaj penceresi

Artık neredeyse her sitede kullanılan mesaj pencerelerine Jquery ile hareket vererek, bu örnekteki gibi kayarak gelmesini sağlayabilirsiniz.

Demo | İndir

Foto galerileri için mouse over efekti

Özellikle foto galerilerinizde kullanabileceğiniz Jquery ve CSS 3 ile yapılmış çok şık bir efekt. Demoda resimlerin üstüne gelince oluşan efekti görebilirsiniz.

Demo | İndir

Gerçek zamanlı değiştirilebilen stiller

Bu uygulama ile sayfanızın görünümünü gerçek zamanlı olarak değiştirebilirsiniz. Demodaki style menüsü ile ne demek istediğimi uygulamalı olarak görebilirsiniz.

Demo | İndir

Devamını Oku

Html kodlarınız düzenli mi?

2 Mar 2010 tarihinde eklendi. Blog | 1 yorum

Html kodlarınız düzenli mi?

Güzel bir web sitesi, tasarımcısı için her zaman övünç kaynağıdır. Ziyaretçiler sitenize girdiğinde, tasarımınızın ne kadar güzel olduğu ile ilgili konuşurlar. Peki kod yapısının (Html ve CSS) güzelliği hakkında konuştuklarını hiç duydunuz mu?

Normal kullanıcılar html kodlarınızı görmezler çünkü önemsemezler. Onları daha çok dış görünüşü ilgilendirir. Tasarımcılar da bunu bildiğinden kodlarının düzgün görünüp görünmemesinin çok da önemli olmadığını düşünürler. Hal böyle olunca internette düzenli görünen html kodlarına sahip sitelerle karşılaşmak neredeyse imkansız oldu.  Ama aslında düzenli bir kod yapısı sanıldığından daha önemlidir.  Bir web sitesi, dizaynı kadar kod yapısı ile de güzel bir görünüme sahip olmalıdır. Aksi takdirde dışarıdan çok  güzel görünen ama arka tarafında mutfağı dağınık ve pis olan lüks bir restoran benzetmesi yapmak mümkündür.

Kodların görünümü neden bu kadar önemli?

Karmakarışık kod yapısı, düzgün görünen kod yapısı ile aynı şekilde iş görür aslında. O halde kod yapısının görünümünü neden önemsemeliyiz? Maddeler halinde görelim:

Daha kolay güncelleme imkanı verir

Düzenli bir kod yapısı, gelecekte değişiklik yapacağınız zaman elementleri ararken size kolaylık sağlar ve zaman kaybının önüne geçer.

Daha az yer kaplar

Bu her tasarımcı tarafından bilinen ama nedense çok da önemsenmeyen bir gerçek. Düzenli kodlar, karışık kodlara göre daha az yer kaplar ve böylece yükleme işi daha hızlı gerçekleşir.

Daha profesyonel görünmenizi sağlar

Kendinizi web sitesi yaptırmak isteyen büyük bir şirketin, site işlerinden az çok anlayan reklam ve pazarlama müdürünün yerine koyun. Web sitelerini karmakarışık bir kodlama ile hazırlayan bir web tasarımcıya mı para ödersiniz, yoksa sayfaların kodlarına da en az tasarım kadar önem veren bir web tasarımcıya mı? Hangisi sizin gözünüzde daha profesyonel görünür? Düzenli bir kod yapısına sahip olarak web tasarımcı rakiplerinizin bir adım önüne geçebilirsiniz. Hem de oldukça büyük bir adım…

Hataları en aza indirir

Kodlarınızı düzenli bir görünümle yazdığınızda, açtığınız tagleri kapatmayı unutma ya da yanlış tag ile kapatma ihtimaliniz çok azdır. Hata yapsanız dahi yaptığınız hataları çok kolay görebilirsiniz.

CSS’in Düzenlenmesi

Web sitenizin CSS’ini düzenlemenin bir çok yolu var. Tabiki güzellik göreceli kavramdır ve benim için daha düzgün görünen bir yapı sizin için öyle olmayabilir. Bir kaç farklı deneme ile gözünüze en düzgün görünen halini bulabilirsiniz.

Tek satır halinde yazın

CSS özelliklerini tek satır halinde yazmak hem CSS dosyanızın daha az yer kaplamasını sağlar hem de aradığınız classları ve değerleri daha kolay bulabilirsiniz.

Örnek olarak;

div {
background: #FFF;
font-style: italic;
font-size: 18px;
margin: 20px;
padding: 10px;
font-weight: bold;
}

şeklinde yazmak yerine,

div {background: #FFF; font-style: italic; font-size: 18px; margin: 20px;}

şeklinde yazın.

Elementleri gruplandırın

Elementleri ve çocuk elementleri aşağıdaki gibi gruplandırarak yazarsanız, daha sonra aradığınızı bulmakta zorlanmazsınız. Hem de düzgün bir görünüm sağlamış olursunuz.

div.element {}
div.element a {}
div.element ul {}
div.element .class p {}
div.other {}
div.other a {}
div.other p.class {}

Bölümlere ayırın

CSS’inizi Header, Footer, Main Page gibi uyarı başlıkları ile bölümlere ayırdığınızda hangi class’ın hangi bölümde kullanıldığını bulmanız açısından kolaylık sağlamış olursunuz.

<!– HEADER –>

div {background: #FFF; font-style: italic; font-size: 18px; margin: 20px;}

<!– HEADER BİTTİ–>

Anlamlı isimler verin

CSS class’larına ve elementlere isim tanımlarken anlamlı isimler vermeye çalışın. Html yapısında background resminizin adını bg.jpg yaptığınız gibi logonuzun class ismini de .logo koyabilirsiniz. h2.altbaslik, div.header, p.aciklama şeklinde örnekler çoğaltılabilir.

Kısaltma kullanın

Background, font, padding, margin ve border gibi özellikleri yazarken bütün değerlerini ayrı ayrı atamak yerine aşağıdaki örnek gibi kısaltarak yazın. Böylelikle CSS yapınız hem daha düzgün görünür hem de daha az yer kaplar.

div { padding-left: 20px; padding-right: 30px;  padding-top: 50px; padding-bottom: 10px; }

yerine,

div { padding: 50px 30px 10px 20px; }

şeklinde yazın.

Html’in Düzenlenmesi

Sitenizin htmlini düzenlemek gerçekten çok kolay ve hızlıdır. İşte bir kaç püf noktası:

Hiyerarşik dizilim

Resimdeki örnekten ne demek istediğimi anladınız sanırım. Div’leri ve diğer bütün elementleri, içinde ve dışında yer alan elementlere göre merdiven basamakları şeklinde dizerseniz bir bakışta hangi element hangisinin içinde, hangisinin dışında olduğunu kolayca anlayabilirsiniz.

Satır Boşluğu

Kapsayıcı esas elementlerden oluşan bölümler arasına birer satır boşluk bırakarak ana bölümleri birbirlerinden ayırarak html yapısını daha anlaşılabilir yapabilirsiniz. Tabi boşlukları abartmamakta fayda var. Sadece header, main page ve footer gibi ana bölümleri ayırsak yeterli olur.

Anlamlı İsimler

Aynı CSS’te olduğu gibi Html’de de elementlere anlamlı isimler vermeniz, ileriki zamanlarda aradığınızı bulmanız için size kolaylık sağlayacaktır. Örnek olarak; background resminin adını image1234.jpg yerine bg.jpg yapmak, e-mail satırı olarak eklediğimiz input’un adını  “e-mail” yapmak vs…

Yanılıyor muyum?

Tabi ki kodlarınızı düzenlemek zorunda değilsiniz. Ne de olsa ziyaretçileriniz kod yapınıza bakmıyorlar değil mi? Yanılıyorsunuz… Portfolyonuzdaki sitelerin kodları iyi düzenlenmediği için potansiyel müşterilerinizi kaybediyor olabilirsiniz. Bence bir an önce sitelerinizin kodlarını düzenleseniz iyi olur.

Konu ile ilgili yorumlarınızı bekliyorum.

Devamını Oku
1 / 212