HTML5 placeholder renk değiştirme

Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.

<input type="text" onfocus="if(this.value == 'anahtar kelime giriniz') { this.value=''; }" onblur="if(this.value=='') { this.value='anahtar kelime giriniz'; }" value="anahtar kelime giriniz" >

1	<input type="text" onfocus="if(this.value == 'anahtar kelime giriniz') { this.value=''; }" onblur="if(this.value=='') { this.value='anahtar kelime giriniz'; }" value="anahtar kelime giriniz" >

Placeholder attribute kullanımı

<input type="text" placeholder="Adınız ve Soyadınız" />
<textarea placeholder="Kısa bir açıklama yazınız"></textarea>

1 2	<input type="text" placeholder="Adınız ve Soyadınız" /> <textarea placeholder="Kısa bir açıklama yazınız"></textarea>

Bu attr’yi kullandığımızda verdiğimiz, renk değerini ne verirsel verelim opacity değerini düşürüyor bunu engellemek için aşağıdaki tanımlamayı yapmamız gerekiyor.

:-moz-placeholder { /* Firefox 4 - 18 arası */
   opacity:1;
}

::-moz-placeholder { /* Firefox 19+ */
   opacity:1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */
   opacity:1;
}

::-webkit-input-placeholder { /* WebKit browsers */
    opacity:1;
    color: #000;
}

:-moz-placeholder { /* Firefox 4 - 18 arası */

opacity:1;

}

::-moz-placeholder { /* Firefox 19+ */

opacity:1;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

opacity:1;

}

::-webkit-input-placeholder { /* WebKit browsers */

opacity:1;

color: #000;

}

Burada gördüğünüz gibi placeholder attribute içine yazılan değere opacity değeri veriyor.

Firefox ve IE ailesinde (sadece IE10) opacity ile düzeltebiliyoruz ama Chrome koduna renk kodunu yazmadan düzeltme yapmıyor. // Sebebini anlamadım

[blockquote source=”Ufak bir not”]Placeholder Internet Explorer10 ve altında çalışmıyor,r bunun için internetten placeholder.js araması yapıp çalışır vaziyete getirebilirsiniz. [/blockquote]

Kaynaklar

http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css
http://www.paulund.co.uk/html5-placeholder

Tüm kodlar :

<!DOCTYPE html>
<html lang="tr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>HTML5 Placeholder</title>
        <style>
            input[type=text]{width: 450px; height: 40px; font-size: 30px; color: #000; display: block; margin: 20px 0; font-family: 'Arial'; font-weight: bold;}
            textarea{width: 450px; height: 140px; font-size: 30px; color: #000; font-family: 'Arial'; font-weight: bold;}
            
.siyahYazi:-moz-placeholder { /* Firefox 4 - 18 arası */
   opacity:1;
}

.siyahYazi::-moz-placeholder { /* Firefox 19+ */
   opacity:1;

}

.siyahYazi:-ms-input-placeholder { /* Internet Explorer 10+ */
   opacity:1;
}

.siyahYazi::-webkit-input-placeholder { /* WebKit browsers */
    opacity:1;
    color: #000;
}
        </style>
    </head>
    <body>
        <div style='float:left;'>
            <h1>Placeholder işlem yapılmamış</h1>
            <input type="text" placeholder="Adınız ve Soyadınız" />
            <textarea placeholder="Kısa bir açıklama yazınız"></textarea>
        </div>
        <div style='float:left; margin-left: 50px;'>
            <h1>Placeholder işlem yapılmış</h1>
            <input type="text" placeholder="Adınız ve Soyadınız" class='siyahYazi'/>
            <textarea placeholder="Kısa bir açıklama yazınız" class='siyahYazi'></textarea>
        </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>HTML5 Placeholder</title>

<style>

input[type=text]{width: 450px; height: 40px; font-size: 30px; color: #000; display: block; margin: 20px 0; font-family: 'Arial'; font-weight: bold;}

textarea{width: 450px; height: 140px; font-size: 30px; color: #000; font-family: 'Arial'; font-weight: bold;}

.siyahYazi:-moz-placeholder { /* Firefox 4 - 18 arası */

opacity:1;

}

.siyahYazi::-moz-placeholder { /* Firefox 19+ */

opacity:1;

}

.siyahYazi:-ms-input-placeholder { /* Internet Explorer 10+ */

opacity:1;

}

.siyahYazi::-webkit-input-placeholder { /* WebKit browsers */

opacity:1;

color: #000;

}

</style>

</head>

<body>

<h1>Placeholder işlem yapılmamış</h1>

</div>

<h1>Placeholder işlem yapılmış</h1>

</div>

</body>

</html>

Demo / Ön izleme -> http://calismalar.aycan.net/placeHolder/

Adblock Html / Css Engelleme

Uzun zaman oldu yazmayalı.

Eşim dostum çok sitem etti “neden yazmıyorsun” diye, evet çok ihmal ettim sizleri ama bundan sonra yavaş yavaş toplamaya çalışacağım.

Konumuza dönecek olursak, psd to css işlemi yapan arkadaşlara ufak bir bilgi.

Html css js yazarken *-reklam-* isimli class/id veya dosya adı kullanmayın, Firefox Adblock eklentisi direk bu isimli dosyaları engelliyor, html objelerini ise gizliyor.

@font-face nedir? nasıl kullanılır ?

Cufon’un ie9 sürümlerindeki ufak bir hatası ve yaptığım sitelere harici bir js dosyası eklememek için(cufon insanı kısıtlıyor, huzursuz ediyor) üzerimdeki @font-face olan ön yargılarını yıktım. Artık font-face kullanmaya başladım.

@font-face nedir ?

@font-face web sitemizin yayınlandığı işletim sistemlerinde olmayan fontları o bilgisayarlara yükler. Yani özgürce web sitemizde font kullanabilir ve bu font’ları her bilgisayarda sorunsuz gösterebiliriz.

‘Aycan bu üsteki cümleden hiç birşey anlamadım çok kısa ‘ diyorsanız sizi buraya alalım. Okumaya devam et @font-face nedir? nasıl kullanılır ?

Arabirim geliştiricisi kimdir? Css yazarken dikkat edilmesi gereken kurallar

Merhaba arakdaşlar bu aralar çok gerginim iş yapasım gelmiyor bu boş zamanımda da bir makale yazayım dedim. Bu makalede elimden geldiğince css ile ilgili bilgiler vereceğim.

Arabirim geliştiricisi kimdir ?

Arabirim geliştiricisi kısaca var olan bir tasarımı tarayıcıların anlayacağı dile dönüştürmek demektir. Bu diller : Html , Css ve javascript’tir. Piyasada şuanda şeyini (elini) sallasan arabirimciye değiyor forumlarda görürseniz sayfasını 15 liraya yapan bile bulursunuz. Ama arabirim bu kadar basit bir alan değildir bir web sitesini gösteren kısım görselliktir görselliği web’e aktaran kısım arabirimdir. Bir tasarım yaptırdınız ve iyi kötü css e döktürdünüz Oh proje güzel oldu demeniz yanlış olur. Dün psd to css yapılmış bir işi php scripte giydirme işi aldım ve neredeyse bilgisayarı sinirden kıracaktım! Adam tasarımcı ve para dışarı gitmesin diye css ‘ide kendi yazmış “ee bu normal ?”, nah normal! Adam görüntüyü elde etmek için saçma salak şeyler yapmış anlamsız , gereksiz , boş divler vs vs. Ve bu işi gördükten sonra ben sayfa başı ücreti 100 lira alıyordum ve dedimki yuh ya css’leri karşılaştırsak ben sayfa başı 200 lira alsam azdır. Okumaya devam et Arabirim geliştiricisi kimdir? Css yazarken dikkat edilmesi gereken kurallar

Yeni eklenen resimli içerikler için hareketli resimler

Merhaba öncelikle bu yaptığım js kutuphanesi hakkında bir isim bulamadım o yüzden hareketli resimler diye bir isim uydurdum. Eğer bu özelliğin adı varsa afiş gösterici vs yorumda belirtirse sevinirim : )

Geçenlerde arkadaşım umutun bir projesinde arayüz geliştiricisi olarak yer aldım. Proje sinema ile ilgili bir siteydi ve bir kaç js özelliği vardı sinemaz.com buyrun burdan bakabilirsiniz. Bende hazır eklentileri kullanacağıma kendi kütüphanemi geliştireyim dedim ve ikinci uygulamamı yazdım. Uygulama biraz basit oldu ama işlevselliği var o yüzden sağdan sola kayan resimler beni sıkıyor ben değiştireyim diyorsanız bu hareketli resimler uygulaması tam size göre.

Uygulamaya giriş :

Uygulamada kullanılan diller : Css & jQuery

İlk işimiz olarak html ve css dosyamızı hazırlıyoruz kodlar; Okumaya devam et Yeni eklenen resimli içerikler için hareketli resimler