| 18.02.2016
CSS3, kullanıcı arayüzü tasarımcıları için sınırsız olanaklar sunar ve ana avantajı, pratik olarak herhangi bir fikrin, JavaScript'e başvurmaya gerek kalmadan gerçek hayatta kolayca uygulanabilmesi ve uygulanabilmesidir.
Basit kelimelerin bir ana sayfayı bu kadar canlandırabilmesi ve onu kullanıcılar için erişilebilir hale getirebilmesi şaşırtıcı. Bir öğenin, örneğin imlecin üzerine gelindiğinde stilini dönüştürmesine ve değiştirmesine nasıl izin verebileceğinizi öğrenmek için CSS3'e gidin. Aşağıda bulabileceğiniz dokuz CSS3 animasyon uygulaması, sitede ilginç bir atmosfer yaratmanın yanı sıra, güzel yumuşak geçişlerle web sitesinin ilginç görünümünü geliştirmeye yardımcı olacaktır.
Daha detaylı bilgi için dosyaların arşivlerini indirebilirsiniz.
Tüm efektler güç geçişinin yardımıyla çalışır. geçiş- “Geçiş”, “yeniden oluşturma”) ve fare yeni bir imlecin üzerine getirildiğinde (asistanımızda) öğenin stilini gösteren sözde sınıf: vurgulu. Uygulamalarımız için 500x309 piksel boyutunda bir div bloğu kullandık, çıktı arka plan rengi #6d6d6d idi ve bir aşamadan diğerine geçiş 0,3 saniye sürdü.
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ş : tamamı 0,3 saniyelik kolaylık )
1. İmleci gezdirerek rengi değiştirin
Böyle bir etkinin uygulanması ise şarkının RGB değerlerinin matematiksel hesaplamaları ile çok fazla çalışmayı gerektirecektir. Şimdi, seçiciye sözde sınıf:hover eklemeniz ve imleci nesnenin üzerine getirdiğinizde çıktı rengini arka planla sorunsuz bir şekilde (0,3 saniye içinde) değiştirecek bir arka plan rengi ayarlamanız gereken bir CSS stili yazmanız gerekir. engellemek:
Renk: üzerine gelin ( arka plan:#53ea93; )
2. Çerçevenin görünümü
En belirgin dönüşüm, fare üzerine gelindiğinde düzgün bir şekilde görünen iç çerçevedir. Farklı düğmeleri daha rahat hale getirmek için iyi. Bu etkiyi elde etmek için aşağıdaki sözde sınıfı kullanın: vurgulu ve kutu gölgesinin gücü ek parametreyle (öğenin ortasının gölgesini ayarlar). Ek olarak, gölgelendirmeyi (bizim gölgemizde 23px) aynı renge ayarlamanız gerekir:
Kenarlık: vurgulu ( kutu gölgesi: iç metin 0 0 0 23px #53ea93; )
3. Salıncak
CSS animasyonu verildi - suç, çünkü burada geçişin gücü kullanılmıyor. Bunun yerine şunlardan etkilendik:
- @keyframes - kare kare CSS animasyonu oluşturmaya yönelik temel direktif, bu şekilde çalışmanıza olanak tanır. storyboard oluşturma ve animasyonun önemli noktaların bir listesiyle tanımlanması;
- animasyon ve animasyon-yineleme-sayımı - animasyon parametrelerini (tatlılık ve akışkanlık) ve döngü sayısını (tekrarlar) ayarlama gücü. Bazen 1'i tekrarlayın.
4.Zgasannya
Yumuşak sönmenin etkisi, özünde, elementin berraklığında normal bir değişikliktir. Animasyon iki aşamada oluşturulur: görünürlük seviyesi 1'i ayarlamak gerekir - daha sonra görünürlük olmayacaktır, ardından fare üzerine gelindiğinde bu değerleri girin - 0,6:
Soldur ( opaklık: 1; ) .fade:hover ( opaklık: 0,6; )
En iyi sonuç için değerleri yerlerde değiştirin:
5. Zbilşenya
İmleç üzerine gelindiğinde bloğu büyütmek için hızlı bir şekilde transform'u kullanırız ve değeri Scale(1.2) olarak ayarlarız. Bu durumda blok oranlarını koruyarak 20 yüz artacaktır:
Büyüme:hover ( -webkit-transform: ölçek(1.2); -ms-transform: ölçek(1.2); dönüşüm: ölçek(1.2); )
6. Değişim
Bir öğeyi değiştirmek onu büyütmek kadar basittir. Beşinci paragrafta ölçeği artırmak için 1'den büyük bir değer girmemiz gerektiğinden, bloğu değiştirmek için basitçe birden küçük bir değer girmemiz gerekiyor, örneğin ölçek(0,7). Artık fare üzerine getirildiğinde blok orantılı olarak boyutunun yüzde 30'u kadar değişecektir:
Shrink:hover ( -webkit-transform: ölçek(0,7); -ms-transform: ölçek(0,7); transform: ölçek(0,7); )
7. Colo'da dönüşüm
En popüler animasyonlardan biri, imleç üzerine gelindiğinde daireye dönüşen düz çizgi öğesidir. CSS border-radius, vikorista'nın ek gücü açısından: fareyle üzerine gelme ve geçiş, bu sorunsuz bir şekilde uygulanabilir:
Daire: üzerine gelin ( kenarlık yarıçapı: %70; )
8. Obertannya
Animasyonun pratik bir versiyonu, öğeyi birkaç derece döndürmektir. Bu amaçla yine dönüşümün gücüne ve ayrıca diğer değerlere (rotateZ(20deg)) ihtiyacımız var. Bu parametrelerle blok, Z ekseni boyunca yıl okunun 20 derece gerisinde 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
Tasarımcıların fikirleri düz tasarımın kesin etkisi konusunda farklılık gösteriyor. Daha az değil, bu CSS3 animasyonu çok orijinaldir ve web sayfalarında da popülerdir. Box-shadow'un zaten tanıdık olan güçlerini kullanarak (zengin bir gölge oluşturmak için) önemsiz bir efekt elde edin ve TranslateX(-7px) parametresiyle dönüştürün (bloğun yatay olarak 7 piksel sola hareket etmesini sağlamak için):
Üçlü: vurgulu (kutu gölgesi: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px - 6px transform: TranslateX( -7px); transform: TranslateX(- 7 piksel);
Tarayıcı desteği
Bugün itibarıyla güç geçişi aşağıdaki tarayıcılar tarafından desteklenmektedir:
| Masaüstü tarayıcılar | |
|---|---|
| İnternet Explorer | IE 10 ve üstü tarafından desteklenir |
| Krom | Sürüm 26 ile desteklenir (versiyon 25'e kadar -webkit- önekiyle desteklenir) |
| Firefox | Sürüm 16 ile desteklenir (4-15 arasındaki sürümler -moz- önekini kullanır) |
| Opera | 12.1 sürümüyle desteklenir |
| Safari | 6.1 sürümüyle desteklenir (3.1-6 sürümleri -webkit- önekini kullanır) |
Bu uygulamalardaki dönüşüm, kutu gölgesi vb. gibi diğer özellikler ve varyasyonlar da mevcut tarayıcıların çoğu tarafından desteklenmektedir. Ancak bu fikirleri projeleriniz için kullanacaksanız tarayıcılar arası işlevselliğinizi tekrar kontrol etmenizi önemle tavsiye ederiz.
Bu CSS3 animasyon uygulamalarını faydalı bulacağınızdan eminiz. Size yaratıcı başarılar dileriz!
Vurgulu efektler – öğrenmek için konuyu bitirin. Bunların uygulanması bile sitenizi daha dinamik ve canlı hale getirebilir. Bugün görüntülerle çalışmak için bazı efektlere bakacağız. Aynı durum oyundan öğrenebileceğiniz HTML ve CSS kodları için de geçerlidir.
Zbilşennya
Başlangıç olarak, kullanıcı imleci görselin üzerine getirdiğinde fotoğrafın büyüyüp kendi kordonları içinde kaybolmaya devam etmesi önemlidir.
Eksen HTML-kod:
Lütfen görselin, resimdeki gibi 400 piksele 400 piksel boyutunda olduğunu unutmayın. Şimdi hayret edelim CSS.
/*GROW*/ .grow img ( height : 300px ; width : 300px ; -webkit-transition: tüm 1'lerin kolaylığı; -moz-transition: tüm 1'lerin kolaylığı; -o-transition: tüm 1'lerin kolaylığı; -ms-transition: 1s kolaylık; geçiş: tüm 1'ler kolaylık; .grow img:hover ( genişlik: 400 piksel; yükseklik: 400 piksel;)
Hayvanat bahçesi görselinin boyutunu başlangıçta 300 piksel olarak ayarladık, daha sonra kullanıcı fareyi üzerine getirdiğinde 400 piksele çıkıyor. Taşma - gizli, bu da ölçeklendirme efektini kaldırmamıza olanak tanıyor.
Stisnennya
Geçmişte, imleç farenin üzerine getirildiğinde resimlerin nasıl büyüdüğünü hayretle görmüştük. Döndürme etkisine bir göz atalım. Bu yöntem temelde aynıdır, ancak bu sefer boyutları 400 piksel olarak değerlendirecek ve imleci gezdirdiğinizde bunları 300 piksel olarak değiştireceksiniz.
/*SHRINK*/ .shrink img ( height : 400px ; width : 400px ; -webkit-transition: tüm 1'lerin kolaylığı; -moz-transition: tüm 1'lerin kolaylığı; -o-transition: tüm 1'lerin kolaylığı; -all-trans 1'lerin kolaylığı ; geçiş: tüm 1'ler kolaylık; .shrink img:hover ( genişlik: 300 piksel; yükseklik: 300 piksel;)
Yan panorama
Geçerli efektte görselin boyutu değişmiyor ancak tıklandığında fotoğraf uzaklaşıyor. Bu, nesnenin gücünü arttırmanın iyi bir yoludur.
Burada 600 piksel genişliğinde ve yalnızca 300 piksel yüksekliğinde bir vikory görüntüsü kullanıyoruz - fotoğrafın yatay konumunu değiştiriyoruz ve efektleri yüksekliğe dondurmamıza gerek kalmıyor.
/*SIDEPAN*/ .sidepan img ( marj-left : 0 piksel ; -webkit-transition: kenar boşluğu 1 sn kolaylığı; -moz-transition: kenar boşluğu 1 sn kolaylığı; -o-transition: kenar boşluğu 1 sn kolaylığı; -ms-transition: kenar boşluğu 1 sn kolaylığı geçiş: kenar boşluğu 1s kolaylığı ) .sidepan img:hover ( kenar boşluğu-sol : -200px ; )
Kaydırma efektini oluşturmak için, geçen sefer yaptığımız gibi görüntünün boyutunu değiştirmiyoruz, bunun yerine aynı kenar boşluğunu kullanarak görüntüyü sol tarafa yerleştireceğiz. Görüntünün sağa doğru hareket etmesini istiyorsanız sağ kenar boşluğunu seçin.
Dikey panorama
Efekti roc'a aktarmak için bu efekti bir kez daha tekrarlayalım - bu aynı zamanda dikey kaydırma oluşturmak için de uygundur.
/*VERTPAN*/ .vertpan img ( marjin-top : 0px ; -webkit-transition: kenar boşluğu 1 sn kolaylığı; -moz-transition: kenar boşluğu 1 sn kolaylığı; -o-transition: kenar boşluğu 1 sn kolaylığı; geçiş: kenar boşluğu 1 sn kolaylığı; ) . vertpan img:hover ( kenar boşluğu üst : -200px ; )
Kod neredeyse geçen seferkiyle aynı, ancak şimdi sol kenar boşluğunu üst kenar boşluğuyla değiştiriyoruz.
dönüşüm
Anlık etkiler dinamiktir.
Nahil
Şimdi bunu öyle yapalım ki, görsellerin üzerine geldiğinizde bir kesim göreceksiniz.
/*TILT*/ .tilt ( -webkit-transition: tamamı 0,5s kolaylık; -moz-transition: tümü 0,5s kolaylık; -o-transition: tümü 0,5s kolaylık; -ms-transition: tümü 0,5s ese; geçiş: tümü 0,5 saniyelik kolaylık; ) .tilt :hover ( -webkit-transform: döndür (-10 derece) ; -moz-transform: döndür (-10 derece) ; -o-transform: döndür (-10 derece) ; - ms-dönüştürme: döndürme (-10 derece); dönüştürme: döndürme (-10 derece);
Gördüğünüz gibi tek ihtiyacımız olan görüntüyü on derece döndürmek. O kadar etkili ki!
Kesimlerin yuvarlanması
Görüntüye işaret ettiğinizde dönmeye başlar ve bir kazıktan kareye dönüşür.
/*MORPH*/ .morph ( -webkit-transition: tamamı 0,5s kolaylık; -moz-transition: tümü 0,5s kolaylık; -o-transition: tümü 0,5s kolaylık; -ms-transition: tümü 0,5s kolaylık; geçiş: tümü 0,5 saniye kolaylık) .morph :hover ( border-radius: 50 % ; -webkit-transform: döndür (360 derece); -Moz dönüşümü: döndür (360 derece); -o-dönüştürme: döndür (360 derece); -ms-transform: döndür (360 derece); dönüştürme: döndürme (360 derece); )
Burada, fare imleci üzerine getirildiğinde 360 derece dönmeye başlayan ve kenarlık yarıçapı aşamalı olarak %50'ye değiştirilen ve ardından bir daireye dönüşen morph sınıfı eklenir.
Odak
Başka bir yol da görüntüyü yuvarlamak için kenarlık yarıçapını kullanmaktır. Ancak bu sefer sadece sınır yarıçapını değil, diğer şeyi de artıracağız. Kenarlık kutusu kullanmak görüntünün belirli bir kısmına odaklanan bir efekt yaratacaktır.
/*FOCUS*/ .focus ( -webkit-transition: tüm 1'lerin kolaylığı; -moz-transition: tüm 1'lerin kolaylığı; -o-transition: tüm 1'lerin kolaylığı; -ms-transition: tüm 1'lerin kolaylığı; geçiş: tüm 1'lerin kolaylığı; ) .focus :hover ( kenarlık : 70 piksel katı # 000 ; sınır yarıçapı: 50 % ; }
Kenarlığı 10 piksel aldık, siyah kenarlığı 70 piksel değiştirdik ve yarıçapı %50'ye çıkardık, ön uçta da bunu yaptık.
Web kiti filtresi
Maksimum tarayıcı işlevselliğini sağlamak için bu tür uygulamalar WebKit önekini kullanmayacaktır. Bu veriler artık Safari ve Chrome'da mevcut değil. Sınırlamalara bakılmaksızın, Webkit filtreleri muhteşem efektler elde etmek için eylemleri değiştirmenize olanak tanır! Demo 
Rosmittya
Zastosovuvatimemo'nun uyguladığımız ilk etki basitçe rosmitya'dır. Artık bir sonraki küçük kod satırına ulaşabilirsiniz.
Öncelikle konuya henüz tam olarak girmeyenler veya hiç bilmeyenler için vurgunun ne olduğunu kısaca anlatacağım. Fare imleci üzerlerindeyken web sitesi öğelerine çeşitli efekt türleri (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.) uygulanabilir. Bunlar çeşitli jQuery eklentilerinin yardımıyla veya saf biçimde uygulanabilir.
Bugün, CSS3 kullanılarak, javascript kitaplıklarına bağlanmadan oluşturulan, görüntüler için orijinal vurgulu efektlerden oluşan geniş bir koleksiyon hazırlıyorum. Saf CSS3 üzerinde vurgulu efektleri uygulamanın avantajlarından ve eksikliklerinden bahsetmeyeceğim, bu farklı bir konu, sadece örneklere hayran kalın ve gerekirse sitenizdeki benzerlikleri vikorize edin. Tüm efektler, çıktı cihazlarıyla birlikte bir gösterim ve rapor dokümantasyonu ile bir bakışta sunulur. Kılavuzlar az çok burjuvadır, ancak her şey az çok sezgisel olarak anlaşılmaktadır.
Tüm bu uygulamaların yalnızca CSS3'ün gücünü destekleyen güncel tarayıcılarda doğru şekilde çalıştığı gerçeğine saygınızı ifade etmek isterim.
Gizli resmi bozmamak için, efektlerin adlarının makine çevirisiyle çarpıtılmadan (tüm niyet ve amaçlar için), yayıncının söylediği gibi başlıkların orijinallerinden mahrum bırakılmadan.
Minyatüre odaklanırken çok dikkat çekici bir etki, tasarımda ve diğer parçalarda ince çizgilerin ortaya çıkmasıyla tasvir edilmiştir. Altyazılardan resimlere, yumuşak ve müdahaleci olmayan 3D dönüştürmeye ve sözde öğelerin yumuşak geçişlerine kadar çok sayıda farklı efekt türü görünür. Modern tarayıcılarda daha az iyi çalışır.
iHover, Bootstrap 3'ün yardımıyla saf CSS3 üzerinde gezdirildiğinde çarpıcı bir efekt koleksiyonuna sahiptir. Scss CSS'den (dosya) ilham alınmıştır, kolayca değiştirilebilir. Modüler kod, dosyanın tamamının çalışmaya dahil edilmesine gerek yoktur. Tek pakette 30'dan fazla farklı efekt. Her şey iyi bir şekilde belgelenmiştir, Vikoristan'da efektler daha da basittir. Tek yapmanız gereken HTML düzenini doğru bir şekilde ayarlamak ve çalışmaya başlamadan önce CSS dosyasını eklemek.
Görüntü imzasının saatine bağlı olarak bir dizi basit ama şık efekt oluşturur. Buradaki fikir, küçük resmin üzerine geldiğinizde başlığın, yazarın adının ve bağlantı düğmesinin etkili bir şekilde görünmesidir. Belirli efektler için görsel 3D dönüşümler kullanılır.
Çerçevedeki görüntünün etrafında, herhangi bir özel zil ve ıslık olmadan, çok basit bir geçiş efekti, gezinildiğinde değişen bir odağa dönüşür ve hepsi bu.
CSS3 kullanan küçük resimler için
Perakendeci, açılır pencere açıklamalarından (altyazılardan) küçük resimlere geçişlerin etkilerini tasvir etmek için çalışmasını bir popo galerisi olarak konumlandırıyor. IE 9+ dahil güncel tarayıcılar tarafından destekleneceği belirtiliyor. Elbette buna tam teşekküllü bir galeri demek zordur, ancak imzaların ortaya çıkmasının etkisi tamdır.
Mükemmel yuvarlak küçük resimlerin üzerine gelindiğinde olumsuz etkiler yaratmak için temel bir CSS kuralları kümesi. Paket, eğitim ve geliştirme dokümantasyonu da dahil olmak üzere 7 tür CSS3 geçişi içerir. Efektler mevcut tarayıcılar tarafından desteklenmektedir.
Fareyle üzerine gelindiğinde küçük resimler kaydırılıyor
Fare imleci üzerlerine getirildiğinde küçük resimlerin yuvarlak hale getirilmesinin basit bir etkisi, yaklaşık olarak blogumda, kafadaki kayıt duyurularında görebileceğiniz gibi. Birkaç satır CSS koduyla uygulanır.
Kelimenin tam anlamıyla tercüme etmek gerekirse: "İşaret edildiğinde cinsel etki." O kadar cinsel bir şey ki, çılgın bir hayal gücünüz olmadığı sürece bunun etkisini fark etmeniz pek mümkün değil, ancak bu etki kendi yolunda faydalıdır ve yeni erkeğe duyulan saygıyı artırır.
İşaret ettiğinizde görüntülenecek beş farklı efekt. Üç varyasyonda imzalar, farklı görünürlük derecelerine sahip perdeler ve yatay hareketlerle sarma.
4 CSS3 kullanımı da dahil olmak üzere uygulanan resim yazılarının animasyon efektlerine bakın. Geçiş efektlerinin ortaya çıktığı farklı konumlar tamamen standarttır. Animasyonun nasıl çalıştığını anlamak için, beraberindeki belgeleri görmeden demo sayfasının çıktı koduna bakın.
İmza, sarma, geliştirme, birleştirme gibi çeşitli efektlere sahip minyatürler galeri ağına eklendi. Kaynaktan gelen belgeler ve ayarlamalar yetersizdir ancak özel istek için başvurabilirsiniz.
Bu efekt özel bir şey değil, gezinirken görüntünün parlaklığında sıradan bir değişiklik, hatta bir animasyon unsuru ekliyor. Çıktı demosunu okuyarak uygulama ayrıntılarını kendi başınıza çözmeniz gerekecektir.
Görüntüler için 10 vurgulu efektten oluşan başka bir set, vurgulu, yakınlaştırma, döndürme, döndürme, karartma vb. üzerinde minyatürlerin farklı görünümleri.
Görüntünün etrafındaki çerçevenin çeşitli animasyon efektleri, çok çekici görünüyor ve ayarlama ve wiki hakkında bir rapor var.
Fareyle üzerine gelindiğinde küçük resim başlıklarının etkili görünümü için kullanılan, CSS3'teki orijinal fareyle üzerine gelme efektleri. Bir dizi CSS kuralı, farklı görüntüler için özelleştirilebilen 10 farklı efekt içerir. Etkiler gerçekten etkiliyor, özellikle de CSS3'ün yardımı olmadan ne yapıldığını anlamak söz konusu olduğunda. Neler olduğunu anlamanıza yardımcı olacak ayrıntılı bir kılavuz.
Buradaki fikir, herhangi bir yazı için arka plan formu olan ve fare üzerine getirildiğinde başka bir forma dönüşen bir SVG oluşturmaktır. Bu şekilde bir dizi farklı seçenek oluşturabilirsiniz ve örnekte üç tür geçiş efekti gösterilmektedir. SVG kullanmanın avantajı, formun boyutunu orijinal kabın boyutuna uyacak şekilde değiştirebilmemizdir.
Rozsuvni görselleri
Bu efektin özü, resim yazısının görünmesi için görüntünün yukarı ve aşağı görüntülenmesidir. Stil parametrelerini düzeltirseniz, bazı güzel efektler elde edebileceğinizi düşünüyorum, ancak genel olarak her şey oldukça basit görünüyor.
Bu efektle her şey basittir, resimlerin altyazıları sağ üstte veya altta görünür, sayfanın alt kısmında çizgiler koyu bir arka planla görünür, her şey CSS'nin gücü kullanılarak yeniden biçimlendirilir .
Tasarlandığı gibi, küçük resimler koyulaştırılmış bir görünümde sunulur; üzerlerine getirildiğinde görüntüler görünür ve imza, açık renkli bir arka plan üzerinde birleşir.
Resimden önceki başlık köşeden belirir ve resmin tüm alanı boyunca çapraz olarak genişler.
İmzaların görüntü minyatürlerinden önce uygulanmasına yönelik bir dizi başka çözüm vardır. Çevrimiçi düzenleyicide parametreleri deneyebilir ve istediğiniz sonuçları elde edebilirsiniz.
Küçük resimlerin üzerinde gezinirken bir dizi güzel efekt, farklı görünüm türleri ve resim yazılarının tasarımı. Biraz karartmanın aksine ince çizgiler, anlaşılması kolay bilgi blokları oluşturur.
Küçük resimler görüntülenmeden önce altyazılar göründüğünde animasyon etkisi nedeniyle kimerik formlar ve efekt geliştirildi.
Yalnızca CSS3 ve HTML5 kullanarak resimlerde hacimsel başlıklar görüntülemek için görsel slayt efekti oluşturma örneği.
Resimlere 6 başlık
Ek CSS3'ün üzerine gelindiğinde resimlerden önce altyazıların görünmesi için 6 seçenek. Uygulama ve ayarlamalardan en yararlı ders hafta sonu için mevcut.
Sonunda, CSS3 kullanarak küçük resme birleştirici bir başlık oluşturmanın en basit yolunu düşünmeden edemiyorum.
Bu yöntemi önceki derslerimden birinde öğrenmiştim: .
Sitedeki robota en kısa sürede mesaj göndermek ister misiniz? Artık tamamen mümkün! Bu basit nedenlerden dolayı TemplateMonster pazarında yeni bir bölüm ortaya çıktı. Koleksiyon güncellenecektir ancak artık çevrimiçi projeniz için neyin uygun olduğunu öğrenebilirsiniz. Tek yapmanız gereken ideal hazır çözümünüzü seçmek ve gerekli bilgilerin sunumu üzerinde çalışmaktır. Ve metni mektup şablonuna manuel olarak yazmanız gerektiğini unutmayın.
Andriy'e saygılarımla
Öncelikle konuya henüz tam olarak girmeyenler veya hiç bilmeyenler için kısaca ne olduğunu anlatacağım. Fare imleci üzerlerine getirildiğinde web sitesi öğelerine çeşitli efekt türleri (başlıklar, araç ipuçları, yumuşak geçişler, dönüştürme, döndürme, geliştirme, yer değiştirme vb.) uygulanabilir. Bu efektler çeşitli jQuery eklentilerinin yardımıyla veya saf olarak uygulanabilir.
Bugün, CSS3 kullanılarak, javascript kitaplıklarına bağlanmadan oluşturulan, görüntüler için orijinal vurgulu efektlerden oluşan geniş bir koleksiyon hazırlıyorum. Saf CSS3 üzerinde vurgulu efektleri uygulamanın avantajlarından ve eksikliklerinden bahsetmeyeceğim, bu farklı bir konu, sadece örneklere hayran kalın ve gerekirse sitenizdeki benzerlikleri vikorize edin. Tüm efektler, çıktı cihazlarıyla birlikte bir gösterim ve rapor dokümantasyonu ile bir bakışta sunulur. Kılavuzlar az çok burjuvadır, ancak her şey az çok sezgisel olarak anlaşılmaktadır.
Tüm bu uygulamaların yalnızca CSS3'ün gücünü destekleyen güncel tarayıcılarda doğru şekilde çalıştığı gerçeğine saygınızı ifade etmek isterim.
Gizli resmi bozmamak için, efektlerin adlarının makine çevirisiyle çarpıtılmadan (tüm niyet ve amaçlar için), yayıncının söylediği gibi başlıkların orijinallerinden mahrum bırakılmadan.
Minyatüre odaklanırken çok dikkat çekici bir etki, tasarımda ve diğer parçalarda ince çizgilerin ortaya çıkmasıyla tasvir edilmiştir. Altyazılardan resimlere, yumuşak ve müdahaleci olmayan 3D dönüştürmeye ve sözde öğelerin yumuşak geçişlerine kadar çok sayıda farklı efekt türü görünür. Modern tarayıcılarda daha az iyi çalışır.
iHover, Bootstrap 3'ün yardımıyla saf CSS3 üzerinde gezdirildiğinde çarpıcı bir efekt koleksiyonuna sahiptir. Scss CSS'den (dosya) ilham alınmıştır, kolayca değiştirilebilir. Modüler kod, dosyanın tamamının çalışmaya dahil edilmesine gerek yoktur. Tek pakette 30'dan fazla farklı efekt. Her şey iyi bir şekilde belgelenmiştir, Vikoristan'da efektler daha da basittir. Tek yapmanız gereken HTML düzenini doğru bir şekilde ayarlamak ve çalışmaya başlamadan önce CSS dosyasını eklemek.
Görüntü imzasının saatine bağlı olarak bir dizi basit ama şık efekt oluşturur. Buradaki fikir, küçük resmin üzerine geldiğinizde başlığın, yazarın adının ve bağlantı düğmesinin etkili bir şekilde görünmesidir. Belirli efektler için görsel 3D dönüşümler kullanılır.
Çerçevedeki görüntünün etrafında, herhangi bir özel zil ve ıslık olmadan, çok basit bir geçiş efekti, gezinildiğinde değişen bir odağa dönüşür ve hepsi bu.
CSS3 kullanan küçük resimler için fareyle üzerine gelme efektleri
Perakendeci, açılır pencere açıklamalarından (altyazılardan) küçük resimlere geçişlerin etkilerini tasvir etmek için çalışmasını bir popo galerisi olarak konumlandırıyor. IE 9+ dahil güncel tarayıcılar tarafından destekleneceği belirtiliyor. Elbette buna tam teşekküllü bir galeri demek zordur, ancak imzaların ortaya çıkmasının etkisi tamdır.
Mükemmel yuvarlak küçük resimlerin üzerine gelindiğinde olumsuz etkiler yaratmak için temel bir CSS kuralları kümesi. Paket, eğitim ve geliştirme dokümantasyonu da dahil olmak üzere 7 tür CSS3 geçişi içerir. Efektler mevcut tarayıcılar tarafından desteklenmektedir.
Fareyle üzerine gelindiğinde küçük resimler kaydırılıyor
Fare imleci üzerlerine getirildiğinde küçük resimlerin yuvarlak hale getirilmesinin basit bir etkisi, yaklaşık olarak blogumda, kafadaki kayıt duyurularında görebileceğiniz gibi. Birkaç satırlık CSS koduyla uygulanır.
Kelimenin tam anlamıyla tercüme etmek gerekirse: "İşaret edildiğinde cinsel etki." O kadar cinsel bir şey ki, çılgın bir hayal gücünüz olmadığı sürece bunun etkisini fark etmeniz pek mümkün değil, ancak bu etki kendi yolunda faydalıdır ve yeni erkeğe duyulan saygıyı artırır.
İşaret ettiğinizde görüntülenecek beş farklı efekt. Üç varyasyonda imzalar, farklı görünürlük derecelerine sahip perdeler ve yatay hareketlerle sarma.
4 CSS3 kullanımı da dahil olmak üzere uygulanan resim yazılarının animasyon efektlerine bakın. Geçiş efektlerinin ortaya çıktığı farklı konumlar tamamen standarttır. Animasyonun nasıl çalıştığını anlamak için, beraberindeki belgeleri görmeden demo sayfasının çıktı koduna bakın.
İmza, sarma, geliştirme, birleştirme gibi çeşitli efektlere sahip minyatürler galeri ağına eklendi. Kaynaktan gelen belgeler ve ayarlamalar yetersizdir ancak özel istek için başvurabilirsiniz.
Bu efekt özel bir şey değil, gezinirken görüntünün parlaklığında sıradan bir değişiklik, hatta bir animasyon unsuru ekliyor. Çıktı demosunu okuyarak uygulama ayrıntılarını kendi başınıza çözmeniz gerekecektir.
Görüntüler için 10 vurgulu efektten oluşan başka bir set, vurgulu, yakınlaştırma, döndürme, döndürme, karartma vb. üzerinde minyatürlerin farklı görünümleri.
Görüntünün etrafındaki çerçevenin çeşitli animasyon efektleri, çok çekici görünüyor ve ayarlama ve wiki hakkında bir rapor var.
CSS3'te, fareyle üzerine gelindiğinde küçük resim başlıklarının etkili bir şekilde görünmesi için tasarlanmış orijinal fareyle üzerine gelme efektleri. Bir dizi CSS kuralı, farklı görüntüler için özelleştirilebilen 10 farklı efekt içerir. Etkiler gerçekten etkiliyor, özellikle de CSS3'ün yardımı olmadan ne yapıldığını anlamak söz konusu olduğunda. Neler olduğunu anlamanıza yardımcı olacak ayrıntılı bir kılavuz.
Buradaki fikir, herhangi bir yazı için arka plan formu olan ve fare üzerine getirildiğinde başka bir forma dönüşen bir SVG oluşturmaktır. Bu şekilde bir dizi farklı seçenek oluşturabilirsiniz ve örnekte üç tür geçiş efekti gösterilmektedir. SVG kullanmanın avantajı, formun boyutunu orijinal kabın boyutuna uyacak şekilde değiştirebilmemizdir.
Rozsuvni görselleri
Bu efektin özü, resim yazısının görünmesi için görüntünün yukarı ve aşağı görüntülenmesidir. Stil parametrelerini düzeltirseniz, bazı güzel efektler elde edebileceğinizi düşünüyorum, ancak genel olarak her şey oldukça basit görünüyor.
Bu efektle her şey basittir, resimlerin altyazıları sağ üstte veya altta görünür, sayfanın alt kısmında çizgiler koyu bir arka planla görünür, her şey CSS'nin gücü kullanılarak yeniden biçimlendirilir .
Tasarlandığı gibi, küçük resimler koyulaştırılmış bir görünümde sunulur; üzerlerine getirildiğinde görüntüler görünür ve imza, açık renkli bir arka plan üzerinde birleşir.
Resimden önceki başlık köşeden belirir ve resmin tüm alanı boyunca çapraz olarak genişler.
İmzaların görüntü minyatürlerinden önce uygulanmasına yönelik bir dizi başka çözüm vardır. Çevrimiçi düzenleyicide parametreleri deneyebilir ve istediğiniz sonuçları elde edebilirsiniz.
Küçük resimlerin üzerinde gezinirken bir dizi güzel efekt, farklı görünüm türleri ve resim yazılarının tasarımı. Biraz karartmanın aksine ince çizgiler, anlaşılması kolay bilgi blokları oluşturur.
Küçük resimler görüntülenmeden önce altyazılar göründüğünde animasyon etkisi nedeniyle kimerik formlar ve efekt geliştirildi.
Yer paylaşımlı simgelerin küçük resimler üzerindeki harika efektleri farklı seçeneklerde görünür. Vicoristics uygulamasında, (+) sembolü ek kenarlık yarıçapının arkasında bir daire ile çevrelenir: CSS'de, birleşen panelin daha fazla bilgi içeriği için yazı tipi simgelerini de galipleştirebilirsiniz.
Yalnızca CSS3 ve HTML5 kullanarak resimlerde hacimsel başlıklar görüntülemek için görsel slayt efekti oluşturma örneği.
Resimlere 6 başlık
Ek CSS3'ün üzerine gelindiğinde resimlerden önce altyazıların görünmesi için 6 seçenek. Uygulama ve ayarlamalardan en yararlı ders hafta sonu için mevcut.
Sonunda, CSS3 kullanarak küçük resme birleştirici bir başlık oluşturmanın en basit yolunu düşünmeden edemiyorum.
Bu derste CSS ile çalışmaya devam ediyoruz ve görüntünün üzerine geldiğinizde harika bir efekt elde ediliyor, görüntü gölgelerle düzgün bir şekilde dönüyor ve metin başlıkları üzerinde özetlenmiş olarak görünüyor.
CSS etkisi, dönüşüm blokları çerçevesiyle tanımlanır
Bir şablon hazırlıyoruz, içinde CSS'nin de bulunduğu Index adında iki dosya var. CSS dolgudan kaldırıldı, yazı tipi yüklendi ve görüntünün arka planına eklendi. /img klasörünün kendisinde iki dosya vardır, arka plan izmaritlerin resmidir.
Sayfaya yerleştirilmesi gereken tüm bloklar anlatılır ve metinleri ile doldurulur.
Div.dws>div.blocImg>img+div.blocText>div.text>h2+p geçiş 
CSS vurgulu efekti
dönüşüm ölçeği(x,y)
:hover::önce::sonra
Ana görüntü stillerini/css efektini açıklar
Görüntünün bulunduğu bloğu sabit bir genişliğe ve yüksekliğe ayarlıyoruz ve overflow: gizli yardımıyla tüm girişleri aralarına ekleyip bir imleç ekliyoruz.
BlocImg (genişlik: 600 piksel; yükseklik: 338 piksel; taşma: gizli; imleç: işaretçi; )
Ekranın ortasındaki blok referans kolaylığı sağlayacak şekilde konumlandırılmıştır.
Dws ( konum: mutlak; üst: %50; sol: %50; dönüştürme: tercüme et(-%50, -%50); )
Daha sonra resim %100 genişliğe ayarlanır ve animasyon bir saniyeliğine daha akıcı hale gelir.
BlocImg img (genişlik: %100; geçiş: 0,5 sn; )
Boyut filtresini 1 pip'e ayarlayın. filtre: bulanıklaştırma(1px) ve arka planı koyulaştırın ve bunun için .blocImg sınıfını siyah yapmak için ekliyoruz ve görüntünün kendisini gezdirdiğimizde, yarı net opaklık yapacağız: .5; .
Dws:hover .blocImg img ( dönüştürme: döndürme(-10deg) ölçek(1,3); filtre: bulanıklaştırma(1 piksel); opaklık: 0,5; )
Şimdi metni stilize etmeye başlayalım.
Blok için metin girişi yapma
Kesinlikle bloğu .blocText metniyle konumlandırıyoruz ve tüm kenarlardaki kenar boşluğunu 30 piksele ayarlıyoruz. Çerçeveye göre hareketli bir görünüm oluşturdular.
BlocText (anahat: 1 piksel düz turuncu; konum: mutlak; üst: 30 piksel; sol: 30 piksel; sağ: 30 piksel; alt: 30 piksel; )
Metin için, büyük yazarlar gibi beyaz rengi ayarlayın ve kenarlara dolgu ekleyin.
Metin ( color: #fff; text-transform: büyük harf; dolgu: 0 20px; )
Başka bir seviyenin başlığı 25 resme ayarlanmıştır.
Metin h2 (yazı tipi boyutu: 25 piksel; )
Diğer kısmı turuncu renkte, pirinç için alttan eklenmiş olmalı ve alt koltuk 2 adet olmalıdır.
Metin h2 yayılma ( renk: turuncu; dolgu-alt: 3 piksel; kenar-alt: 2 piksel düz #fff; )
Paragraf tam olarak konumlandırılmış, 180 tepe noktası alçaltılmıştır. Bu bloğun genişliğini 250 piksele ayarlayın. Sol taraftan 4 piklik kenarlık ekleyin. ve iç girişleri ayarladık.
Metin p ( konum: mutlak; üst: 180 piksel; genişlik: 250 piksel; kenarlık-sol: 4 piksel katı #ffb611; dolgu: 0 10 piksel; )
Sözde elemanları tanımlama::before ve::after
Daha önce .blocText sınıfına atanmış olan taslağı alalım ve onu sözde öğeler için ayarlayalım.
:: önce :: sonra sözde elemanlar oluşturup ana stillerini tanımlıyoruz.
Bunları mutlak olarak konumlandırıyoruz, genişlik ve yüksekliği %100 olarak ayarlayıp saniyeler içinde ortaya çıkıyoruz.
BlocText::önce, .blocText::sonra ( içerik: ""; konum: mutlak; üst: 0; sol: 0; genişlik: %100; yükseklik: %100; )
Okremo ::Önce üstten ve alttan 1 pikte bordür uyguluyoruz. ve X ekseni dönüşümü için dönüşümü ayarlayın: Scale(0,1) .
BlocText::before ( border-top: 1px katı #fff; border-bottom: 1px katı #fff; transform: Scale(0,1); )
Aynısı :: için de geçerlidir; yalnızca kenarlık artık sol ve sağ taraftadır ve dönüşüm Y ekseni boyuncadır
BlocText::after (sol kenarlık: 1px katı #fff; sağ kenarlık: 1px katı #fff; transform: ölçek(1,0); )
Görünüşleri için tüm eksenlerin dönüşümü 1 olarak belirtilmiştir.
Dws:hover .blocText::before, .dws:hover .blocText::after ( transform: Scale(1,1); )
.text sınıfının opacity: 0 olması gereken metni ekleyemeyeceğim ve düzgün bir görünüm ekleyeceğim.
Fareyle üzerine geldikten sonra metin görüntülenir.
Dws:hover .text ( opaklık: 1; )
Resme işaret etme saatindeki harika Hover Efektlerini kaldırdılar.
Videoyu beğendiyseniz sosyal medyada arkadaşlarınızla paylaşın ve kimseye yorum yapmayı unutmayın.
Ders Denis Gorelov tarafından hazırlandı.
Tabletler
