1
00:00:00,390 --> 00:00:01,650
Pekâlâ, hoş geldiniz.

2
00:00:01,660 --> 00:00:05,770
Bu videoda şu anda sitemizin şekillendirilmesi üzerinde çalışacağız.

3
00:00:05,850 --> 00:00:09,530
Eninde sonunda olması gerekenin yakınında kesinlikle yoktur.

4
00:00:09,810 --> 00:00:12,960
Yani aslında onları yan yana karşılaştıralım.

5
00:00:13,530 --> 00:00:14,840
İşte bizim burada.

6
00:00:15,030 --> 00:00:21,280
Bu yüzden bazı büyük değişikliklerin köşelerini yuvarlamamız gerekiyor, burada biraz boşluk ekliyoruz.

7
00:00:21,360 --> 00:00:23,260
Düğmelerin stilini değiştirme.

8
00:00:23,490 --> 00:00:27,750
üzerine gelme efekti alıyoruz, düğmelerimiz kesinlikle korkunç ve onlara herhangi bir geçiş etkisi yapmamıza izin veriyoruz.

9
00:00:28,470 --> 00:00:32,370
Dolayısıyla siz bu düğmelerin üzerine gelene kadar bu düğmeler gerçekten düğmeler gibi görünmüyor ve fareyle

10
00:00:32,370 --> 00:00:35,200
Ayrıca bunların konumu biraz yanlış.

11
00:00:35,550 --> 00:00:43,130
Gördüğüm gibi, burada tahmin edip edemeyeceğim bir şey var, ancak eğer taze olsaydım, metnin her

12
00:00:43,200 --> 00:00:48,310
şeye tarafı ittiğini tahmin edersek, teknik alanım karşı karşıya kalırdı.

13
00:00:48,470 --> 00:00:51,480
Ayrıca burada bir animasyon var.

14
00:00:51,510 --> 00:01:00,360
Bu yüzden tıkladığımızda, yavaşça tıkladığımızda üzerimizde nasıl yavaş yavaş sönüp gittiğini görürsem yanlış olanı

15
00:01:01,170 --> 00:01:02,990
tıklarsak hemen çıkarılır.

16
00:01:03,000 --> 00:01:05,790
Bu yüzden ona bir geçiş eklemek istiyoruz.

17
00:01:05,790 --> 00:01:09,200
Ayrıca bizim burada biraz çalışma yapmamız gereken H-1 var.

18
00:01:09,390 --> 00:01:10,920
Daha fazla yer kaplaması gerekiyor.

19
00:01:11,130 --> 00:01:12,930
Arka plan rengini değiştirmemiz gerekiyor.

20
00:01:12,930 --> 00:01:14,520
Yazı tipini değiştirmek istiyoruz.

21
00:01:14,910 --> 00:01:21,240
Rengin genişliğinin kendi hattında olacağı şekilde biçimlendirildiğinden ve daha büyük bir yazı tipi olduğundan

22
00:01:21,240 --> 00:01:22,610
emin olmamız gerekiyor.

23
00:01:22,710 --> 00:01:25,910
Ayrıca tüm vücudun yazı tipini değiştirmemiz gerekiyor.

24
00:01:25,950 --> 00:01:28,020
Yani hepsi aynı yazı tipi.

25
00:01:28,080 --> 00:01:32,970
Ve son olarak, şerit ile vücudun sonu arasında biraz boşluğumuz

26
00:01:32,970 --> 00:01:37,470
olduğunu fark edeceksiniz ve çözüm versiyonunda hiç boşluk yok.

27
00:01:38,030 --> 00:01:38,490
TAMAM.

28
00:01:38,550 --> 00:01:41,580
Önce bu H-1 ile uğraşarak başlayalım.

29
00:01:41,990 --> 00:01:49,740
Bu yüzden, alt yazıya gidip H-1'e gidiyoruz ve yapacak ilk iş, çözümde

30
00:01:49,740 --> 00:01:52,700
görebileceğiniz şeyleri ortada hizalamak.

31
00:01:52,890 --> 00:01:54,170
İşler merkeze hizalanır.

32
00:01:54,210 --> 00:02:03,070
Bu yüzden tek yapmamız gereken, metin hizalama merkezi ekleyip kaydedin ve yenilemektir.

33
00:02:03,360 --> 00:02:06,520
Tamam hafif iyileşme.

34
00:02:06,540 --> 00:02:14,010
Sonraki, arka plan rengini değiştirelim; böylece renk hala mavi olacak, ancak şu

35
00:02:14,010 --> 00:02:17,280
anda sayfayı yenilediğimde iyi çalışıyor.

36
00:02:17,400 --> 00:02:23,010
Ama tekrar yenileyip oyunu kazanırsam yoksa yeni renkler üzerine tıklarsam.

37
00:02:23,010 --> 00:02:28,230
Siyaha dönüyor çünkü bizim javascript kodumuzun üzerine yazdığımız için javascript'imizdeki

38
00:02:28,230 --> 00:02:31,970
bu koyu gri siyahımsı renge geri koyuyoruz.

39
00:02:32,010 --> 00:02:37,320
2 3 2 3 2 3 olan bu renge döndürdüğümüz yerleri bulmamız gerekiyor.

40
00:02:37,320 --> 00:02:38,040
İşte başlıyoruz.

41
00:02:38,100 --> 00:02:40,820
Sadece mavi olmak için bunu değiştirmek istiyoruz.

42
00:02:41,340 --> 00:02:44,690
Ve ben yenilediğimde de hala mavi oluyor.

43
00:02:44,850 --> 00:02:45,970
Yeni renkler alıyorum.

44
00:02:45,990 --> 00:02:47,870
Mavi renkte kaldı.

45
00:02:48,360 --> 00:02:48,810
TAMAM.

46
00:02:48,870 --> 00:02:49,830
İşte bu kadar.

47
00:02:49,830 --> 00:02:54,430
Şimdi H-1'in her iki yanındaki tüm kara alanlardan kurtulalım.

48
00:02:54,870 --> 00:03:02,230
Bu yüzden H-1'imizde, üst ve alt sol ve sağdaki tüm marj marjlarından sıfırlanacağız.

49
00:03:02,250 --> 00:03:04,820
Bunu yaptığınızda ne olacağını anlayın.

50
00:03:04,820 --> 00:03:10,590
Siyah alan sol üstte ve sağda bu biraz boşluk haricinde her taraftan uzaklaşıyor.

51
00:03:10,830 --> 00:03:14,870
Ve bu aslında vücuttan gelmeyen H-1'den gelmiyor.

52
00:03:14,940 --> 00:03:19,420
Bunu düzeltmek için vücuda gidebilir ve sıfır marjı verebiliriz.

53
00:03:19,680 --> 00:03:24,230
Ve şimdi yenileyeceğim bu boşluğa dikkat et ve bu gider.

54
00:03:24,390 --> 00:03:30,040
Böylece beyaz şerit tıpkı burada bu versiyonda olduğu gibi tarafa kadar ilerliyor.

55
00:03:30,150 --> 00:03:30,970
TAMAM.

56
00:03:31,080 --> 00:03:33,080
Sonraki, eğlenceye odaklanalım.

57
00:03:33,450 --> 00:03:36,180
Böylece eğlenceli tüm öğelerimiz için aynı olacak.

58
00:03:36,180 --> 00:03:41,690
Düğmeler ve H-1 ve span hepsi aynı yazı tipi biraz farklı yazı tipi ağırlıkları var.

59
00:03:41,850 --> 00:03:46,660
Ve biz sadece Avenir olarak adlandırılan sistem yazıları yerleşik yazı tiplerinden birini kullanacağız.

60
00:03:46,920 --> 00:03:52,730
Bu yazı tipi ailesi Avenir olacak.

61
00:03:53,430 --> 00:03:56,440
Bu, her sistemde çalışmayabilecek bir yazı tipi.

62
00:03:56,580 --> 00:04:03,930
Böylece Mont'den başka bir seçenek ekleyeceğiz. Serat da öyle.

63
00:04:04,740 --> 00:04:10,050
Dolayısıyla, burada açıkçası tam olarak aynı görünmüyor bu eğlencenin sonunda.

64
00:04:10,170 --> 00:04:12,460
Ve bu bizim yazı tipi ağırlığına geliyor.

65
00:04:12,540 --> 00:04:16,040
Dolayısıyla, bir H1 olduğu için bu fontun ağırlığını değiştirmeliyiz.

66
00:04:16,050 --> 00:04:21,520
Varsayılan değer koyu hale getirmek veya 700 veya 800 veya hatta 900 yazı tipi ağırlığına sahip olmaktır.

67
00:04:21,600 --> 00:04:24,350
Yapmak istediğimiz, font ağırlığının normal olması.

68
00:04:24,420 --> 00:04:32,230
Bu yüzden bizim H-1 yazı tipi ağırlığı normal ekleyebilir ve kaydedebilirsiniz.

69
00:04:32,400 --> 00:04:33,400
Yenileyin.

70
00:04:33,710 --> 00:04:34,700
Bu daha yakından bakıyor.

71
00:04:34,700 --> 00:04:37,550
Şimdi değiştirmek istediğimiz başka birkaç şey var.

72
00:04:37,590 --> 00:04:44,030
kendi çizgisinde olduğunu ve biraz farklı şekilde stil ayarladığımızdan emin olmak isteyeceğiz bunu yapmak için.

73
00:04:45,330 --> 00:04:52,580
Bunlardan birincisi, bunun hepsinin büyük olması ve bunu büyük harfli metin dönüşümünü kullanarak RCSS ile yapabilir ve

74
00:04:52,700 --> 00:04:56,510
kaydedebiliriz. Şimdi daha yakından bakmak ve aynı zamanda renklerimizin

75
00:04:56,570 --> 00:05:00,950
Buraya ekibimize gideceğiz ve aslında yaşlıları biraz düzeltmeye

76
00:05:00,950 --> 00:05:01,340
gidiyoruz.

77
00:05:01,700 --> 00:05:04,120
Ve bu işi yapmamızın ilk yolu budur.

78
00:05:04,160 --> 00:05:09,350
Pearcey SS ile bunu yapmanın başka bir yolunu göreceğiz Ama bunu, bunu büyük bir hattımızın

79
00:05:09,350 --> 00:05:12,590
bulunduğu yerde stilize ettikten sonra mola vermek için başlayacağız.

80
00:05:12,590 --> 00:05:19,070
sonları eklemeye başlamak için hızlı ve kolay bir yol ve bu etiketin yaptığı şeyin tamamı ekliyor Bir satır sonu.

81
00:05:19,070 --> 00:05:24,080
Abr etiketi kullanabiliriz ve aslında bu, biraz biraz kaşlarını çattığı stil kadar harika bir fikir

82
00:05:24,080 --> 00:05:26,440
değil ancak bazı döner ve bazı satır

83
00:05:26,620 --> 00:05:33,200
Bu yüzden Büyük'den sonra bir mola vermek istiyoruz ve sonra yayılma alanımızı istiyoruz ve sonra başka bir mola vermek

84
00:05:33,200 --> 00:05:37,970
istiyoruz ve daha sonra alt kısımda renk oyunu ve şimdi yenilersek, yaklaştığımızı görebilirsiniz.

85
00:05:38,060 --> 00:05:41,280
Şimdi genişliği çok daha büyük hale getirmeye odaklanmamız gerekiyor.

86
00:05:41,660 --> 00:05:44,160
Dolayısıyla bu grubun renkli ekran fikri var.

87
00:05:44,300 --> 00:05:49,730
Böylece R C S S'ye geçeceğiz ve şu şekilde renkli ekran seçeceğiz.

88
00:05:49,900 --> 00:05:58,200
Id renk ekranı ve ardından font boyutunun H-1 yazı tipi boyutunun yüzde 200'ü olduğunu söyleyeceğiz.

89
00:05:58,550 --> 00:06:01,860
Ve yenilersek artık daha büyük font boyutu elde edersiniz.

90
00:06:02,210 --> 00:06:03,630
Ve daha da yaklaşıyoruz.

91
00:06:03,680 --> 00:06:05,210
Burada molalarımız var.

92
00:06:05,330 --> 00:06:10,040
Bununla birlikte, çizgiler arasında burada olduğumuzdan çok daha fazla alana sahip olduğumuzu da fark ediyorsunuz.

93
00:06:10,280 --> 00:06:12,970
Bu konuda çalışmak için yapabileceğimiz birkaç şey var.

94
00:06:12,980 --> 00:06:15,780
Birincisi, satır yüksekliğini değiştirin.

95
00:06:16,280 --> 00:06:21,580
Bu yüzden 1 satır yüksekliği vereceğiz. 1 ve kaydetmek.

96
00:06:22,190 --> 00:06:27,040
Ve tekrar sürümümüze bakıp yenileyelim ve bu biraz gerilediğini görebilirsiniz.

97
00:06:27,290 --> 00:06:30,440
Ama şimdi üst ve alttaki alanı kaybettik.

98
00:06:30,440 --> 00:06:32,190
Orada biraz yer lazım.

99
00:06:32,210 --> 00:06:35,050
O zaman yapacağımız, içeri girip biraz dolgu eklemek.

100
00:06:35,450 --> 00:06:40,610
Dolayısıyla, yalnızca sola ve sağa değil, üste ve alta dolgu ekleyeceğiz ve üst

101
00:06:40,610 --> 00:06:47,050
ve altta 20 piksel istiyorum, bu yüzden bunu sadece 20 piksel ve sıfır dolgu gibi yapabilirsiniz.

102
00:06:47,300 --> 00:06:54,980
Üstteki 20 piksellik dolgu yapabilirdik, ancak alt doldurma yapabilirdik, ancak bu, yenilemenin daha hoş

103
00:06:54,980 --> 00:06:58,590
bir yolu ve hemen şimdi olduğumuzu görebiliyorsunuz.

104
00:06:58,880 --> 00:07:00,670
Yani başlık iyi görünüyor.

105
00:07:00,880 --> 00:07:05,830
Doğru fontu, doğru yazı tipi biçiminde, hepsini büyük harflerle doğru arka plan rengine sahip olduk.

106
00:07:05,870 --> 00:07:11,240
Haydi bakalım doğru kalışlar oynamak gibi görünüyor.

107
00:07:11,300 --> 00:07:14,800
Karşılaşmamız gereken sonraki şey bu gezinme çubuğundaki düğmelerdir.

108
00:07:15,130 --> 00:07:18,080
Bu yüzden, bunları iyileştirmenin uzun bir yolu var.

109
00:07:18,080 --> 00:07:23,000
Yapmak istediğimiz ilk şey sınırlardan kurtulmak ve böylece düğmenin etrafında belirgin bir

110
00:07:23,000 --> 00:07:23,840
sınır bulunmaması.

111
00:07:23,870 --> 00:07:27,230
Ayrıca arka plan renginden kurtulmak istiyoruz.

112
00:07:27,320 --> 00:07:29,290
Dolayısıyla, burada görebileceğiniz kadar arka planın olmamalıdır.

113
00:07:29,330 --> 00:07:33,210
Hayal edene kadar veya birini seçene kadar bekleyin.

114
00:07:33,250 --> 00:07:37,790
Ayrıca yazı tipi ailesinin bu yazı tipi ile aynı olduğundan emin olmak istiyoruz.

115
00:07:37,790 --> 00:07:39,230
Öyleyse başlayalım.

116
00:07:39,230 --> 00:07:48,620
Ve tüm düğmeleri bu düğmeyi seçeceğim ve biz sadece sınır tanımayacağız ve kaydedeceğiz.

117
00:07:48,800 --> 00:07:50,850
Tazelediğimde düğmelere dikkat et.

118
00:07:51,170 --> 00:07:51,790
TAMAM.

119
00:07:51,980 --> 00:07:53,520
Şimdi sınırlarımız yok.

120
00:07:53,720 --> 00:07:55,600
Ancak hala arka plan rengimiz var.

121
00:07:55,850 --> 00:08:02,760
Şimdi aynı arka plan yok ve kaydetmek ve yenilemek ve biz yakınlaşıyoruz.

122
00:08:02,950 --> 00:08:04,800
Şimdi sadece düz metin var.

123
00:08:05,120 --> 00:08:09,520
Ve biz bütün metni büyük harfle burada yapmış gibi yaparak başlayacağız.

124
00:08:09,740 --> 00:08:16,330
Dolayısıyla, tekrar metin dönüştürmeyi kullanıyoruz, sadece bu satırı kopyala yapıştırın üzerine kopyalayıp yenileyelim.

125
00:08:16,400 --> 00:08:18,840
Şimdi düğmelerimizin hepsi büyük.

126
00:08:18,920 --> 00:08:23,240
Yapmak istediğimiz sonraki şey, düğmenin div şerit kapının üstten

127
00:08:23,260 --> 00:08:25,370
altına kadar gittiğinden emin olmaktır.

128
00:08:25,400 --> 00:08:31,580
Şu an sadece alanın bir bölümünü dolduruyor, bu nedenle yüksekliği 100 yüzde olacak şekilde ayarlayabiliyoruz.

129
00:08:31,750 --> 00:08:37,490
Ve bu, içerdiği öğenin yüzde 100'ünü alacağı anlamına geliyor, çünkü bu bizi

130
00:08:37,490 --> 00:08:38,900
daha da yaklaştırıyor.

131
00:08:38,930 --> 00:08:44,870
Şimdi bazı renkleri değiştirip yazı tipi boyutunu yazı tipi ağırlığını değiştirip sonra da henüz

132
00:08:44,870 --> 00:08:47,540
ayarlamadığımız fareyle üzerine gelme efektini değiştirmeliyiz.

133
00:08:48,010 --> 00:08:54,050
Yapacak sonraki şey, yazı tipini biraz daha ağır beklettirmek ve hala mavi olması için

134
00:08:54,050 --> 00:08:54,980
rengi değiştirmektir.

135
00:08:55,040 --> 00:09:02,350
Böylece yazı tipi ağırlığı yedi yüz olacak ve daha sonra renk hala mavi olacak.

136
00:09:02,650 --> 00:09:05,370
Ve bunu yenilemeye bir bakalım.

137
00:09:06,020 --> 00:09:11,180
Bu yüzden biraz daha eskiye çekiyor ve renklerin şu an

138
00:09:11,240 --> 00:09:14,750
tekrar aynı renkteki maviyle değiştirildiğini de görebilirsiniz.

139
00:09:14,760 --> 00:09:21,740
Harf aralığını bir piksel olarak değiştirmek için yapabileceğimiz gerçekten küçük bir değişiklik var.

140
00:09:21,830 --> 00:09:27,260
Ve yenilediğimde dikkat ederseniz, her mektubun arasına biraz uzaktaki

141
00:09:27,260 --> 00:09:28,390
şeyleri görebilirsiniz.

142
00:09:29,090 --> 00:09:31,690
Leslie yazı tipi boyutuna odaklanalım.

143
00:09:31,700 --> 00:09:33,690
Birazcık çok küçük görünüyorlar.

144
00:09:33,980 --> 00:09:39,340
Dolayısıyla sadece yazı tipi boyutunu kullanacağız ve onu devralacak şekilde ayarlayacağız.

145
00:09:39,500 --> 00:09:44,750
Yenilersem, yazı tipi boyutunu almış olduklarını görebilir ve açıkça söylememize gerek yoktur.

146
00:09:45,620 --> 00:09:47,120
Şimdi bir göz atalım.

147
00:09:47,620 --> 00:09:51,380
En büyük farklardan biri, şu anda farklı aralıklarla yerleştirilmiş olması.

148
00:09:51,670 --> 00:09:55,490
Sayfa yüklenir yüklenir gelmez bizim sürümümüzde boşluk var.

149
00:09:55,490 --> 00:09:59,460
Bununla birlikte, bir düğmeyi tıklatana kadar o alana sahip değiliz.

150
00:09:59,480 --> 00:10:08,860
Dolayısıyla yapmamız gereken şey, aslında burada bulunan ve bu alana mesaj olarak adlandırılan stile stil oluşturmaktır ve gidip o

151
00:10:08,870 --> 00:10:14,480
alanı ele geçirmek için bazı özellikleri vermek ve tek yapmamız gereken

152
00:10:14,480 --> 00:10:17,220
şey değiştirmek istiyoruz mülkiyet aslında.

153
00:10:17,360 --> 00:10:24,980
Dolayısıyla bu hayranı olan mesajımızı görüntülemeyi seçeceğiz ve ekran

154
00:10:24,980 --> 00:10:28,830
özelliğini doğrultuda olacak şekilde değiştireceğiz.

155
00:10:28,830 --> 00:10:34,880
BLOCK Peki yenilersem ne yapacağız, hemen fark etmeyeceksiniz, ama bunun nedeni, yüzde

156
00:10:34,880 --> 00:10:41,790
20'lik bir oranla vererek ve kaydetmek ve yenilemek olduğunu bildiğiniz bir yere atamanız gerektiğidir.

157
00:10:42,230 --> 00:10:48,530
Şimdi, bu ekranın yüzde 20'sini alan bir şey olmamasına rağmen bu yayına sahibiz.

158
00:10:49,000 --> 00:10:52,920
Böylece bu unsurları tam da istediğimiz tarafa itiyor.

159
00:10:53,500 --> 00:10:55,690
Şimdi bir göz atalım ve onları karşılaştıralım.

160
00:10:55,700 --> 00:10:56,960
Pekâlâ, bu çok yakın gözüküyor.

161
00:10:56,960 --> 00:11:03,340
Şimdi, sıradaki sınıf üzerinde çalışacağız, seçtiğiniz sınıfta doğru renge uyacak ve fareyle üzerine

162
00:11:03,350 --> 00:11:05,450
gelme efekti elde edilecek.

163
00:11:05,450 --> 00:11:10,460
Dolayısıyla düğmemizde bu düşecek ve ilk önce fareyle efekt ekleyeceğiz.

164
00:11:10,460 --> 00:11:15,970
Tek yapmamız gereken Colan Huffer düğmesine eklemek ve

165
00:11:18,920 --> 00:11:27,140
yazı tipi rengini beyaza, arka plan rengini mavi yapmak için değiştirelim.

166
00:11:27,130 --> 00:11:31,370
Bu yüzden temelde renkleri tersyüz ediyoruz ve kaydedeceğiz ve yenileyeceğiz.

167
00:11:31,630 --> 00:11:34,090
Şimdi fareyle sağa sola bastığımda, bu etkiyi görüyorum.

168
00:11:34,670 --> 00:11:35,550
Mükemmel.

169
00:11:35,600 --> 00:11:39,920
Ve seçtiğimiz sınıfımız da aynı görünecek.

170
00:11:39,950 --> 00:11:42,360
Sadece stilleri kopyalayacağız.

171
00:11:42,530 --> 00:11:45,980
Ne zaman seçildiğine karşı bir şey üzerinde gezindiğimizde bir fark yoktur.

172
00:11:45,980 --> 00:11:47,260
Aynı görünmelidirler.

173
00:11:47,420 --> 00:11:52,790
Dolayısıyla, sağa baktığınızı ve fareyle üzerine gelip bastığımda durduğunu görebilirsiniz.

174
00:11:52,850 --> 00:11:55,270
Mavi arka plan ve beyaz metin rengi alıyor mu?

175
00:11:55,340 --> 00:11:57,410
Ve hareket ettiğimde gider.

176
00:11:57,680 --> 00:11:59,010
Hafif bir fark var.

177
00:11:59,300 --> 00:12:04,470
Çözüm düğmelerinin üzerine gelersem, o rengin solgunluğa kavuştuğunu görürsem.

178
00:12:04,550 --> 00:12:08,390
Bu, yalnızca sürümümdeki anında geçiş değil.

179
00:12:08,650 --> 00:12:10,550
Sadece anında geçiş yapar.

180
00:12:10,820 --> 00:12:16,440
Bunu düğme seçicide bir C Ss geçiş özelliği kullanarak düzeltebiliriz.

181
00:12:16,670 --> 00:12:19,720
Geçiş yazıp geçeceğiz.

182
00:12:19,720 --> 00:12:26,150
İki argüman iki değer ve ilki geçiş yapmak istediğimiz şey ve bizim durumumuzda sadece onu

183
00:12:26,140 --> 00:12:30,610
her mülkeye ekleyeceğiz ve bir sonraki argüman ne kadar süreceğini istiyoruz.

184
00:12:30,710 --> 00:12:34,390
Bu yüzden ilk başta iki saniye ile abartacağım.

185
00:12:34,390 --> 00:12:41,210
Bu yüzden tekrar geçiş özelliği, CSX'e renk değişiklikleri veya yazı tipi boyutu değişiklikleri ve özellikleri

186
00:12:41,210 --> 00:12:43,790
arasındaki geçişleri nasıl canlandırabileceğimizi nasıl anlarız.

187
00:12:43,790 --> 00:12:49,730
Yani burada söylediğim şey, herhangi bir zaman özelliğinin, bizim durumumuzda gerçekten sadece renk ve arka plan

188
00:12:49,730 --> 00:12:51,900
olacak herhangi bir düğme üzerinde değiştiği.

189
00:12:52,070 --> 00:12:57,680
Dolayısıyla renk değiştikçe ve arka plan rengi değişirse iki saniye sürer

190
00:12:57,680 --> 00:12:59,190
ve yenilediğimi göreceksiniz.

191
00:12:59,420 --> 00:13:00,410
Ve ben havada kaldım.

192
00:13:00,560 --> 00:13:01,880
Ah hala çalışmıyor.

193
00:13:01,900 --> 00:13:04,750
Ben burada kalıyorum 2. 00 s.

194
00:13:04,850 --> 00:13:12,140
Ve şimdi yenileme ve fareyle üzerine gelersem solmaya iki saniye sürer ve seçili sınıfta eklemek

195
00:13:12,130 --> 00:13:17,520
için tıkladığımda iki saniye sürer ve ayrıldığımda solmaya iki saniye sürer.

196
00:13:17,750 --> 00:13:20,140
Yani iki saniye kesinlikle çok uzun.

197
00:13:20,560 --> 00:13:23,580
Sanırım üç saniyeliğine hedefliyorum.

198
00:13:23,750 --> 00:13:25,950
Bunu test edelim.

199
00:13:25,970 --> 00:13:26,630
Oraya gidiyoruz.

200
00:13:26,650 --> 00:13:28,990
Bana oldukça iyi görünüyor.

201
00:13:29,060 --> 00:13:35,570
Son büyük şey bu karelerdeki yuvarlatılmış köşeleri, bu yuvarlatılmış köşeleri elde etme şeklimize Sınır yarıçapı

202
00:13:35,570 --> 00:13:38,550
adı verilen bir özellik kullanarak elde etmektir.

203
00:13:38,690 --> 00:13:41,990
Bir göz atmak istiyorsanız, medyan dokümanları açtım.

204
00:13:42,130 --> 00:13:42,970
Bu iyi bir okundu.

205
00:13:43,100 --> 00:13:46,760
Ancak size bir yarıçapı tahtayla yapabileceğiniz farklı şeyler hakkında bazı örnekler gösterdiler.

206
00:13:46,900 --> 00:13:52,000
Bu yüzden ona küçük bir sınır yarıçapı vermek ve bu kareler burada yapacağız.

207
00:13:52,150 --> 00:13:54,340
Ve neyi hedeflediğimize göz atalım.

208
00:13:54,350 --> 00:13:56,140
Yani biz almak istediğimiz bunlar.

209
00:13:56,180 --> 00:13:58,810
Bu yüzden hafif hafif bir eğri idi.

210
00:13:59,500 --> 00:14:06,740
Kare sınıfımıza gidelim ve bir sınır yarıçapı atalım ve başlamak için gerçekten abartılı bir şeyler yapalım

211
00:14:06,740 --> 00:14:10,130
sana yüzde 50 yaparsak ne olacağını göstereceğim.

212
00:14:10,490 --> 00:14:13,850
Çevreler alırız ve aslında çevreleri kullanmayı tercih edebilirsiniz.

213
00:14:13,850 --> 00:14:20,230
Onları kullanmayı düşünüyordum ama sonuçta bu yuvarlak köşeli kareleri tercih ettim

214
00:14:20,240 --> 00:14:22,780
ve kullandığım sayı yüzde 15'di.

215
00:14:23,510 --> 00:14:25,590
Ve biz sadece iki kez kontrol edip bunları karşılaştıracağız.

216
00:14:25,850 --> 00:14:27,060
Tamam, bu iyi görünüyor.

217
00:14:27,080 --> 00:14:32,900
Yüzde 15, ama eğer istersen sana yüzde 5 gibi bir şey yapsaydık ne olacağını göstereceğim

218
00:14:32,890 --> 00:14:33,770
ve yenileyebilirim.

219
00:14:34,010 --> 00:14:36,160
Biraz köşeler yuvarlatılıyor.

220
00:14:36,290 --> 00:14:43,430
Bu yüzden 15 yenilememe geri döneceğim ve şimdi güzel yuvarlatılmış köşelerim var, ancak animasyon efektini

221
00:14:43,420 --> 00:14:47,810
almak için de çalışmamız gerekiyor çünkü bunlardan birine tıkladığımda.

222
00:14:47,810 --> 00:14:54,740
Renk değiştiğinde sola dönüş efekti solup sönerken olduğu gibi nasıl renksizleştiğine dikkat edin.

223
00:14:54,740 --> 00:14:59,920
Bunu başarmak için geçiş özelliğini de biraz farklı bir şekilde kullanmak zorundayız.

224
00:14:59,990 --> 00:15:06,170
kareye gideceğim ve geçiş yapmak istediğim tek şey arka plan rengi veya sadece arka plan.

225
00:15:06,160 --> 00:15:07,170
Bu yüzden

226
00:15:07,220 --> 00:15:12,470
Ve yine 2 gibi uzun bir zaman yapalım. 0 saniye ve bunun nasıl göründüğüne bak.

227
00:15:12,500 --> 00:15:16,160
Bu yüzden yenileyeyim ve bunlardan birine tıklayacağım.

228
00:15:16,250 --> 00:15:19,710
Solmak için iki saniye sürer görebilirsiniz.

229
00:15:19,940 --> 00:15:21,940
Bu nedenle, uzun süre dayanacak bir şey istemiyoruz.

230
00:15:22,120 --> 00:15:26,290
Muhtemelen altıncı noktaya altı belki gitmek.

231
00:15:26,750 --> 00:15:27,970
Deneyelim şunu.

232
00:15:28,420 --> 00:15:28,850
TAMAM.

233
00:15:28,850 --> 00:15:31,610
Bu mantıklı görünüyor.

234
00:15:32,500 --> 00:15:36,680
Dolayısıyla, arka planın her değiştirildiğini 0'ın aldığını görebilirsiniz. 6 saniye.

235
00:15:36,670 --> 00:15:42,460
Ne var ki, diğer mülkler değiştiğinde herhangi bir mülk değiştiğinde söylediğimiz düğmeler gibi

236
00:15:42,560 --> 00:15:46,710
onlara animasyon vermediği için üç saniye süre alması gerekiyor.

237
00:15:46,900 --> 00:15:49,790
Sadece arka planı ve değişiklikleri hedefliyoruz.

238
00:15:49,810 --> 00:15:52,450
0 alması gerekir. 6 saniye.

239
00:15:52,490 --> 00:15:58,010
Farkında olmak istediğimiz küçük bir şey, geçiş özelliğinin tüm tarayıcılarda, şu an mümkün

240
00:15:58,040 --> 00:16:02,140
olduğu kadar tarayıcı dostu olabilmek için yazdıklarımız gibi çalışmayacağıdır.

241
00:16:02,140 --> 00:16:07,770
Aslında işlevsellikte herhangi bir farkı fark etmeyeceğimiz iki özellik daha eklemeliyiz ancak

242
00:16:08,600 --> 00:16:10,650
sadece tarayıcı desteği var.

243
00:16:10,660 --> 00:16:19,460
İlki Web Kiti Daşç geçişidir ve biz de aynı kesin değeri burada

244
00:16:19,460 --> 00:16:20,250
ekleyeceğiz.

245
00:16:20,360 --> 00:16:26,550
Ve sonra başka birine ihtiyacımız var ki bu da bir çizgi olmalı Moz M. Ozy.

246
00:16:26,600 --> 00:16:30,070
Yani bunlar aslında tarayıcı önekleri.

247
00:16:30,230 --> 00:16:36,020
So Web Kiti, tarayıcıların Safari gibi kullandığı bir motor olan Web Kiti içindir.

248
00:16:36,200 --> 00:16:41,700
Ve sonra Moz ve Mozy, kısacası Firefox'un üzerine kurulu olan Zilah'dır.

249
00:16:42,050 --> 00:16:47,300
Dolayısıyla, yalnızca biraz daha fazla destek eklemek için vardır, çünkü geçiş özelliği henüz her

250
00:16:47,300 --> 00:16:48,650
tarayıcıda yerleşik değildir.

251
00:16:48,640 --> 00:16:49,790
Yeniledik.

252
00:16:50,060 --> 00:16:51,850
Hiçbir şey farklı gözükmemelidir.

253
00:16:51,860 --> 00:16:56,660
Oyunumuz hala aynı şekilde çalışıyor ve yine de aynı animasyonu

254
00:16:56,870 --> 00:17:05,210
alıyoruz ve geçiş yaptıktan sonra aynı şeyi burada yapmalıyız, sadece bunları çoğaltın ve bunu geçiş dönemi ve

255
00:17:05,200 --> 00:17:08,660
geçiş 0 olarak değiştirin. MOOC geçişi için 3 saniye.

256
00:17:08,650 --> 00:17:15,040
düzeltebileceğimiz son bir şey, şerit ile şebekemizin başlangıcı arasındaki boşluğun biraz olmasıdır.

257
00:17:15,050 --> 00:17:15,630
Burada

258
00:17:15,800 --> 00:17:18,950
Burada, burada sahip olmadığımız daha fazla boşluğa sahip olduğumuzu görebilirsiniz.

259
00:17:19,150 --> 00:17:25,740
Ve şu anda ızgaramızın etrafında bir element bulunduğunu muayene edersek.

260
00:17:26,140 --> 00:17:34,210
Karelerimiz var ve bir div kimliğine sahip konteyner var ve bu konteyner div her 6 karede dolaşıyor.

261
00:17:34,390 --> 00:17:40,400
Dolayısıyla bunu kullanabilir ve sadece o konteyner boşluğuna biraz boşluk ekleyebiliriz, üst ve alta

262
00:17:40,390 --> 00:17:41,950
bir kenar boşluğu ekleriz.

263
00:17:42,110 --> 00:17:44,540
Dolayısıyla bence biraz daha stile sahibiz.

264
00:17:44,540 --> 00:17:45,550
İşte başlıyoruz.

265
00:17:45,590 --> 00:17:47,510
Bu yüzden marjın sıfır olduğunu söyledik.

266
00:17:47,650 --> 00:17:54,770
Ve otomatik olarak yapacağımız şey, kenar boşluğu üstte ve altta 20 piksel, ortalanmış olan sol

267
00:17:54,770 --> 00:17:57,020
ve sağda otomatik olduğunu söylüyor.

268
00:17:57,050 --> 00:18:01,820
Dolayısıyla bunun sola ve sağa otomatik olmasını, ancak en üstte 20 piksel olmasını istiyoruz.

269
00:18:02,330 --> 00:18:03,590
Boşluklarımız var.

270
00:18:04,120 --> 00:18:05,940
Tamam, şimdilik şıklığımız bitti.