http://www.csspage.com CSS Bilgilendirme Platformu Mon, 23 Mar 2009 16:26:54 +0000 http://backend.userland.com/rss092 en Bazı WYSIWYG editörleri ve insanlar HTML’de metin paragraflarını birbirinden ayırmak için iki defa br (satır sonu) elementini kullanıyorlar. Örnek: Bu metin, ilk paragraftır. <br> <br> Bu metin, ikinci paragraftır. Bu metodu kullanarak görsel olarak istediğiniz sonucu elde etmenizi ... http://www.csspage.com/paragraf-olusturmak-icin-p-elementini-kullanin.html Bazen insanlarla HTML sınıf isimleri hakkında konuştuğumuzda onların sınıfları yanlışlıkla “CSS Sınıfları” diye adlandırdıklarına şahit oluyorum. Tahmin ediyorum ki bu hatayı yapmalarındaki neden sunucu taraflı geliştirme çatılarını (server side development frameworks) kullanıyor olmalarından kaynaklanıyor. Bu çatılarda “sınıf ” şeklinde değil de “CSS sınıfları” şeklinde tanımlanması bu çatıları sık kullanan geliştiricilerin ... http://www.csspage.com/css-sinifi-degil-sinif.html En ünlü blog yazarlarından Abdylas Tynyshov - AdesBlog renk seçimi sıkıntımızı giderecek bir yazılım ile karşımızda. Ades Color Picker v2.0 web sitesi tasarlarken, grafik düzenleme ile uğraşırken ve daha pek çok alanda bize yardımcı oluyor. Aynı işlemi bu benzer yazılımlar ile yapmayı denemediysek mutlaka Adobe Photoshop yazılımında uğraşıyoruzdur. Ancak ... http://www.csspage.com/ades-color-picker.html CSS3 kulislerde konuşula dursun, tasarımcılar CSS3'ün getirdiği yeniliklerle gelen kolaylıkları kullandıkları günü hayal etmeye devam ediyorlar. Gerçi CSS ve tasarımcı dostu tarayıcımız Firefox bazı yeni özellikleri şimdiden getirmiş olsa da (örneğin: CSS3 ile gelecek olan border-radius özelliğini moz-border-radius olarak Firefox’ta şimdiden kullanabiliyoruz), en azından sorunlu ‘tarayıcımız’ Internet Exporer’ın da bu ... http://www.csspage.com/css3-ve-guzellikleri.html Evet hani bazen bazı sitelerde görürüz link olduğu belli olsun diye yanında resim vardır ufakçana bişey. işte onun nasıl yapıldığını göstereceğim şimdi. <style type="text/css" media="screen"> a, a:active, a:hover, a:visited { background: transparent url(link_img.gif) no-repeat top right; cursor: pointer; padding-right: 12px; } </style> ... http://www.csspage.com/yazilarimizdaki-koprulerin-linklerin-yanina-resim.html Internet Explorer'da çoğu zaman yapılan tasarımların ağızı burnu kayık oluyor peki bunu nasıl çözebiliriz ? IE de bazı CSS kodları henüz işlev görmediği için HTML tagları içine şu kodlar ile farklı css'ler kullanabiliriz IE kullanılıyorsa <!--[if IE]> <link rel="stylesheet" xhref="ie-icin.css" mce_href="ie-icin.css" /> <![endif]--> şeklinde kullanabiliriz. Bu Yazıyı Paylaşın http://www.csspage.com/ie-de-farkli-css-kullanin-nasil-mi.html İşte burada gördüğünüz gibi buton yarattık ama üstüne gelince farklı bi resim alıyo arkayı diyoruz peki bu nasıl oluyor??? Sorunun yanıtı işte burada İşte resmin orjinali bu butonda kullandığımız. <p style="display: none;"><input alt="Spam me" name="Send" class="send-btn" type="submit" value="Spam me" id="Send" xsrc="/img/btn.gif" mce_src="/img/btn.gif" /></p> ... http://www.csspage.com/css-buton-tus-yaratimi.html Mesela sitemizde 10-15 farklı bölüm var ve hepsinde linklerin rengini farklı ve yazı tipi vs degisik olsun istiyoruz. Peki ne yapmamız gerekmektedir. <style> a.bolum1 { font:Arial; font-size:10px; color:#74A8F5; text-decoration: none; } a.bolum1:hover { font:Arial; font-size:10px; color:#86C32A; text-decoration: underline; } a.bolum2 { font:Verdana; font-size:14px; color:#000000; text-decoration: none; bgcolor:#74A8F5; } a.bolum2:hover{ font:Arial; font-size:10px; color:#FF6600; text-decoration: underline; } </style>Kullanim sekilleri: <a ... http://www.csspage.com/her-linkin-stilini-degisik-kullanma.html Herkes ister tabiki :) Tuşlar ve butonlar için her zamanki gibi style yazacağız nasıl mı ? İste böyle :) input { border: 1px solid #000000; background-image:url(inputbg.png); height:20px; font-family: Arial; font-size: 10pt; } textarea { background-color:#FFFFFF; background-image:url(textareabg.png); background-repeat:repeat-x; border: 1px solid #3399FF; font-family: Arial; font-size: 10pt; } Şimdi buradakiler nelerdir ? border:1px solid #000000 <= Kenarlığını 1px yapıyor ve rengini Siyah background-image:url(inputbg.png); <= Nesnenin arkaplanını inputbg.png yapıyor. height:20px; <= Nesnemize ... http://www.csspage.com/livecom-da-ki-gibi-tuslar-ve-yazim-kutulari-olsun-istermisiniz.html .style1 { margin:10px 10px 10px 10px; } .style2 { padding:5px 5px 5px 5px; } Arasındaki farklar nelerdir. Resimlerle örneklemek daha mantıklı olur değil mi :) style1 de nesnenin dışına 10px 10px 10px 10px uyguladi. style2 de ise nesnemizin içine padding işlemini uyguladı. Buradaki 10px 10px 10px 10px nedir diyen vardır ? 4 boyuttan olusmaktadir. Üst uzunluk Sağ Uzunluk ... http://www.csspage.com/margin-ve-padding-farklari-nelerdir.html