CSS3'te 3D Düğme Oluşturma
Animasyonlu, üç boyutlu bir düğme oluşturmak için CSS3'teki müthiş yeni özelliklerin bazılarını nasıl kullanacağınızı öğreneceksiniz. Başlamak için onu destekleyen tarayıcılarda tam potansiyeline sahip ancak eğlenceli bir deneyim oluşturmayı umuyoruz, ancak bunu yapmayan tarayıcılarda zararlı bir şekilde düşer. Başka bir deyişle, tam olarak desteklenmiyorsa, kırılmış gibi görünmemeli veya davranmamalıdır.
Düğmesine dönüşeceğimiz bir bağlantı ekleyerek içeri girelim. Bunu bir <input> veya <button> kullanarak yapabilirsiniz, ancak bir <a> elemanı kullanacağım.
Kodlar:
Şimdi CSS eklemeye başlayabiliriz. Temel düğme şeklini ve rengini elde etmek için biraz hızlı tasarımla başlayacağım.
Kodlar:
Şimdi degradelerle başlayan yeni bir stil eklemek için biraz CSS3 kullanalım.
CSS3 Degradeleri
CSS3 gradyanlarının sözdizimi ilk bakışta biraz zor olabilir, bu nedenle bu eğitici için degradeyi yapmak için bir kod üreteci kullanacağız. Bu CSS3 Gradient jeneratörüne gidin ve alt kaydırıcıyı kullanarak iki renk durağı 0 ve 100'e ayarlayın.
Sonra degradenizi oluşturmak için bu renkleri kullanın: # 609bcb ve # 4a85b5. Yeni tasarımcıların gradyanlarla yaptıkları en yaygın hata, onları çok belirgin hale getirmektir. Sadece daha ince bir yuvarlak efekti eklemek istiyoruz.
Kodlar:
Sonra bir vurgulu stil eklemeliyiz. Üzerinde hafifçe ışıklandırılmış düğmeler gezinmek. Bunu yapmak için, her iki durağın da ilki birden daha parlak olduğu bir başka degrade yapın. Ardından bunu .button: hover sahte sınıfına ekleyin.
O keskin kenarlar biraz tehlikeli görünüyor. Bunları border-radius özelliğini kullanarak yuvarlayalım.
Kodlar:
Bu üç çizgi bize 5 piksellik bir köşe yuvarlatılmış köşeler kazandıracaktır. Köşe yarıçapını çok büyük yapmayın veya garip görünmeye başlayacaktır. Yine, ince ayrıntılar için gidiyoruz. -webkit ve -moz- için tarayıcı öneklerine sahip olduğumuzu unutmayın. Bu, bize o tarayıcıların eski sürümlerinde istediğiniz görünümü verecek ve sade yarıçapı özelliği sonuna getiriliyor.
Gölgeler Tanıtımı
Metni butonun bir parçası gibi hissettirmek için gölgeli görünmesini sağlamak için bir metin gölgesi kullanalım. Bu düğmeyi stil oluşturmak için CSS gölgelerine çok güveneceğiz, bu yüzden burada dikkatli olun. Tüm CSS gölgeleri aynı formatı takip eder. İşte bir örnek:
Kodlar:
Yazılan başka bir yol:
Kodlar:
Değerlerin her biri arasında yalnızca bir boşluk olduğunu unutmayın. Bu basit özellikler, her türlü harika efektleri yaratmanızı sağlar. Yukarıdaki kod, metne gömülmüş bir görünüm vermek için düğmemize ekleyeceğimiz şeydir.
Aynı sözdizimini izleyen kutu gölgelerini kullanıyorum, daha fazla ayrıntı eklemek istiyorum. Önce bir 3D efekti ekleyeceğiz.
Kodlar:
Şimdi katı gölge düğmeyi gerçekten arka plandan kaldırılmış gibi görünüyor. Fakat efekt eklemek için, düğmeden çevresindeki arka plana atılacak gerçek bir gölgeye ihtiyacımız var. Neyse ki bizim gibi, her gölge arasına virgül koyarak birden fazla gölge ekleyebiliriz:
Kodlar:
Böylece ikinci gölge x ofsetinin 0, ayın 3px ofset ve 15px bir bulanıklığa sahip olması. RGBa rengi gölgelerimizde bir şeffaflık kullanmamızı sağlar. Bu, gölgeyi doğal görünmesi için gerçekten önemlidir.
Daha Fazlası Gölgeler
Normal olarak vurgulamaları oluşturmak için kutu gölgeleri kullanmayı düşünmüyorsunuz, ancak bunun için gerçekten iyi çalışıyorlar. Kutu-gölge , gölgenin dışarı çıkmamak yerine öğeye gelmesini sağlayacak bir iç içe geçmiş değerini kabul eder.
Kodlar:
Düğmenin üst kenarında hoş bir vurgulamak için kısmen şeffaf bir beyaz kullanıyorum. Herşeyi güzel ve berrak bir ana hat çizmek için bir tane daha gölge vurgulayalım. Bunun bir bulanıklığa sahip olduğuna dikkat edin...
Kodlar:
Bütün bu gölgeler çalışması için şu şekilde tek bir deklarasyonda bulunmaları gerekir:
Kodlar:
Bu karışık görünüyor olabilir, ancak virgüller ile dört gölgeye ayrılmış daha sonra farklı tarayıcılar için iki kez tekrarlanmıştır.
Bu noktaya kadar olan kodumuz şuna benzer:
Kodlar:
Sayfaya basması gerektiği anlaşılıyor, bu yüzden bu efekti yaratalım. İlk olarak, düğmeye basıldığında arka plan gradyanı değiştireceğiz. Standart birimin tersi olan ince bir degrade oluşturduk, yani koyu değer en üstte ve daha açık olan değer en altta.
Kodlar:
Ardından, düğmeden çıkan iki gölgeyi de yeniden düzenlemeliyiz. Sağlam alt gölgemizin kısalması gerekiyor, böylece düğmenin basılmış gibi görünüyor. Daha sonra bulanık gölge daha küçük olmalı, çünkü daha kısa bir düğme daha küçük bir gölge çekiyor.
Kodlar:
Her bildirimde, nasıl değiştiğine dair bir fikir edinmek için ilk iki gölgeye bakın.
Düğmeyi Taşıma
Aynı zamanda, gölgemizi kısalttığımız (bu durumda 4px) aynı piksel sayısı kadar düğmeyi aşağı doğru hareket ettirmeliyiz. Aksi takdirde, gölge düğmenin bastırılmasından ziyade daha kısa sürdüğü gibi görünecektir. Bunu yapmak için transform özelliğini kullanacağız.
Kodlar:
Bu düğmeye basıldığında 4px aşağı hareket ettirir. Dönüşümler hakkında daha fazla bilgi edinmek istiyorsanız, bu 24Ways makalesine başlayın .
Animasyon Ekleme
Şimdi düğmeye basarsanız aşağı itecek, ancak anında gerçekleşecektir. CSS3 geçişlerini kullanarak bu iki konum arasında kolayca animasyon yapabiliriz. Ana düğme stilinde geri dönün ve şunları ekleyin:
Kodlar:
Bu hem kutu gölgelerimizi hem de dönüşüm konumunu otomatik olarak canlandıracaktır. Bu "tümü" anahtar kelimesi. Tüm animasyonun 0,2 saniyeliğini almasını tavsiye ediyoruz. Kolaylaştırma, animasyonun zamanlamasını belirtir. Şimdi düğme düzgün şekilde bastırır ve farenizi bıraktığınızda tekrar canlanır.
3D Bölümü
Bunu, 3D dönüşümlerden yararlanarak daha da ilginç hale getirebiliriz. Bunu yapmak için önce ana öğeye, bu örnekte gövde özniteliğine perspektif eklememiz gerekir:
Kodlar:
Hâlâ deneysel olduğundan, bu desteği şimdilik webkit tarayıcılarına ekleyeceğiz.
Şimdi butonuna aşağıdakileri ekleyin:
Kodlar:
Şimdi düğme gerçekten üç boyutlu görünüyor. Ancak, düğmenin aktif durumuna rotateX (20deg) eklememiz gerekiyor. Şimdi düğme gerçekten üç boyutlu görünüyor. Ancak, düğmenin aktif durumuna rotateX (20deg) eklememiz gerekiyor. Son kod şöyle görünmelidir:
Kodlar:
