Ana Sayfa / Kodlama Dilleri / Klavye Tuşları Oluşturmak

Klavye Tuşları Oluşturmak

CSS ile Klavye Tuşları…

Bu css ile gerçekten inanılmaz görseller çıkartılabiliyor. Bu dersimizde sizin için ufak bir css kodlaması hazırladık. Bu kodlama sayesinde resimde de gördüğünüz üzere sanki klavye tuşları oluşturuyor gibi yazı yazabilirsiniz. Başlık yada ilgi çekici yazılarda kullanılabilecek bir kodlama olup istediğinizde değişiklik yaparak farklı görseller oluşturabilirsiniz.

CSS Kodları

.gtmKey {
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;

Öncelikle bu CSS kodları sitenizin css stil sayfasına eklemeniz gerekiyor. Kodlamada herhangi bir değişiklik yapmanız görünümün bozulmasına neden olabileceğinden kodları olduğu gibi css dosyasınıza kopyalayın.

Kodları kopyaladıktan sonra sitenizde göstermek için ise;

HTML Kodları<div class=”gtmKey”>G</div>

yukarıdaki kodlamayı sayfanızda uygulamanız gerekiyor. Her harf için aynı kod dizisini tekrayarak yazdığınızda yazılarınız resimde de gördüğünüz üzere klavye tuşları şeklinde görünüyor.

Yorum Yazın

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir