Select Box Ok İkonunu Değiştirmek

Select Box , Listbox, Dropdown list’lerin ok ikonunu değiştirmek css ile mümkün. Aşağıdaki css kodları ile istediğiniz ikonu koyabilirsiniz.
appearance mevcut ok ikonunu kaldırmaya yarıyor ve background ile de kendi ikonumuzu yerleştirmiş oluyoruz.
Örnek selectbox
selectbox icon değiştirme
icon.png yerine istediğiniz resmi koyabilirsiniz.

select{
width: 100px;
-webkit-appearance: none; /* WebKit */
-moz-appearance: none; /* Mozilla */
-o-appearance: none; /* Opera */
-ms-appearance:none; /* Internet Explorer */
appearance: none; /* CSS3 */
padding: 2px;
border: none;
background: url("icon.png") no-repeat #fff right center;
}
Continue Reading

Psd to Css Nedir?

Bu makale de psd to css nedir ve nasıl yapılır bunları anlatmaya çalışacağım.
Öncelikle psd nedir buna bakalın:
Psd  Photoshop programının kaydettiği uzantıdır.
 
Peki Css nedir?
Css Stil şablonları anlamına gelir. Bildiğimiz html içinde kullandığımız stiller, neler bunlar : width , height , font-size vs.
Aslında her webmaster adayının bileceği yada bilmesi gerek şeyler. Css’i detaylı olarak daha sonraki makalelerimde anlatacağım.

Continue Reading

CSS ile Resmi Üstten ve Alttan Ortalamak

Css 2.0 ile resmimizi alttan ve üstten ortalamak ne kadar zor görünse de aslında o kadar zor değil. birkaç tane iç içe div ile bunu halledebiliriz.  Aşağıda css ve html kodlarını bulabilir ve örnek uygulamayı görebilirsiniz.
 
CSS Kodlarımız :

.anatablo{width:500px;height: 250px;display: table;#position: relative; overflow: hidden;text-align:center;margin:0 auto;border:solid 2px #000}
.anatablo .ictablo{#position: absolute; #top: 50%;#left:50%;display: table-cell; vertical-align: middle;border:solid 2px #000}
.anatablo .ictablo .resim{max-width:300px;max-height:150px;#position: relative; #top: -50%;#left:-50%;border:solid 2px #000}

Not : # ile başlayan css kodları sadece internet explorer’da görünür. ie de sorunsuz çalışması için bu kodlarda gerekli.
 
Html Kodlarımız

<div class="anatablo">
<div class="ictablo"><img class="icerik" src="http://eyurtsever.com/logo.png" alt="eyurtsever.com" /></div>
</div>

Çalışan Uygulamayı görmek için tıklayınız

Continue Reading

File Upload Şeklini Değiştirmek

File upload görünümünü değiştirmek için aşağıdaki css kodlarını kullanabilirsiniz.
 
 

.upload {
            width: 106px;
            height: 32px;
            background: url(/eyurtsever/Images/btnfile.png); /* istediğiniz görseli koyun*/
            overflow: hidden;
            margin-bottom: 8px;
            cursor: pointer;
        }
.upload input {
                display: block !important;
                width: 106px !important;
                height: 32px !important;
                opacity: 0 !important;
                overflow: hidden !important;
                cursor: pointer !important;
            }
input.file {
            width: 150px;
            height: 20px;
            border: 1px solid #BBB;
            border-right: 0;
            color: #888;
            padding: 5px;
            -webkit-border-top-left-radius: 5px;
            -webkit-border-bottom-left-radius: 5px;
            -moz-border-radius-topleft: 5px;
            -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            outline: none;
        }

 
Kullanımı :


Continue Reading