1
00:00:00,210 --> 00:00:03,460
Karşılaşacağımız bir sonraki şey, vücudun arka planı.

2
00:00:03,660 --> 00:00:08,430
Ve aslında arka plan görüntüsü değil, ancak bu işe yarayacak bir görüntü bulsak iyi

3
00:00:08,430 --> 00:00:09,270
sonuç verebilir.

4
00:00:09,420 --> 00:00:13,590
Ama aslında CSX'in benim için eklediği bir degrade.

5
00:00:13,650 --> 00:00:19,430
Dolayısıyla, özünde, doğrusal eğimleri yazabiliriz ve onları kendi başımıza yazmaktan ziyade

6
00:00:19,470 --> 00:00:25,290
size, üzerinde çalışabildiğimiz güzel önceden hazırlanmış renk değişimlerine sahip harika bir

7
00:00:25,560 --> 00:00:27,470
kaynak göstereceğiz. kendi.

8
00:00:27,750 --> 00:00:29,850
Buna degradeler dot com deniliyor.

9
00:00:30,030 --> 00:00:35,580
Ve sonra bazılarını görmek için ok tuşlarını kullanabileceğimiz bir sürü farklı eğim var.

10
00:00:36,180 --> 00:00:39,860
Bu yüzden, sevdimğim birini bulana kadar geçtim.

11
00:00:40,050 --> 00:00:46,080
Diyelim ki bunu yapmak istedim, yapmamız gereken tek şey CSSA kodu almak veya enter

12
00:00:46,080 --> 00:00:52,120
tuşuna basmak ve ardından bu kodu bir panoya kopyalamak ve ardından cesedi seçmek istiyoruz.

13
00:00:52,360 --> 00:00:56,960
Yani ceset ve yapıştırın.

14
00:00:57,540 --> 00:01:02,610
Yani gerçekten sadece bir satır var, ancak tüm farklı tarayıcı ön ekleri var.

15
00:01:02,880 --> 00:01:09,130
Bu nedenle, Internet Explorer for Chrome for Firefox operası için tüm bu farklı önekler.

16
00:01:09,240 --> 00:01:09,990
Ama ne yapar

17
00:01:10,020 --> 00:01:16,170
Arka planı doğrusal eğime ayarlıyoruz ve bu renklerin iki farklı renk ve yüzde

18
00:01:16,170 --> 00:01:18,740
farklı yüzünü ve açıyı seçiyoruz.

19
00:01:18,750 --> 00:01:24,390
Öyleyse sana yenilerini gösterelim, şimdi nasıl göründüğümü göstermeme izin ver.

20
00:01:24,390 --> 00:01:26,190
Bu güzel eğimi aldık.

21
00:01:26,580 --> 00:01:28,420
Böylece orada oynamaya devam edebiliriz.

22
00:01:28,620 --> 00:01:31,890
Birkaç tane daha göz atabilir ve kendinizinkini kullanmakta özgürsün.

23
00:01:31,980 --> 00:01:35,860
Karar verdiğim kişiye Bora-Bora deniyor burada.

24
00:01:36,210 --> 00:01:42,840
Bu yüzden kopyasını panoya kopyalayıp bu kodu değiştirelim.

25
00:01:42,840 --> 00:01:49,410
Bütün bunlar burada yeni bir gradyan ile yine başkasının iki farklı renk

26
00:01:49,410 --> 00:01:52,870
yüzdesini yazdığı başka bir doğrusal gradyan.

27
00:01:53,150 --> 00:01:54,450
Ve biz de kurtaracağız.

28
00:01:54,780 --> 00:01:56,250
Ve şimdi git kontrol et.

29
00:01:56,520 --> 00:01:57,830
Ve işte gidiyoruz.

30
00:01:57,840 --> 00:01:59,190
Bu yüzden daha da yaklaşıyoruz.

31
00:01:59,430 --> 00:02:02,860
Üzerinde çalışmamız gereken sonraki büyük şey simgelerdir.

32
00:02:03,060 --> 00:02:05,530
Dolayısıyla, bir artı simgesi görüntüleniyor.

33
00:02:05,640 --> 00:02:10,130
Ve bu ne yapar gösterir ve form gizler ve sonra çöp kutusu var.

34
00:02:10,130 --> 00:02:16,100
Bu simgelerin, font adı verilen bir kütüphanenin parçası olduğunu da eklememiz gerektiğini görebiliyorum.

35
00:02:16,110 --> 00:02:16,780
Muhteşem.

36
00:02:17,050 --> 00:02:22,650
Fonta awesome gidin ve sadece Web sitesi için google Fonte awesome.

37
00:02:22,660 --> 00:02:24,030
Ben onu alıyorum.

38
00:02:24,930 --> 00:02:29,660
Ve hepsi bir sürü simge topluluğu.

39
00:02:29,970 --> 00:02:36,780
Bu yüzden, simgelerin altına bakarsak kullanabileceğimiz tüm farklı simgelerden oluşan büyük bir liste var mı diye

40
00:02:38,260 --> 00:02:39,720
gösterebilirim, orada görebilirsiniz.

41
00:02:40,380 --> 00:02:48,030
Dolayısıyla, bu kütüphaneyi uygulamanızın içine dahil etmemiz gerekiyor, böylece oraya indirip indirmeyi

42
00:02:48,030 --> 00:02:52,740
tıkayabilir ya da bir yazı tipi da oluşturabiliriz.

43
00:02:52,740 --> 00:02:57,370
Harika CDN ve sadece bu CDN'den birini de kullan.

44
00:02:57,450 --> 00:02:58,710
İkisi de çalışırdı.

45
00:02:59,100 --> 00:03:06,030
Hâlâ çeşitli uğruna Jay sorgusunu indirdikleri için CD'yi kullanacağım ve burada bu bağlantıyı kopyalayacağım.

46
00:03:07,470 --> 00:03:15,780
Timo'ya gidiyorum ve CSSA dosyası olduğu için bir bağlantı etiketi eklemeliyim, bu yüzden aslında bir javascript dosyası veya

47
00:03:15,780 --> 00:03:23,100
yazı tipi değil ancak bir C Ss dosyası ve kaydedeceğim ve ne yapıyor olacağım aslında bana

48
00:03:23,100 --> 00:03:29,540
önceden hazırlanmış ve daha sonra elemanlara ekleyebileceğim bir takım sınıflar veriyor, böylece birkaç örnek göstereceğim.

49
00:03:29,550 --> 00:03:30,940
Sonra indeks sayfam

50
00:03:31,230 --> 00:03:40,740
Eğer pil boş ya da batarya üçüncüsü söylemek isterseniz, bilmemiz gereken tek şey, sınıfın f bir çizgi

51
00:03:40,740 --> 00:03:47,760
pil çizgisi 3 çizgi atölyesi olarak adlandırılmasıdır. Dolayısıyla, kod ekleyerek kodumuzu bir

52
00:03:49,140 --> 00:03:51,350
yere bizim uygulamanıza kopyalamalısın.

53
00:03:51,510 --> 00:03:53,400
H-1'e koyalım.

54
00:03:53,400 --> 00:03:58,980
Bu simge anlamına gelen bir göz etiketi ve ona bir sınıf veririz ve burada bir şey koymamız gerekmez.

55
00:03:59,070 --> 00:04:02,560
Bunu boş bırakıyoruz ve bu Rifan'ı harika ediyor.

56
00:04:02,700 --> 00:04:10,890
ve yenilemeyi durdurur ve artık ç çeyrek pil simgesi yerine pil simgesine sahibiz.

57
00:04:10,890 --> 00:04:13,500
Ve simgenin adı budur

58
00:04:13,500 --> 00:04:20,700
Artı işareti ve çöp kutusunu istiyoruz, böylece buraya gideceğiz ve H-1 simgesini koruyacak ve f

59
00:04:21,480 --> 00:04:28,070
sınıfını koruyacaktır, ancak F istiyoruz. A. çizgi artı ve kendi simgenizi kullanmaktan çekinmeyin.

60
00:04:28,110 --> 00:04:33,420
Başarılı bulmaya devam ederseniz ve beğendiğiniz başka bir şey bulursanız, çünkü biri de kalem

61
00:04:33,420 --> 00:04:40,050
görünümlü bir simge veya kalem ve kağıt gibi birini kullanabiliriz ve eğer taze kaldıysak ve şu anda

62
00:04:40,800 --> 00:04:48,330
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

63
00:04:48,330 --> 00:04:49,990
ve böylece köpek seçmek.

64
00:04:50,280 --> 00:05:00,000
F artı işareti ve sağdaki gibi süzülecek ve yenilenecek ve şimdi doğru siteden geçecek.

65
00:05:00,960 --> 00:05:06,250
Şimdi çöp kutularıyla uğraşalım ve henüz animasyonla uğraşamayacağız.

66
00:05:06,300 --> 00:05:09,810
Çöp kutusunu bir X yerine göstermeye başlayacağız.

67
00:05:10,260 --> 00:05:17,640
Şimdi geri gidelim ve spandımıza aslında X'lerden kurtulacağız ve span'ın

68
00:05:17,640 --> 00:05:27,030
içinde başka bir e-etiket ekleyeceğiz ve e-TAG FAA sınıfına ve onun adına sahip

69
00:05:27,030 --> 00:05:38,430
olacak. çöp kutusu simgesi FAA Dasch çöp kutusunu diğer yayılma alanlarına kopyalayalım ve bu yalnızca sayfa

70
00:05:38,920 --> 00:05:44,520
yüklendiğinde kullanılacaktır, ancak yenileri için üç çöp tenekesi alıyoruz.

71
00:05:44,730 --> 00:05:46,280
Eski ile hala uğraşıyoruz.

72
00:05:46,530 --> 00:05:50,310
Bu yüzden bizim Javascript'imize gitmek istiyoruz.

73
00:05:50,310 --> 00:05:54,990
Ve yeni bir kalem aldığımızda X ile bir aralık eklemek istemiyoruz.

74
00:05:55,290 --> 00:06:00,930
Bir simge eklemek istiyor ve tekliflerimizin karışmadığından emin olmamız gerekiyor.

75
00:06:00,930 --> 00:06:08,290
Dolayısıyla, tek tırnak işaretleri kullanıp tasarruf edersek, alanın içinde bir çöp kutusu simgesi bulunması gerekir.

76
00:06:08,870 --> 00:06:10,830
Bu yüzden birkaç tane yenisini ekleyelim.

77
00:06:10,830 --> 00:06:11,650
Oraya gidiyoruz.

78
00:06:12,030 --> 00:06:15,320
Hâlâ bir tıkınıklığın içindeler çünkü tıklatabiliyorum.

79
00:06:15,450 --> 00:06:18,680
Yani bir alan yerine bir simge öğesi.

80
00:06:19,530 --> 00:06:22,440
Bu yüzden click olay hala çalışıyor.

81
00:06:22,470 --> 00:06:28,380
Şimdi bu basit animasyon üzerinde çalışalım ve hepsi C ile değerlendirilir burada sayfalar yüklendiğinde aslında

82
00:06:28,380 --> 00:06:30,210
gizli olan açıklıkları değerlendirir.

83
00:06:30,210 --> 00:06:31,630
Onların sıfır zenginliği var.

84
00:06:31,860 --> 00:06:38,760
Ve sonra fareyle üzerine gelince genişliği 40 piksele çıkarıyoruz ve daha sonra geçiş

85
00:06:39,030 --> 00:06:40,950
özelliğini kullanarak animasyon yapıyoruz.

86
00:06:41,430 --> 00:06:44,070
O zaman bunlardan bazılarına geçelim.

87
00:06:44,400 --> 00:06:53,850
CSSA dosyamızı açın ve yapacağımız ilk şey tarzı span span'dir ve bunlara, e

88
00:06:54,510 --> 00:07:06,270
7 4 C 3 C olan ve yenilenecek olan kırmızı renge sahip bir arka plan rengi vereceğiz.

89
00:07:06,460 --> 00:07:10,820
Ve şimdi çevremdeki o kırmızı arka planımız var.

90
00:07:10,830 --> 00:07:19,470
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

91
00:07:19,470 --> 00:07:22,680
daha birkaç özellik eklediğimizde bir fark göreceksiniz.

92
00:07:23,250 --> 00:07:29,140
20 piksel sağa bir kenar boşluğu ekleyelim ve geri dönelim.

93
00:07:29,200 --> 00:07:34,420
Şimdi bize istediğimiz alanı sunuyor.

94
00:07:35,550 --> 00:07:38,760
Sonra onlara, burada uzantılarda çok hafif

95
00:07:41,970 --> 00:07:45,700
bir fark olan metni hizalama merkezi verelim.

96
00:07:45,990 --> 00:07:55,110
Önemli olanın içindeki simgeler, simgeyi beyaza çok beyaz yapacak şekilde yapmaktır.

97
00:07:55,110 --> 00:07:55,970
Tamam.

98
00:07:56,220 --> 00:08:01,730
Bu yüzden sana bunları animasyonsuz ilklere nasıl getireceğini göstereceğim, böylece onlar daima

99
00:08:01,740 --> 00:08:02,640
orada olacaklar.

100
00:08:02,930 --> 00:08:06,830
Ardından, onları havada kalana kadar gizli kalacakları şekilde hareket ettirmelerini sağlarız.

101
00:08:06,870 --> 00:08:12,190
Dolayısıyla yakınlaşıyoruz ancak bunların dikey ve yatay olarak daha fazla yer kaplaması gerekiyor.

102
00:08:12,390 --> 00:08:20,360
Bu yüzden sonunda 40 piksele ekleyeceğim ve sonunda sıfıra set edeceğiz ve display 2 satırını

103
00:08:20,510 --> 00:08:21,990
Blok satırına ayarlayacağız.

104
00:08:22,440 --> 00:08:23,950
Ve şimdi tazeliyorum.

105
00:08:24,870 --> 00:08:26,790
Ve bu doğru görünüyor.

106
00:08:26,790 --> 00:08:29,460
Bir sonraki iş animasyonu yapmaktır.

107
00:08:29,760 --> 00:08:33,630
Ve bunun işleyiş şekli, aslında genişliği sıfıra ayarlayacağız.

108
00:08:33,780 --> 00:08:40,410
Dolayısıyla, bu müttefikler üzerinde gezinene kadar bu açıklıkların tümü sıfır olur ve o zaman, bu

109
00:08:40,410 --> 00:08:42,420
mertebede 40 olacak şekilde artırırız.

110
00:08:42,870 --> 00:08:44,580
Şimdi bunu yapalım.

111
00:08:45,020 --> 00:08:53,370
ve sadece bir aralık değil, bir müttefikin üzerine geldiğimizde, üzerinde gezinip duran bir müttefikin kapsadığı alanı

112
00:08:53,370 --> 00:08:54,810
seçmek istiyoruz.

113
00:08:57,930 --> 00:09:02,480
Sıfırla başlayacağım ve daha sonra bir müttefik üzerinde gezindiğimizde

114
00:09:02,790 --> 00:09:08,020
Sonra 40 piksel gibi olacak şekilde ayarlayacağız.

115
00:09:08,070 --> 00:09:11,310
Ve kendi sürümümüze dönüp yenileyelim.

116
00:09:11,670 --> 00:09:13,920
Kapsamların artık gittiğini görebilirsiniz.

117
00:09:14,310 --> 00:09:19,330
Ve üzerinde gezinip uçtuğumda gösterge görünür ve düğme çalışır.

118
00:09:19,800 --> 00:09:25,470
Bir sonraki özellik, yalnızca anında görünmemesi ve yalnızca geçiş özelliğini kullanacağımızı yapmak

119
00:09:25,800 --> 00:09:27,860
için animasyon yapmaya başlamasının özelliğidir.

120
00:09:28,170 --> 00:09:38,340
doğrusal hale getireceğiz, bu da serbest bırakma işlemine atıfta bulunarak sabit bir hızda ilerleyeceği anlamına geliyor.

121
00:09:38,340 --> 00:09:43,680
Dolayısıyla, geçiş boyunca sıfır noktası iki saniye ekleyeceğiz ve

122
00:09:43,680 --> 00:09:44,520
Ve işte gidiyoruz.

123
00:09:44,520 --> 00:09:46,680
Güzel animasyonumuz var.

124
00:09:47,250 --> 00:09:54,420
Burada beni rahatsız eden küçük bir öğe var, bu da, alan sıfır piksel genişliğinde bile

125
00:09:54,420 --> 00:09:56,110
simgenin hala gösterildiğini gösteriyor.

126
00:09:56,340 --> 00:09:59,970
Dolayısıyla, simgeyi burada görmek çok zor.

127
00:09:59,970 --> 00:10:03,230
Üzerime asılmadığımda bile hâlâ orada.

128
00:10:03,240 --> 00:10:11,040
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.

129
00:10:11,370 --> 00:10:17,580
Yani opaklık sıfır ve daha sonra da opaklık 1. 0 bizde kalýrken.

130
00:10:18,420 --> 00:10:19,840
Ve bu onunla ilgilenecek.

131
00:10:19,860 --> 00:10:22,370
Şimdi simgeleri göremiyoruz.

132
00:10:22,500 --> 00:10:28,680
Orada ve sonra kayboluyor ve de geçiş var, çünkü geçiş özelliği her

133
00:10:28,950 --> 00:10:29,790
şeyi etkiliyor.

134
00:10:30,120 --> 00:10:34,740
O halde 2 yapalım. 2 saniye ve sana göstereceğim.

135
00:10:35,640 --> 00:10:40,810
Nasıl sönüp sonra kaybolduğuna dikkat edin.

136
00:10:40,890 --> 00:10:42,560
Bu çok yavaş bir sürümüdür.

137
00:10:43,200 --> 00:10:46,830
Ve biz sadece 0 yapacağız. 2.

138
00:10:47,070 --> 00:10:53,250
Geride bıraktığınız küçük, rahatsız edici bir şey var; burada gerçekten yakından bakarsanız veya

139
00:10:53,250 --> 00:10:59,530
boyutunu arttırırsanız giriş arasında küçük bir boşluk var ve bu liste UL'yi listeliyor.

140
00:11:00,060 --> 00:11:03,810
Fakat orada durduğumda boşluk ortadan kayboluyor artık.

141
00:11:04,200 --> 00:11:07,220
Sonra odaklanmadığımda geri geliyor.

142
00:11:07,500 --> 00:11:13,450
Bunu düzeltmek için, görünmez olan küçük bir kenarlık ekleyeceğiz, aslında R'nin

143
00:11:13,530 --> 00:11:23,340
sadece küçük bir kenarına sahip olacak. G. be 0 0 0 0 0 0 ki odaklandığımız zaman

144
00:11:23,340 --> 00:11:24,690
sınırlarımızın yaptığı alanı alacağız.

145
00:11:25,080 --> 00:11:34,560
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.

146
00:11:35,150 --> 00:11:38,640
sıfır sıfır sıfır sıfır.

147
00:11:39,210 --> 00:11:41,770
Dolayısıyla bu bize görünmez bir sınır bırakacaktır.

148
00:11:41,880 --> 00:11:47,420
Ancak şu an fark edeceğim, şu küçük farkın ortadan kaybolacağına dikkat et.

149
00:11:47,850 --> 00:11:53,580
Ş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

150
00:11:53,580 --> 00:11:56,000
yardımcı olan bir sınır da var.