bildirgec.org

layout hakkında tüm yazılar

CSS ustalarından 15 yararlı ipucu

Nodtveidt | 16 June 2009 10:47

Peter-Paul Koch: CSS Hack’lerinden uzak durun

Css hackleri genellikle sorunlarınızı çözebilir ancak bir süre sonra bşaka bir probleme yol açtığını göreceksiniz.
Browser versiyonları değiştikçe bu sorun su üstüne çıkacak ve o sarun için bir css hack’i yapmak zorunda kalıcaksınız.
Buna en iyi çözüm mümkün olabildiğince sade bir css kullanmaktır.
Sonuç olarak zaman ilerledikçe kullandığınız css hack ya hata oluşturacak yada işlevini yitirecektir

Jonathan Snook: Gereksiz seçicilerden uzak durun
Css dosyalarınızı mümkün olduğunca kısa ve dar tutmaya ve ürettiğiniz seçici sayısını indirebildiğiniz kadar az sayıya indirmeye çalışın.
Gerçekten özelleştirilmiş UL ve LI taglerine ihtiyacınız varmı ? Tasarımınız için özelleştirilmiş bir UL tag’i neden yetmesin ?
Sadece en yüksek level’daki taglerinizi özelleştirin ve alt tagleri kendi haline bırakın.

İlham Alınacak 50 Adet Kaynak

ewrencik | 26 May 2009 11:38

her tasarımcının tasarımına başlamadan önce bir ilhama gereksinimi vardır. bunu ilhamı geçmiş deneyimlerinden de alabilir; aklında birden bire de gelebilir ya da daha önce yapılmış tasarımlardan da ilham alınabilir. bu yazıda grafik tasarım, web tasarımı, arayüz tasarımı, kurumsal kimlik tasarımı, ambalaj tasarımı, logo tasarımı, tipografi tasarımı, motion graphic tasarımı kategorileri altında toplanmış toplam 50 adet ilham alınası kaynak bulacaksınız.

grafik tasarımında ilham alınabilecek kaynaklar

1. design flavr

design flavr
design flavr

2. muse

muse
muse

CodeIgniter’da Çoklu Şablon Kullanımı

fatigue | 17 April 2009 16:20

CodeIgniter’da şablon mantığı bir çok farklı çeşitte çalıştırılabilmektedir. Birden fazla şablonun bir araya getirilerek kullanıldığı basit bir şablon yönetmini anlatmak istiyorum.

Aşağıda kodlarını verdiğim Layout kütüphane dosyası ile sitemizin ekrana yansıyan görüntülerini modüler hale getirmemiz mümkün olacaktır. Bu dosyanın yeri application/libraries dizini altındadır ve ismi layout.php olarak kayıtlı olmalıdı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
if (!defined('BASEPATH')) exit('No direct script access allowed');
class Layout
{
var $obj;
var $layout;
function Layout($layout = "")
{
$this->obj =& get_instance();
$this->layout = $layout;
}
function setLayout($layout)
{
$this->layout = $layout;
}
function view($view, $data=null, $return=false)
{
$data['sablon_icerigi'] = $this->obj->load->view($view,$data,true);
if($return)
{
$output = $this->obj->load->view($this->layout,$data, true);
return $output;
}
else
{
$this->obj->load->view($this->layout,$data, false);
}
}
}

ExtJS ve ExtGWT JavaScript Kütüphaneleri

Redingot | 16 February 2009 19:08

JavaScript‘ler web sitelerin vazgeçilmez kaynaklarıdır. JS ile kullanıcı dostu, interaktif arayüzler oluşturulurken bu arayüzlerin tarayıcıdan (browser) tarayıcıya farklılık göstermesi, hem web site geliştiricisi hem sitenin ziyaretçisi açısından en istenilmeyen durumlardan bir tanesidir.

JavaScript’in gücü ve etkileyici yanları çeşitli açık kaynak kodlu JavaScript kütüphanesinin yazılmasını sağladı. Bu kütüphanelerden siteler için hazırlanmış, açık kaynak kodlu, görselliği etkileyici ve çeşitli tarayıcılarda testleri yapılmış ExtJS ve ExtGWT‘den bahsetmek istiyorum.

Bu JS kütüphaneleri, yüksek performans elde etmek, zengin internet uygulamaları üretmek amacıyla geliştirilmiş.

Demolarda da göreceğiniz üzerine Ajax‘sal özellikler kütüphanelerin beğeni kazanmasını sağlıyor.

Şimdi ExtJS‘den örneklere bakalım.

  • ExtJS Feed Viewer (demo)
    ExtJS Feed Viewer
    ExtJS Feed Viewer

Modern CSS’de Altın Oran

pinkfloyd | 12 January 2009 19:38

Bir websitesini stillemek onun sadece nasıl görüneceğini belirlemek demek değildir. Bundan çok daha fazlasıdır. Bu, ziyaretçiyi nasıl daha rahat hissetirebileceğinizi, nasıl web sitenizi daha çok seveceğini ve onu nasıl daha fazla kendi evinde hissetirebileceğini tasarlamaktır.

Mükemmel tasarım ziyaretçinin web sitesini kullanmasına yardım eder ve ince bir zekayı yansıtır. Ziyaretçinin onu beğenmesi yetmez

Bir haber sitesini ele alalım. Ziyaretçi, “lezzetli” gradyanlarınıza ve seksi görünümlü yuvarlatılmış köşelerinize bakıp saatler geçirmemeli. Ziyaretçi, değerli web zamanını değerli içeriğinizi okuyarak geçirmeli. Biz ona aradığı içeriğe en kısa sürede ulaşmasına yardımcı olmalı, onu mümkün olduğu kadar çok makale okumaya teşvik etmeli, sitede daha uzun süre kalmasını sağlamalı ve sitenizi ilk kez ziyaret eden bir ziyaretçiden kalıcı bir ziyaretçiye dönüştürmeliyiz.

Tüm bunlara ulaşabilmek için sayfamızdaki her element üzerinde bir harmoni ve benzerlik sunmalıyız, küçük ve önemsiz elementlerde bile. Bunların karışımı bize arzulanan sonucu verecektir.

Harmoni. Anlamı gibi kulağa hoş gelen bir kelime. Peki anahat (layout) tasarımında buna nasıl ulaşabiliriz? Cevabı “Altın Oran”.

IE-Firefox arasındaki farklar için Reset.css

admin | 09 January 2009 11:02

Benim gibi HTML / XHTML arayüz kodlama yapan kişilerin; IE ve Firefox arasınki farklılık herzaman canını sıkmıştır.
Reset.css yada ieHack kullanarak fix etmek mümkün fakat gerek impression gerekse performans açısından, css tag’larına default değer vermek en sağlıklı yol olacaktır.

Bu konuda oluşturduğum css modelinin üzerinden layout’a devam edebilirsiniz.

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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
/*=========================================================================== */
/* CSS Document Stylesheet
============================================================================= */
/* ========================================================================== */
/* ---------->>> RESET CSS
/* ============================w============================================= */
/*reset.css*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:11px;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
/*fonts.css*/
body{font-size:11px; font-family:Tahoma,Arial;color:#333333;}
select, input, textarea {font-size:11px; font-family:Tahoma,Arial;}
body * {line-height:16px;}
/* ========================================================================== */
/* ---------->>> BOX CONTROL
/* ========================================================================== */
.aCenter { text-align:center; }
.aRight { text-align:right; }
.aLeft { text-align:left;}
.vCenter { vertical-align:middle; }
.vTop { vertical-align:top; }
.vBottom { vertical-align:bottom; }
.vTopLeft { vertical-align:top; text-align:left; }
.clear { clear:both; }
.fLeft { float:left; }
.fRight { float:right; }
.fix { display:block; }
.posab { position:absolute; }
.b { font-weight:bold; }
.pointer { cursor:pointer; }
.noBorder { border-color:transparent; }
.noBG { background:transparent; }
/* ========================================================================== */
/* ---------->>> FORM OBJECT STARTING
/* ========================================================================== */
input {border:1px solid #d6d6d6; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; font-size:11px; padding:4px; }
input:hover {border:#dcb56b 1px solid}
.button {background:#000 none repeat scroll 0%;border:1px solid #494949;color:#fff;font-family:Tahoma, Arial;
font-size:11px;font-style:normal;font-variant:normal;font-weight:normal;line-height:normal; padding:2px 4px 2px 4px; cursor:pointer}
.button:hover { background:#494949; }
/* ========================================================================== */
/* ---------->>> WİDTH STARTING
/* ========================================================================== */
.w5 { width:5px; }
.w10 { width:10px; }
.w15 { width:15px; }
.w20 { width:20px; }
.w25 { width:25px; }
.w30 { width:30px; }
.w35 { width:35px; }
.w40 { width:40px; }
.w45 { width:45px; }
.w50 { width:50px; }
.w60 { width:60px; }
.w70 { width:70px; }
.w80 { width:80px; }
.w90 { width:90px; }
.w100 { width:100px; }
.w125 { width:125px; }
.w150 { width:150px; }
.w175 { width:175px; }
.w190 { width:190px; }
.w200 { width:200px; }
.w210 { width:210px; }
.w215 { width:215px; }
.w225 { width:225px; }
.w250 { width:250px; }
.w275 { width:275px; }
.w300 { width:300px; }
.w350 { width:350px; }
.w400 { width:400px; }
.w450 { width:450px; }
.w500 { width:500px; }
.w550 { width:550px; }
.w600 { width:600px; }
.w700 { width:700px; }
.w750 { width:750px; }
.w760 { width:760px; }
.w900 { width:900px; }
.wauto { width:auto; }
/* Width end */
/* ========================================================================== */
/* ---------->>> HEIGHT STARTING
/* ========================================================================== */
.h5 { height:5px; }
.h10 { height:10px; }
.h15 { height:15px; }
.h20 { height:20px; }
.h25 { height:25px; }
.h30 { height:30px; }
.h35 { height:35px; }
.h40 { height:40px; }
.h45 { height:45px; }
.h50 { height:50px; }
.h75 { height:75px; }
.h85 { height:85px; }
.h100 { height:100px; }
.h125 { height:125px; }
.h150 { height:150px; }
.h175 { height:175px; }
.h200 { height:200px; }
/* height end */
/* ========================================================================== */
/* ---------->>> PADDING STARTING
/* ========================================================================== */
/* padding style start */
.nopad {padding:0px; }
.pad1 {padding:1px; }
.pad2 {padding:2px; }
.pad3 {padding:3px; }
.pad4 {padding:4px; }
.pad5 {padding:5px; }
.pad10 {padding:10px; }
.pad15 {padding:15px; }
/* padding style end */
/* padding-left style start */
.padL1 {padding-left:1px; }
.padL2 {padding-left:2px; }
.padL3 {padding-left:3px; }
.padL4 {padding-left:4px; }
.padL5 {padding-left:5px; }
.padL10 {padding-left:10px; }
.padL15 {padding-left:15px; }
.padL20 {padding-left:20px; }
/* padding-left style end */
/* padding-right style start */
.padR1 {padding-right:1px; }
.padR2 {padding-right:2px; }
.padR3 {padding-right:3px; }
.padR4 {padding-right:4px; }
.padR5 {padding-right:5px; }
.padR10 {padding-right:10px; }
.padR15 {padding-right:15px; }
.padR20 {padding-right:20px; }
/* padding-right style end */
/* padding-top style start */
.padT1 {padding-top:1px; }
.padT2 {padding-top:2px; }
.padT3 {padding-top:3px; }
.padT4 {paddi ng-top:4px; }
.padT5 {padding-top:5px; }
.padT7 {padding-top:7px; }
.padT10 {padding-top:10px; }
.padT15 {padding-top:15px; }
.padT20 {padding-top:20px; }
/* padding-top style end */
/* padding-bottom style start */
.padB1 {padding-bottom:1px; }
.padB2 {padding-bottom:2px; }
.padB3 {padding-bottom:3px; }
.padB4 {padding-bottom:4px; }
.padB5 {padding-bottom:5px; }
.padB10 {padding-bottom:10px; }
.padB15 {padding-bottom:15px; }
/* padding-bottom style start */
/* PADDING END */
/* ========================================================================== */
/* ---------->>> MARGIN STARTING
/* ========================================================================== */
/* margin style start */
.marLRauto { margin-left:auto; margin-right:auto; }
.nomar {margin:0px; }
.mar1 {margin:1px; }
.mar2 {margin:2px; }
.mar3 {margin:3px; }
.mar4 {margin:4px; }
.mar5 {margin:5px; }
.mar6 {margin:6px; }
.mar10 {margin:10px; }
.mar15 {margin:15px; }
.mar30 {margin:30px; }
/* margin style end */
/* margin-left style start */
.marL1 {margin-left:1px; }
.marL2 {margin-left:2px; }
.marL3 {margin-left:3px; }
.marL4 {margin-left:4px; }
.marL5 {margin-left:5px; }
.marL10 {margin-left:10px; }
.marL15 {margin-left:15px; }
.marL20 {margin-left:20px; }
.marL30 {margin-left:30px; }
.marL40 {margin-left:40px; }
.marL100 {margin-left:100px; }
/* margin-left style end */
/* margin-right style start */
.marR1 {margin-right:1px; }
.marR2 {margin-right:2px; }
.marR3 {margin-right:3px; }
.marR4 {margin-right:4px; }
.marR5 {margin-right:5px; }
.marR7 {margin-right:7px; }
.marR10 {margin-right:10px; }
.marR15 {margin-right:15px; }
.marR20 {margin-right:20px; }
/* margin-right style end */
/* margin-top style start */
.marT1 {margin-top:1px; }
.marT2 {margin-top:2px; }
.marT3 {margin-top:3px; }
.marT4 {margin-top:4px; }
.marT5 {margin-top:5px; }
.marT10 {margin-top:10px; }
.marT15 {margin-top:15px; }
.marT20 {margin-top:20px; }
/* margin-top style end */
/* margin-bottom style start */
.marB1 {margin-bottom:1px; }
.marB2 {margin-bottom:2px; }
.marB3 {margin-bottom:3px; }
.marB4 {margin-bottom:4px; }
.marB5 {margin-bottom:5px; }
.marB10 {margin-bottom:10px; }
.marB15 {margin-bottom:15px; }
/* margin-bottom style start */
/* margin END */