Web Düzenlerinizi Dönüştürmek için 10 İnanılmaz CSS Püf Noktası

İster DIY web sitesi oluşturucuları kullanmış olun, ister sıfırdan bir site oluşturmuş olun, web tasarımında deneyimi olan herkes CSS'yi daha önce duymuş olabilir. Bu inanılmaz derecede güçlü araç, web düzenlerinizi dönüştürmek için kullanılabilir, size web sitenizin kontrolünü elinize alma ve yaratıcı vizyonunuzu gerçekleştirme gücü verir. Ancak bir sonraki web sitenizin potansiyelini ortaya çıkarmak için basamaklı stil sayfalarını nasıl kullanabilirsiniz?

Bu kılavuz, yalnızca yukarıdaki resimde görebileceğiniz başlığı oluşturmak için kullanılmış olan bir dizi CSS özelliğini detaylandıracaktır. Bu projeye buradan ulaşabilirsiniz kod kalemi, size kendiniz deneme şansı veriyor.

CSS Görüntü Manipülasyonu

Başlık bölümümüzü oluşturmak için atmamız gereken ilk adım, sayfaya resim eklemektir. Bu amaca ulaşmak için çeşitli yöntemler kullanabilirsiniz, bu nedenle en popülerlerini ve resimlerinizi manipüle etmenize yardımcı olacak birkaç püf noktası ele aldık.

1. CSS Arkaplan Resmi

Başlığımız için tam ekran bir arka plan resmine sahip olmak istiyoruz ve arka plan resmi CSS özelliği idealdir. İlk olarak, imajımız (ve başlıktaki diğer öğeler) için bir kapsayıcı oluşturmamız gerekiyor.

Sınıfı olarak "header" olan bir div etiketi ekleyerek başladık, ardından 100vh'ye kadar yükseklik ve Onun 100vw'ye kadar genişlik; bu bize görüntü alanıyla tam olarak aynı boyutta bir kutu verir. Ayrıca sayfanın gövdesi için bir CSS kuralı ekledik. taşma gizli olarak ayarlandı ve Onun kenar boşlukları 0px olarak ayarlandı.

Container yerindeyken bir arka plan resmi ekleyebiliriz ve bu hedefe ulaşmak için ihtiyacımız olan üç farklı CSS kuralı vardır. Birincisi, arka plan görüntüsü, arka plan görüntüsünün kaynağı olarak işlev görmesi için bir URL'ye ihtiyaç duyar ve bunun için kullanışlı Unsplash kataloğunu kullandık. ayrıca ayarlamamız gerekiyor kaplamak için arka plan boyutu ve arka plan konumu aşağıya, ancak en iyi sonuçlar için bunları denemek isteyebilirsiniz.

2. CSS Arka Plan Karışımı Modu

CSS harmanlama modları, Adobe Photoshop gibi yazılımlardaki harmanlama özelliğine çok benzer şekilde, görüntüleri ve metni karıştırmayı mümkün kılar. Karışım modlarının arka plan resmimizle çalışmasını sağlamak için arka plan renginden yarı saydam beyaza Karışım modunu eklemeden önce kullanmak istedik.

Bunu takiben, arka plan karışım modu yumuşak ışığa ayarlandı, görüntüyü yumuşatmamıza izin veriyor.

3. CSS Klip Yolu

Bir sonraki numaramız için, klip yolu adı verilen bir kural kullanacağız. img HTML etiketlerini kullanırken, üzerinde çalıştığınız resimlerin bölümlerini gizleyecek bir yol belirleyebilirsiniz. Bunun için genel şekilleri kullanmayı seçebilirsiniz, ancak daha karmaşık bir tasarım oluşturmak için SVG üreten bir uygulama da kullanabilirsiniz.

"flex_image_box" ile bir div etiketi ekledik ve bunu bir esnek kutuya dönüştürmek için display CSS özelliğini kullanarak üç resim için kapsayıcı görevi görecek (bundan daha sonra bahsedeceğiz). div etiketinin içine, kimlikleri "img1", "img2" ve "img3" olarak ayarlanmış üç img etiketi eklendi. ayarlamak 600 piksele kadar her görüntünün genişliği, yapabiliriz yükseklik özelliğini boş bırakın görüntülerin en boy oranını değiştirmeden; şimdi klip yolumuzu ekleme zamanı!

Üç üçgenimizi oluşturmak için img1 ve img3 için aynı çokgen klip yolunu kullandık, img2 için ters çevrilmiş bir versiyon yerinde. Ayrıca, görüntülerin ekranda doğru konuma oturduğundan emin olmak için esnek kutu kabımızın konumuyla oynamak zorunda kaldık. Klip yolu kurallarımız aşağıda görülebilir.

4. CSS Opaklığı

Opaklık, herhangi bir HTML öğesinin şeffaflık düzeyini ayarlar. biz ayarladık resimlerimizin opaklığı %90'aarka planla güzel bir şekilde kaynaşmaları için onları biraz opak hale getirir.

CSS Duyarlı Metin ve Görseller

Sanatını zaten keşfettik HTML, CSS ve JavaScript kullanarak çarpıcı duyarlı web siteleri oluşturmak Ancak, web sitenizin düzeninde ustalaşmak için ihtiyaç duyduğunuz becerilere ilişkin daha derin bir anlayış sağlayarak, halihazırda anladığınız ilkelerin üzerine inşa edebiliriz.

1. CSS Duyarlı/Göreceli Birimler

px, pt ve cm gibi CSS birimleri mutlak birimlerdir ve bu, bir web tarayıcısının kapladıkları pencerenin genişliği ve yüksekliği ne olursa olsun bunları aynı boyutta oluşturacağı anlamına gelir. Göreli birimler farklıdır ve tarayıcı penceresi veya bir üst öğe gibi diğer ölçümlere göre yükseklikler ve uzunluklar üretir. Aşağıdaki ilgili birimler, duyarlı web tasarımı için yaygın olarak kullanılır ve gereklidir.

• em: Bu birim genellikle metinle birlikte kullanılır. Geçerli öğenin yazı tipi boyutuna göredir ve 4em'i ayarlanan yazı tipi boyutunun dört katı kadar büyük yapar.
• geri: em gibi, rem bir öğenin yazı tipi boyutuna göredir; bir hiyerarşideki kök öğe, çıktı boyutunu tanımlamak için kullanılır.
• vw/vh: Görünüm alanının boyutuna göre genişlik ve yükseklik belirleme, 2vw tarayıcı genişliğinin %2'sine, 2vh ise tarayıcı yüksekliğinin %2'sine eşittir.
• %: % birimi, boyutları bir öğenin üst öğesinin boyutuna göre hesaplar.
• vmin/vmaks: Bu birimler, görünümün en küçük veya en büyük boyutlarının %1'ine göre boyutlar üretir ve öğelere doğrudan bir tarayıcı penceresinin boyutuna yanıt verme araçları sağlar.

2. CSS Yazı Tipi Boyutu

Bu özellik, web sitesinin ana stil sayfası veya kullanıcının web tarayıcısı tarafından önceden tanımlanmış varsayılan değerler kullanılarak ayarlanabilir. Bu değerler orta, xx-küçük, x-küçük, küçük, büyük, x-large ve xx-large'ı içerir ve orta, yazı tipi boyutunda CSS etiketi olmayan herhangi bir metin için varsayılan olarak ayarlanır. Alternatif olarak, yazı tipi boyutunda CSS özelliği kullanılırken göreli değerler kullanılabilir ve bu, başlık bölümümüzdeki metnin herhangi bir duruma uygun şekilde boyutlandırılmasını sağlamak için kullandığımız yöntem görüş alanı.

HTML'mize iki başlık etiketi ekleyerek projeye metin eklememizi sağladık. Biri ana büyük başlık, diğeri ise alt başlıktır ve her ikisi de göreceli birimler kullanır.

İlişkili: CSS'de HTML Yazı Tipi Boyutu Nasıl Değiştirilir

3. CSS Genişliği ve Yüksekliği

Tüm HTML öğeleri, div, img, a veya başka bir etiket türü olsun, yükseklik ve genişlik boyutlarıyla birlikte gelir. Bu boyutlar otomatik olarak varsayılan değerlere ayarlanabilir, ancak doğru kurallar kullanılarak web tasarımcıları tarafından da dikte edilebilirler; bu başlık için bu yöntemlerin her ikisini de kullandık.

Arka plan görüntüsü için, yüksekliği 100vh ve genişliği 100vw olarak ayarlanmış duyarlı birimler kullanıldı, ancak üç görüntümüz için de mutlak birimler kullandık. Sağlayan "devralma" gibi seçeneklerle birlikte CSS genişlik ve yükseklik birimlerini keşfetmeye ve denemeye değer. bir üst öğenin boyutlarını benimsemek anlamına gelir ve bunun gibi kullanabileceğiniz bir sürü başka numara vardır.

4. CSS Karıştırma Modu

CSS mix-blend-modu, background-blend moduna çok benzer, yalnızca arka planlar için olmak yerine herhangi bir öğeye uygulanabilir. Bu özelliği, doku eklemek ve projeyi daha ilginç hale getirmek için H1 başlığımızda kullandık. ayarlarımızı yaparak başladık metin rengi siyaha, ardından bindirmek için mix-blend-modu.

Benzersiz renk profillerine sahip arka planlar, kullandığınız ayarlara farklı tepki vereceğinden, metinle uğraşırken sahip olduğunuz farklı karışım seçeneklerini keşfetmeye değer.

5. CSS Metin Dönüşümü

CSS metin dönüşümü, tasarımcıların arama motorlarının okuma şeklini etkilemeden web sitelerindeki metnin büyük/küçük harf durumunu değiştirmelerini sağlayan akıllı bir özelliktir. Örneğin, bizde metin dönüştürmeyi büyük harfe ayarla H1 başlığımızda, HTML'mize nasıl girersek girelim, her harfi büyük yapmak.

CSS Taşması Özellikleri

HTML genellikle web sitelerinizdeki içerik için katı sınırlar belirleyen katı bir çerçeve gibi görünebilir, ancak taşma özellikleri kullanıldığında bu durum geçerli değildir.

CSS Taşması ve Metin Taşması

Taşma ve metin taşması çok benzer CSS özellikleridir. Herhangi bir öğeye taşma uygulanabilir, bu da size içeriğin sınırlarından kaçabilecek kontrolü sağlar. Metin taşması benzerdir, ancak yalnızca metin için geçerlidir ve size kurallarınıza ek parametreler ekleme yeteneği verir. Bu proje için sadece taşma kullandık (bunu sayfamızın gövdesinin boyutunu kısıtlamak için kullandık), ancak metin taşması hakkında bilgi için W3Okulları İnternet sitesi.

Web Düzenleriniz için CSS Kullanmak

CSS, web tasarımcılarının ve geliştiricilerinin kod kullanarak çarpıcı web siteleri oluşturmasını sağlayan inanılmaz derecede güçlü bir araçtır. Makalenin başında sağladığımız CodePen'e bir göz atmanızı öneririz, çünkü bu size tüm bu araçların nasıl çalıştığına dair daha derin bir fikir verecektir. Ayrıca, kendi son rötuşlarınızı eklemek için yaptığımız başlıkla oynayabilirsiniz.

Her Geliştiricinin Bilmesi Gereken 8 Temel CSS İpuçları ve Püf Noktaları

Hızlı bir iş akışı ve güzel bir web tasarımı için bu temel CSS yöntemlerini mi kullanıyorsunuz?

Sonrakini Oku

Yazar hakkında