rzrarti » CSS

CSS ile Resim Galerisi

Altuğ Orgun — Fri, 15 Jan 2010 19:15:59 +0000

Resim galerileri çoğu kullanıcı için vazgeçilmezdir, hatta yüzlerce “galeri” temeliyle kurulmuş websitesi vardır fakat basit kodlamalar kullanılmaz bu siteler için, genellikle mysql + php betik(script)leri kullanılır. Fakat CSS ile oldukça basit bir kodlamayla, basit bir resim galerisi oluşturmak mümkün. O basit kodlara geçelim isterseniz :) …

CSS Kodları:

ul#gallery {
padding:0;
margin:0;
width:448px;
height:336px;
position:relative;
background:#888 url(galeribg.jpg);
}
#gallery li {
list-style-type:none;
width:64px;
height:48px;
float:left;
z-index:100;
}
#gallery li.lft {
float:left;
clear:left;
}
#gallery li.rgt {
float:right;
clear:right;
}
#gallery a {
position:relative;
width:64px;
height:48px;
display:block;
float:left;
z-index:100;
cursor:default;
}
#gallery a img {
position:relative;
width:62px;
height:46px;
border:1px solid #888;
z-index:100;
}
#gallery a:hover {
width:160px;
height:120px;
padding:108px 144px;
position:absolute;
left:0;
top:0;
z-index:20;
}
#gallery a:hover img {
background:#eee;
position:relative;
width:160px;
height:120px;
border:0;
z-index:20;
}
#gallery a:active, #gallery a:focus {
background:transparent;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:active img, #gallery a:focus img {
background:#eee;
position:relative;
width:320px;
height:239px;
border:0;
z-index:10;
}
/* hack for Internet Explorer */
#gallery li.pad {
height:0;
display:block;
margin-top:-2px;
width:448px;
font-size:0;
}

/* hack for Opera 7+ */
@media all and (min-width:0px){
#gallery a:hover {
background:#888;
width:320px;
height:240px;
padding:48px 64px;
position:absolute;
left:0;
top:0;
z-index:10;
}
#gallery a:hover img {
background:#aaa;
position:relative;
width:320px;
height:240px;
border:0;
z-index:10;
}
}

Burda ufak bir detay var: background:#888 url(galeribg.jpg);
galeribg.jpg galerinin arkaplanıdır, fakat galerideki resimlerin de arkaplanı bu resimde yer alıyor. Burda da görebilirsiniz tam olarak.

HTML Kodları:

“gallery” stilini kodlarımıza da yansıttık ve böylece resim galerimizi tam anlamıyla oluşturmuş olduk. Tek yapmanız gereken resim linklerini düzenlemek olacak ;) . Haa aklıma gelmiken :) , bu resim galerisi IE 6 ve Firefox‘ta sorunsuz çalışırken, Opera‘da resmi tam boyutta görünteleyemeye izin vermiyor.

Çalışmanın bir örneğini görmek için BURDAN buyrun…

CSS ile Bar Yapımı

Altuğ Orgun — Sun, 27 Dec 2009 08:48:47 +0000

CSS’in ne olduğunu daha önce kısaca anlatmıştım. Aslında CSS öğrenebilmeniz için yazı okumanız yetmez, çalışmanız gerekir. Şimdiden söyleyeyim, CSS dersleri değil “CSS teknikleri ve CSS ile yapılabilecekler”i paylaşmayı daha uygun görüyorum. Bu teknikleri anlayıp geliştirebilmek için CSS öğrenmeniz şart, bu konuda size Fatih Hayrioğlu‘nun e-kitabını önerebilirim; buradan…

Şimdi ise CSS ile bar yapımıyla ilgili 2 kod vereceğim. Aslında 3 tane var fakat ilk 2′si daha kullanışlı. 3.ye kaynağımdan ulaşabilirsiniz.

1 – Basit CSS Barı:

Sitenizi bakıma aldınız ve diyelim ki hızlandırma çalışması yapıyorsunuz, bu durumda bu barı çalışmanın ne kadarının bittiğini göstermek için kullanabilirsiniz. Eh, bu da veritabanından bilgi alan bir kod olmadığı için doğal olarak elle düzenlemeniz(manuel) gerekiyor.

CSS Kodları:

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }

Burda grafik pozisyonu, boyutu, çerçevesi dışında barın pozisyonunu, arkaplan ve yazı rengini, yazı biçimini, boyutunu ayarladık. Yani fiziksel özelliklerini, stilini. Şimdi bir de bu stilleri üzerine uyguladığımız bir tablo lazım. graph ve bar değerlerini ekleyelim ve barı tamamlayalım.

HTML Kodları:

42%

Bu ilk barımızdı, şimdi 2.ye geçelim :)

2 – Karmaşık CSS Barı:

‘Kötü’den ‘iyi’ye giden bir grafik, farklı projelerde kullanılabilir. En basitinden ankette, en detaylısından bir MMORPG oyunda kullanılabilir. Ki yukardaki görüntüden ve kodlardan da gördüğünüz gibi oyunlar için düzenledim.

CSS Kodları:

dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url(“http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_colorbar.jpg”);
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */

dd div {
position: relative;
background: url(“http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_colorbar2.jpg”);
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url(“http://topfunky.net/svn/plugins/css_graphs/generators/css_graphs/templates/g_marker.gif”);
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}

CSS ile hep yaptığımız gibi, yine fiziksel düzenleme yaptık :) . Yani; yazıları sabitledik, arkaplanları ayarlayıp yerlerini belirledik, boyutlarını ayarladık vs. Still özellikleri :P

HTML Kodları:

HP

65%

SP

85%

EXP

35%

Gerekli yerleri kendinize göre düzenlersiniz ;) …

CSS’e İlk Adımlar

Altuğ Orgun — Mon, 14 Dec 2009 17:21:46 +0000

Bir şeye başlamadan önce ne olduğunu bilmeniz gerekir. CSS, yani açarsak Cascading Style Sheets‘in amacı HTML ile beraber daha esnek sayfalar oluşturabilmek. 1996′da W3C tarafından duyuruldu. Gerek kullanımının kolaylığı, gerek kullanışlılığı ile hemen her sitede yer alan bir dil. HTML ile kodlanmış her sayfada düzenleme yapmak yerine tek bir CSS Stil dosyası üzerinde düzenleme yaparak, tüm sayfalara etki etmesini de sağlayabiliyorsunuz.

CSS ile Yapılabilecekler

Aslında CSS ile yapılabilecekler sınırsızdır, yani tasarımı her türlü özelleştirebilirsiniz. Fakat yine de birkaç basit örnek göstermek istiyorum.

- Basit bir link kodumuz olsun.

rzrarti.com

Şimdi burdaki “a” tagının stil özelliklerini ekleyelim, tabi ki CSS ile :) .

a {color: white; font: italic 16px Arial, serif; text-decoration: underline; background: black; border: 2px solid green; padding: 5px;}

Bunu yaptığımızda şöyle bir göz atarsanız yazı stilinde, zemin ve yazı renginde, border stilinde ve yazı boyutunda değişiklikler göreceksiniz. En baştaki a etiketinden de anlayabileceğiniz gibi bu stil özellikleri genel linklere etki edecektir.

- Bunun dışında;

rzrarti.com

demek yerine

h3 { color: red; }

stil kodunu kullanarak tüm h3 taglarına kırmızı renk verebilirsiniz.

Bunlar yalnızca basit örneklerdi, CSS ile yapılabileceklerin sonu yok. Aklınıza nasıl bir sayfa düzeni geliyorsa CSS ile rahatlıkla yapabilirsiniz. Günden güne değer kaybeden HTML‘i düşünürseniz, CSS’in geleceğinin daha da parlak öldüğünü görebilirsiniz ;) .

CSS ile Resim Çizilir mi?

Altuğ Orgun — Sat, 05 Dec 2009 09:32:44 +0000

Çiziliyormuş işte, iş CSS olunca… Tamamen ascii karakterler ve CSS kullanılarak yapılmış 2 çalışma var: Aptal Bush ve Homer. Bu düşünce nasıl gelmiş akıllarına ilginç doğrusu :) . Jquery isimli javascript kütüphanesi sayesinde aşamaları sırayla, yavaşlatarak izleyebiliyorsunuz. Tabi ki kodları tek tek anlatmıyorlar, hatta hiç anlatmıyorlar ama ben yine de size Homer çalışmasının tüm kodlarını vereceğim, belki incelersiniz :) .

Burada “Homer”, şurada “Aptal Bush” çalışmaları var. Ayrıca Homer çalışmasını yavaşlatarak izlemek için şuraya girip “Animate Slow” demeniz yeterli.

Tüm kodları incelemek istiyorsanız bu sayfaya alalım sizi: EVET, İŞTE BU SAYFA!