Karşılaşacağımız bir sonraki şey, vücudun arka planı.
Ve aslında arka plan görüntüsü değil, ancak bu işe yarayacak bir görüntü bulsak iyi
sonuç verebilir.
Ama aslında CSX'in benim için eklediği bir degrade.
Dolayısıyla, özünde, doğrusal eğimleri yazabiliriz ve onları kendi başımıza yazmaktan ziyade
size, üzerinde çalışabildiğimiz güzel önceden hazırlanmış renk değişimlerine sahip harika bir
kaynak göstereceğiz. kendi.
Buna degradeler dot com deniliyor.
Ve sonra bazılarını görmek için ok tuşlarını kullanabileceğimiz bir sürü farklı eğim var.
Bu yüzden, sevdimğim birini bulana kadar geçtim.
Diyelim ki bunu yapmak istedim, yapmamız gereken tek şey CSSA kodu almak veya enter
tuşuna basmak ve ardından bu kodu bir panoya kopyalamak ve ardından cesedi seçmek istiyoruz.
Yani ceset ve yapıştırın.
Yani gerçekten sadece bir satır var, ancak tüm farklı tarayıcı ön ekleri var.
Bu nedenle, Internet Explorer for Chrome for Firefox operası için tüm bu farklı önekler.
Ama ne yapar
Arka planı doğrusal eğime ayarlıyoruz ve bu renklerin iki farklı renk ve yüzde
farklı yüzünü ve açıyı seçiyoruz.
Öyleyse sana yenilerini gösterelim, şimdi nasıl göründüğümü göstermeme izin ver.
Bu güzel eğimi aldık.
Böylece orada oynamaya devam edebiliriz.
Birkaç tane daha göz atabilir ve kendinizinkini kullanmakta özgürsün.
Karar verdiğim kişiye Bora-Bora deniyor burada.
Bu yüzden kopyasını panoya kopyalayıp bu kodu değiştirelim.
Bütün bunlar burada yeni bir gradyan ile yine başkasının iki farklı renk
yüzdesini yazdığı başka bir doğrusal gradyan.
Ve biz de kurtaracağız.
Ve şimdi git kontrol et.
Ve işte gidiyoruz.
Bu yüzden daha da yaklaşıyoruz.
Üzerinde çalışmamız gereken sonraki büyük şey simgelerdir.
Dolayısıyla, bir artı simgesi görüntüleniyor.
Ve bu ne yapar gösterir ve form gizler ve sonra çöp kutusu var.
Bu simgelerin, font adı verilen bir kütüphanenin parçası olduğunu da eklememiz gerektiğini görebiliyorum.
Muhteşem.
Fonta awesome gidin ve sadece Web sitesi için google Fonte awesome.
Ben onu alıyorum.
Ve hepsi bir sürü simge topluluğu.
Bu yüzden, simgelerin altına bakarsak kullanabileceğimiz tüm farklı simgelerden oluşan büyük bir liste var mı diye
gösterebilirim, orada görebilirsiniz.
Dolayısıyla, bu kütüphaneyi uygulamanızın içine dahil etmemiz gerekiyor, böylece oraya indirip indirmeyi
tıkayabilir ya da bir yazı tipi da oluşturabiliriz.
Harika CDN ve sadece bu CDN'den birini de kullan.
İkisi de çalışırdı.
Hâlâ çeşitli uğruna Jay sorgusunu indirdikleri için CD'yi kullanacağım ve burada bu bağlantıyı kopyalayacağım.
Timo'ya gidiyorum ve CSSA dosyası olduğu için bir bağlantı etiketi eklemeliyim, bu yüzden aslında bir javascript dosyası veya
yazı tipi değil ancak bir C Ss dosyası ve kaydedeceğim ve ne yapıyor olacağım aslında bana
önceden hazırlanmış ve daha sonra elemanlara ekleyebileceğim bir takım sınıflar veriyor, böylece birkaç örnek göstereceğim.
Sonra indeks sayfam
Eğer pil boş ya da batarya üçüncüsü söylemek isterseniz, bilmemiz gereken tek şey, sınıfın f bir çizgi
pil çizgisi 3 çizgi atölyesi olarak adlandırılmasıdır. Dolayısıyla, kod ekleyerek kodumuzu bir
yere bizim uygulamanıza kopyalamalısın.
H-1'e koyalım.
Bu simge anlamına gelen bir göz etiketi ve ona bir sınıf veririz ve burada bir şey koymamız gerekmez.
Bunu boş bırakıyoruz ve bu Rifan'ı harika ediyor.
ve yenilemeyi durdurur ve artık ç çeyrek pil simgesi yerine pil simgesine sahibiz.
Ve simgenin adı budur
Artı işareti ve çöp kutusunu istiyoruz, böylece buraya gideceğiz ve H-1 simgesini koruyacak ve f
sınıfını koruyacaktır, ancak F istiyoruz. A. çizgi artı ve kendi simgenizi kullanmaktan çekinmeyin.
Başarılı bulmaya devam ederseniz ve beğendiğiniz başka bir şey bulursanız, çünkü biri de kalem
görünümlü bir simge veya kalem ve kağıt gibi birini kullanabiliriz ve eğer taze kaldıysak ve şu anda
stile giren ve hareket ettiren artı işareti varsa sağa dönün ve bunun için önce yapmamız gereken tek şey onu seçmek
ve böylece köpek seçmek.
F artı işareti ve sağdaki gibi süzülecek ve yenilenecek ve şimdi doğru siteden geçecek.
Şimdi çöp kutularıyla uğraşalım ve henüz animasyonla uğraşamayacağız.
Çöp kutusunu bir X yerine göstermeye başlayacağız.
Şimdi geri gidelim ve spandımıza aslında X'lerden kurtulacağız ve span'ın
içinde başka bir e-etiket ekleyeceğiz ve e-TAG FAA sınıfına ve onun adına sahip
olacak. çöp kutusu simgesi FAA Dasch çöp kutusunu diğer yayılma alanlarına kopyalayalım ve bu yalnızca sayfa
yüklendiğinde kullanılacaktır, ancak yenileri için üç çöp tenekesi alıyoruz.
Eski ile hala uğraşıyoruz.
Bu yüzden bizim Javascript'imize gitmek istiyoruz.
Ve yeni bir kalem aldığımızda X ile bir aralık eklemek istemiyoruz.
Bir simge eklemek istiyor ve tekliflerimizin karışmadığından emin olmamız gerekiyor.
Dolayısıyla, tek tırnak işaretleri kullanıp tasarruf edersek, alanın içinde bir çöp kutusu simgesi bulunması gerekir.
Bu yüzden birkaç tane yenisini ekleyelim.
Oraya gidiyoruz.
Hâlâ bir tıkınıklığın içindeler çünkü tıklatabiliyorum.
Yani bir alan yerine bir simge öğesi.
Bu yüzden click olay hala çalışıyor.
Şimdi bu basit animasyon üzerinde çalışalım ve hepsi C ile değerlendirilir burada sayfalar yüklendiğinde aslında
gizli olan açıklıkları değerlendirir.
Onların sıfır zenginliği var.
Ve sonra fareyle üzerine gelince genişliği 40 piksele çıkarıyoruz ve daha sonra geçiş
özelliğini kullanarak animasyon yapıyoruz.
O zaman bunlardan bazılarına geçelim.
CSSA dosyamızı açın ve yapacağımız ilk şey tarzı span span'dir ve bunlara, e
7 4 C 3 C olan ve yenilenecek olan kırmızı renge sahip bir arka plan rengi vereceğiz.
Ve şimdi çevremdeki o kırmızı arka planımız var.
Sonraki yapacağımız şey, 40 piksellik bir yükseklik kazandırmaktır. Bu, henüz pek fazla şey yapmıyor görünmektedir; ancak bir kez
daha birkaç özellik eklediğimizde bir fark göreceksiniz.
20 piksel sağa bir kenar boşluğu ekleyelim ve geri dönelim.
Şimdi bize istediğimiz alanı sunuyor.
Sonra onlara, burada uzantılarda çok hafif
bir fark olan metni hizalama merkezi verelim.
Önemli olanın içindeki simgeler, simgeyi beyaza çok beyaz yapacak şekilde yapmaktır.
Tamam.
Bu yüzden sana bunları animasyonsuz ilklere nasıl getireceğini göstereceğim, böylece onlar daima
orada olacaklar.
Ardından, onları havada kalana kadar gizli kalacakları şekilde hareket ettirmelerini sağlarız.
Dolayısıyla yakınlaşıyoruz ancak bunların dikey ve yatay olarak daha fazla yer kaplaması gerekiyor.
Bu yüzden sonunda 40 piksele ekleyeceğim ve sonunda sıfıra set edeceğiz ve display 2 satırını
Blok satırına ayarlayacağız.
Ve şimdi tazeliyorum.
Ve bu doğru görünüyor.
Bir sonraki iş animasyonu yapmaktır.
Ve bunun işleyiş şekli, aslında genişliği sıfıra ayarlayacağız.
Dolayısıyla, bu müttefikler üzerinde gezinene kadar bu açıklıkların tümü sıfır olur ve o zaman, bu
mertebede 40 olacak şekilde artırırız.
Şimdi bunu yapalım.
ve sadece bir aralık değil, bir müttefikin üzerine geldiğimizde, üzerinde gezinip duran bir müttefikin kapsadığı alanı
seçmek istiyoruz.
Sıfırla başlayacağım ve daha sonra bir müttefik üzerinde gezindiğimizde
Sonra 40 piksel gibi olacak şekilde ayarlayacağız.
Ve kendi sürümümüze dönüp yenileyelim.
Kapsamların artık gittiğini görebilirsiniz.
Ve üzerinde gezinip uçtuğumda gösterge görünür ve düğme çalışır.
Bir sonraki özellik, yalnızca anında görünmemesi ve yalnızca geçiş özelliğini kullanacağımızı yapmak
için animasyon yapmaya başlamasının özelliğidir.
doğrusal hale getireceğiz, bu da serbest bırakma işlemine atıfta bulunarak sabit bir hızda ilerleyeceği anlamına geliyor.
Dolayısıyla, geçiş boyunca sıfır noktası iki saniye ekleyeceğiz ve
Ve işte gidiyoruz.
Güzel animasyonumuz var.
Burada beni rahatsız eden küçük bir öğe var, bu da, alan sıfır piksel genişliğinde bile
simgenin hala gösterildiğini gösteriyor.
Dolayısıyla, simgeyi burada görmek çok zor.
Üzerime asılmadığımda bile hâlâ orada.
Dolayısıyla ne yapacağız sadece açıklıktaki donukluğu sıfır olacak şekilde ayarladıktan sonra fareyle üzerine geltiğimizde bir tane olmak üzere ayarlayın.
Yani opaklık sıfır ve daha sonra da opaklık 1. 0 bizde kalýrken.
Ve bu onunla ilgilenecek.
Şimdi simgeleri göremiyoruz.
Orada ve sonra kayboluyor ve de geçiş var, çünkü geçiş özelliği her
şeyi etkiliyor.
O halde 2 yapalım. 2 saniye ve sana göstereceğim.
Nasıl sönüp sonra kaybolduğuna dikkat edin.
Bu çok yavaş bir sürümüdür.
Ve biz sadece 0 yapacağız. 2.
Geride bıraktığınız küçük, rahatsız edici bir şey var; burada gerçekten yakından bakarsanız veya
boyutunu arttırırsanız giriş arasında küçük bir boşluk var ve bu liste UL'yi listeliyor.
Fakat orada durduğumda boşluk ortadan kayboluyor artık.
Sonra odaklanmadığımda geri geliyor.
Bunu düzeltmek için, görünmez olan küçük bir kenarlık ekleyeceğiz, aslında R'nin
sadece küçük bir kenarına sahip olacak. G. be 0 0 0 0 0 0 ki odaklandığımız zaman
sınırlarımızın yaptığı alanı alacağız.
Bu yüzden geri dönüp burada sahip olduğumuz girdiyi beğeneceğiz ve ona üç piksel katı R-Ga'nin bir kenarlığı vereceğiz.
sıfır sıfır sıfır sıfır.
Dolayısıyla bu bize görünmez bir sınır bırakacaktır.
Ancak şu an fark edeceğim, şu küçük farkın ortadan kaybolacağına dikkat et.
Şimdi sadece sınır odaklı hale getirildiğinde sınır yıkanmakla kalmıyor, aynı zamanda gerçekte görmediğimizi sızdırmamıza
yardımcı olan bir sınır da var.