Html5, css3 ve önyüklemede vurgulu efektli yatay çubuk

Neye ihtiyacımız var?

Yerel bir sunucu (Xampp kullandığımı size daha önce söylemiştim)
·
A kod düzenleyici (yüce metin 3 kullanın)

Aşama 1

Yerel sunucumun dizinine gidip bu projeyi saklamak için yeni bir klasör oluşturarak başlayacağım, içine "menu_hover" diyeceğim ve css dosyalarını içerecek bir tane daha ekleyeceğim.

BÜYÜT

BÜYÜT

Adım 2

Şimdi kod editörümüzde yeni bir html5 yapısı ekleyerek başlayacağız, buna kendi CDN adreslerinden bootstrap'e karşılık gelen stil sayfalarını sunucumuzda yer kaplamaması için ekleyeceğim, ayrıca "style" adında bir stil sayfası ekleyeceğim. Daha önce oluşturduğumuz "css" klasörümüzde saklanacak olan .css" …
Daha sonra bu dosyayı 1. adımda oluşturduğumuz "menu_hover" klasörüne "menu.html" olarak kaydedeceğiz.

BÜYÜT

Aşama 3

Şimdi "menu.html" dosyamıza bir etiket ekleyeceğiz ve style.css dosyasında özelliklerini ayarlayarak ekranda nasıl görüneceğini belirleyeceğiz…

BÜYÜT

BÜYÜT

Css'de göreceğiniz gibi bir "background-color: green" ekledim bu sadece başlığın boyutunu ve ekrandaki konumunu görmek için rehberlik amaçlıdır, boyutlar, yazı tipi ve diğerleri ile oynayabilirsiniz. tercihler … evet şu anda tarayıcımızda görüyoruz böyle bir şeye sahip olurduk …

BÜYÜT

4. Adım

Menümün 4 linkten oluşmasını istiyorum, bunu başarmak için ekleyeceğim etiketin içine 4Bunları tanımlamak için "box_menu" sınıfı ile her birine "bir"den "dört"e artan bir kimlik ekleyeceğim.

BÜYÜT

Adım 5

style.css dosyamıza "box_menu" sınıfının ve "bir, iki, üç ve dört" katmanların özelliklerini ekleyeceğiz.

6. Adım

Göreceli bir konum kurarak "box_menu" sınıfının davranışını tanımlamaya başlayacağız, bu durumda 4 bağlantımız olacağını ve bunları içeren katmanın, yani ekranın %80'ini kapladığını unutmayın, bu nedenle box_menu sınıfı içindeki kullanılabilir alanın %100'ünü işgal eden 4 öğeye ihtiyacımız var, bunun için %100'ü alacağız ve yerleştirmek istediğimiz bağlantı veya öğe sayısına böleceğiz, bu durumda 4 tane olduğu gibi 100/4 = 25 olur, çünkü "box_menu" sınıfımızın genişliği %25 olmalıdır. Ayrıca %100 durmasını ve elemanların yan yana görünmesi için sola kaymasını söyleyeceğiz.

BÜYÜT

7. Adım

Daha sonra öğelerin her birini göstereceğimiz arka plan rengini tanımlayacağız, 4. adımda artık css'imize birden dörde kadar id ekleyeceğiz, bu katmanların her birinin nasıl görüneceğini tanımlayacağız. bunun için şunları yapacağız…

BÜYÜT

Bu bize aşağıdaki sonucu verecektir:

BÜYÜT

Gördüğünüz gibi, her bir öğenin boşluklarını ve arka plan rengini zaten sınırlandırdık, renk kodlarını zevkinize göre kullanabilirsiniz, bu durumda belirli bir temaya sahip bir web sitesi değil, bir test olarak bunları kullandım. bir gösteri…

8. Adım

Peki 4. adımda bıraktığımız gibi "menu.html" belgesine geri dönelim, şimdi menümüzün sahip olacağı simgeleri ve metinleri eklemeye devam edeceğiz.Bunun için resim kullanmayacağız ama gidiyoruz. kendimize önyükleme konusunda biraz yardımcı olmak için ve “Font Awesome” paketindeki simgeleri kullanacağız, bunun için tarayıcıya gidiyoruz ve web'e erişiyoruz https: // fortawesome… .o / Font-Awesome / “Başlayın” a tıklayın ” menüsüne gidin ve “EN KOLAY: MaxCDN tarafından BootstrapCDN bölümü”ne gidin.

BÜYÜT

CDN bağlantısını Font Awesome stil sayfasına kopyalayacağım ve "menu.html" belgemin başlığına yapıştıracağım.

BÜYÜT

Bununla artık tasarımımızda Font Awesome simgelerini kullanabiliriz, ancak şimdi hangi simgeleri yerleştireceğimizi seçmemiz gerekiyor, bunun için web sitelerine dönüyor ve "Simgeler" menüsünü buluyoruz.

BÜYÜT

İlgimizi çeken simge için kapsamlı listeyi araştırıyoruz ve üzerine tıklıyoruz.

BÜYÜT

Tıkladığımızda, bu simgeyi tasarımımıza eklemek için kodu görebileceğimiz başka bir pencereye götürecektir.

BÜYÜT

Basitçe kopyalıyoruz ve "menu.html"mize gidip onu yapıştırıyoruz.aşağıdaki gibi …

BÜYÜT

BÜYÜT

Altına ortalanmış bir isim de ekleyeceğiz…

BÜYÜT

Tarayıcımızda nasıl göründüğüne bir bakalım…

BÜYÜT

Zaten bir simge ve ortalanmış bir metin eklediğimizi görüyoruz, bu yüzden kalan 3 öğe için bu adımı tekrarlıyoruz.

BÜYÜT

9. Adım

Simgeler oldukça küçük, boyutlarını 3 kat artıracağım, bunun için bir "fa-3x" sınıfı ekleyeceğim.

BÜYÜT

BÜYÜT

Adım 10

Şimdi, efekti tamamlamak için css dosyasını biraz değiştireceğim, "box_menu" sınıfını değiştirerek, metni merkeze hizalayarak ve ona bir display = "block" vererek başlayacağım;

BÜYÜT

11. Adım

Daha sonra simgelerin nasıl görüneceğini kontrol etmek için bir sınıf yazacağım, içinde beyaz olarak görüntülendiğini, etraflarında yuvarlak bir kenar olduğunu ve geçiş animasyonu olduğunu tanımlayacağım …

BÜYÜT

Adım 1/2

Etiketteki metinlerle ilgili olarak

Onları beyaza yerleştireceğim ve biraz aşağı doğru animasyon efekti ekleyerek opaklığı biraz azaltacağım.

BÜYÜT

Adım 13

Şimdi elementlerimizin üzerine gelindiğinde nasıl davranacağını tanımlayacağım ve efekti yumuşatmak için ona küçük bir animasyon ekleyeceğim.

BÜYÜT

Bu yapıldıktan sonra efekti tasarlamayı bitirdiğimizi söyleyebiliriz, şimdi sadece bağlantıları istediğiniz şekilde eklememiz gerekiyor, bu efektin altlarına açıklayıcı metin içeren resimler yerleştirmek için de kullanılabileceğini yorum yapıyorum. Örneğin profesyonel bir portföy, bir galeri veya bir ürün kataloğu, her şey hayal gücünüze kalmış…
Sonunda Size kaynak koduyla birlikte bir .zip bırakacağımBu öğreticiyi beğendiyseniz, yorumunuzu bırakın, net olmayan bir şey varsa lütfen bana sorun, belirli bir konuda bir eğitim istiyorsanız bana bildirin …
Umarım işinize yarar, saygılar…

Kaynak kodlu dosya… Bu Eğitimi beğendiniz ve yardımcı oldunuz mu?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.