Css – Kutu Yapımı ve Kutuya Yuvarlak Kenarlık Eklemek

Css – Kutu Yapımı ve Kutuya Yuvarlak Kenarlık Eklemek

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>

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*/
}

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;
}

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…

  • Beğen  
---Bizlere Destek Olmak İçin Aşağıdan Yorum Yazmayı ve Yazılarımızı Sosyal Medyada Paylaşmayı Unutmayınız---
admin

Merhabalar sitemizde sizler için birbirinden kaliteli paylaşımlar yapmaktayız.Her konuda bilgili editör arkadaşlarımızla sizlere faydalı ve eğitici makaleler paylaşmaktayız.Ders notları,seo,oyun,dini bilgiler vb. tüm alanda sizler için en iyi içerikleri üretmekteyiz.Bizleri takip ettiğiniz için teşekkür ederiz…

Benzer Yazılar

Bu yazıya henüz yorum yapılmamıştır, ilk yorumu yapmak için tıklayın.

Bir Cevap Yazın

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

*
*

Time limit is exhausted. Please reload CAPTCHA.