Bu makalede CSS kullanarak web sitelerine dinamik ve etkileyici bir görünüm kazandırmak için 3D gölge efektleri oluşturmanın adımları anlatılmaktadır İlk olarak 2D gölge efektleri konusunda becerilerinizi geliştirmeniz önerilmektedir Bunun için CSS'in box-shadow özelliğinden yararlanabilirsiniz 3D gölge efektleri oluşturmak için ise CSS 3D transform özelliği kullanılabilir Bu özellik, elementin boyutlarında, açılarında ve konumunda değişiklikler yaparak farklı boyutlarda gölge efektleri yaratmanızı sağlar TranslateZ, rotateX ve rotateY yöntemleri kullanılarak elementleri farklı eksenlerde döndürmek de mümkündür Perspective yöntemi de 3D efektler üzerinde derinlik etkisi yaratmak için kullanılabilir Tüm bu yöntemlerle birlikte multiple background özelliği de kullanılabilir ve CSS ile 3D gölge efektleri oluşturmanın sınırsız seçenek

CSS ile 3D gölge efektleri oluşturmak, web sitelerine dinamik ve etkileyici bir görünüm kazandırmak için harika bir yoldur. Bu makalede, CSS kullanarak nasıl 3D gölge efektleri oluşturabileceğinizi öğreneceksiniz.

3D gölge efektleri, bir elementin gerçek dünyada var olan bir nesneyi yansıtacak şekilde 3 boyutlu olarak görünmesini sağlar. Bunun yanı sıra, farklı konumlarda ışık dağılımını simüle etmek için gölge kullanılır. Bu sayede, bir nesnenin gerçek hayatta nasıl görüneceği hakkında daha fazla fikir edinebiliriz.

CSS kullanarak 3D gölge efektleri oluşturmak oldukça kolaydır. Bu makalede, 3D transform, translateZ (), rotateX (), rotateY (), perspective () ve multiple background işlevlerini içeren örnek kodlarla birlikte, adım adım nasıl 3D gölge efektleri oluşturabileceğinizi öğreneceksiniz.

2D Gölge Efektleri ile Başlayın

CSS ile 3D gölge efektleri oluşturma, web sayfalarının daha göz alıcı ve ilgi çekici hale gelmesini sağlar. Ancak, 3D gölge efektleri oluşturmadan önce, 2D gölge efektleri konusunda becerilerinizi geliştirmeniz gerekir. Bunun nedeni, 2D gölge efektleri, temel olarak 3D gölge efektleri oluşturmak için bir adım olarak kullanılmaktadır.

2D gölge efektleri oluşturma, CSS'in box-shadow özelliğinden yararlanılarak yapılabilir. Box-shadow özelliği, elementin kenarlarına gölgeler eklemeye yarayan bir özelliktir. Bu gölgeler, elementin çalıştığı alanın dışına çıkarak, görsel bir etki yaratır. Box-shadow özelliği, x ve y mesafesi, blur derecesi ve gölgenin rengi gibi parametrelerle özelleştirilebilir. Kullanabileceğiniz bir örnek kod:

• Bu kod, kutunun sağ ve alt tarafından 10 piksel uzağa gölgeler ekler.
• Gölgelerin bulanıklık derecesi 5 pikseldir.
• Gölgelerin rengi gri olarak belirlenmiştir.

2D gölge efektleri oluşturma konusunda yeterince deneyimli olduktan sonra, bir sonraki adım olarak 3D gölge efektleri oluşturmaya geçebilirsiniz. 3D gölge efektleri oluşturmak için, CSS 3D transform özelliğinden yararlanılarak farklı boyutlarda gölge efektleri oluşturmak mümkündür.

3D Transform ile Gölge Efektleri Oluşturma

CSS 3D transform özelliği, görsel açıdan zenginleştirilmiş 3D gölge efektleri oluşturmak için kullanılabilir. Bu özellik, elementin boyutlarında, açılarında ve konumunda değişiklikler yaparak farklı boyutlarda gölge efektleri oluşturmayı sağlar.

Bu işlemi gerçekleştirmek için transform özelliğinin 3D tiplerinden olan translateZ() ve rotateX() ve rotateY() yöntemleri kullanılabilir. Bu yöntemler birleştirilerek etkileyici 3D gölge efektleri oluşturulabilir. Örneğin, translateZ() yöntemi elementin z ekseninde hareket etmesini sağlar ve bu sayede elemente farklı derinliklerde olduğu izlenimini veren gölge efektleri yaratılabilir.

Bununla birlikte, perspective() yöntemi kullanılarak 3D efektler üzerinde derinlik etkisi oluşturulabilir. Bu yöntem, elementin birbiriyle olan ilişkisini ayarlayarak üç boyutlu bir düzen sağlar.

Tüm bu yöntemler, 3D gölge efektleri oluşturmanın yanı sıra, arka plan resimleri gibi farklı görsel unsur eklemelerinde de kullanılabilir. Çoklu arka plan özelliği, birden fazla arka plan resmini kontrol etmenizi sağlar ve karmaşık gölgeler yaratmanıza yardımcı olur.

3D transform özelliği ile oluşturulan gölge efektleri, tasarımcıların hayal gücüne sınırsız seçenekler sunar. Hem 2D hem de 3D efektlerin kusursuz birleşimi için, bu özelliklerin yanı sıra multiple backgrounds özelliği gibi başka ince ayarlar da kullanılabilir.

translateZ() Kullanarak 3D Efektleri Elde Edin

3D efektlerini oluşturmak için kullanabileceğiniz bir diğer yöntem ise translateZ() yöntemidir. Bu yöntem, elementi z ekseninde kaydırarak farklı derinlikler elde etmenizi sağlar.

Örnek olarak, bir kutu oluşturduğunuzu ve bu kutuyu translateZ() yöntemiyle hareket ettirdiğinizi hayal edin. Kutunun derinliği artacak ve böylece 3D bir etki yaratacaktır. Kod örneği olarak aşağıdaki gibi kullanabilirsiniz:

.box {  transform: translateZ(50px);}

Yukarıdaki örnekte, kutu 50 piksel z ekseni boyunca hareket ettirilir ve 3D bir etki oluşturur. Bu yöntem, 3D efektlerini daha da ileri götürmek ve görsel açıdan zengin bir deneyim yaratmak için ideal bir seçenektir.

rotateX() ve rotateY() Kullanarak Efektleri Yeniden Oluşturma

3D gölge efektleri oluşturmak için, elementleri farklı eksenlerde döndürmek gerekebilir. Bu nedenle, rotateX() ve rotateY() yöntemleri kullanılarak efektleri yeniden oluşturmak mümkündür.

rotateX() yöntemi, elementin X düzleminde döndürülmesini sağlar ve 3D efektler üzerinde derinlik oluşturabilir. Örneğin, bir kutuyu aşağı doğru eğmek için transform: rotateX(45deg) kodu kullanılabilir.

Orjinal kutu	Eğik kutu

rotateY() yöntemi, elementin Y düzleminde döndürülmesini sağlar. Örneğin, bir kutuyu sağa doğru döndürmek için transform: rotateY(45deg) kodu kullanılabilir.

Orjinal kutu	Döndürülmüş kutu

Bu yöntemler, translate() yöntemi ile birleştirildiğinde, elementlerin 3D efektleri oluşturmasına izin verir.

perspective() Kullanarak Depth Efekti Ekleyin

CSS'de perspektif, bir elementin bir zemin üzerindeki görünüş açısını tanımlayan özelliklerden biridir. Perspective () yöntemi, 3D efektler üzerinde bir derinlik etkisi oluşturmak için kullanılabilir.

perspective () yöntemi, bir elementin 3D etkisini oluşturmak için tasarlanmış bir CSS özellikleridir. Bu yöntem, bir perspektif katmanı göstererek 3D bir elementin düzgün bir şekilde gösterilmesini sağlar. Bir elementin yüksekliği ve genişliği de dikkate alındığında, perspektif değişir ve derinlik etkisi oluşur.

Bu yöntemi kullanarak, 3D gölge efektlerinin daha gerçekçi ve derin bir hissiyat vermesi sağlanabilir. Örneğin, bir kutunun üst kısmına perspektife() uygulayarak, kutunun uzaktaki köşelerinin daha uzak ve daha küçük olduğunu gösterir. Böylece, element daha gerçekçi ve 3D benzeri bir etki yaratır.

Aşağıdaki örnek kodda, bir kutuya perspective() uygulanarak kutunun gerçeğine benzer bir 3D etkisi oluşturulmuştur:

.kutu {  width: 200px;  height: 200px;  background-color: #ddd;  perspective: 500px; /*perspektif değeri*/}.kutu__icerik {  width: 100%;  height: 100%;  background-color: #fff;  transform: rotateY(45deg);

Bu örnekte, kutunun içinde ki icerik öğesi, rotateY () yöntemiyle döndürülerek bir 3D etkisi oluşturuldu. Ayrıca, perspektif değeri değiştirilerek derinlik etkisi arttırıldı.

Multiple Background İşleviyle Efektleri Oluşturma

CSS ile 3D gölge efektleri yaratmak, görsel açıdan zenginleştirilmiş web sayfaları oluşturmanın bir yolu olarak önemlidir. Bu amaçla, birden fazla arka plan işlevi kullanmak, 3D gölge efektlerini daha karmaşık hale getirmenize olanak tanır.

Birden fazla arka plan işlevi kullanarak, gölge efektlerinin farklı görünümlerini yaratabilirsiniz. Üst üste binen çoklu arka planlar oluşturarak, gölgelerin daha derin ve katmanlı görünmesini sağlayabilirsiniz. Ayrıca, renkli 3D gölge efektleri yaratmak için de birden fazla arka plan kullanabilirsiniz.

Bir örnek olarak, bir buton üzerinde bir arka plana sahip olabilir, bunu bir başka arka planla birleştirebilir ve gölge efektleriyle daha karmaşık bir görünüm oluşturabilirsiniz. Tablo veya liste kullanarak farklı arka plan şekilleri ve örnek kodlar hakkında daha fazla bilgi edinebilirsiniz.

Overall, birden fazla arka plan işlevi kullanarak, 3D gölge efektlerinin daha karmaşık hale getirilmesi mümkündür ve web tasarımınızı daha ilgi çekici hale getirir.

Örnek Kodlarla 3D Gölge Efektleri Oluşturma

CSS ile görsel açıdan zenginleştirilmiş 3D gölge efektleri oluşturmak, web tasarımında oldukça popüler hale gelmiştir. 3D gölge efektleri, web sitelerine dinamizm ve hareketlilik kazandırırken, kullanıcıların dikkatini de çeker. Şimdi size, 3D gölgeler oluşturmak için kullanabileceğiniz bazı örnek kodları sunacağız.

Örnek kodlarla gölge efektleri oluşturmak oldukça kolaydır. Öncelikle, HTML'de bir div elementi oluşturmalısınız. Ardından, CSS ile bu elemente gölgelendirme özellikleri eklemelisiniz. 3D gölgeler oluşturmak için, CSS 3D transform özelliklerini kullanmanız gerekmektedir.

• box-shadow: basit bir 2D gölgelendirme efekti yaratır.
• transform: translateZ(30px); bir elementin z ekseninde hareket etmesini sağlar ve 3D efektlerle kullanılabilir.
• transform: rotateX(45deg) rotateY(45deg); elementin X ve Y düzleminde döndürülmesine izin verir.
• transform-style: preserve-3d; perspective: 100px; 3D efektlerde derinlik sağlamak için kullanılabilir.

Bu örnek kodlar sayesinde, web sitenize kolayca 3D gölgeler ekleyebilirsiniz. Kendi tarzınıza uygun olarak bu örnek kodları da kullanarak, gölgelendirme efektlerinin altında yatan mantığı daha iyi anlayabilirsiniz. Kendi emeğiniz ile oluşturduğunuz eşsiz gölgelendirmeler, web sitenize özgünlük katarak, ziyaretçilerinizin ilgisini çekecektir.

3D Yuvarlak Buton

3D gölge efektleri, web sitesi tasarımlarınızda görsel bir çekicilik yaratmak için harika bir yoldur. Bu efektleri yaratmak için, CSS'deki 3D transform özelliklerini bilmek gerekir. Bu makalede, yaprak şekli ve gölgelendirme efektleriyle 3D yuvarlak bir buton örneği kodlarını öğreneceksiniz.

Yukarıdaki tabloda, kullanacağımız sınıflar listelenmektedir. Şimdi, bu sınıfları kullanarak kod örneğini oluşturabiliriz:

.btn {    position: relative;    display: inline-block;    padding: 12px 30px;    color: #fff;    text-transform: uppercase;    font-size: 18px;    letter-spacing: 2px;    background: #1abc9c;    border: none;    cursor: pointer;    -webkit-transition: all 0.3s;    -moz-transition: all 0.3s;    -ms-transition: all 0.3s;    -o-transition: all 0.3s;    transition: all 0.3s;}.btn::before {    content: "";    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    border-radius: 50%;    z-index: -1;    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);}.btn::after {    content: "";    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%) scale(0);    width: 0;    height: 0;    border-radius: 50%;    background: rgba(255, 255, 255, 0.1);    z-index: -1;}.btn:hover {    background: #16a085;}.btn:hover::after {    transition: all 0.5s ease 0s;    transform: translate(-50%, -50%) scale(30);    width: 400px;    height: 400px;}

Yukarıdaki kod bloğunu kullanarak, yaprak şeklini butona ekleyeceğiz. Butonun arka plan rengi değiştirildiğinde, yaprak şeklinin boyutunun değişeceği bir geçiş efekti ekleyeceğiz. Butona tıklanıldığında, butonun merkezinde açılır buton efekti görüntülenecektir.

Bu örnekte, 3D gölge efektleri ve animasyonlu geçiş efektleriyle birlikte yaprak şekli ve açılır buton efekti eklemiş olduk. Bu gibi efektler kullanarak web sitenize bir görsel çekicilik ekleyebilirsiniz.

3D Kart

Bir kart tasarlamak için 3D gölge efektleri kullanmak, oldukça popüler bir tekniktir. Bu sayede, sıradan bir kartı, daha profesyonel bir görünüme kavuşturabilirsiniz. Yasal uyarılar, tanıtımlar veya diğer pek çok durumda bu tekniği kullanarak alanınıza en uygun kartı tasarlayabilirsiniz.

Şimdi, 3D kartın nasıl kodlanacağına bakalım. Öncelikle, div etiketi içerisinde bir image etiketi yerleştiriyoruz. Image etiketine z-index özelliği uygulayarak, görüntünün diğer elemanların üzerinde olmasını sağlıyoruz.

Bu özelliklerle birlikte; *{box-sizing: border-box;} body{background-color:black;} .container{ margin: 50px auto; width: 220px; height: 220px; position: relative; perspective: 800px;} .card{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: all 0.5s; } .card:hover{ transform: rotateY(180deg); }

Yukarıda belirtilen CSS kodları ile arka ve ön tarafı döndürülebilen bir kart tekniğine sahip olabilirsiniz. Bu sayede, müşterilerinize ve ziyaretçilerinize farklı bir deneyim sunabilir, ilgi çekici kartlar oluşturabilirsiniz.