Kategori: Javascript & jQuery, HTML & CSS
Yorumlar: 6
8693 Okunma
EKİ 11

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: 1
4818 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:
Ş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ı
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: 0
5740 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ı
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: 0
4319 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: Javascript & jQuery
Yorumlar: 3
10619 Okunma
AĞU 11
Öncelikle HTML kodlarımız ile başlıyoruz:
<div id="container">Daha sonra bunlara CSS yardımı ile stil veriyoruz: » devamı
<div id="tab-head">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tab-content">
<div id="tab1" class="content">Tab 1</div>
<div id="tab2" class="content">Tab 2</div>
<div id="tab3" class="content">Tab 3</div>
</div>
</div>

Kategori: HTML & CSS
Yorumlar: 0
4092 Okunma
AĞU 11

Kategori: HTML & CSS
Yorumlar: 4
15514 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">Burada ul tag'ı ile bir liste oluşturduk. » devamı
<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>
