| 18.02.2016
CSS3, kullanıcı arayüzü tasarımcılarına sınırsız olanaklar sunar ve ana avantajı, hemen hemen her fikrin, JavaScript kullanımına gerek kalmadan kolayca uygulanabilmesi ve hayata geçirilebilmesidir.
Sıradan bir web sayfasını bu kadar basit şeylerin canlandırabilmesi ve onu kullanıcılar için daha erişilebilir hale getirebilmesi şaşırtıcı. Bir öğenin, örneğin fareyle üzerine gelindiğinde stili dönüştürmesine ve değiştirmesine izin verebileceğiniz CSS3 geçişlerinden bahsediyoruz. Aşağıda bulunan dokuz CSS3 animasyon örneği, sitenizde duyarlı bir his yaratmanıza ve güzel, yumuşak geçişlerle sayfanın genel görünümünü iyileştirmenize yardımcı olacaktır.
Daha detaylı bilgi için dosyaların bulunduğu arşivi indirebilirsiniz.
Tüm efektler geçiş özelliği kullanılarak çalışır. geçiş- “geçiş”, “dönüşüm”) ve fare imleci öğenin üzerine geldiğinde öğenin stilini belirleyen sözde sınıf:hover (eğitimimizde). Örneklerimiz için 500x309 piksel div, başlangıç arka plan rengi #6d6d6d ve 0,3 saniyelik geçiş süresi kullandık.
Gövde > div ( genişlik: 500 piksel; yükseklik: 309 piksel; arka plan: #6d6d6d; -webkit-transition: tümü 0,3 saniyelik hareket hızı;; -moz-transition: tümü 0,3 saniyelik hareket hızı;; -o-transition: tümü 0,3 saniyelik hareket hızı;; geçiş: tümü 0,3 saniyelik kolaylık; )
1. Fareyle üzerine gelindiğinde rengi değiştirin
Bir zamanlar böyle bir etkiyi uygulamak, belirli RGB değerlerinin matematiksel hesaplamalarıyla oldukça zahmetli bir işti. Artık, seçiciye sözde sınıf:hover eklemeniz ve bloğun üzerine geldiğinizde orijinal arka plan rengini sorunsuz bir şekilde (0,3 saniyede) değiştirecek bir arka plan rengi ayarlamanız gereken bir CSS stili yazmanız yeterlidir:
Renk: üzerine gelin ( arka plan:#53ea93; )
2. Çerçevenin görünümü
İlginç ve çarpıcı bir dönüşüm, fareyi gezdirdiğinizde düzgün bir şekilde görünen iç çerçevedir. Çeşitli düğmeleri süslemek için çok uygundur. Bu etkiyi elde etmek için, sözde sınıf:hover ve box-shadow özelliğini inset parametresiyle birlikte kullanırız (öğenin içindeki gölgeyi ayarlar). Ek olarak, gölgenin uzunluğunu (bizim durumumuzda 23 pikseldir) ve rengini ayarlamanız gerekecektir:
Kenarlık: vurgulu ( kutu gölgesi: iç metin 0 0 0 23px #53ea93; )
3. Salıncak
Bu CSS animasyonu bir istisnadır çünkü geçiş özelliği burada kullanılmamaktadır. Bunun yerine şunu kullandık:
- @keyframes, kare kare CSS animasyonu oluşturmaya yönelik temel bir direktiftir ve sözde bunu yapmanıza olanak tanır. storyboard ve animasyonu önemli noktaların bir listesi olarak tanımlayın;
- animasyon ve animasyon yineleme sayısı - animasyon parametrelerini (süre ve hız) ve döngü sayısını (tekrarlar) ayarlamaya yönelik özellikler. Bizim durumumuzda 1'i tekrarlayın.
4. Zayıflama
Solma efekti aslında bir öğenin şeffaflığında yapılan basit bir değişikliktir. Animasyon iki aşamada oluşturulur: önce ilk şeffaflık durumunu 1'e, yani tam opaklığa ayarlamanız ve ardından fareyi gezdirirken değerini belirtmeniz gerekir - 0,6:
Soldur ( opaklık: 1; ) .fade:hover ( opaklık: 0,6; )
Tersi sonuç için değerleri değiştirin:
5. Büyütme
Bloğun üzerine gelindiğinde daha büyük hale getirmek için transform özelliğini kullanacağız ve onu Scale(1.2) olarak ayarlayacağız. Bu durumda blok, orantılarını korurken yüzde 20 artacak:
Büyüme:hover ( -webkit-transform: ölçek(1.2); -ms-transform: ölçek(1.2); dönüşüm: ölçek(1.2); )
6. Azaltma
Bir öğeyi küçültmek onu büyütmek kadar kolaydır. Ölçeği artırmak için beşinci noktada 1'den büyük bir değer belirtmemiz gerekiyorsa, bloğu azaltmak için basitçe birden küçük bir değer belirleyeceğiz, örneğin ölçek(0.7) . Artık fareyi üzerine getirdiğinizde blok orijinal boyutunun yüzde 30'u kadar küçülecek:
Shrink:hover ( -webkit-transform: ölçek(0,7); -ms-transform: ölçek(0,7); transform: ölçek(0,7); )
7. Bir daireye dönüşüm
Yaygın olarak kullanılan animasyonlardan biri, üzerine gelindiğinde daireye dönüşen dikdörtgen bir öğedir. :hover ve geçiş ile birlikte kullanılan CSS border-radius özelliği kullanılarak bu, sorunsuz bir şekilde gerçekleştirilebilir:
Daire: üzerine gelin ( kenarlık yarıçapı: %70; )
8. Döndürme
Eğlenceli bir animasyon seçeneği, bir öğeyi belirli sayıda derece döndürmektir. Bunu yapmak için, transform özelliğine tekrar ihtiyacımız olacak, ancak farklı bir değerle - rotaryZ(20deg) . Bu parametrelerle blok Z eksenine göre saat yönünde 20 derece döndürülecektir:
Döndür: vurgulu ( -webkit-transform: döndür Z(20 derece); -ms-transform: döndür Z(20 derece); dönüştür: döndür Z(20 derece); )
9. 3 boyutlu gölge
Bu etkinin düz tasarımda uygun olup olmadığı konusunda tasarımcıların görüşleri farklılık göstermektedir. Ancak bu CSS3 animasyonu oldukça orijinaldir ve web sayfalarında da kullanılmaktadır. Zaten tanıdık olan box-shadow özelliklerini kullanarak üç boyutlu bir efekt elde edeceğiz (çok katmanlı bir gölge oluşturacağız) vetranslateX(-7px) parametresiyle dönüştüreceğiz (bloğun 7 piksel sola yatay kaymasını sağlayacak) ):
Üçlü: vurgulu ( kutu gölgesi: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: TranslateX( -7px); dönüştürme: çeviriX(-7px); )
Tarayıcı desteği
Aşağıdaki tarayıcılar şu anda geçiş özelliğini desteklemektedir:
| Masaüstü tarayıcılar | |
|---|---|
| İnternet Explorer | IE 10 ve üzeri tarafından desteklenir |
| Krom | Sürüm 26'dan itibaren desteklenir (sürüm 25, -webkit- önekiyle çalışana kadar) |
| Firefox | Sürüm 16'dan itibaren desteklenir (4-15 sürümlerinde -moz- önekiyle çalışır) |
| Opera | 12.1 sürümünden itibaren desteklenir |
| Safari | 6.1 sürümünden itibaren desteklenir (3.1-6 sürümlerinde -webkit- önekiyle çalışır) |
Bu örneklerde kullanılan transform, box-shadow vb. gibi diğer özellikler de hemen hemen tüm modern tarayıcılar tarafından desteklenmektedir. Ancak bu fikirleri projeleriniz için kullanacaksanız tarayıcılar arası uyumluluğu tekrar kontrol etmenizi önemle tavsiye ederiz.
Bu CSS3 animasyon örneklerini faydalı bulduğunuzu umuyoruz. Size yaratıcı başarılar dileriz!
Öncelikle konuya henüz tam olarak girmeyenler veya hiç bilmeyenler için kısaca ne olduğunu anlatacağım. Bunlar, fare imleci ile üzerlerindeki web sitesi öğelerine uygulanan çeşitli efekt türleridir (açılır başlıklar, araç ipuçları, yumuşak geçişler, dönüştürme, döndürme, büyütme, yer değiştirme vb.). Bunlar çeşitli jQuery eklentileri kullanılarak veya saf olarak uygulanabilir.
Bugün CSS3 kullanılarak, javascript kütüphanelerine bağlanmadan oluşturulan görseller için geniş bir orijinal vurgulu efekt seçkisi hazırladım. Saf CSS3'te vurgulu efektleri uygulamanın avantajlarından ve dezavantajlarından bahsetmeyeceğim, bu başka bir konu, sadece örneklere bakın ve gerekirse beğendiğinizi web sitenizde kullanın. İncelemede sunulan tüm efektler, bir demo örneği ve kaynak kodlarıyla birlikte ayrıntılı belgelerle birlikte sunulmaktadır. Kılavuzlar çoğunlukla burjuva dilindedir, ancak her şey az çok sezgiseldir.
Tüm bu örneklerin yalnızca CSS3 özelliklerini destekleyen modern tarayıcılarda doğru çalışacağına hemen dikkatinizi çekmek isterim.
Genel tabloyu bozmamak için, efekt adlarını makine çevirisi ile bozmadım (bazıları hariç), orijinal başlıkları geliştiricinin dediği gibi bıraktım.
Tasarım ve tipografide ince çizgiler kullanılarak küçük resimlerin üzerinde gezinildiğinde çok ilginç bir etki ortaya çıkıyor. Görüntü altyazılarının görünümü, yumuşak ve müdahaleci olmayan 3D dönüşümler ve sözde öğelerin yumuşak geçişleri için birkaç farklı efekt türü. Yalnızca modern tarayıcılarda çalışır.
iHover, Bootstrap 3 destekli, saf CSS3 vurgulu efektlerinin etkileyici bir koleksiyonudur. Scss CSS (dosya) üzerine kuruludur ve değişkenlerle kolayca değiştirilebilir. Kod modülerdir, dosyanın tamamını eklemenize gerek yoktur. Tek pakette 30'dan fazla farklı efekt. Her şey oldukça iyi belgelenmiştir ve efektlerin kullanımı çok kolaydır. Tek yapmanız gereken HTML işaretlemesini doğru bir şekilde oluşturmak ve CSS dosyasını çalışmanıza dahil etmektir.
Görüntü altyazıları için bazı basit ama şık vurgulu efektler oluşturur. Buradaki fikir, başlığın, yazarın adının ve iletişim düğmelerinin açılmasını sağlamak için küçük resimlerin üzerine gelmektir. Bazı efektler için 3 boyutlu görsel dönüşümler kullanılır.
Herhangi bir özel zil ve ıslık olmadan, çok basit bir geçiş efekti, bir çerçevede tamamen yuvarlak bir görüntü, gezinirken odağı değiştirerek dönüşüyor ve hepsi bu.
CSS3 kullanan küçük resimler için fareyle üzerine gelme efektleri
Geliştirici, çalışmasını küçük resimlerde ek açıklamalar (altyazılar) göründüğünde geçiş efektlerine sahip bir resim galerisi örneği olarak konumlandırıyor. IE 9+ da dahil olmak üzere modern tarayıcıların güvenilir desteği açıklandı. Elbette tam teşekküllü bir galeri demek zor ama imzaların ortaya çıkmasının etkisi oldukça ilginç.
Mükemmel yuvarlak küçük resimlerin üzerinde gezinirken etkileyici dönüştürme efektleri oluşturmak için başka bir CSS kuralları kümesi. Paket 7 tür CSS3 geçişi, yapılandırma ve kullanıma ilişkin çok ayrıntılı belgeler içerir. Efektler tüm modern tarayıcılar tarafından desteklenir.
Küçük resimleri fareyle üzerine gelindiğinde döndürün
Fare imlecini üzerlerine getirdiğinizde yuvarlak küçük resimleri döndürmenin basit bir etkisi, hemen hemen aynısını blogumda, ana sayfadaki gönderi duyurularında da görebilirsiniz. Birkaç satır css kodu ile uygulandı.
Kelimenin tam anlamıyla tercüme edildi: "Üzerine gelindiğinde cinsel etki". Elbette, çılgın bir hayal gücünüz olmadığı sürece bu etkide bu kadar seksi bir şey fark etmeniz pek mümkün değildir, ancak etki kendi açısından ilginçtir ve dikkat etmeye değer.
Resimlerin üzerine geldiğinizde beş farklı efekt. Üç varyasyonda açılır imzalar, şeffaflık derecesini değiştirme ve yatay hareketle döndürme şeklinde perdeler.
Resim yazıları için özel olarak CSS3 kullanılarak uygulanan 4 animasyon efekti türü. Görünüm ve geçiş efektlerinde farklı konumlar, oldukça standart bir tasarım. Animasyonun nasıl çalıştığını anlamak için demo sayfasının kaynak koduna bakın; ayrı bir belge bulamadım.
İmzaların görünümü, döndürme, geliştirme, açılır pencere vb. için çeşitli efektlerle bir ızgara halinde düzenlenmiş minyatür galeriler. Kullanım ve yapılandırmaya ilişkin belgeler oldukça azdır, ancak gerçekten istiyorsanız bunu anlayabilirsiniz.
Bu efekt özel bir şey değil, animasyon öğelerinin eklenmesi dışında, gezinirken görüntülerin parlaklığında sıradan bir değişiklik. Demonun kaynak kodunu düzenleyerek uygulamanın ayrıntılarını kendiniz bulmanız gerekecektir.
Görüntüler için 10 vurgulu efektten oluşan başka bir set, gezinirken küçük resimlerde çeşitli değişiklikler, büyütme, döndürme, döndürme, karartma vb.
Görüntülerin etrafındaki çeşitli çerçeve animasyon efektleri oldukça çekici görünüyor, kurulumu ve kullanımı için ayrıntılı bir kılavuz var.
Fareyle üzerine gelindiğinde görsel küçük resim başlıklarının etkili görünümü için kullanılan orijinal CSS3 fareyle üzerine gelme efektleri. CSS kural seti, farklı görseller için ayrı ayrı kullanabileceğiniz 10 farklı efekt içerir. Efektler gerçekten etkileyici, özellikle de hepsinin CSS3 kullanılarak yapıldığı göz önüne alındığında. Ayrıntılı bir kılavuz neyin ne olduğunu anlamanıza yardımcı olacaktır.
Buradaki fikir, bazı metinler için arka plan şekli olan ve fareyle üzerine gelindiğinde başka bir şekle dönüşen bir SVG oluşturmaktır. Bu şekilde birçok farklı seçenek yapabilirsiniz; örnekte üç tür geçiş efekti gösterilmektedir. SVG kullanmanın avantajı, formu ana kabın boyutuna uyacak şekilde yeniden boyutlandırabilmemizdir.
Kayan resimler
Bu efektin özü, resim yazısının görünmesi için görüntünün yukarı ve aşağı hareket etmesidir. Stil parametreleriyle çalışırsanız oldukça hoş efektler elde edebileceğinizi düşünüyorum, ancak varsayılan olarak her şey çok basit görünüyor.
Bu efektle her şey basittir, resimlerin altyazıları yarı saydam koyu arka plana sahip bir şerit şeklinde sağ üstte veya sol altta kayar, her şey css özellikleri kullanılarak çok basit bir şekilde yeniden biçimlendirilir.
İlginç bir çözüm: Küçük resimler koyulaştırılmış bir biçimde sunuluyor; üzerlerine geldiğinizde resimler beliriyor ve açık renkli bir arka planda imza beliriyor.
Resmin başlığı köşeden görünür ve resmin tüm alanı boyunca çapraz olarak genişler.
Küçük resimler için açılır başlıklar uygulamaya yönelik bazı daha ilginç çözümler. Çevrimiçi düzenleyicide parametreleri deneyebilir ve daha etkileyici sonuçlar elde edebilirsiniz.
Küçük resimlerin üzerine gelindiğinde bir dizi güzel efekt, çeşitli görünüm türleri ve resimler için başlık tasarımı. Hafifçe karartılmış arka planın aksine ince çizgiler, okunması kolay bilgi blokları oluşturur.
Tuhaf şekiller ve büyütme efekti, resim küçük resimleri için altyazıların görünümünün animasyonlu efektiyle birleştirildi.
Yalnızca CSS3 ve HTML5 kullanan resimler için 3B altyazıları görüntülemek amacıyla görsel slayt efekti oluşturma örneği.
6 Resimler için başlıklar
6 CSS3 kullanılarak fareyle üzerine gelindiğinde açılır resim altyazılarının görünümüne ilişkin seçenekler. Uygulama ve yapılandırmaya ilişkin ayrıntılı bir ders, indirilebilecek kaynaklar.
Ve son olarak, CSS3 kullanarak bir küçük resim için açılır başlık oluşturmanın en basit yolundan bahsetmeden geçemeyeceğim.
Önceki derslerimden birinde bu yöntemden bahsetmiştim:.
Mümkün olduğu kadar çabuk bir web sitesi oluşturmak için çalışmaya başlamak ister misiniz? Artık bu kesinlikle mümkün! Basit bir nedenden ötürü, TemplateMonster pazarında . Koleksiyon yenilenecek, ancak şimdi bile çevrimiçi projenize uygun bir şey arayabilirsiniz. Tek yapmanız gereken ideal hazır çözümünüzü seçmek ve gerekli bilgilerin sunumu üzerinde çalışmaktır. Şablonun metninin elle yazıldığını da unutmayın.
Saygılarımla, Andrew
Bu videoda etkiyi analiz edeceğiz saf CSS kullanarak animasyonlu görüntü karartma.görüntü içeren bir bloğun üzerine geldiğinizde metin görünür ve görüntünün bulunduğu arka plan kararır.
Derste kullanacağız:
- sözde sınıflar :önce ve :sonra;
- mix-blend-mode'u kullanarak renklerin kesişimini kullanın: koyulaştırın;
- Animasyon için dönüşüm ve geçişi kullanacağız.
HTML kod yapısı
Bloğun ana çerçevesinin resimle yapılması
Arşivi dersten indirin - Fareyle üzerine gelindiğinde animasyon
Arşivi indirin ve bilgisayarınıza açın. Html ve css dosyalarının bir ön iskeletini içerir, bunları geliştirme ortamınıza aktarın, açın HTML Dosyayı açın ve içindeki görselin bulunduğu bloğu tanımlayın.
Etiketler arasında
Div.dws-wrapper>a>img+div.dws-text>h3+p
Uygula'yı tıklayın.
Resmin yolunu ekleyelim ve alt kısmını dolduralım.
Konuyla ilgili makaleler
WordPress Şablonuna Widget Bloğu Ekleme
Ağ sürücüsü nasıl kurulur
Bilgisayar için Yula uygulaması
Bir Wi-Fi yönlendirici nasıl bağlanır ve yapılandırılır?
Herhangi bir Windows güncellemesi manuel olarak nasıl yüklenir