Hüseyin Berberoğlu'nun web günlüğü » CSS http://www.birazkisisel.com Wordpress Hacker / Web Developer Sun, 27 Jun 2010 20:23:01 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS Kodlarınızı Sıkıştırın, Okunabilir Hale Getirin http://www.birazkisisel.com/css-kodlarinizi-sikistirin-okunabilir-hale-getirin/ http://www.birazkisisel.com/css-kodlarinizi-sikistirin-okunabilir-hale-getirin/#comments Sun, 30 Mar 2008 14:25:03 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/css-kodlarinizi-sikistirin-okunabilir-hale-getirin/ CSS Compressor and OptimiserCleanCSS ile CSS kodlarınızı sıkıştırıabilir veya CSS kodlarınızı daha okunabilir hale getirebilirsiniz.

CSS kodlarınızı yazdıktan ve sitenizi test ettikten sonra, yani siteniz yayına hazır hale geldiğinde, eğer daha hızlı bir web sitesine sahip olmak istiyor ve css dosyanızın boyutu büyük ise CSS kodlarınızı sıkıştırmalısınız. Ben bu iş için CleanCSS‘i kullanıyor ve sizlere de kullanmanızı öneriyorum.

Eğer CSS kodlarını okunabilir bir şekilde yazamıyorsanız CleanCSS tam size göre bir araç…

Benzer şeyleri yapabileceğiniz diğer siteler; CSSDrive CSS Compressor, Robson CSS Compressor, CSS Optimizer

Ayrıca daha hızlı bir web sitesi için Javascript dosyalarınız da sıkıştırabiliyoruz… eburhan, bu işi yapan siteleri yazmış…

]]> http://www.birazkisisel.com/css-kodlarinizi-sikistirin-okunabilir-hale-getirin/feed/ 0 CSS öğrenmek mi istiyorsunuz ? Bu kitap tam size göre ! http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/ http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/#comments Tue, 26 Feb 2008 22:31:21 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/ CSS kitabıBir süredir takip ettiğim birisi olan Fatih Hayrioğlu tüm css makalelerini derleyerek bir e-kitap çıkardı ! Bu projesini zaten uzun zamandır biliyorduk, gerçekleşmesinden dolayı sevindim. CSS’e Başlangıç kitabını indirmek istiyorsanız sizi buraya alalım..

Fatih Hayrioğlu’nun css makaleleri gerçekten çok faydalı, kitabı da eminim öyledir. CSS öğrenmek isteyenlere tavsiye ederim…

]]> http://www.birazkisisel.com/css-ogrenmek-mi-istiyorsunuz-bu-kitap-tam-size-gore/feed/ 3 Nifty Corners Cube – CSS ile resimsiz yuvarlak köşeli kutular http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/ http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/#comments Sun, 13 Jan 2008 22:37:27 +0000 Hüseyin Berberoğlu http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/ Nifty Corners Cube ile hiç resim kullanmadan sitelerde kullandığınız kutucukların köşelerini yuvarlak yapabilirsiniz. İlk gördüğümde çok sevmiştim.. Resim kullarak yuvarlak köşeler yapmak zahmetli bir iş.. Nifty Corners Cube ile bu iş çok basit.. Nasıl yapılacağı yazının devamında..

Resimsiz yuvarlak köşeler oluşturabilmek için üç şeye ihtiyacımız var;

  • niftycornerscube.js dosyası
  • niftycorners.css dosyası
  • nifty cornerı çağıracak olan javascript kodumuz..

Dosyaları buradan indirebilirsiniz. Dosyaları indirip sayfanızın bulunduğu klasöre açınız. Daha sonra html kodlarındaki <head> ile </head> arasında şu kodu yapıştırın;

<script type="text/javascript" src="niftycube.js"></script>

Sonra body bölümünüzde şu kodlar ile kutu oluşturun;

<div id="box">
<h1>Nifty Corners Cube™</h1>
<p>One call. Two parameters. Three sizes.</p>
</div>

Kutumuzun id’si box oldu.. Bu kutudaki öğelerin stillerini de head bölümüne yerleştireceğimiz şu kodlarla verelim

<style type="text/css">
body{padding: 30px 0 0;background:#FFF;font: 100.01%/1.3 Verdana,Arial,sans-serif;text-align:center}
div#box{width: 18em;padding: 20px;margin:0 auto;background:#E6E6E6;color:#000}
h1{font: lighter 200% "Trebuchet MS",Arial sans-serif;color: #208BE1}
h1,p{margin:0;padding:10px 20px}
</style>

Bu son eklediğimiz kod tamamen size kalmış, istediğiniz gibi değiştirebilirsiniz. Oluşturduğumuz “box” idli kutunun içindeki öğelerin stilini bu kod ile belirledik. Şimdi sırada bu kutunun kenarlarnı yuvarlak yapmaya geldi… Bunu da head kısmına ekleyeceiğimiz şu kod ile yapıyoruz.

<script type="text/javascript">
window.onload=function(){
Nifty("div#box","big");
}
</script>

bu kodda bulunan “div#box” box idsine sahip div’i köşeli yap diyor… Bu örnek indirdiğiniz zip dosyasının içinde bulunan örneklerden birincisi.. Dosyanın içinde daha değişik örneklerde mevcut.. Onları da incelemenizi tavsiye ederim..

]]> http://www.birazkisisel.com/nifty-corners-cube-css-ile-resimsiz-yuvarlak-koseli-kutular/feed/ 10