CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme

Merhabalar, önceki html site yapımı konulu ders serisinde standart HTML ve CSS kodlarını kullanarak basit bir web sitesi yapmıştık. Bu dersimizde ise CSS bilgisini biraz daha ilerletmek amacıyla CSS Buton Yapımı nasıl olur ve siteye eklediğimiz fotoğrafların kenarlarını nasıl ovalleştirebileceğimizi göstereceğim. Bu konuları öğrendikten sonra ise bir sonraki dersimiz HTML Üye Kayıt Sayfası nasıl yapılır onu öğreneceğiz.

 

Resmi oval yapma ile başlayalım;

 

Komutumuz: border-radius: 10%;
Stil satırları arasına ekleyeceğimiz bu komut ile yüzde değerini belirlediğimiz ölçüde resmin kenarlarını yuvarlayabiliyoruz.
Şimdi bunu bir class’a atayarak örnek kodumuzu yazalım.
ovalyap1 ve ovalyap2 adında 2 adet class oluşturarak %10 ve %50 kullanımlarına örnek verdik.

 

 


<html>
<head>
<title>Ders - CSS Buton Yapımı Ve CSS İle Resmi Ovalleştirme</title>
<meta charset="utf-8">

<style>

.ovalyap1{
border-radius: 10%;
}

.ovalyap2{
border-radius: 50%;
}
</style>
</head>

<body>

<img src="https://unsplash.it/300/300/?random">
<img src="https://unsplash.it/300/300/?random">

</body> </html>

CSS Buton Yapımı

 

Burda kullanacağımız kodları tek tek açıklayacağım. Bir buton oluşturduktan sonra classımıza yazacağımız kodlar ve açıklamaları;

 

background-color:#44c767; –> Arka plan rengi
border:1px solid #18ab29;   –> 1px lik Sınır çizgisi belirleme ve renklendirme
cursor:pointer;               –> Üzerine gelince Mouse’nin imlecini değiştirme
color:#ffffff;                    –> Yazı rengi
font-family:Arial;           –> Yazı tipi
font-size:19px;                –> Yazı Boyutu
padding:20px 63px;      –> Div içerisine alan belirleme
text-decoration:none;   –> Yazının altı çizili çıkmasını engelleme

 

Buton classımıza hover (üzerine gelince yapılmasını istediğimiz komutları yazacağız) ve active (tıklanınca yapılmasını istediğimiz komutları yazacağız) özelliğini kullanarak extra güzel bir görüntü katacağız.

 

CSS kodlarımız

 


.buton {
background-color:#44c767;
border:1px solid #18ab29;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding:20px 63px;
text-decoration:none;
}
.buton:hover {
background-color:#5cbf2a;
}
.buton:active {
position:relative;
top:2px;
}

 

 

Html Kodumuz

<button>Kayıt</button>

 

Yaptığımız çalışmanın Web görüntüsüne erişmek için buraya tıklayın

 

 

9 Şubat 2019
bosluk

Css ve jquery ile desen kilidi yapımı

Css ve jquery dersleri – desen kilidi yapımı

Selamün Aleyküm değerli takipçilerim, Html site yapımı derslerimizde html sayfa oluşturma ve html sayfalara link verme işlemlerini anlattım ve jquery konusuna da iki dersimde değindim. Bugün hem bildiklerimizi pekiştirmek adına hemde yeni bilgiler katmak adına uygulamalı bir örnek yapacağız.  Bu uygulama ile akıllı telefonlardaki “Desen Kilidi” sistemini web ortamında yaparak mantığını az da olsa kavramanızı sağlayacağım. Telefondaki gibi desen çizerek doğru veya yanlış şifreler ile giriş yapmaya çalışacağız.

Css Dersleri” ve jquery dersleri‘nin bir arada olduğu konunun videosu

25 Aralık 2016
bosluk

Html & Css dersleri 8 – css ile açılır kutu div

Merhaba arkadaşlar, bugün ki dersimize Css ile devam edeceğiz. Html derslerinin mantığını az çok kaptığınızı düşünüyorum bu yüzden Css dersleri ile devam etmeyi uygun buldum.

Bu derste css ile açılır menü (div) nasıl yapılır onu göstereceğim ayrıca css’de class yapısı da daha iyi oturmuş olur kafanızda. Lafı fazla uzatmadan “css açılır kapanır div” videomuza geçelim.

Kodların Browserde Görüntüsüne Bakmak İçin Tıklayın

17 Haziran 2015
bosluk

Html dersleri 7 – Css ile menu yapımı

Merhaba Arkadaşlar, bugün ki konumuz html tasarıma renk katan ve birçok ekstra özellik getiren css kodlarıdır. Daha önceki html derslerinde yaptığımız web site örneğini şimdi css kodlarını kullanarak kolaylaştırıp css ile menü yapıcaz.

Çok yararlı olacağını düşündüğüm için video olarak yapmaya karar verdim umarım başından beri dersleri takip edenlere epey faydası olacaktır.

 

Kodların browserde görünümü için tıklayın

15 Mart 2015
bosluk
jquery kodları Son Yazılar