Pekâlâ, hoş geldiniz.
Bu videoda şu anda sitemizin şekillendirilmesi üzerinde çalışacağız.
Eninde sonunda olması gerekenin yakınında kesinlikle yoktur.
Yani aslında onları yan yana karşılaştıralım.
İşte bizim burada.
Bu yüzden bazı büyük değişikliklerin köşelerini yuvarlamamız gerekiyor, burada biraz boşluk ekliyoruz.
Düğmelerin stilini değiştirme.
üzerine gelme efekti alıyoruz, düğmelerimiz kesinlikle korkunç ve onlara herhangi bir geçiş etkisi yapmamıza izin veriyoruz.
Dolayısıyla siz bu düğmelerin üzerine gelene kadar bu düğmeler gerçekten düğmeler gibi görünmüyor ve fareyle
Ayrıca bunların konumu biraz yanlış.
Gördüğüm gibi, burada tahmin edip edemeyeceğim bir şey var, ancak eğer taze olsaydım, metnin her
şeye tarafı ittiğini tahmin edersek, teknik alanım karşı karşıya kalırdı.
Ayrıca burada bir animasyon var.
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ı
tıklarsak hemen çıkarılır.
Bu yüzden ona bir geçiş eklemek istiyoruz.
Ayrıca bizim burada biraz çalışma yapmamız gereken H-1 var.
Daha fazla yer kaplaması gerekiyor.
Arka plan rengini değiştirmemiz gerekiyor.
Yazı tipini değiştirmek istiyoruz.
Rengin genişliğinin kendi hattında olacağı şekilde biçimlendirildiğinden ve daha büyük bir yazı tipi olduğundan
emin olmamız gerekiyor.
Ayrıca tüm vücudun yazı tipini değiştirmemiz gerekiyor.
Yani hepsi aynı yazı tipi.
Ve son olarak, şerit ile vücudun sonu arasında biraz boşluğumuz
olduğunu fark edeceksiniz ve çözüm versiyonunda hiç boşluk yok.
TAMAM.
Önce bu H-1 ile uğraşarak başlayalım.
Bu yüzden, alt yazıya gidip H-1'e gidiyoruz ve yapacak ilk iş, çözümde
görebileceğiniz şeyleri ortada hizalamak.
İşler merkeze hizalanır.
Bu yüzden tek yapmamız gereken, metin hizalama merkezi ekleyip kaydedin ve yenilemektir.
Tamam hafif iyileşme.
Sonraki, arka plan rengini değiştirelim; böylece renk hala mavi olacak, ancak şu
anda sayfayı yenilediğimde iyi çalışıyor.
Ama tekrar yenileyip oyunu kazanırsam yoksa yeni renkler üzerine tıklarsam.
Siyaha dönüyor çünkü bizim javascript kodumuzun üzerine yazdığımız için javascript'imizdeki
bu koyu gri siyahımsı renge geri koyuyoruz.
2 3 2 3 2 3 olan bu renge döndürdüğümüz yerleri bulmamız gerekiyor.
İşte başlıyoruz.
Sadece mavi olmak için bunu değiştirmek istiyoruz.
Ve ben yenilediğimde de hala mavi oluyor.
Yeni renkler alıyorum.
Mavi renkte kaldı.
TAMAM.
İşte bu kadar.
Şimdi H-1'in her iki yanındaki tüm kara alanlardan kurtulalım.
Bu yüzden H-1'imizde, üst ve alt sol ve sağdaki tüm marj marjlarından sıfırlanacağız.
Bunu yaptığınızda ne olacağını anlayın.
Siyah alan sol üstte ve sağda bu biraz boşluk haricinde her taraftan uzaklaşıyor.
Ve bu aslında vücuttan gelmeyen H-1'den gelmiyor.
Bunu düzeltmek için vücuda gidebilir ve sıfır marjı verebiliriz.
Ve şimdi yenileyeceğim bu boşluğa dikkat et ve bu gider.
Böylece beyaz şerit tıpkı burada bu versiyonda olduğu gibi tarafa kadar ilerliyor.
TAMAM.
Sonraki, eğlenceye odaklanalım.
Böylece eğlenceli tüm öğelerimiz için aynı olacak.
Düğmeler ve H-1 ve span hepsi aynı yazı tipi biraz farklı yazı tipi ağırlıkları var.
Ve biz sadece Avenir olarak adlandırılan sistem yazıları yerleşik yazı tiplerinden birini kullanacağız.
Bu yazı tipi ailesi Avenir olacak.
Bu, her sistemde çalışmayabilecek bir yazı tipi.
Böylece Mont'den başka bir seçenek ekleyeceğiz. Serat da öyle.
Dolayısıyla, burada açıkçası tam olarak aynı görünmüyor bu eğlencenin sonunda.
Ve bu bizim yazı tipi ağırlığına geliyor.
Dolayısıyla, bir H1 olduğu için bu fontun ağırlığını değiştirmeliyiz.
Varsayılan değer koyu hale getirmek veya 700 veya 800 veya hatta 900 yazı tipi ağırlığına sahip olmaktır.
Yapmak istediğimiz, font ağırlığının normal olması.
Bu yüzden bizim H-1 yazı tipi ağırlığı normal ekleyebilir ve kaydedebilirsiniz.
Yenileyin.
Bu daha yakından bakıyor.
Şimdi değiştirmek istediğimiz başka birkaç şey var.
kendi çizgisinde olduğunu ve biraz farklı şekilde stil ayarladığımızdan emin olmak isteyeceğiz bunu yapmak için.
Bunlardan birincisi, bunun hepsinin büyük olması ve bunu büyük harfli metin dönüşümünü kullanarak RCSS ile yapabilir ve
kaydedebiliriz. Şimdi daha yakından bakmak ve aynı zamanda renklerimizin
Buraya ekibimize gideceğiz ve aslında yaşlıları biraz düzeltmeye
gidiyoruz.
Ve bu işi yapmamızın ilk yolu budur.
Pearcey SS ile bunu yapmanın başka bir yolunu göreceğiz Ama bunu, bunu büyük bir hattımızın
bulunduğu yerde stilize ettikten sonra mola vermek için başlayacağız.
sonları eklemeye başlamak için hızlı ve kolay bir yol ve bu etiketin yaptığı şeyin tamamı ekliyor Bir satır sonu.
Abr etiketi kullanabiliriz ve aslında bu, biraz biraz kaşlarını çattığı stil kadar harika bir fikir
değil ancak bazı döner ve bazı satır
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
istiyoruz ve daha sonra alt kısımda renk oyunu ve şimdi yenilersek, yaklaştığımızı görebilirsiniz.
Şimdi genişliği çok daha büyük hale getirmeye odaklanmamız gerekiyor.
Dolayısıyla bu grubun renkli ekran fikri var.
Böylece R C S S'ye geçeceğiz ve şu şekilde renkli ekran seçeceğiz.
Id renk ekranı ve ardından font boyutunun H-1 yazı tipi boyutunun yüzde 200'ü olduğunu söyleyeceğiz.
Ve yenilersek artık daha büyük font boyutu elde edersiniz.
Ve daha da yaklaşıyoruz.
Burada molalarımız var.
Bununla birlikte, çizgiler arasında burada olduğumuzdan çok daha fazla alana sahip olduğumuzu da fark ediyorsunuz.
Bu konuda çalışmak için yapabileceğimiz birkaç şey var.
Birincisi, satır yüksekliğini değiştirin.
Bu yüzden 1 satır yüksekliği vereceğiz. 1 ve kaydetmek.
Ve tekrar sürümümüze bakıp yenileyelim ve bu biraz gerilediğini görebilirsiniz.
Ama şimdi üst ve alttaki alanı kaybettik.
Orada biraz yer lazım.
O zaman yapacağımız, içeri girip biraz dolgu eklemek.
Dolayısıyla, yalnızca sola ve sağa değil, üste ve alta dolgu ekleyeceğiz ve üst
ve altta 20 piksel istiyorum, bu yüzden bunu sadece 20 piksel ve sıfır dolgu gibi yapabilirsiniz.
Üstteki 20 piksellik dolgu yapabilirdik, ancak alt doldurma yapabilirdik, ancak bu, yenilemenin daha hoş
bir yolu ve hemen şimdi olduğumuzu görebiliyorsunuz.
Yani başlık iyi görünüyor.
Doğru fontu, doğru yazı tipi biçiminde, hepsini büyük harflerle doğru arka plan rengine sahip olduk.
Haydi bakalım doğru kalışlar oynamak gibi görünüyor.
Karşılaşmamız gereken sonraki şey bu gezinme çubuğundaki düğmelerdir.
Bu yüzden, bunları iyileştirmenin uzun bir yolu var.
Yapmak istediğimiz ilk şey sınırlardan kurtulmak ve böylece düğmenin etrafında belirgin bir
sınır bulunmaması.
Ayrıca arka plan renginden kurtulmak istiyoruz.
Dolayısıyla, burada görebileceğiniz kadar arka planın olmamalıdır.
Hayal edene kadar veya birini seçene kadar bekleyin.
Ayrıca yazı tipi ailesinin bu yazı tipi ile aynı olduğundan emin olmak istiyoruz.
Öyleyse başlayalım.
Ve tüm düğmeleri bu düğmeyi seçeceğim ve biz sadece sınır tanımayacağız ve kaydedeceğiz.
Tazelediğimde düğmelere dikkat et.
TAMAM.
Şimdi sınırlarımız yok.
Ancak hala arka plan rengimiz var.
Şimdi aynı arka plan yok ve kaydetmek ve yenilemek ve biz yakınlaşıyoruz.
Şimdi sadece düz metin var.
Ve biz bütün metni büyük harfle burada yapmış gibi yaparak başlayacağız.
Dolayısıyla, tekrar metin dönüştürmeyi kullanıyoruz, sadece bu satırı kopyala yapıştırın üzerine kopyalayıp yenileyelim.
Şimdi düğmelerimizin hepsi büyük.
Yapmak istediğimiz sonraki şey, düğmenin div şerit kapının üstten
altına kadar gittiğinden emin olmaktır.
Şu an sadece alanın bir bölümünü dolduruyor, bu nedenle yüksekliği 100 yüzde olacak şekilde ayarlayabiliyoruz.
Ve bu, içerdiği öğenin yüzde 100'ünü alacağı anlamına geliyor, çünkü bu bizi
daha da yaklaştırıyor.
Şimdi bazı renkleri değiştirip yazı tipi boyutunu yazı tipi ağırlığını değiştirip sonra da henüz
ayarlamadığımız fareyle üzerine gelme efektini değiştirmeliyiz.
Yapacak sonraki şey, yazı tipini biraz daha ağır beklettirmek ve hala mavi olması için
rengi değiştirmektir.
Böylece yazı tipi ağırlığı yedi yüz olacak ve daha sonra renk hala mavi olacak.
Ve bunu yenilemeye bir bakalım.
Bu yüzden biraz daha eskiye çekiyor ve renklerin şu an
tekrar aynı renkteki maviyle değiştirildiğini de görebilirsiniz.
Harf aralığını bir piksel olarak değiştirmek için yapabileceğimiz gerçekten küçük bir değişiklik var.
Ve yenilediğimde dikkat ederseniz, her mektubun arasına biraz uzaktaki
şeyleri görebilirsiniz.
Leslie yazı tipi boyutuna odaklanalım.
Birazcık çok küçük görünüyorlar.
Dolayısıyla sadece yazı tipi boyutunu kullanacağız ve onu devralacak şekilde ayarlayacağız.
Yenilersem, yazı tipi boyutunu almış olduklarını görebilir ve açıkça söylememize gerek yoktur.
Şimdi bir göz atalım.
En büyük farklardan biri, şu anda farklı aralıklarla yerleştirilmiş olması.
Sayfa yüklenir yüklenir gelmez bizim sürümümüzde boşluk var.
Bununla birlikte, bir düğmeyi tıklatana kadar o alana sahip değiliz.
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
alanı ele geçirmek için bazı özellikleri vermek ve tek yapmamız gereken
şey değiştirmek istiyoruz mülkiyet aslında.
Dolayısıyla bu hayranı olan mesajımızı görüntülemeyi seçeceğiz ve ekran
özelliğini doğrultuda olacak şekilde değiştireceğiz.
BLOCK Peki yenilersem ne yapacağız, hemen fark etmeyeceksiniz, ama bunun nedeni, yüzde
20'lik bir oranla vererek ve kaydetmek ve yenilemek olduğunu bildiğiniz bir yere atamanız gerektiğidir.
Şimdi, bu ekranın yüzde 20'sini alan bir şey olmamasına rağmen bu yayına sahibiz.
Böylece bu unsurları tam da istediğimiz tarafa itiyor.
Şimdi bir göz atalım ve onları karşılaştıralım.
Pekâlâ, bu çok yakın gözüküyor.
Şimdi, sıradaki sınıf üzerinde çalışacağız, seçtiğiniz sınıfta doğru renge uyacak ve fareyle üzerine
gelme efekti elde edilecek.
Dolayısıyla düğmemizde bu düşecek ve ilk önce fareyle efekt ekleyeceğiz.
Tek yapmamız gereken Colan Huffer düğmesine eklemek ve
yazı tipi rengini beyaza, arka plan rengini mavi yapmak için değiştirelim.
Bu yüzden temelde renkleri tersyüz ediyoruz ve kaydedeceğiz ve yenileyeceğiz.
Şimdi fareyle sağa sola bastığımda, bu etkiyi görüyorum.
Mükemmel.
Ve seçtiğimiz sınıfımız da aynı görünecek.
Sadece stilleri kopyalayacağız.
Ne zaman seçildiğine karşı bir şey üzerinde gezindiğimizde bir fark yoktur.
Aynı görünmelidirler.
Dolayısıyla, sağa baktığınızı ve fareyle üzerine gelip bastığımda durduğunu görebilirsiniz.
Mavi arka plan ve beyaz metin rengi alıyor mu?
Ve hareket ettiğimde gider.
Hafif bir fark var.
Çözüm düğmelerinin üzerine gelersem, o rengin solgunluğa kavuştuğunu görürsem.
Bu, yalnızca sürümümdeki anında geçiş değil.
Sadece anında geçiş yapar.
Bunu düğme seçicide bir C Ss geçiş özelliği kullanarak düzeltebiliriz.
Geçiş yazıp geçeceğiz.
İki argüman iki değer ve ilki geçiş yapmak istediğimiz şey ve bizim durumumuzda sadece onu
her mülkeye ekleyeceğiz ve bir sonraki argüman ne kadar süreceğini istiyoruz.
Bu yüzden ilk başta iki saniye ile abartacağım.
Bu yüzden tekrar geçiş özelliği, CSX'e renk değişiklikleri veya yazı tipi boyutu değişiklikleri ve özellikleri
arasındaki geçişleri nasıl canlandırabileceğimizi nasıl anlarız.
Yani burada söylediğim şey, herhangi bir zaman özelliğinin, bizim durumumuzda gerçekten sadece renk ve arka plan
olacak herhangi bir düğme üzerinde değiştiği.
Dolayısıyla renk değiştikçe ve arka plan rengi değişirse iki saniye sürer
ve yenilediğimi göreceksiniz.
Ve ben havada kaldım.
Ah hala çalışmıyor.
Ben burada kalıyorum 2. 00 s.
Ve şimdi yenileme ve fareyle üzerine gelersem solmaya iki saniye sürer ve seçili sınıfta eklemek
için tıkladığımda iki saniye sürer ve ayrıldığımda solmaya iki saniye sürer.
Yani iki saniye kesinlikle çok uzun.
Sanırım üç saniyeliğine hedefliyorum.
Bunu test edelim.
Oraya gidiyoruz.
Bana oldukça iyi görünüyor.
Son büyük şey bu karelerdeki yuvarlatılmış köşeleri, bu yuvarlatılmış köşeleri elde etme şeklimize Sınır yarıçapı
adı verilen bir özellik kullanarak elde etmektir.
Bir göz atmak istiyorsanız, medyan dokümanları açtım.
Bu iyi bir okundu.
Ancak size bir yarıçapı tahtayla yapabileceğiniz farklı şeyler hakkında bazı örnekler gösterdiler.
Bu yüzden ona küçük bir sınır yarıçapı vermek ve bu kareler burada yapacağız.
Ve neyi hedeflediğimize göz atalım.
Yani biz almak istediğimiz bunlar.
Bu yüzden hafif hafif bir eğri idi.
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
sana yüzde 50 yaparsak ne olacağını göstereceğim.
Çevreler alırız ve aslında çevreleri kullanmayı tercih edebilirsiniz.
Onları kullanmayı düşünüyordum ama sonuçta bu yuvarlak köşeli kareleri tercih ettim
ve kullandığım sayı yüzde 15'di.
Ve biz sadece iki kez kontrol edip bunları karşılaştıracağız.
Tamam, bu iyi görünüyor.
Yüzde 15, ama eğer istersen sana yüzde 5 gibi bir şey yapsaydık ne olacağını göstereceğim
ve yenileyebilirim.
Biraz köşeler yuvarlatılıyor.
Bu yüzden 15 yenilememe geri döneceğim ve şimdi güzel yuvarlatılmış köşelerim var, ancak animasyon efektini
almak için de çalışmamız gerekiyor çünkü bunlardan birine tıkladığımda.
Renk değiştiğinde sola dönüş efekti solup sönerken olduğu gibi nasıl renksizleştiğine dikkat edin.
Bunu başarmak için geçiş özelliğini de biraz farklı bir şekilde kullanmak zorundayız.
kareye gideceğim ve geçiş yapmak istediğim tek şey arka plan rengi veya sadece arka plan.
Bu yüzden
Ve yine 2 gibi uzun bir zaman yapalım. 0 saniye ve bunun nasıl göründüğüne bak.
Bu yüzden yenileyeyim ve bunlardan birine tıklayacağım.
Solmak için iki saniye sürer görebilirsiniz.
Bu nedenle, uzun süre dayanacak bir şey istemiyoruz.
Muhtemelen altıncı noktaya altı belki gitmek.
Deneyelim şunu.
TAMAM.
Bu mantıklı görünüyor.
Dolayısıyla, arka planın her değiştirildiğini 0'ın aldığını görebilirsiniz. 6 saniye.
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
onlara animasyon vermediği için üç saniye süre alması gerekiyor.
Sadece arka planı ve değişiklikleri hedefliyoruz.
0 alması gerekir. 6 saniye.
Farkında olmak istediğimiz küçük bir şey, geçiş özelliğinin tüm tarayıcılarda, şu an mümkün
olduğu kadar tarayıcı dostu olabilmek için yazdıklarımız gibi çalışmayacağıdır.
Aslında işlevsellikte herhangi bir farkı fark etmeyeceğimiz iki özellik daha eklemeliyiz ancak
sadece tarayıcı desteği var.
İlki Web Kiti Daşç geçişidir ve biz de aynı kesin değeri burada
ekleyeceğiz.
Ve sonra başka birine ihtiyacımız var ki bu da bir çizgi olmalı Moz M. Ozy.
Yani bunlar aslında tarayıcı önekleri.
So Web Kiti, tarayıcıların Safari gibi kullandığı bir motor olan Web Kiti içindir.
Ve sonra Moz ve Mozy, kısacası Firefox'un üzerine kurulu olan Zilah'dır.
Dolayısıyla, yalnızca biraz daha fazla destek eklemek için vardır, çünkü geçiş özelliği henüz her
tarayıcıda yerleşik değildir.
Yeniledik.
Hiçbir şey farklı gözükmemelidir.
Oyunumuz hala aynı şekilde çalışıyor ve yine de aynı animasyonu
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
geçiş 0 olarak değiştirin. MOOC geçişi için 3 saniye.
düzeltebileceğimiz son bir şey, şerit ile şebekemizin başlangıcı arasındaki boşluğun biraz olmasıdır.
Burada
Burada, burada sahip olmadığımız daha fazla boşluğa sahip olduğumuzu görebilirsiniz.
Ve şu anda ızgaramızın etrafında bir element bulunduğunu muayene edersek.
Karelerimiz var ve bir div kimliğine sahip konteyner var ve bu konteyner div her 6 karede dolaşıyor.
Dolayısıyla bunu kullanabilir ve sadece o konteyner boşluğuna biraz boşluk ekleyebiliriz, üst ve alta
bir kenar boşluğu ekleriz.
Dolayısıyla bence biraz daha stile sahibiz.
İşte başlıyoruz.
Bu yüzden marjın sıfır olduğunu söyledik.
Ve otomatik olarak yapacağımız şey, kenar boşluğu üstte ve altta 20 piksel, ortalanmış olan sol
ve sağda otomatik olduğunu söylüyor.
Dolayısıyla bunun sola ve sağa otomatik olmasını, ancak en üstte 20 piksel olmasını istiyoruz.
Boşluklarımız var.
Tamam, şimdilik şıklığımız bitti.