Bu makalede CSS kullanarak çift renkli şekillerin nasıl oluşturulacağına değiniliyor Kare, daire gibi farklı şekiller öğrenilebiliyor ve çift renk kullanarak şekillerin daha ilgi çekici hale getirilmesi sağlanabiliyor İki renkli kare oluşturmanın farklı yöntemleri bulunuyor ve background-clip, linear gradient veya birleştirilmiş kenar çerçeveleri kullanılabilir İki renkli daire oluşturmak için ise border-radius ve background-color özellikleri kullanılabiliyor İçi dolu daireler içinse box-shadow veya border-radius gibi seçenekler mevcut Makalede ayrıca mouse üzerine gelindiğinde renk değişimi sağlayan animasyonlu şekillerin nasıl oluşturulabileceği de anlatılıyor
CSS ile farklı şekiller oluşturabilirsiniz ve çift renk kullanarak şekillerinizin daha göz alıcı olmasını sağlayabilirsiniz. Bu makalede, CSS kullanarak çift renkli şekiller nasıl oluşturulacağı ele alınacaktır.
İlk olarak, bir kare oluşturmak istiyorsanız, background-color özelliğini kullanabilirsiniz. İlk önce kareyi oluşturmak için width ve height özelliklerini ayarlayın. Ardından, background-color özelliğine iki farklı renk verin. Örneğin:
.square { width: 100px; height: 100px; background-color: #F44336; background-image: linear-gradient(to bottom right, #F44336 50%, #008CBA 50%);}Yukarıdaki kod, bir kare oluşturur ve karenin her iki yarısına da farklı bir renk uygular, böylece kare iki renktir.
Bir daire oluşturmak istiyorsanız, önce border-radius özelliğini kullanarak dairenin şeklini belirleyin. Ardından, iki farklı renkli arka plan kullanarak çift renkli bir daire oluşturabilirsiniz. İçi dolu bir daire oluşturmak istiyorsanız, box-shadow veya border-radius özelliklerinin birini kullanabilirsiniz.
Renk değişimleri ve animasyonlarla çift renkli şekiller oluşturabilirsiniz. Örneğin, mouse üzerine gelindiğinde renk değişimi sağlayan animasyonlu şekiller oluşturabilirsiniz. Bunun için @keyframes kullanabilirsiniz. Örneğin:
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: #F44336; animation: changecolor 2s infinite;}@keyframes changecolor { 0% { background-color: #F44336; } 50% { background-color: #008CBA } 100% { background-color: #F44336; }}Yukarıdaki kod, mouse üzerine gelindiğinde dairenin rengini değiştirmek için bir animasyon kullanır. Burada, dairenin rengi belirli bir süre boyunca değişir ve bu işlem sonsuz bir şekilde tekrarlanır.
1. İki Renkli Kare Oluşturma
CSS kullanarak bir kare oluşturmanın birkaç farklı yolu vardır. İki renkli bir kare oluşturmak istediğinizde ise bunu üç farklı yöntemle yapabilirsiniz.
İlk yöntem Background-clip özelliğini kullanmaktır. Bu özellik sayesinde karenin iç kısmı hakkında bilgi vererek iki farklı rengi kullanabilirsiniz. Örneğin, border-box kullanarak karenin dış sınırını kesinleyin ve ardından padding özelliğini kullanarak içerideki kutuyu belirleyin. Son olarak, background özelliğini kullanarak istediğiniz iki rengi belirleyin.
Bir diğer yöntem ise Linear Gradient kullanmaktır. Bu özellik, renk geçişleri sağlar. İki farklı renk kullanarak bir kare oluşturabilir ve bu renklerin geçişine izin verebilirsiniz. Liner gradient kullanırken yönü, rengi ve geçişin nasıl görüneceğini seçebilirsiniz.
Üçüncü yöntem ise Birleştirilmiş Kenar Çerçeveler kullanmaktır. Bu yöntem sayesinde karenin iki farklı yanında farklı renkler kullanarak iki renkli bir kare elde edebilirsiniz. Örneğin, sol ve sağ kenarları farklı renklere sahip bir kare oluşturmak istiyorsanız, left-border ve right-border özellikleri ile her iki kenarı ayrı ayrı tanımlayabilirsiniz.
Bu yöntemlerden herhangi birini kullanarak CSS ile iki renkli bir kare oluşturabilirsiniz.
2. Çift Renkli Daire Oluşturma
CSS kullanarak farklı şekiller oluşturmak oldukça keyifli bir iş. Çift renkli daireler de bu şekillerden biridir. Şimdi gelin, iki rengi CSS yardımıyla bir daire içinde nasıl bir araya getireceğimizi öğrenelim.
Çift renkli daire oluşturmak için öncelikle bir daire oluşturmamız gerekiyor. Bunun için border-radius özelliğini kullanacağız. Bu özellik, bir dairenin oluşmasını sağlar. Ardından, dairenin iç rengini belirlemeliyiz. Bunun için background-color özelliğini kullanabiliriz.
İki renkli bir daire için birinci renk kodunu belirlemek için yine background-color özelliğini kullanacağız. Ancak ikinci rengimizi belirlemek için background-image özelliğini kullanacağız.
| Kod | Özellik |
|---|---|
border-radius: 50%; | Dairenin oluşturulması |
background-color: ilk-renk-kodu; | Dairenin iç renginin belirlenmesi (ilk renk) |
background-image: linear-gradient(renk-kodu1,renk-kodu2); | Dairenin ikinci renginin belirlenmesi (ikinci renk) |
Yukarıdaki tabloda da göreceğiniz gibi, background-image özelliği linear-gradient fonksiyonu ile kullanılır. Bu fonksiyon ile iki renk birleştirilir ve gradient özelliği elde edilir.
Çift renkli daire oluşturma konusunda burada bitmiyor. Dairenin içi dolu olduğunda farklı teknikler kullanılabilir. Bunlardan bazıları border-radius ve box-shadow gibi özelliklerdir. İçi dolu çift renkli daire oluşturma yöntemlerini detaylı bir şekilde inceleyebilirsiniz.
2.1. İçi Dolu Daire Oluşturma
CSS kullanarak içi dolu bir çift renkli daire oluşturmak oldukça kolaydır. İlk olarak,
İçi dolu bir daire oluşturmak için iki çılgın seçeneğimiz var:
İkinci seçenek ise,
İçi dolu bir çift renkli daire oluşturma işlemi oldukça basittir. CSS'nin bu özelliğine ek olarak,
2.1.1. Box Shadow Özelliği Kullanarak İçi Dolu Daire Oluşturma
Box-shadow özelliği, web geliştiricilerin görsel efektler oluşturmak için sıklıkla kullandığı bir CSS özelliğidir. İçi dolu bir çift renkli daire oluşturmak için box-shadow özelliğini kullanabiliriz.
İlk olarak, <div> öğesi oluşturun ve CSS kodlarına ekleyin. Box-shadow özelliğine iki renk atamak yerine iki farklı gölge rengi atanır. Bu renkler, iki renkli daire tasarımına uygun olarak tercih edilebilir.
<div> öğesi | |
| Genişlik | : 120px; |
| Yükseklik | : 120px; |
| Border yarıçapı | : 50%; |
| Gölge rengi 1 | : #ff99cc |
| Gölge rengi 2 | : #cc99ff |
| Gölge boyutu | : 0 0 0 20px; |
| Arka plan rengi | : #ffffff; |
Box-shadow özelliği, dört parametre alır. İlk parametre gölgenin sağdan soldan uzaklığını, ikinci parametre gölgenin yukarıdan aşağıya uzaklığını ifade eder. Üçüncü parametre gölgenin bulanıklığını ve son parametre ise gölgenin boyutunu ifade eder. İkinci parametrenin negatif olduğunu ve üçüncü parametrenin sıfır olduğunu unutmayın.
box-shadow: 0px 0px 0px 20px #ff99cc, 0px 0px 0px 0px #cc99ff; kodu, iki renkli dairenin tasarımına uygun olarak yukarıda belirtilen iki gölge rengini atayacaktır. Bu kod, içi dolu çift renkli daire oluşturmanızı sağlayacaktır.
2.1.2. Border-radius Özelliği Kullanarak İçi Dolu Daire Oluşturma
CSS'de kullanılan border-radius özelliğiyle içi dolu çift renkli daire oluşturmak oldukça kolaydır. Öncelikle, bir <div> oluşturmanız ve CSS tasarımı için stil eklemeniz gerekmektedir. Ardından, background-image ve border-radius özelliklerini kullanarak içi dolu daireyi oluşturabilirsiniz.
İşleme başlamak için oluşturduğunuz <div>'e bir ID atayabilirsiniz. Örneğin, ID'yi "circle" olarak adlandırabilirsiniz. ID'yi belirledikten sonra, CSS kodlarını yazmaya başlayabilirsiniz:
#circle { width: 100px; height: 100px; background-image: linear-gradient(to bottom right, #F00 50%, #00F 50%); border-radius: 50%; box-shadow: inset 0 0 0 10px #FFF;}Yukarıdaki kodlarda, oluşturulan dairenin boyutları 100 piksel genişliğinde ve 100 piksel yüksekliğinde belirtilmiştir. Ardından, background-image özelliğiyle iki renkli bir arka plan oluşturulmuştur. Bununla birlikte, border-radius özelliği kullanılarak içi dolu bir daire oluşturulmuştur. Son olarak, 'box-shadow' özelliği kullanılarak dış çizgideki beyaz renk verilmiştir.
Yukarıdaki adımları kesin şekilde izleyerek, CSS'de border-radius özelliği kullanarak içi dolu çift renkli bir daire oluşturabilirsiniz.
2.2. Üçgen Şeklinde Daire Oluşturma
Üçgen şekilli, çift renkli bir daire oluşturmak oldukça ilginç bir tasarım tercihidir. Bu tasarımı oluşturmak için birkaç adım izlenmesi gerekmektedir. İlk olarak, üçgen şeklini CSS kullanarak oluşturmalısınız. Üçgenin şeritlerinin rengini belirleyebilirsiniz. Ardından, daireyi oluşturmak için her iki kare şekillingen birleştirmelisiniz.
CSS kodlarında kullanabileceğiniz birkaç farklı şekil çizme metodu vardır. Burada, "border-style:" kodunu kullanarak bir üçgen oluşturacağız. Bu kod aşağıdaki gibi görünecektir:
triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #f00;}
Bu kod, üçgeni oluşturur ve sağ şeridin rengini belirler. Şimdi, bu üçgeni bir daire ile birleştireceğiz.
.circle {width: 100px;height: 100px;background: #00f;border-radius: 50px;clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}
Bu kod ise daireyi oluşturur ve üçgeni daireye ekler. Böylece, bir üçgen şeklini daireye yerleştirerek çift renkli, üçgen şekilli bir daire oluşturmuş oluruz.
Bu tasarımı daha da ilginç hale getirmek için, farklı renklerdeki şeritleri hareketli yapabilirsiniz. Bu etki için "animation:" kodu kullanılır. Bu animasyonu oluşturmak için yukarıdaki kodlara ekleme yapmanız gerekmektedir.
.rectangle:hover {animation: example 2s linear infinite;}
@keyframes example {0% {background-color: #00f;}50% {background-color: #f00;}100% {background-color: #00f;}}
Bu kod, şeritler arasındaki renk değişimini sağlar. Bu şekilde, üçgen şekilli çift renkli dairenin hareketli ve dikkat çekici bir tasarım olmasını sağlayabilirsiniz.
3. Renk Değişimi Sağlayan Animasyonlu Şekiller
Renk değişimleri ve animasyonlar, CSS ile çift renkli şekiller oluştururken oldukça kullanışlı bir yöntem olarak karşımıza çıkıyor. Renk değişimi animasyonunu uygulamak için, shape'in background-color'unu tanımlamanın yanı sıra transition özelliğini de kullanmanız gerekiyor. Böylelikle, shape üzerinde oluşacak herhangi bir değişimde renk geçişleri daha akıcı olacaktır.
Ayrıca, entegre edeceğiniz animasyonlarla shape daha ilginç bir görünüme sahip olacaktır. Bunu yapabilmek için shape'in hover özelliğini kullanabilirsiniz. Örneğin, eğer farenin üzerine gelindiğinde renk geçişleri yaşanacak bir animasyon uygularsanız, shape daha da etkileyici bir şekle bürünebilir. Bunun için, hover özelliğini tanımlamanız ve hover özelliği altında shape'in background-color'unda yapacağınız değişiklikleri belirlemeniz yeterli olacaktır.
Renk değişimleri ve animasyonlarla çift renkli şekiller oluşturmak oldukça eğlenceli bir işlemdir. Ayrıca, shape'iniz için farklı geçişler ve animasyonlar uygulayarak daha yaratıcı bir sonuç elde edebilirsiniz. Çift renkli şekiller oluşturmak ve onları görsel olarak daha ilginç hale getirmek için, renk değişimleri ve animasyonlar harika bir seçenektir.
3.1. Renk Değişimi Animasyonu Oluşturma
Renk değişimi animasyonu, sadece çift renkli şekiller için değil, aynı zamanda farklı tasarımlar için de kullanılabilen hoş bir efekt. CSS kullanarak renk değişimi animasyonlu şekiller oluşturmak oldukça kolaydır.
İlk olarak, oluşturacağımız şekil için bir <div> elementi oluşturmamız gerekiyor ve ardından stil özellikleri eklememiz gerekiyor. Renk değişimi için @keyframes özelliğini kullanacağız. Bu özellikle, şeklin renginde zamanla görsel bir geçiş oluşturabiliriz.
| Özellik | Değer | Açıklama |
|---|---|---|
| width | 100px | Şeklin genişliği |
| height | 100px | Şeklin yüksekliği |
| background-color | renk1 | Şeklin ilk rengi |
| animation | renkdegisimi 5s infinite | Renk değişim animasyonu |
Burada, renk değişimi animasyonu için @keyframes özelliğini kullanıyoruz ve tüm elementleri belirttiğimiz süre boyunca her bir rengi sırayla görüntüleyecek şekilde ayarlıyoruz.To use this property, we need to define the animation with a name (renkdegisimi in this case), duration (5 seconds) and iteration count (infinite).
Şimdi, oluşturacağımız animasyonu CSS kodu içinde tanımlamamız gerekiyor.
@keyframes renkdegisimi { 0% { background-color: renk1; } 50% { background-color: renk2; } 100% { background-color: renk1; } }Burada, renk değişimi animasyonu için @keyframes özelliğini kullanıyoruz ve tüm elementleri belirttiğimiz süre boyunca her bir rengi sırayla görüntüleyecek şekilde ayarlıyoruz. %50'ye kadar nihai rengimize ulaşana kadar renk2'ye ve sonra tekrar renk1'e dönüyoruz.
Bu kodu uyguladığımızda, oluşturduğumuz şeklin arka plan rengi istenen renkler arasında sürekli olarak değişecektir. Renk değişimi efektini kullanarak, web sitenize hoş bir atmosfer ve dinamizm katabilirsiniz.
3.2. Mouse Hover ile Renk Değişimi Sağlama
Bir diğer çift renkli şekil oluşturma yöntemi de animasyonlar kullanmaktır. Özellikle Mouse Hover etkisiyle yapılan renk geçişleri oldukça estetik ve kullanışlıdır. Bu yöntem, web sitenize interaktif bir deneyim katmak için idealdir.
Bir önceki adımda oluşturduğumuz şekillerde, :hover olarak adlandırılan ve fare imlecimiz şekil üzerine geldiğinde tetiklenen bir özelliği kullanarak renk geçişleri sağlayabiliriz. Örneğin:
| HTML Kodu | CSS Kodu |
|---|---|
<div class="renk-efekti"> Renk Değişimi İçin Üzerime Gel </div> | .renk-efekti:hover { background-color: #F00; color: #FFF; } |
Burada, .renk-efekti sınıfına sahip bir <div> oluşturduk ve üzerine gelindiğinde arka plan renginin kırmızıya, metin renginin ise beyaza dönüşmesi sağlandı.
Benzer şekilde, :hover özelliğini kullanarak çift renkli şekiller oluşturabiliriz. Örneğin, bir içi dolu daireyi şu şekilde oluşturabiliriz:
| HTML Kodu | CSS Kodu |
|---|---|
<div class="cift-renk"></div> | .cift-renk { width: 50px; height: 50px; border-radius: 25px; background: linear-gradient(-45deg, #F00 50%, #00F 50%); } .cift-renk:hover { background: linear-gradient(45deg, #F00 50%, #00F 50%); } |
Bu örnekte, bir içi dolu daire oluşturduk ve linear-gradient() yöntemiyle kırmızı ve mavi renkler arasında bir geçiş sağladık. Ardından, :hover özelliğini kullanarak renk geçişini tersine çevirdik. Bu sayede, dairemiz fare imlecimizin üzerine geldiğinde tersine dönüş yapıyor ve farklı bir renk gösteriyor.