Css

Select Box Ok İkonunu Değiştirmek

2 yorum

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

Css, Web Programlama

Psd to Css Nedir?

2 yorum

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, Web Programlama

CSS ile Resmi Üstten ve Alttan Ortalamak

4 yorum

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

Css, Web Programlama

File Upload Şeklini Değiştirmek

1 Yorum

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