Css - Kutu Yapımı ve Kutuya Yuvarlak Kenarlık Eklemek | Mmsrn.com

« Kimya – Mol Hesaplamaları Örnek Soru Çözümleri

Bu konumuzda sizlere Html-Css kutu yapımını ve kutuya yuvarlak kenarlık eklemeyi anlatacağız.Bu konu Html ve Css kodlamaya yeni başlayanlar için faydalı olabilir.

Öncelikle html kodları yazmak için index.html adında bir metin belgesi oluşturalım.Sonrasında css kodlarımızı yazmak için css.css adında bir metin belgesi oluşturalım.Sonrasında kodları paylaşalım.Kodların açıklamaları yanlarında yazılmıştır.

Css Kutu Yapımı

Html Kodları;

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!--Türkçe karakterlerin yazılışı için ekliyoruz.-->
<link type="text/css" rel="stylesheet" href="css.css" /> <!--Burada css.css dosyasını html kodlarına bağlıyoruz.-->
</head>
<body>
<div id="kutu"></div> <!--Kutumuzu div'lerle oluşturuyoruz.Kutumuzun kodları css kısmında yer almaktadır.-->
</body>
</html>

<html>

<head>

</head>

<body>

</body>

</html>

Css Kodları;

#kutu{
 width: 50px; /*Kutumuzun genişliğini 50 piksel ayarladık.*/
 height: 50px; /*Kutumuzun yüksekliğini 50 piksel ayarladık.*/
 background-color: red; /*Kutumuzun rengini kırmızı yaptık*/
}

#kutu{

width: 50px; /*Kutumuzun genişliğini 50 piksel ayarladık.*/

height: 50px; /*Kutumuzun yüksekliğini 50 piksel ayarladık.*/

background-color: red; /*Kutumuzun rengini kırmızı yaptık*/

}

Gördüğünüz gibi kodlarımız bu şekildedir.Kutumuzu oluşturmak için css kodlarında kutuya yükseklik,genişlik ve arka plan rengi vermemiz gerekiyor.Sonrasında html kodları ile “#kutu” id’sini çekmemiz gerekiyor.Şimdi de ekran görüntüsüne göz atalım.

Şimdi ise kutumuza yuvarlak kenarlık eklemeyi anlatalım.

Css Kutuya Yuvarlak Kenarlık Eklemek

Css Kodlar;

#kutu{
width: 50px;
 height: 50px;
 background-color: red;
 border-radius: 5px;
}

#kutu{

width: 50px;

height: 50px;

background-color: red;

border-radius: 5px;

}

Kutumuza yuvarlak kenarlık eklemek için border-radius kodunu kullanmamız gerekmektedir.Şimdi de yuvarlak kenarlık eklenmiş haline bakalım.

Gördüğünüz gibi kutumuzda yuvarlık kenarlıklar oluştu.Bu yuvarlık derecesini “border-radius:5px;” yerine istediğiniz gibi px verebilirsiniz.Bu sayede daha da yuvarlak şekilde kutu oluşur.Eğer bu px değerini 30px yaparsanız kutumuz yuvarlak olur.Yani daire şekline dönüşür.

Gördüğünüz gibi kodumuzu “border-radius: 30px;” olarak değiştirdik ve kutumuz yuvarlak şekline dönüştü.Bu şekilde istediğiniz gibi oynamalar yapabilirsiniz.

Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?