İyi gün dostları! Bu, blogumun okuyucularından birinin isteği üzerine yazılmış başka bir makale. Bugün, fare imlecini bir bağlantının üzerine getirdiğinizde bir görüntü gösterme özelliğini uygulayacağız. Bu neden gerekli olabilir? Her şey çok basit, bu şekilde sitede yer kazanabilir ve aynı zamanda linkleri canlandırabilirsiniz.
Bildiğiniz gibi uygulamak açılır resimler ile mümkün jQuery yardımı, CSS ve ayrıca HTML. Bugünkü yazımda yayınlayacağım bitmiş kod bu etki ve ayrıca birkaç iyi örnekler. Her komut dosyası oldukça basittir, CSS+HTML kullanılarak oluşturulur. Artık size eziyet etmeyeceğim ve size hazır çözümler sunacağım!
Fareyle üzerine gelindiğinde açılır görüntü
a.site-ssilka:hover+div
Ana noktaları kısaca açıklayayım. Açılır bir resim görüntülemek için etikete başvurmanız gerekir.
src özniteliği ile ve tırnak içindeki eşittir işaretinden sonra, resmin yolunu, onu yükledikten sonra yazın kök klasör alan.
Etiket <а> zorunlu href parametresi ile bir bağlantı oluşturmak ve görüntülemekten sorumludur (benim örneğimde bu metindir).
Site öğeleri taşınmışsa, özelliği kullanarak görüntünün genişliğini ve yüksekliğini ayarlayabilirsiniz. Genişlik ve yükseklik. Parametreler piksel olarak ayarlanır.
Alt özelliği, arama motorlarının resimde gösterilenleri daha doğru tanımasını sağlar.
Anlaşılır olması için, kodun büyük olasılıkla değiştirmek istediğiniz kısmını vurguladım.
Bir bağlantının üzerine gelindiğinde açılır metin
a.site-ssilka:hover+div
Daha cesur!!! Üzerimde gezin!
Örnekte de görebileceğiniz gibi, metnin üzerine geldiğinizde bir metin araç ipucu açılır.
Bir bağlantının üzerine gelindiğinde görüntü kayboluyor
a.site-ssilka:hover+div
Daha cesur!!! Üzerimde gezin!
Yukarıda belirli bir efekt eklemek için, size uygun kodu kopyalayın ve içine yapıştırın. Metin düzeltici. Böylece, makalenin herhangi bir yerine açılır / kaybolan bir resim içeren bir bağlantı yazılabilir.
Önemli nokta! Sunulan scriptlerin her biri sitenin geçerliliğine zarar vermez.
Şablonunuzun stil dosyasına genellikle style.css olarak adlandırılan özel bir komut dosyası ekleyerek görevi uygulamayı eşit derecede uygun buluyorum.
CSS açılır resmi
pozisyon: göreceli;
Küçük resim: fareyle üzerine gelin(
Küçük resim aralığı( /*büyütülmüş resim için CSS*/
pozisyon: mutlak;
arka plan rengi: #3d3d3d;
kenarlık: 1 piksel düz beyaz;
görünürlük: gizli;
metin-dekorasyon: yok;
sınır yarıçapı: 4px 4px 4px 4px;
Moz-border-radius: 4px 4px 4px 4px;
Webkit-border-radius: 4px 4px 4px 4px;
Küçük resim yayılma img( /*Büyütülmüş resim için CSS*/
sınır genişliği: 0
Küçük resim: fareyle üzerine gelme aralığı ( /* fareyle üzerine gelindiğinde büyütülmüş görüntü için CSS*/
görünürlük: görünür;
sol: 60 piksel; /*büyütülmüş görüntünün yatay olarak kayması gereken konum */
Bir bağlantının üzerine gelindiğinde bir açılır pencere görüntülemek için metne aşağıdaki bağlantıyı ekleyin:
Ek olarak, pop-up görüntü içeren bir bağlantı eklenebilir. belirli parçaşablonunuz. Bunu yapmak için index.php dosyasına aşağıdaki kodu ekleyin. Bu, site öğelerinin görsel düzenlemesini tanımlayan bir dosyadır.
CSS'ye aşina değilseniz, img.animate1:hover girişinin tarayıcıya tüm öğeler için şunu söylediğini açıklayacağım. , animate1'e eşit bir sınıf özniteliği ile fare imleciyle üzerlerine geldiğinizde belirtilen stilleri uygulayın. Ve stiller arasında belirtilir kıvırcık parantezler( ve ). Her şey doğru yapılırsa, şöyle görünmelidir:
içinde fotoğraf çekebilirsiniz orijinal durum yarı saydam ve üzerine gelindiğinde şeffaf olmamasını sağlayın. Ardından, CSS dosyasına aşağıdaki satırları eklemeniz gerekir:
img.animate1(
filtre: alfa (Opaklık=25);
opaklık: 0.25
}
img.animate1:hover(
opaklık: 1
}
Sonuç şöyle olacaktır:
Daha fazla etki için, resmin saydamlığındaki değişiklikleri yavaşlatabilirsiniz. Bunu yapmak için, bir öğenin iki durumu arasındaki geçiş efektini ayarlayan CSS geçiş özelliğini kullanabilirsiniz. Örneğin, bir saniyelik yavaşlama ekleyelim. Ardından CSS kodumuz şöyle görünecek:
img.animate1(
filtre: alfa (Opaklık=25);
opaklık: 0.25
-moz-geçişi: tüm 1'ler giriş-çıkış kolaylığı; /* 16.0 sürümünden önceki Firefox için geçiş efekti */
-webkit-geçiş: tüm 1'ler giriş-çıkış kolaylığı; /* 26.0 sürümüne kadar Chrome, Safari, Android ve iOS için geçiş efekti */
-o-geçiş: tüm 1'ler giriş-çıkış kolaylığı; /* 12.10 sürümünden önceki Opera için geçiş efekti */
geçiş: tüm 1'ler giriş-çıkış kolaylığı; /* diğer tarayıcılar için geçiş efekti */
}
img.animate1:hover(
filtre: alfa (Opaklık=100);
opaklık: 1
}
Sonuç:
Dönüştür özelliğini kullanarak görüntü ölçeklenebilir, döndürülebilir, kaydırılabilir, eğilebilir. Resmi büyütmeye çalışalım. Ardından css kodu şu şekilde olacaktır:
img.animate1(
- o-geçiş: tüm 1'ler kolaylığı;
geçiş: tüm 1'ler kolaylık;
}
img.animate1:hover(
- moz-dönüşüm: ölçek (1.5); /* 16.0 sürümünden önceki Firefox için dönüştürme efekti */
- webkit-dönüşüm: ölçek (1.5); /* 26.0 sürümüne kadar Chrome, Safari, Android ve iOS için dönüştürme efekti */
- o-dönüşüm: ölçek (1.5); /* 12.10 sürümünden önceki Opera için dönüştürme efekti */
- ms-dönüşüm: ölçek (1.5); /* IE 9.0 için dönüştürme efekti */
dönüştürme:ölçek(1.5); /* diğer tarayıcılar için dönüştürme efekti */
}
Ve sonuç şöyle olacak:
Resmi büyütmek için döndürme eklenebilir. Sonra css stilleri biraz değişir:
img.animate1(
moz geçişi: tüm 1'ler kolaylığı;
webkit-geçiş: tüm 1'lerin kolaylığı;
- o-geçiş: tüm 1'ler kolaylığı;
geçiş: tüm 1'ler kolaylık;
}
img.animate1:hover(
- moz-dönüşüm: döndürme (360 derece) ölçeği (1.5);
- webkit-dönüşüm: döndürme (360 derece) ölçek (1.5);
- o-dönüşüm: döndürme (360 derece) ölçeği (1.5);
- ms-dönüşüm: döndürme (360 derece) ölçeği (1.5);
dönüştürmek: döndürmek(360deg) ölçek(1.5);
}
Sonuç:
Yukarıda, animasyona bir resmin dahil olduğu durumları ele aldık. Sonra, düşünün bir resmi diğeriyle nasıl değiştirilir. Bu durumda, genellikle aynı boyutta iki görüntü hazırlanır: biri orijinal görünüm için, diğeri ise değiştirilmesi için.
Diyelim ki biri siyah beyaz diğeri renkli iki resmimiz var:
Siyah beyaz bir görüntünün üzerine geldiğinizde renkli bir görüntü görüntülenecek şekilde yapalım. Bunu yapmak için, background özelliğini kullanarak orijinal görüntüyü div öğesinin arka planı yapacağız. Ve imlecin görüntüsünün üzerine geldiğinizde, değiştireceğiz Arkaplan resmi aynı vurgulu sözde sınıf ve arka plan özelliğini kullanarak. Bu etkiyi uygulamak için html sayfası döndürme1 sınıfıyla bir div öğesi ekleyin:
Ve aşağıdaki stil açıklamalarını ekleyin:
böl.döndür1(
arka plan: url (img/2.jpg); /* Orijinal görüntünün bulunduğu dosyanın yolu */
genişlik: 480 piksel /* Resmin genişliği */
yükseklik: 360 piksel; /* Görüntü yüksekliği */
}
div.rotate1:hover(
arka plan: url (img/1.jpg); /* Değiştirilen görüntünün bulunduğu dosyanın yolu */
}
Ve sonuç:
Bu yöntemin önemli bir dezavantajı vardır. İkinci resim yalnızca imleç üzerine gelindiğinde yüklendiğinden, kullanıcının İnternet bağlantısı yavaşsa ve resimli dosya boyutu büyükse, resim bir duraklama ile görüntülenecektir. Bu nedenle, aşağıda fare imlecini gezdirirken görüntüleri değiştirmenin birkaç yolunu daha ele alacağız.
Bir sonraki yöntem, iki resmi tek bir dosyada birleştirmeye dayalı olacaktır. Diyelim ki sayfaya, fare imleci üzerine getirildiğinde görünümünü değiştirecek bir düğme yerleştirmemiz gerekiyor. Bunu yapmak için iki görüntüyü tek bir dosyada birleştiriyoruz ve ortaya çıkan görüntü şöyle görünecek:
Bu durumda, bir kalıptan diğerine geçiş, kaydırma yapılarak gerçekleştirilecektir. arka plan görüntüsü arka plan konumu özelliğini kullanarak dikey olarak. Düğmeye tıkladığınızda, genellikle başka bir sayfaya gittiğinizden, görüntüyü öğeye ekleyeceğiz.< a>. Ardından aşağıdaki kodu html sayfasına yapıştırın:
Ve bunun gibi bir css dosyasında:
a.döndür2(
arka plan: url (img/button.png); /* Orijinal görüntünün bulunduğu dosyanın yolu */
Ekran bloğu; /* Blok eleman olarak bağla */
genişlik: 50 piksel /* Piksel cinsinden görüntü genişliği */
yükseklik: 30 piksel; /* Görüntü yüksekliği */
}
a.rotate2:hover(
arka plan konumu: 0-30 piksel; /* Arka plan ofseti */
}
Sonuç:
Ve bugün için son yol, bir görüntünün diğerinin altına yerleştirilmesidir. css pozisyon: mutlak kurallar. Bu durumda, div kapsayıcısının içine iki resim koyarız:
Ve css stilleri ekleyin:
animasyon2(
konum:göreceli;
margin:0 auto;/* div bloğunu sayfanın ortasına ayarla*/
genişlik:480 piksel; /* Genişlik */
yükseklik: 360 piksel; /* Yükseklik */
}
.animate2 resmi(
konum:mutlak; /* mutlak konumlandırma*/
sol: 0; /* resimleri sola hizala üst köşe div-a*/
üst: 0; /* görüntüleri div'in sol üst köşesine hizalayın */
}
Css kurallarını ekledikten sonra resimler alt alta yerleştirilecektir. Şimdi görüntülerin şeffaflığını kontrol etmek opaklık özellikleri normal durumda, ikinci resmi göstereceğiz ve ilkinin üzerine geldiğinizde. Bunu yapmak için, normal durumda, birinci sınıfa sahip resmi tamamen şeffaf hale getiriyoruz ve imleci getirdiğinizde bunun tersi doğrudur: ikinci sınıfa sahip resim tamamen şeffaf olacak ve birinci sınıfa sahip resim tamamen şeffaf olacaktır. şeffaf olmamak:
Animate2 img.first ( /* ilk resim tamamen şeffaftır */
opaklık:0;
filtre:alfa (opaklık=0);
}
.animate2:hover img.first ( /* üzerine gelindiğinde ilk görüntü opak olur */
opaklık:1;
filtre:alfa (opaklık=100);
}
/* ve ikincisi üzerine gelindiğinde şeffaf hale gelir */
opaklık:0;
filtre:alfa (opaklık=0);
}
Sonuç:
Son kurala CSS geçiş özelliğini ekleyerek yumuşak bir geçiş elde edebilirsiniz:
Animate2:vurgulu img.saniye, .animate2 img.saniye:hover (
opaklık:0;
filtre:alfa (opaklık=0);
-moz-geçiş: tüm 2s kolaylığı;
-webkit-geçiş: tüm 2s kolaylığı;
-o-geçiş: tüm 2s kolaylığı;
geçiş: tüm 2s kolaylığı;
}
Ve sonuç:
Ve transform özelliğini eklersek:
Animate2:vurgulu img.saniye, .animate2 img.saniye:hover (
opaklık:0;
filtre:alfa (opaklık=0);
-moz-dönüşüm:ölçek(0, 1);
-webkit-dönüşüm:ölçek(0, 1);
-o-dönüşüm:ölçek(0, 1);
-ms-dönüşüm:ölçek(0, 1);
dönüştürme:ölçek(0, 1); /* görüntü genişliğini 0'a indir */
}
Şu şekilde ortaya çıkacak:
Farklı CSS özelliklerini birleştirerek farklı sonuçlar elde edebilirsiniz. vurgulu efektler fareyi gezdirirken görüntüleri değiştirirken. Bunları ve diğer örnekleri kaynak kodunu da indirebileceğiniz bu sayfada yayınladım. Hepsi bu, tekrar buluşana kadar.
| 18.02.2016
CSS3, UI tasarımcıları için sınırsız olanaklar sunar ve ana avantajı, JavaScript kullanımına başvurmadan hemen hemen her fikrin kolayca uygulanabilmesi ve hayata geçirilebilmesidir.
Sıradan bir web sayfasını basit şeylerin kullanıcılar için daha erişilebilir hale getirmesi şaşırtıcı. Öğenin, örneğin üzerine gelindiğinde stili dönüştürmesine ve değiştirmesine izin verebileceğiniz CSS3 geçişlerinden bahsediyoruz. Aşağıdaki dokuz CSS3 animasyon örneği, sitenizde duyarlı bir deneyim oluşturmanıza ve güzel yumuşak geçişlerle sayfanızın genel görünümünü iyileştirmenize yardımcı olacaktır.
Daha detaylı bilgi için dosyalarla birlikte arşivi indirebilirsiniz.
Tüm efektler geçiş özelliği ile çalışır. geçiş- "geçiş", "dönüşüm") ve fare imleci üzerine getirildiğinde öğenin stilini belirleyen sözde sınıf: hover . Örneklerimiz için 500x309 piksellik bir div, #6d6d6d başlangıç arka plan rengi ve 0,3 saniyelik bir geçiş süresi kullandık.
Gövde > div ( genişlik: 500 piksel; yükseklik: 309 piksel; arka plan: #6d6d6d; -webkit-geçişi: tüm 0,3 saniyelik kolaylık;; -moz-geçiş: tüm 0,3 saniyelik kolaylık;; -o-geçiş: tümü 0,3 saniyelik kolaylık;; geçiş: tüm 0.3 saniyelik kolaylık; )
1. Fareyle üzerine gelindiğinde rengi değiştirin
Bir zamanlar, belirli RGB değerlerinin matematiksel hesaplamaları ile böyle bir efektin uygulanması oldukça zahmetli bir işti. Şimdi yazman yeterli css stili, sözde sınıfı eklemeniz gereken: seçicinin üzerine gelin ve arka plan rengini ayarlayın; bu, bloğun üzerine geldiğinizde sorunsuzca (0,3 saniye içinde) orijinal arka plan rengini değiştirir:
Renk: üzerine gelin (arka plan:#53ea93; )
2. Çerçevenin görünümü
İlginç ve parlak bir dönüşüm, farenin üzerine geldiğinizde düzgün görünen iç çerçevedir. Çeşitli düğmeleri süslemek için iyi. Bu efekti elde etmek için, :hover sözde sınıfını ve inset parametresiyle box-shadow özelliğini kullanırız (öğenin içindeki gölgeyi ayarlar). Ek olarak, gölge uzantısını (bizim durumumuzda 23 pikseldir) ve rengini ayarlamanız gerekecektir:
Kenarlık: vurgulu ( kutu-gölge: iç metin 0 0 0 23px #53ea93; )
3. Salıncak
Bu CSS animasyonu bir istisnadır, çünkü burada geçiş özelliği kullanılmaz. Bunun yerine şunları kullandık:
- @keyframes, sözde yapmanızı sağlayan kare kare CSS animasyonu oluşturmak için temel bir yönergedir. 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) ayarlama özellikleri. Bizim durumumuzda, tekrarlayın 1.
4. Çürüme
Bir solma efekti, temel olarak bir öğenin şeffaflığını değiştirmektir. Animasyon iki aşamada oluşturulur: ilk olarak, ilk şeffaflık durumunu 1 - yani tam opaklık olarak ayarlamanız ve ardından fareyi üzerine getirdiğinizde değerini belirtmeniz gerekir - 0.6:
Fade ( opaklık: 1; ) .fade:hover ( opaklık: 0.6; )
Ters sonuç için değerleri değiştirin:
5. Yakınlaştırma
Bloğun üzerine gelindiğinde daha da büyümesini sağlamak için transform özelliğini kullanacağız ve değerini scale(1.2) olarak ayarlayacağız. Bu durumda, oranlarını korurken blok yüzde 20 artacaktır:
Grow:hover ( -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); )
6. Azaltma
Bir öğeyi azaltmak, artırmak kadar kolaydır. Beşinci paragrafta, ölçeği artırmak için 1'den büyük bir değer belirtmemiz gerekiyorsa, o zaman bloğu azaltmak için birden küçük olacak bir değer belirtiriz, örneğin, scale(0.7) . Şimdi, fareyi gezdirirken, blok orantılı olarak orijinal boyutunun yüzde 30'u kadar azalacaktır:
Shrink:hover ( -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); )
7. Bir daireye dönüşüm
Yaygın olarak kullanılan bir animasyon, üzerine gelindiğinde daireye dönüşen dikdörtgen bir öğedir. mülkü kullanma css sınır yarıçapı, :hover ve geçiş ile birlikte kullanıldığında, bu sorunsuz bir şekilde uygulanabilir:
Daire:hover (sınır yarıçapı: %70; )
8. Döndürme
Komik bir animasyon seçeneği, bir öğeyi belirli sayıda derece döndürmektir. Bunu yapmak için, yine transform özelliğine ihtiyacımız var, ancak farklı bir değere sahip - rotasyonZ(20deg) . Bu parametrelerle blok, Z eksenine göre saat yönünde 20 derece döndürülecektir:
Döndür: fareyle üzerine gelin ( -webkit-dönüşümü: döndürmeZ(20deg); -ms-dönüşüm: döndürmeZ(20deg); dönüştürme: döndürmeZ(20deg); )
9. 3D gölge
Tasarımcılar bu efektin düz tasarımda uygun olup olmadığı konusunda hemfikir değiller. Ancak bu CSS3 animasyonu oldukça özgün ve web sayfalarında da kullanılıyor. Halihazırda aşina olduğumuz box-shadow özelliklerini kullanarak üç boyutlu bir efekt elde edeceğiz (çok katmanlı bir gölge oluşturacak) ve translateX (-7px) parametresi ile dönüştüreceğiz (bloğun yatay olarak 7 piksel sola kaydırılmasını sağlayacaktır) ):
Threed:hover ( 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ürmek: translateX(-7px); )
Tarayıcı Desteği
Geçiş özelliği şu anda aşağıdaki tarayıcılar tarafından desteklenmektedir:
| Masaüstü tarayıcılar | |
|---|---|
| Internet Explorer | IE 10 ve üzeri tarafından desteklenir |
| Krom | Sürüm 26'dan beri desteklenir (sürüm 25'ten önce -webkit- öneki ile çalışır) |
| Firefox | Sürüm 16'dan beri desteklenir (4-15 sürümlerinde -moz- ön eki ile çalışır) |
| Opera | 12.1 sürümünden beri desteklenir |
| safari | Sürüm 6.1'den beri desteklenir (3.1-6 sürümlerinde -webkit- öneki ile çalışır) |
Bu örneklerde kullanılan transform , box-shadow vb. gibi özelliklerin geri kalanı da hemen hemen tüm kullanıcılar tarafından desteklenmektedir. modern tarayıcılar. Ancak, bu fikirleri projeleriniz için kullanacaksanız, tarayıcılar arası uyumluluğu iki kez kontrol etmenizi şiddetle tavsiye ederiz.
Bu CSS3 animasyon örneklerinin size yardımcı olduğunu umuyoruz. Size yaratıcı başarılar diliyoruz!
Butonlarla uğraşmadan önce hepsinde ortak olan ayarlara bir göz atalım.
HTML
Düğmeler için çok kullanılacak basit html kod:
Abone olmak
css
Ayrıca tüm düğmeler Genel Ayarlar yazı metni ve bağlantıların seçimini kaldırmak için:
ButtonText ( font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; ) a ( color: #fff; text-decoration: none; )
Tipik olarak, kullanıcı fareyi bir bağlantı veya düğmenin üzerine getirdiğinde oldukça hafif bir etki bekler. Ve bizim durumumuzda, düğme boyutu değişir - ek bir mesaj göstererek artar.
Ana CSS kodu
Başlamak için, düğmeye sadece bir şekil ve bir renk vermemiz gerekiyor. 28 piksellik bir yükseklik ve 115 piksellik bir genişlik tanımlayın, kenar boşlukları ve dolgu ekleyin ve düğmeye hafif bir kenarlık verin.
#button1 ( arka plan: #6292c2; kenarlık: 2 piksel düz #eee; yükseklik: 28 piksel; genişlik: 115 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; dolgu: 0 0 0 7 piksel; taşma: gizli; ekran: blok; )
CSS3 Efektleri
Bazı insanlar, basit bir butona oldukça fazla CSS kodu eşlik ettiğinde bundan hoşlanır. AT bu bölüm düğmemiz için ek CSS3 stilleri sağlar. Onlarsız yapabilirsiniz, ancak düğmeye daha modern bir görünüm verirler.
Çerçevenin köşelerini yuvarlayın ve bir degrade ekleyin. İşte herhangi bir arka plan rengiyle çalışan küçük bir karanlık degrade hilesi.
/*Yuvarlak köşeler*/ -webkit-border-radius: 15 piksel; -moz-border-radius: 15 piksel; sınır yarıçapı: 15 piksel; /*Gradient*/ background-image: -webkit-linear-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
CSS Animasyonu
Şimdi yükleyelim CSS geçişi. Animasyon, herhangi bir özellik değişikliği için kullanılacak ve yarım saniye sürecektir.
fareyle üzerine gelme
Sadece fare ile üzerine geldiğinizde düğmeyi genişletmek için bir stil eklemek için kalır. Gönderinin tamamını görüntülemek için düğmenin 230 piksel genişliğinde olması gerekir.
#button1:hover (genişlik: 230 piksel; )
Kolay renk tonu değişimi
Bir düğme için çok basit ve popüler bir CSS efekti. Fare imlecini hareket ettirdiğinizde arka plan renginin tonunu sorunsuz bir şekilde değiştirir.
Ana CSS kodu
CSS kodu, önceki örneğe çok benzer. Farklı bir arka plan rengi kullanılır ve şekil biraz değiştirilir. Metin de ortalanır ve düğmenin satır yüksekliği, dikey olarak ortalanacak şekilde ayarlanır.
#button2 ( arka plan: #d11717; kenarlık: 2 piksel düz #eee; yükseklik: 38 piksel; genişlik: 125 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 38 piksel; )
CSS3 Efektleri
Köşelerin yuvarlanmasını, arka plan için degradeyi ve ek gölgeyi ayarlayın. Rgba kullanarak gölgeyi siyah ve şeffaf hale getiriyoruz.
/*Yuvarlak köşeler*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; sınır yarıçapı: 10px /*Gradient*/ background-image: -webkit-linear-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animasyonu
Animasyon önceki örnekle hemen hemen aynıdır.
/*Geçiş*/ -webkit-geçiş: Tüm 0,5 saniyelik kolaylık; -moz-geçiş: Tüm 0,5 saniyelik kolaylık; -o-geçiş: Tüm 0,5 saniyelik kolaylık; -ms-geçiş: Tüm 0,5 saniyelik kolaylık; geçiş: Tüm 0,5 saniyelik kolaylık;
fareyle üzerine gelme
Fare imlecini gezdirirken farklı bir arka plan rengi ayarlanacaktır. Harika bir efekt için Photoshop'ta daha açık bir renk seçeneği seçmeyi deneyin.
#button2:hover ( background-color: #ff3434; )
Bu efekt, arka plan görüntüsü seçimine bağlı olarak oldukça etkileyici olabilir. Demo, sıradan olmayan bir arka plan kullanır ve efekt sıradan görünür. Farklı bir resim kullanmayı deneyin ve çarpıcı bir efekt elde edebilirsiniz.
Ana CSS kodu
Kodun ana kısmı önceki örneklerle aynıdır. Bir arka plan resmi kullandığımızı unutmayın. Arka planın başlangıç konumu "0 0" olarak ayarlanmıştır. İmlecin üzerine geldiğinizde konum dikey olarak kayar.
#button3 ( arka plan: #d11717 url("bkg-1.jpg"); arka plan konumu: 0 0; metin gölgesi: 0px 2px 0px rgba(0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik : 58 piksel; genişlik: 155 piksel; kenar boşluğu: 50 piksel 0 0 50 piksel; taşma: gizli; ekran: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel; )
CSS3 Efektleri
Bu örnekte özel bir şey yoktur - yuvarlatılmış köşeler ve gölgeler.
/*Yuvarlak köşeler*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5px /*Shadow*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); kutu gölgesi: 0px 3px 1px rgba(0, 0, 0, 0.2);
CSS Animasyonu
Bu durum için animasyon, pürüzsüz ve ilginç bir etki yaratmak için daha uzundur.
/*Geçiş*/ -webkit-geçiş: Tüm 0.8 saniyelik kolaylık; -moz-geçiş: Tüm 0.8s kolaylığı; -o-geçiş: Tüm 0.8s kolaylığı; -ms-geçiş: Tüm 0.8s kolaylığı; geçiş: Tüm 0.8s kolaylığı;
fareyle üzerine gelme
Şimdi arka plan resmini taşıma zamanı. Başlangıç konumu "0 0" idi. İkinci parametreyi 150 piksele ayarlayın. Yatay olarak kaydırmak için ilk parametreyi değiştirmeniz gerekir.
#button3:hover (arka plan konumu: 0px 150px; )
3D simüle edilmiş düğmeye basın
Öğreticimizdeki son örnek, fareyle üzerine geldiğinizde bir düğme tıklamasını simüle eden popüler 3D yöntemine odaklanır. Bu durum için animasyon o kadar basittir ki, bir CSS geçişi bile gerektirmez. Ama sonuç oldukça etkileyici.
Ana CSS kodu
Düğmemiz için CSS kodu.
#button4 ( arka plan: #5c5c5c; metin gölgesi: 0px 2px 0px rgba(0, 0, 0, 0.3); yazı tipi boyutu: 22px; yükseklik: 58px; genişlik: 155px; kenar boşluğu: 50px 0 0 50px; taşma: gizli ; görüntüleme: blok; metin hizalama: merkez; satır yüksekliği: 58 piksel; )
CSS3 Efektleri
Bu durumda, CSS3 artık iyi bir seçenek değildir. Efekti elde etmek için gölgeler ve bir degrade gereklidir. Sert gölge, bir 3B düğmenin görünümünü oluşturur.
/*Yuvarlak köşeler*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; sınır yarıçapı: 5px /*Shadow*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); kutu gölgesi: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -moz-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -o-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: -ms-doğrusal-gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); arka plan görüntüsü: doğrusal gradyan(üst, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
fareyle üzerine gelme
Bu durumda, en büyük vurgulu bölüme sahibiz. Gölgenin uzunluğu azaltılır ve kenar boşlukları karanlık bölgenin bir karışımını oluşturur. Hep birlikte bir düğmeye basma yanılsaması yaratır. Gradyanı çevirmek efekti artırır.
#button4:hover ( margin-top: 52px; /*Shadow*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0 , 0, 0, 0.8); kutu gölgesi: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Gradient*/ background-image: -webkit-linear-gradient(alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); arka plan görüntüsü: -moz-doğrusal-gradyan(alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) )); arka plan görüntüsü: -o-doğrusal-gradyan(alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); arka plan görüntüsü: -ms-doğrusal-gradyan( alt, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); arka plan görüntüsü: doğrusal gradyan(alt, rgba(0, 0, 0, 0), rgba(0,) 0, 0, 0.4)); )