CSS ile Elipse Nasıl Oluşturulur?

Adı : CSS ile Elipse Nasıl Oluşturulur?

CSS ile elipse oluşturmak, web tasarımında oldukça kullanışlı bir tekniktir. Elips şeklindeki nesneler genellikle modern ve minimalist bir görünüm sağlarlar. Bu yazıda, CSS ile elipse oluşturma konusu ayrıntılı bir şekilde ele alınacak ve çeşitli örneklerle desteklenecektir. Yazı sonunda Sık Sorulan Sorular bölümüne ek olarak, elips şeklindeki nesnelerin tasarımında kullanabileceğiniz fikirler de verilecektir.

CSS'de elipse oluşturmanın iki farklı yolu vardır; bunlar sadece CSS kodu kullanarak ya da CSS kutu gölgesi kullanarak oluşturulabilir.

## CSS Kodu Kullanarak Elipse Oluşturma

Elips şeklindeki bir nesne oluşturmanın en basit yolu, Toplam genişliği ve yüksekliği eşit olan bir HTML elemanı oluşturarak başlamaktır. Daha sonra, CSS'nin border-radius özelliği kullanılarak elips şekli verilebilir.

```css
.elips {
width: 200px;
height: 200px;
border-radius: 50%;
}
```

Bu şablon, tam olarak daire şeklinde bir elips oluşturacaktır. Daha fazla kontrol için, border-radius özelliğindeki sayılar ayarlanarak elips veya oval şekli de oluşturulabilir.

```css
.elips {
width: 300px;
height: 200px;
border-radius: 50% / 30%;
}
```

Yukarıdaki örnekte, elips şekli eşleşecek şekilde yatayda daha geniştir. Yüzde değerleri ayarlanarak, diğer yönlerde daha dik bir elips yaratılabilir.

## Kutu Gölgesi Kullanarak Elipse Oluşturma

Kutu gölgesi özelliği de elips şekli oluşturmak için yaygın olarak kullanılan bir yöntemdir. Bu yöntem ile kesikli bir elips formu oluşturulabilir.

```css
.elips {
width: 200px;
height: 100px;
box-shadow: 0 0 0 50px #000000;
border-radius: 50%;
}
```

Gölgeli alanın çerçeve boyutu, elips şeklini şekillendirmek için kullanılır. Aşağıda, gölge alanını daha küçük bir elips şekli alacak şekilde ayarlamak mümkündür.

```css
.elips {
width: 200px;
height: 150px;
border-radius: 50%;
box-shadow: 0 0 0 20px #000000, 0 0 0 50px #FFFFFF;
}
```

Yukarıdaki örnekte, beyaz bir elips şekli oluştururken, siyah kutu gölgesi bir çerçeve oluşturur.

## Örnekler

Aşağıda elips şeklinden ilham alabileceğiniz farklı örnekleri bulabilirsiniz.

### 1. Maymun Suratı

```html

```

```css
.elips {
width: 200px;
height: 200px;
border: 60px solid #ffb347;
border-radius: 50%;
position: relative;
}

.elips:before {
content: \"\";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF;
border-radius: 50%;
width: 120px;
height: 120px;
}

.elips:after {
content: \"\";
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
border-radius: 50%;
width: 20px;
height: 20px;
}
```

Bu tasarım, eğlenceli bir tasarım anlayışı ile oluşturulmuştur. Ana yuvarlak, turuncu bir sınır içinde beyaz bir daire çizer. Ardından göz kalıpları ve burun ortaya çıkacak şekilde küçük bir siyah daire eklenir.

### 2. Gol Topu

```html

```

```css
.elips {
width: 200px;
height: 200px;
border: 20px solid #FFFFFF;
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: 0 0 0 50px #FFFFFF;
}

.elips:before {
content: \"\";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFFFFF;
border-radius: 50%;
width: 120px;
height: 120px;
}

.elips:after {
content: \"\";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #FFD700;
border-radius: 50%;
width: 100px;
height: 100px;
}
```

Elips şeklindeki nesneler spor tasarımlarında da yaygın kullanıldığı için, bu örnek gol topuna ilham vermiştir. Beyaz bir çerçeve etrafındaki sarı küre şeklindeki daire, gol topu şeklini oluşturur.

### 3. Çiçek Şekli

```html

```

```css
.elips {
width: 200px;
height: 200px;
border: 8px solid #FFFFFF;
border-radius: 50%;
position: relative;
overflow: hidden;
box-shadow: 0 0 0 50px #FFFFFF;
}

.elips-inner {
position: absolute;
width: 30px;
height: 120px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #FFEBEE;
border-radius: 20px;
transform-origin: bottom center;
}

.elips-inner:nth-child(2) {
transform: translate(-50%, -50%) rotate(60deg);
}

.elips-inner:nth-child(3) {
transform: translate(-50%, -50%) rotate(120deg);
}
```

Bu örnek, çiçek şeklindeki bir elips oluşturmak için çalışır. Beyaz bir çerçeve ile sarımsı-pembe arka plan rengi kullanılır. Ardından, birkaç küçük elips şeklindeki nesne daha eklenir ve yuvarlak olmayan yapraklar ortaya çıkması için dönüştürülür.

### 4. Su Damlası

```html

```

```css
.elips {
position: relative;
width: 150px;
height: 200px;
border: 6px solid #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 0 50px #FFFFFF;
}

.elips-inner {
position: absolute;
bottom: -15px;
left: 50%;
transform: translate(-50%, 0%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #B3E5FC;
}

.elips-reflection {
position: absolute;
width: 100px;
height: 20px;
bottom: -20px;
left: 0;
right: 0;
margin: auto;
transform: skew(-45deg);
border-radius: 5px;
background-color: #FFFFFF;
opacity: 0.2;
}
```

Bu örnek, yukarıdan damla şeklinde görünen bir elips örneği ile ilgili bir tasarımdır. Beyaz bir arka plan üzerinde iç bölge mavimsi yeşil bir renkte boyanmıştır ve alt kısmı damla şeklinde açılmaktadır.

## Sık Sorulan Sorular

### Nasıl farklı elips şekilleri oluşturabilirim?

Çeşitli elips şekilleri oluşturmak için border-radius özelliğindeki yüzde değerleri ayarlayabilirsiniz.

### Kutu gölgesi kullanmadan elips şekli oluşturabilir miyim?

Evet. Elips şeklini border-radius özelliği kullanarak oluşturabilirsiniz. Ayrıca, background-image veya clip-path özelliklerini kullanarak farklı şekillerde elipsler de oluşturabilirsiniz.

### Elips şekillendirmenin yanı sıra hangi özellikleri kullanabilirim?

Elips şekilli nesneleri tasarlamanın yanı sıra, border-color, background-color, font-size ve width gibi diğer CSS özelliklerini de kullanabilirsiniz. Tasarımınızı geliştirmek için uygun olduğunda diğer zengin özellikleri de kullanabilirsiniz.

### Elips şekilli nesneler tasarlarken nelere dikkat etmeliyim?

Elips şekilleri tasarlarken, nesnenin şeklinden dolayı genellikle çerçeve kenarlarının düzgün olması gerekir. Ayrıca, tatmin edici bir tasarım elde etmek için çeşitli renk ve diğer CSS özelliklerini de kullanabilirsiniz."