Kategori : CSS

Jun 30 2009

Birden Fazla CSS Bir Arada

Oldukça hoşuma giden ve sıkça kullandığım bir CSS özelliğini sizlerle de paylaşmak istedim.

Birçoğumuzun bilmediğini düşündüğüm durum bir sayfa elemanı için aynı anda birden fazla CSS özelliğinin kullanılabilirliği.

<div class="SolaKaydir icArka">
   İçerik buraya ...
</div>

Bu şekilde "div" için geçerli olan alan CSS içerisinde tanımlı sola kaydırma (float left) etkisi hem de iç dizayn için kullandığım arka plan özelliklerini aynı anda almış oluyor.

1 yorum - Gönderen : Oğuz Demirkapı (2:55 PM) - Kategori : CSS

Jun 30 2009

Tablosuz Tablo

Tablo yaratımı ve biçimlendirimi web tasarımının temel elemanlarından birisi halinde. Peki tablo kullanmadan da tablo hissi verdirip aynı işlevi gerçekleştirmek olanaklı mıdır aceba?

İşte basit bir CSS tablo örneği.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tablo</title>
<style type="text/css">
<!--
body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}

#tablom {
   display: table;
   border:1px solid #000;
   border-spacing: 5px; /* cellspacing için kullanılan değer */
   background-color: #CCC;
   }

#satir {
   display: table-row;
}

#hucre {
   display: table-cell;
   width:150px;
   padding:10px; /* cellpadding için kullanılan değer */
   border:1px solid #DDD;
   background-color: #FFF;
   }
-->
</style>
</head>

<body>
<div id="tablom">
   <div id="satir">
      <div id="hucre">Test 11</div>
      <div id="hucre">Test 12</div>
      <div id="hucre">Test 13</div>
   </div>
   <div id="satir">
      <div id="hucre">Test 21</div>
      <div id="hucre">Test 22</div>
      <div id="hucre">Test 23</div>
   </div>
   <div id="satir">
      <div id="hucre">Test 31</div>
      <div id="hucre">Test 32</div>
      <div id="hucre">Test 33</div>
   </div>
</div>
</body>
</html>

Bence oldukça pratik kullanım alanları olabilecek bir kullanım şekli. Özellikle "hucre" alanlarının farklı tanımlar kullanarak farklı şekilde gösterimi oldukça ilginç olanaklar sunacaktır.

0 yorum - Gönderen : Oğuz Demirkapı (2:54 PM) - Kategori : CSS

Jun 30 2009

Tam Ortalayalım

Bazen ihtiyaç olan ve ekranın tam ortasında bilgi gösterme ihtiyacını çok basit gibi görünüyor olsa da gerçekleştirmek epey uğraş ister.

İşte güzel bir örnek sayfa:

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

ve basit bir "Yapım Aşamasında" sayfası. :)

0 yorum - Gönderen : Oğuz Demirkapı (2:54 PM) - Kategori : CSS

Jun 30 2009

Sayfa Kaymalarına CSS İle Son

Firefox ile sayfalara bakarken hazırlanan sayfalar ekranda yer alan alandan daha küçükse normalde sağ tarafta yer alan dikey kaydırma çubuğu görünmemekte. Ancak bir linke tıklandığında eğer hazırlanan sayfa ortalanmış şekilde ve aşağı doğru uzun ise sanki önceki görüntüye göre belirli bir oran (8px) sola kaymış gibi görünür zira sağ tarafa gelen kaydırma çubuğu nedeni ile sayfa yeniden ortalanır.

CSS dosyamıza ekleyeceğimiz basit bir kod ile bu durumu önleyebiliyoruz.

html { min-height: 100%; margin-bottom: 1px; }

0 yorum - Gönderen : Oğuz Demirkapı (2:44 PM) - Kategori : CSS

Jun 29 2009

Bu Kitaba İhtiyacımız Var! CSS

Fatih Hayrioğlu'nun uzun süredir üzerinde çalıştığı CSS’e başlangıç kitabımı bitti. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur.
Bu kitap makaleleri derleyip hazırlanan ilk kitap. İnşallah ikinci kitapta yazılacak. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.

Umarım herkesin yararlanacağı bir Türkçe kaynak olur.

http://www.fatihhayrioglu.com/kitap/

0 yorum - Gönderen : Yunus Özay (6:12 AM) - Kategori : Dhtml | Genel | CSS | HTML

Jun 15 2009

TÜM CSS KOMUTLARI..

  • azimuth
  • background
  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat
  • border

Devamı ...

0 yorum - Gönderen : Mahmut Er (9:34 PM) - Kategori : CSS

Jun 3 2009

CSS Ölçü Birimleri.

Temel olarak tarayıcılar, bağlantılı (relative) ve tam (absolute) olmak üzere iki türlü değer birimini kullanmaktadırlar. Bağlantılı birimler genelde ana element olmak üzere farklı bir nesnenin/elementin özellik/ölçü değerlerine göre hesaplanarak bulunan değerleri temsil eder. Tam değerler ise milimetre veya santimetre gibi kati olarak belirtilebilen değerleri temsil eder. Bağlantılı değerler, em, ex, px ve % birimleri, tam değerler ise in, cm, mm, pt ve pc birimleri ile gösterilirler. Bu birimlerin değerleri ve açıklamaları aşağıdaki tabloda gösterilmektedir.

 

Ölçü Birimleri Karşılaştırmalı Tablo

Ölçü Birimi Canlı Sonuç Açıklama
1 em
 
 Ana elementin font boyunun (font-size) değerine hesaplanarak bulunur.
1 ex
 
 Ana elementin küçük 'x' harfinin yükseklik değerine göre hesaplanarak bulunur..
1 px
 
 Piksel. Ekrandaki bir noktanın yüksekliği. Genel olarak monitörlerde inç başına 96 nokta düşer.
1 in
 
 inç. 1 inç = 2.54 cm.
1 cm
 
 1 santimetre.
1 mm
 
 1 milimetre.
1 pt
 
 Punto (Point). 1 pt = 1/72 inç.
1 pc
 
 Pika. 1 pc = 12 pt.

Daima farklı bir özellik değeri ile bağlantılı olan yüzde değerleri, geniş kapsamlı bir birim olduğu için bağlantılı olduğu özellik değişkendir.

Px (piksel) hakkında not : Piksel, monitörlerin çözünürlüğüne göre değişiklik gösterdiği için hesaplanan-bağlantılı bir değer birimidir. Örneğin, inç başına düşen nokta değerini temsil eden DPI (Dot Per Inch) birimine göre monitörler genelde 96 DPI'dır. Bunun yanında bir monitörün 72dpi veya 192 dpi olması gayet normaldir ki bu da piksel boyunu ve piksel arası mesafeleri değiştirir. Standart monitörlerdeki pikseller arası mesafeler yaklaşık olarak aşağıdaki gibidir.

  • 72 dpi  = ~ 0.35 mm
  • 96 dpi  = ~ 0.26 mm
  • 120 dpi = ~ 0.20 mm
  • 192 dpi = ~ 0.13 mm

Not : Alıntıdır

0 yorum - Gönderen : Mahmut Er (3:49 PM) - Kategori : CSS

Kategorİler

Arama

İçerİk OrtaklarImIz