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 Adobe PS sadece bu uyguluma […]
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 özellikleri anlayabileceği gün için biraz […]
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>
Style kodumuz bu şekilde link_bg.gif adında resmimiz bulunmaktadır elimizde. bunu üst ve sağa dayalı yapıyoruz.
padding-right:12px ilede linkimizin sonuna 12px lik boşluk […]
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
İş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> <p><input alt="Spam me" name="Send" class="send-btn" type="image" […]
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 xhref=”http://www.csspage.com/#” mce_href=”http://www.csspage.com/#” […]
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 yükseklik veriyoruz.
font-family: Arial; […]
.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 Alt Uzunluk Sol Uzunluk […]
Başka bir dosyadan CSS dosyası ekleme.
<link rel=”stylesheet” xhref=”style.css” mce_href=”style.css” type=”text/css”>
şeklinde ekleyebiliriz.
Bir diğer yöntem ise direk CSS kodlarını yazmak
<style>
body { bgcolor=#FF6600; }
</style>
şeklindede kullanabiliriz.
Not: Bu tagler HEAD içinde olsa daha iyi olur yani
Bu Yazıyı Paylaşın
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk, font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki […]