Boxes

Kategori: CSS , 29 Ekim 2019 , JanFranco


Önceki yazılarımda da bahsettim, HTML'de seçilen her element, obje aslında bir kutunun içindedir. Bu yazımda bu kutuyla oynamayı göreceğiz. İlk olarak boyutları ile oynayalım. width ve height özellikleri ile kutunun boyutlarını değiştirebiliriz:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			div {
				height: 300px;
				width: 300px;
				background-color: #0088dd;
			}
		</style>
	</head>
	<body>
		<div>
			<p>The Moog company pioneered the commercial
			manufacture of modular voltage-controlled
			analog synthesizer systems in the early
			1950s.</p>
		</div>
	</body>
</html>
css-boxes

Tarayıcı boyutları değiştiğinde bu bahsettiğim kutuların da boyutları değişmektedir. Örneğin mobil cihazdan girildiğinde bir objenin kutusunun boyutu farklıyken, büyük ekranlı bir masaüstü bilgisayardan girildiğinde farklı bir boyut görürürüz. Cihazdan bağımsız olarak min-width, max-width, min-height, max-height özellikleri bir kutunun maximum ve minimum alabileceği boyutları belirleyebiliriz:


h2, p {
	width: 400px;
	font-size: 90%;
	line-height: 1.2em;
}
p {
	min-height: 10px;
	max-height: 30px;
}

td.description {
	min-width: 450px;
	max-width: 650px;
	text-align: left;
	padding: 5px;
	margin: 0px;
}
Bazı durumlarda kutunun içerisindeki veri taşabilir. Bu durumda overflow özelliği ile bu durumu değiştirebiliriz. overflow özeliği hidden ve scroll olmaz üzere iki değer alır. hidden değerinde taşan veri silinir. scroll değeri verilirse taşan kısma scroll çubuğu ile ulaşabiliriz.


p.one {
	overflow: hidden;
}
p.two {
	overflow: scroll;
}
border-width özelliği ile kutuların sınırını büyültebiliriz. Değer olarak piksel verebiliriz. Yazı ile thin, medium veya thick olarak belirtebiliriz. Eğer bazı kenarlar birbirinden farklı ise saat yönünde (üst kenar, sağ kenar, alt kenar, sol kenar) şeklinde piksel değerlerini belirtebiliriz:


p.one {
	border-width: 2px;
}
p.two {
	border-width: thick;
}
p.three {
	border-width: 1px 4px 12px 4px;
}
border-style özelliği ile sınırları değiştirebiliriz. Resim üzerinden etkiyi görebilirsiniz:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			p.one {border-style: solid;}
			p.two {border-style: dotted;}
			p.three {border-style: dashed;}
			p.four {border-style: double;}
			p.five {border-style: groove;}
			p.six {border-style: ridge;}
			p.seven {border-style: inset;}
			p.eight {border-style: outset;}
		</style>
	</head>
	<body>
		<div>
			<p class="one">Wurlitzer Electric Piano</p>
			<p class="two">Wurlitzer Electric Piano</p>
			<p class="three">Wurlitzer Electric Piano</p>
			<p class="four">Wurlitzer Electric Piano</p>
			<p class="five">Wurlitzer Electric Piano</p>
			<p class="six">Wurlitzer Electric Piano</p>
			<p class="seven">Wurlitzer Electric Piano</p>
			<p class="eight">Wurlitzer Electric Piano</p>
		</div>
	</body>
</html>
css-boxes

boder-color özelliği ile sınırların renklerini değiştirebiliriz:


p.one {
	border-color: #0088dd;
}
p.two {
	border-color: #bbbbaa #111111 #ee3e80 #0088dd;
}
Kalınlık, stil ve renki tek bir özellikte de yazabiliriz:


p {
	width: 250px;
	border: 3px dotted #0088dd;
}
padding özelliği ile kutunun içerisindeki yazıyı kenarlardan uzaklaştırabiliriz:


p {
	width: 275px;
	border: 2px solid #0088dd;
}
p.example {
	padding: 10px;
}
css-boxes

Margin özeliği ile kutular arasındaki mesafeyi değiştirebiliriz. Eğer kutuyu ortalamak istiyorsak auto değerini kullanabiliriz:


p {
	width: 200px;
	border: 2px solid #0088dd;
	padding: 10px;
}
p.example {
	margin: 20px;
}

p.example {
	margin: 10px auto 10px auto;
	text-align: left;
}
display özelliği ile li gibi inline elementleri, objeleri birer blok haline getirebiliriz. Değer olarak inline, block, inline-block ve none değerlerini alabilir. inline değeri ile block-level bir objeyi inline elemente çevirebiliriz. block değeri ile inline elementi, block-level elemente çevirebiliz. none değeri ile elementleri gizleyebiliriz:


li {
	display: inline;
	margin-right: 10px;
}

li.coming-soon {
	display: none;
}
css-boxes

Burada display: inline diyerek her bir liste objesinin bir kutunun içerisindeymiş gibi olmasını sağladık ve bu sayede margin-right özelliğini kullanabildik. Böylece objeler yan yana durmuş oldu.

visibility özelliği ile objeleri gizleyebiliriz. Fakat objelerin asıl olduğu yerde bir boşluk bırakır. visible ve hidden değerlerini alabilir:


li {
	display: inline;
	margin-right: 10px;
}

li.coming-soon {
	visibility: hidden;
}
border-image özelliği ile sınırlara resim ekleyebiliriz. Değer olarak resmin yolunu, resmin nereden kesileceğini ve köşeler için ne yapılacağı bilgisini alır:


p.one {
	-moz-border-image: url("images/dots.gif")
	11 11 11 11 stretch;
	-webkit-border-image: url("images/dots.gif")
	11 11 11 11 stretch;
	border-image: url("images/dots.gif")
	11 11 11 11 stretch;
}
p.two {
	-moz-border-image: url("images/dots.gif")
	11 11 11 11 round;
	-webkit-border-image: url("images/dots.gif")
	11 11 11 11 round;
	border-image: url("images/dots.gif")
	11 11 11 11 round;
}
Üçüncü değer olarak stretch, repeat ve round değelerini verebiliriz. stretch değerinde resim sınır boyutunca gerilir, repeat değerinde resim tekrar eder, round değerinde de resim tekrar eder ancak tam oturmazsa boyutu yuvarlar. -moz-border-image ve -webkit-border-image özellikleri border-image ile aynıdır fakat border-image her tarayıcıda çalışmamakta, özellikle eski tarayıcılarda bu nedenle bu özellikleri de kullanmalıyız.

css-boxes

border-shadow özelliği ile sınırlara gölge ekleyebiliriz. Değer olarak yatay düzlemde gölge boyutunu ve dikey düzlemde gölge boyutunu göndermeliyiz. Ekstra olarak üçüncü bir değer göndererek blur etkisini de belirleyebiliriz. Son değer ise renk değeridir:


p.one {
	-moz-box-shadow: -5px -5px #777777;
	-webkit-box-shadow: -5px -5px #777777;
	box-shadow: -5px -5px #777777;
}
-moz-box-shadow, -webkit-box-shadow özellikleri tarayıcısı eski kullanıcılar içindir, tanımlamamız önemlidir.

css-boxes

border-radius özelliği ile sınırların köşelerini yumuşatabilir, daireleştirebiliriz. Değer olarak piksel verebiliriz, 4 köşe için de geçerli olur. 4 değer girerek 4 köşe için de geçerli yapabiliriz.


p {
	border: 5px solid #cccccc;
	padding: 20px;
	width: 275px;
	text-align: center;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
css-boxes


Sonraki Yazı: Lists, Tables, Forms
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın