CSS ile klavye tuşlari

CSS ile klavye tuşları

SiberKültür ile oynayın yazısındaki gibi klavye kısayolları yapmak, oldukça kolay olduğu gibi estetik olarak da oldukça işinize yarayacaktır. Üstelik resim kullanmak yerine, sadece kısacık CSS kodu yazarak.

CSS Kodları:

.ceoxi {
font: 10px/18px Tahoma Arial, Helvetica, sans-serif;
background: #f1f1f1;
margin: 5px;
cursor: default;
border-width: 1px 3px 4px 2px;
border-style: solid;
border-color: #e1e1e1 #d1d1d1 #c1c1c1 #b1b1b1;
display: inline;
padding: 3px 5px 3px 5px;
}

Html içinde kullanımı:

<-div class="ceoxi"->S<-/div-> tireler olmadan

Çıkacak görüntü:

S

Hazır yeri gelmişken, farketmişsinizdir burada border özelliğinin farklı bir kullanımı var. Klavye tuşumuzda, 4 farklı kenar için 4 farklı boyut ve renkte kenarlık kullanmamız gerekiyordu. 4 ayrı kenar için, 3 ayrı özelliği tekrar yazmaktansa, yani:

border-bottom-color, border-bottom-style, border-bottom-width

Yerine kısaltma yoluna gittim:

border-width: 1px 3px 4px 2px;
border-style: solid;
border-color: #e1e1e1 #d1d1d1 #c1c1c1 #b1b1b1;

Bu sayede 9 satırlık kod, sadece 3 satıra inmiş oldu. Kodun açıklamasına bakarsak:

border-width: 1px 3px 4px 2px; /* üst sağ alt sol */
border-style: solid;
border-color: #e1e1e1 #d1d1d1 #c1c1c1 #b1b1b1; /* üst sağ alt sol */
Artık gönül rahatlığıyla yazıyı iki bağlantıyla kapatabiliriz: Tamamen CSS ile yapılmış klavye 1 ve klavye 2

Anlaşıldığı gibi bu yazı siberkültürden alınmıştır süper birşey ben denedim örnek için sayfanın altına bakınız