CSS kullanarak şekillerin boyutunu ve konumunu ayarlamak oldukça kolaydır Şekillerin içeriği, şeklin çalışma alanında yer alır ve bu alanın boyutu, elementin boyutuna bağlıdır Şekillerin boyutunu ayarlamak için width ve height özellikleri kullanılır Box-sizing özelliği sayesinde, içerik, padding ve border dahil edilerek bir şeklin boyutu hesaplanabilir Content-box seçeneği, içerik boyutlarına göre şekil boyutunu hesaplar, border-box seçeneği ise padding ve border dahil ederek hesaplar Positioning ve float özellikleri ile şekillerin konumu ayarlanabilir, transform ve transition özellikleri ile boyutları ve konumları dinamik olarak değiştirilebilir Şekillerin çalışma alanı, HTML bileşenlerinde yer alan içerik ile CSS özellikleri kullanılarak yaratılabilir Bu amaçla, şeklin boyutları, shape-outside, genişliği ve yüksekliği özellikleri ile ayarlanabilir Box-sizing özelliği kullanılarak şeklin boyutları hesaplanırken, content-box ve border

CSS kullanarak şekillerin çalışma alanını ayarlamak oldukça kolay ve işlevsel bir yöntemdir. Şekil elementlerinin içeriği, çalışma alanlarında yer alır. Bu alanın boyutu, elementin boyutuna bağlı olacaktır. Bu makalede, şekillerin boyutu ve konumu ayarlandığı zaman çalışma alanlarının nasıl değiştirilebileceğine dair bilgi edineceksiniz.

Şekillerin boyutunu ayarlamak için width ve height özellikleri kullanılır. Ayrıca, box-sizing özelliği de kullanılır. Box-sizing özelliği sayesinde, bir şeklin boyutu hesaplanırken içerik, padding ve border dahil edilebilir. Bununla birlikte, content-box ve border-box seçenekleri de kullanılabilir. Content-box seçeneği, içerik boyutlarına göre şekil boyutunu hesaplar. Border-box seçeneği ise padding ve border dahil edilerek şekil boyutu hesaplanır.

Bununla birlikte, max-width ve max-height özellikleri kullanılarak bir şeklin maksimum boyutları belirlenebilir. Positioning ve float özellikleri de kullanılarak, şekillerin konumu ayarlanabilir. Positioning özelliği ile bir şeklin koordinatları belirtilebilir. Float özelliği kullanılarak şekillerin yan yana hizalanması sağlanabilir.

Transform ve transition özellikleri kullanılarak, şekillerin boyutları ve konumları dinamik olarak değiştirilebilir. Transform özelliği kullanılarak bir şeklin boyutları ve konumu değiştirilebilir. Transition özelliği, bir şeklin boyutlarının ya da konumunun dinamik olarak değiştirilmesini sağlar.

Çalışma Alanı Kavramı

Web sayfalarında küçük veya büyük pek çok şekil kullanılabilir. Bu şekiller, sayfanın daha estetik görünmesi ve daha anlaşılır hale gelmesi için kullanılır. Ancak, şekillerin gösterildiği alanın boyutu, şeklin içeriğine göre ayarlanması gerekmektedir. Bu amaçla, CSS kullanarak bir şeklin çalışma alanını ayarlamak oldukça kolaydır.

Bir şeklin çalışma alanı, şeklin içeriğinin yer aldığı alandır. Bu alan, şeklin boyutlarına, içeriğine ve diğer özelliklerine göre değişebilir. Çalışma alanı, HTML bileşenlerinde yer alan içerik ile CSS özellikleri kullanılarak yaratılabilir. Şeklin boyutları, şeklin genişliği ve yüksekliği özellikleri ile ayarlanabilir. Ancak, şeklin içeriği, padding ve border dahil edildiğinde boyutunu artırabileceği için, box-sizing özelliği kullanılarak şeklin boyutları hesaplanmalıdır.

width ve height Özellikleri

Web sayfalarında şekillerin boyutları, genellikle width ve height özellikleri kullanılarak ayarlanır. Bu özellikler, şeklin genişliği ve yüksekliği için piksel olarak belirtilen bir değer alır. Örneğin, width="200px" yazarak bir şeklin genişliğini 200 piksel olarak belirleyebilirsiniz.

width ve height özellikleri ayrıca % değerleri ile de belirtilebilir. Bu durumda, şekil sayfanın boyutlarına göre orantılı bir şekilde büyür veya küçülür. Örneğin, width="50%" yazarak bir şeklin genişliğinin sayfanın yarısına denk gelmesini sağlayabilirsiniz.

Bazı durumlarda, bir şeklin boyutunu belirlemek için sadece width veya height özelliği yeterli değildir. Örneğin, bir kare resimde, width özelliği belirlendiğinde yükseklik de aynı değerde olmalıdır ki resim çarpık görünmesin. Bunu engellemek için, width ve height özellikleri birlikte kullanılabilir. Örneğin, width="200px" height="200px" yazarak bir kare resmin boyutlarını belirleyebilirsiniz.

Box-sizing Özelliği

CSS'de en sık kullanılan özelliklerden biri olan "box-sizing", bir şeklin boyutlarının padding ve border dahil edildiğinde nasıl hesaplanacağını belirler. Bu özellik sayesinde, bir şeklin boyutları değiştirildiğinde, içeriğin içinin daraltılması ya da dışarı taşması gibi problemlerle karşılaşılmaz.

Box-sizing özelliği kullanılırken content-box ve border-box seçenekleri mevcuttur. Content-box seçeneği, şeklin içeriğine göre boyutlarının hesaplanmasını sağlar. Border-box seçeneği ise, padding ve border dahil edilerek şeklin boyutunu hesaplar. Bu nedenle, border-box seçeneği kullanılırken padding ve border değerleri de göz önünde bulundurulmalıdır.

Özellik	Değerler	Açıklama
box-sizing	content-box	Şekil boyutu içeriğe göre hesaplanır
	border-box	Şekil boyutu padding ve border dahil edilerek hesaplanır

Box-sizing özelliği, bir şeklin boyutunu belirlerken oldukça önemlidir. Özellikle responsive tasarımlarda, farklı ekran boyutlarına uyum sağlamak için kullanılır. Bu sayede, şekillerin boyutları değişirken içeriklerin olduğu gibi kalması sağlanır.

Content-box ve Border-box Seçenekleri

Şekil boyutları belirlerken, içerik, padding ve border değerlerinin bir arada hesaplanması oldukça zahmetli olabilir. CSS'te content-box ve border-box seçenekleri kullanılarak, bu zahmetli hesaplamalar otomatik olarak gerçekleştirilebilir.

Content-box seçeneği, şeklin boyutunun sadece içerik boyutlarına göre hesaplandığı anlamına gelir. Yani padding ve border değerleri şekil boyutuna eklenmez.

Border-box seçeneği ise padding ve border dahil edilerek şekil boyutu hesaplanır. Bu özellik sayesinde, içerik boyutu değişse bile şeklin boyutu sabit kalır.

Content-box Seçeneği	Border-box Seçeneği
İçerik boyutlarına göre şekil boyutu hesaplanır.	Padding ve border dahil edilerek şekil boyutu hesaplanır.
Padding ve border değerleri şekil boyutuna eklenmez.	Content-box seçeneği ile karşılaştırıldığında daha az zahmetli hesaplamalar yapılabilir.

Max-width ve Max-height Özellikleri

Max-width ve max-height özellikleri, bir şeklin belirli bir maksimum boyuta sahip olmasını sağlar. Bu özellikler, şeklin ekranın boyutundan daha büyük olmasını önlüyor. Özellikle responsive web tasarımında yaygın olarak kullanılırlar. Böylece, sayfa boyutlarına ve cihazın boyutuna uyum sağlayarak kullanıcı deneyimini iyileştirirler.

Max-width özelliği, bir şeklin genişliğinin belirli bir maksimum değerle sınırlandırılmasını sağlar. Eğer bir şekil örneğin (img) etiketi içinde kullanılıyorsa, max-width özelliği kullanılarak görüntü orantılarının korunması ve sayfa tasarımı üzerinde daha fazla kontrol sağlanabilir.

Max-height özelliği ise bir şeklin yüksekliğinin belirli bir maksimum değerle sınırlandırılmasını sağlar. Özellikle, bir metin kutusunun boyutu sınırlandırılmak isteniyorsa max-height kullanmak faydalıdır.

• Max-width özelliğinin kullanımı:

Kod	Açıklama
img { max-width: 100%; }	Bir resmin genişliği, ekran boyutu dahilinde en fazla genişlik boyutunda kalmalıdır.

• Max-height özelliğinin kullanımı:

Kod	Açıklama
.metin-kutusu { max-height: 250px; overflow: auto;}	Bir metin kutusunun boyutu, belirli bir yükseklik değerinde kalacak şekilde sınırlanabilir. Bu özellik ayrıca metnin scroll bar ile görüntülenmesini sağlar.

Bir şeklin max-width ve max-height özelliklerinin doğru bir şekilde kullanılması, web sayfasının düzgün bir şekilde görüntülenmesine yardımcı olur. Kullanıcıların cihazlarına göre farklı boyutları olabilen web sayfalarının responsive tasarımı, hem görsel hem de kullanıcı deneyimi açısından oldukça önemlidir.

Positioning ve Float Özellikleri

Web sitelerindeki şekillerin konumlandırılması oldukça önemlidir. Bu konuda CSS'de bulunan positioning ve float özellikleri oldukça kullanışlıdır. Positioning özelliği ile şekillerin kesin koordinatları belirlenebilir. Bu koordinatlar left, right, top ve bottom olarak belirlenebilir. Bu sayede şekiller, arka plandaki diğer ögelerle çakışmadan belirli bir bölgede yer alabilir. Float özelliği ise şekillerin yan yana hizalanması için kullanılır. Bu özellik sayesinde bir sayfada birden fazla şekil yan yana konumlandırılabilir.

Özellikle web sitelerindeki menülerde sıklıkla kullanılan float özelliği, bir div ögesine float: left; özelliğinin verilmesiyle bütün ögelerin yan yana gelmesini sağlar. Böylece menüler, daha okunaklı bir görüntü oluşturur. Positioning özelliği ise özellikle detaylı web tasarımlarında kullanılır. Bir öge, sayfanın sol üst köşesinden belli bir uzaklıkta yer alması isteniyorsa, positioning özelliği kullanılabilir.

Positioning ve float özellikleri, web tasarımı alanında sıklıkla kullanılan özelliklerdir. Bu özellikler sayesinde, şık tasarımlar oluşturulabilir ve kullanıcı deneyimi artırılabilir. Özellikle float özelliğinin kullanımı, web sitelerinin tasarımında oldukça önemlidir.

Positioning Özelliği

Positioning özelliği, bir şeklin koordinatlarını belirlemek için kullanılır ve bu sayede şekillerin konumu daha iyi kontrol edilebilir. Bu özelliğin kullanımı, özellikle web sayfalarındaki navigation bar gibi öğelerin yerleştirilmesinde oldukça önemlidir.Positioning özelliği için, left, right, top ve bottom değerleri kullanılabilir. Bu değerler, belirli bir birime göre (örneğin, pixeller veya yüzde) belirtilebilir ve bir şeklin exact konumunu belirlemek için kullanılır. Örneğin, left: 10px ve top: 20px değerleri bir şekli ekranda koordinatları (10,20) belirleyerek hareket ettirir. Positioning özelliği, aynı zamanda z-index özelliği ile birleştirilerek, şekillerin üst üste binmesine izin verir. Bu özellik, birçok farklı şekil ve büyüklüklerin kullanıldığı kompleks web sayfalarında dikkate değer bir avantajdır.Aşağıdaki örnek kod, bir kutunun (div) konumunu sol üst köşeye ayarlar:Kısacası, positioning özelliği, şekillerin konumunu belirlemek için oldukça etkili bir özelliktir ve web sayfalarının tasarım sürecinde önemli bir rol oynar.

Float Özelliği

CSS'de Float özelliği, bir dizi şekil içerisinde bulunan herhangi bir şeklin diğer şekillerin yanında kalmasını sağlar. Bu özellik, bir sütun düzeni veya galeri oluşturma gibi durumlarda oldukça kullanışlıdır. Float özelliği, sıralı bir şekilde yerleştirilen bölümleri yana döndürür.

Farklı şekillerin tek bir satırda hizalanması gerektiğinde, float özelliği kullanılmaktadır. Şekiller sağa veya sola float olabilir. Bu sayede, şekillerin ve metnin yan yana sıkışmasına engel olunur. Örneğin, bir blog yazısında resimlerin sağa ya da sola yanaşması gibi durumlarda float özelliği başarıyla kullanılabilir.

Farklı sütunlarda yer alan şekilleri hizalamak istediğinizde, float özelliği de kullanılabilir. Bu özellik, tablo ve veri alanlarının verimli sayfalanmasındaki en önemli araçlardan biridir. Ayrıca menü ve altbaşlık gibi öğelerin yerleştirilmesinde de kullanılır. Float özelliği değiştirilmediği sürece, şekiller ve diğer öğeler orada kalacaktır.

Transform ve Transition Özellikleri

Transform ve Transition özellikleri CSS3 ile birlikte hayatımıza girmiş ve şekillerin boyutları ve konumları dinamik olarak değiştirilebilmesini sağlamıştır.

Transform özelliği, bir şeklin boyutları ve konumunu değiştirebilmemize olanak tanır. Bu özellik sayesinde şekiller, 2D ve 3D olarak döndürülebilir, büyütülebilir ya da küçültülebilir.

Transform özelliğinde kullanılabilecek özellikler arasında; rotate, scale, skew ve translate yer alır. Bu özelliklerin detayları aşağıdaki tabloda verilmiştir.

Özellik	Açıklama
rotate	Şekli belirtilen derece kadar döndürür
scale	Şekli belirtilen oranda büyütür ya da küçültür
skew	Şeklin eksenlere göre eğilmesini sağlar
translate	Şeklin belirtilen koordinatlara göre hareket etmesini sağlar

Transition özelliği ise, bir şeklin boyutlarının veya konumunun dinamik olarak değiştirilmesini sağlar. Bu özellik sayesinde, web sitelerinde hareketli ve canlı etkileşimler oluşturulabilir. Transition özelliğinde kullanılabilecek özellikler arasında; transition-property, transition-duration, transition-timing-function ve transition-delay yer alır. Bu özelliklerin detayları aşağıdaki tabloda verilmiştir.

Özellik	Açıklama
transition-property	Geçiş efektinin hangi özelliği etkileyeceğini belirler
transition-duration	Geçiş efektinin ne kadar süreceğini belirler
transition-timing-function	Geçiş efektinin nasıl gerçekleşeceğini belirler
transition-delay	Geçiş efektinin ne kadar gecikmeli olarak gerçekleşeceğini belirler

Bu özelliklerin kullanımı, web sitelerinin daha dinamik ve etkileyici bir görünüme sahip olmasını sağlar. Örneğin, bir hover etkisiyle birlikte bir şeklin boyutunun veya konumunun değişmesi, web sitenizin kullanıcılar tarafından daha ilgi çekici bulunmasına yol açabilir.

Transform Özelliği

Transform özelliği, bir şeklin boyutunu, konumunu ve dönüş açısını değiştirmek için kullanılır. Bu özellik, CSS3 ile birlikte gelen bir özelliktir ve özellikle animasyonlu web sayfaları oluşturma işlemlerinde oldukça faydalıdır.

Transform özelliği kullanılarak bir şeklin boyutu değiştirilebilir. Örneğin, bir butonun boyutu mouse üzerine gelindiğinde büyütülebilir ya da bir resmin boyutu animasyonlu bir şekilde değiştirilebilir. Bunun için transform özelliği içerisine scale() fonksiyonu eklenir, fonksiyonun içerisine ise yapılmak istenen büyütme veya küçültme oranı yazılır.

Ayrıca, transform özelliği kullanılarak bir şeklin konumu da değiştirilebilir. Örneğin, bir resmin konumu mouse üzerine gelindiğinde animasyonlu bir şekilde değiştirilebilir. Bunun için transform özelliği içerisine translate() fonksiyonu eklenir, fonksiyonun içerisine ise yapılmak istenen yatay ve dikey hareket miktarları yazılır.

Transform özelliği kullanarak ayrıca bir şeklin dönüş açısı da değiştirilebilir. Bu özellik sayesinde, animasyonlu dönen butonlar ya da dönen resimler oluşturmak mümkündür. Bunun için transform özelliği içerisine rotate() fonksiyonu eklenir, fonksiyonun içerisine ise yapılmak istenen dönme açısı yazılır.

Bütün bunların yanı sıra, transform özelliği ile diğer özelliklerin bir arada kullanımı da mümkündür. Örneğin, bir butonun hem boyutu hem de konumu animasyonlu bir şekilde değiştirilebilir.

Transition Özelliği

Transition özelliği, CSS kullanarak bir şeklin boyutlarının ve konumunun dinamik olarak değiştirilmesini sağlar. Bu özellik, animasyonlu ve dikkat çekici sayfa yapıları oluşturmak için oldukça yararlıdır.

Transition özelliği için önemli olan, başlangıç ve bitiş durumlarının belirtilmesidir. Bu şekilde, belirli bir süre içinde şeklin boyutları, konumu veya renkleri gibi özellikleri değiştirilir. Bu özelliği kullanarak animasyonlu menüler ya da butonlar gibi sayfadaki unsurlara hareketli ve etkileyici bir görünüm kazandırılabilir.

Transition özelliği ayrıca, bir kullanıcının bir şekle veya butona tıkladığında şeklin boyutlarını ve konumunu değiştirebilirsiniz. Bu özellik sayesinde kullanıcılara daha etkileşimli bir web sitesi deneyimi sunulabilir.

Transition özelliği, kısa bir sürede, birkaç satır kod kullanarak yapılabilir. İhtiyacınıza göre, bu özelliği kullanarak birden fazla şekil için farklı geçiş efektleri oluşturabilirsiniz. Bunun için, her bir şekil için farklı başlangıç ve bitiş durumları belirlemeniz yeterlidir.

Bu özellik kullanılırken dikkat etmeniz gereken, geçiş efektinin belirli bir sürede tamamlanmasını sağlayacak olan "transition-duration" özelliğidir. Bu süreyi belirledikten sonra, "transition-timing-function" özelliği ile geçişin ne kadar hızlı veya yavaş yapılacağını ayarlayabilirsiniz.

Transition özelliği kullanırken, aynı zamanda "transition-property" özelliğini kullanarak hangi özelliklerin geçiş efektinde yer alacağını belirleyebilirsiniz.Örneğin, yalnızca bir şeklin boyutlarını değiştirmek istiyorsanız, sadece "width" ve "height" özelliklerini belirleyebilirsiniz.