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 […]
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
DP3 Marketing
Yeşil üzerine yapılmış, üstte menu bulunan Css örneklerini fazlasıyla gördüğümüz bir sitedir.
Bu Yazıyı Paylaşın
Cha ching Linke tıklayarak siteyi inceleyebilirsiniz. Ben cok beğendim umarım sizde beğenirsiniz.
Bu Yazıyı Paylaşın
