aycanbulbul.com.tr ‘deki cv’yi bir kaç kişi istedi ve bende paylaşmak istedim.
Ön izleme : www.aycanbulbul.com.tr
İndirmek için -> İndir
Bu tasarım özgürüm.net tarafından çizilmiştir.
Cascading Style Sheets hakkındaki sorunlar / çözümler ve hazır kod parçacıkları,
aycanbulbul.com.tr ‘deki cv’yi bir kaç kişi istedi ve bende paylaşmak istedim.
Ön izleme : www.aycanbulbul.com.tr
İndirmek için -> İndir
Bu tasarım özgürüm.net tarafından çizilmiştir.
Ne güzel hayatımıza placeholder(bu bir attribute’dir.) girdi ve aşağıdaki aptal kodu yazmıyoruz.
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ı
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
:-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
Tüm kodlar :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!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> |
Demo / Ön izleme -> http://calismalar.aycan.net/placeHolder/
Her zaman müşterilerin işlerini zamanında yapar ancak kendi işlerimi yapmam 🙂 Şuan localhost’da kendim için çizdirdiğim ve psd 2 css işlemi yapmadığım bir sürü psd var, bunları zamanla Psd kategorisinden sizlerle paylaşacağım.
İlk paylaşım 2010 yılında aycan.net için çizim yaptırdığım blog ve portfoy sayfasını sizinle paylaşıyorum. Okumaya devam et PSD paylaşımları // Blog ve portfoy sayfası
Merhaba arkadaşlar,
Twitter’da paylaştım ilgi gördü o yüzden sizleride bu konudan mahrum etmek istemedim.
Responsive psd to css işlemi yaparken tarayıcının genişliği çok önemli oluyor, her seferinde bunu ölçmek için ya measureit eklentisiyada firebug console‘u açıyorum jQuery ile dökümanın genişliğini alıyorum vs vs.
Yukarıdaki yöntemler zaman aldığı için bir kaç satırdan oluşan jquery yazdım, Tarayıcı resize olduğunda sitenin sağ alt köşesine bir span atıp, içine ekran genişliğini yazıyor. Okumaya devam et Responsive çalışma yapan arkadaşların işini hızlandırmak için…
Merhaba arkadaşlar,
Margin ile yatay ortalamak :
Width değeri olan ve float değeri olmayan nesneleri margin ile ortalarız.
Html :
1 2 3 4 5 |
<div class="marginOrtala"> Margin: 0px auto; veya margin-left:auto; margin-right:auto; </div> |
Css:
1 2 3 4 5 6 |
.marginOrtala { width: 500px; margin: 0px auto; background:green; height:300px; } |