Kategori: HTML & CSS Yorumlar: 1 5806 Okunma
EKİ 11
less.js
Artık CSS kodlarınızı daha hızlı daha kolay yazabileceksiniz. Nasıl mı? less.js ile. Hemen konuya girelim.

styles.less adlı bir dosya oluşturup bunu HTML sayfanıza çağırınız.
<link rel="stylesheet/less" type="text/css" href="styles.less">
Daha sonra http://lesscss.org adresine girip son versiyonunu indirin. HTML sayfanıza indirdiğiniz javascript dosyasını çağırınız.
<script src="http://lesscss.googlecode.com/files/less-1.1.3.min.js" type="text/javascript"></script>
Artık CSS içinde değişkenler kullanabilirsiniz. Örneğin bir rengi birden fazla kullanmanız gerekirse her seferinde renk kodunu yazmak yerine değişkene atayıp kullanabilirsiniz. Daha sonra bir değişiklik yapmak istediğinizde sadece o değişkendeki renk kodunu değiştirmeniz yeterli olacaktır.

Örnek kullanım:
// LESS
@renk = #333;

#header {
    color: @renk;
}
a {
    color: @renk;
}
» devamı
Kategori: HTML & CSS Yorumlar: 0 3392 Okunma
EKİ 11
Bugün CSS ile ilgili bir ipucu vereceğim. Örneğin bir menü yaptığınızda veya tekrar eden bir div yaptığınızda birinci div'in farklı olması gerekir. Mesela border'ı yok etmeniz gerekebilir vs.

Bunun için şimdiye kadar ayrı bir class kullandıysanız bu ip ucu tam sizin için. Ayrı bir class kullanmaya gerek kalmadan da yapılabilir. Nasıl mı? Görelim.

Örneğin şu şekilde bir HTML kodumuz mevcut:
<div id="huko">menü</div>
<div id="huko">menü</div>
<div id="huko">menü</div>
Bunlar için şöyle bir css kodu kullanalım:
#huko { background-color: #ddd; }
Bu şekilde kullandığımızda şöyle bir görüntü alırız:

Şimdi gelelim asıl meselemize. İlk div'in arkaplan rengini değiştirmek için artık ayrı bir class kullanmanıza gerek yok. Küçük bir CSS kodu ile bunu yapabilirsiniz. » devamı
Kategori: HTML & CSS Yorumlar: 3 4039 Okunma
EYL 11
CSS kodunuzu alt alta yazdınız ve bunu sıkıştırmak istiyorsunuz. Ya da yan yana yazılmış CSS'i okumakta zorluk çekiyorsunuz, okunabilir olmasını istiyorsunuz. Bu durumlarda PROCSSOR işinize yarayabilecek bir araç.

Siteye girdiğinizde orta bölüme CSS kodlarınızı direkt yapıştırabilir, stil dosyanızı upload edebilir ya da bir link verebilirsiniz. Daha sonra "options" bölümünden ne şekilde formatlanmasını istiyorsanız seçiyorsunuz. » devamı
Kategori: HTML & CSS Yorumlar: 4 2265 Okunma
EYL 11
Das "HTML5 Handbuch" wurde von SELFHTML-Gründer Stefan Münz und Clemens Gull geschrieben. Es gibt sowie eine komplette Online-Version als auch eine käufliche Version um 35€.

Das Buch besteht ausschließlich aus HTML5 Themen. Diesmal wurde Javascript nicht mit behandelt.

Wer sich für das Thema interessiert sollte mal in das Buch reinschauen.
» devamı
Kategori: HTML & CSS Yorumlar: 1 2978 Okunma
EYL 11


Sprite Cow'da bir imaj dosyası yükleyerek CSS-Sprite oluşturabiliyoruz (sadece Firefox ve Chrome'da çalışıyor!). Herşey yarı otomatik çalışıyor. Arkaplanı transparan olan bir imaj yüklüyorsunuz ve istediğiniz grafiğin üzerine tıklıyorsunuz. Sprite Cow size CSS-Sprite'ını otomatik oluşturuyor. » devamı
Kategori: HTML & CSS Yorumlar: 0 2676 Okunma
AĞU 11
Programlama yapmadan, if-else veya fonksiyonlar kullanmadan tek bir CSS dosyası ve gereken imajlarla Iconize ile linklerinize simgeler ekleyin.

Iconize nasıl çalışır?

CSS dökümanında daha önce tanımlanmış seçicileri kullanarak HTML elemanlarını seçer ve bunlara görsellik kazandırır. » devamı

Kategori: HTML & CSS Yorumlar: 0 11969 Okunma
AĞU 11
Kodlar tüm tarayıcılar için uyarlanmıştır. Lütfen yeni dosyaları indiriniz.

Bu makalemde CSS3 efektleriyle yapılmış bir yatay menü örneği ögreceksiniz.
Öncelikle HTML kodları şu şekildedir:
<div id="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımda</a></li>
<li><a href="#">Galeri</a></li>
<li><a href="#">Projeler</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>
Burada ul tag'ı ile bir liste oluşturduk. » devamı