Our Blog

Bu CSS hileleriyle tasarımlarınızda devrim yaratın

by imleme
css

Yeni CSS numaralarını öğrenmek, web sitesi tasarımınızı değiştirmenin en iyi yollarından biridir. Bir süredir web endüstrisinde çalışıyorsanız, her zaman aynı düzenleri kodladığınızı veya tasarladığınızı hissedebilirsiniz. Eğilimler gelir ve gider, ancak sitelerin çoğu aynı görünür – 12 sütunlu ızgarayı, iki ve üç sütunlu kutulu düzenleri ve benzer şekilleri kullanarak. Sadece bakmak biraz sıkıcı olmakla kalmıyor, aynı zamanda kullanıcı deneyimi o kadar da harika değil.

Bunu değiştirmenin bir yolu, dijital tasarımın ötesine geçen alanlardan veya alanlardan ilham almaktır. Web siteniz için neden basılı veya editoryal tasarımlar kullanmıyorsunuz? Yeni bir olasılıklar dünyasının kapılarını açan yeni CSS özellikleriyle eski alışkanlıkları kırabilirsiniz. Size ilham vermek için iyi bir web sitesi kurucusundan yararlanabilirsiniz.

Daha fazla web tasarımı tavsiyesi istiyorsanız, mükemmel web sitesi düzeni kılavuzumuza bakın veya Atomic Design hakkında bilgilerinizi tazeleyin . Artı, bilmeniz gereken kullanıcı deneyimi ipuçları burada .

Bir CSS devrimi sürüyor – Flexbox veya CSS Grid gibi araçlar, ilginç mizanpajlar oluşturmanın kolay yollarını sunuyor. CSS kullanarak, aşina olduklarınızın çok ötesine geçen görsel stiller oluşturabilirsiniz.

Bu makalede, sadece birkaç satır kodla web sitesi düzenlerinizin kalıbını kırmanıza yardımcı olacak bazı CSS ipuçlarını paylaşacağız.

  1. CSS harmanlama modlarını keşfedin
    Çift tonlu görüntü ve renklendirici efektleri, en yeni web tasarım trendlerinden bazılarıdır. Onları uyumlu bir şekilde uygulayan Spotify sayesinde web’de oldukça popülerler. Artık varlıklarınızın birden çok farklı renkli versiyonunu oluşturmayı bırakabilir ve efektleri doğrudan tarayıcıda uygulayabilirsiniz.

CSS harmanlama modlarını kullanmak, içeriğin görünümünü web sitelerinde birleştirmenin harika bir yolu olmakla kalmaz, aynı zamanda bir görüntünün farklı renk sürümlerini ayarlamanıza ve CSS’de yalnızca bir değeri değiştirmenize olanak tanır: renk. Ekran, kaplama, açıklaştırma ve koyulaştırma dahil 15 olası karışım modu değeri vardır.

Efekti uygulamak istediğiniz öğenin türüne bağlı olarak birkaç uygulama yöntemi vardır. Örneğin, kapsayıcı background-blend-mode üzerinde background-image ve background-color setini kullanabilirsiniz: darken; veya bir renklendirme efekti elde etmek için görüntü sarmalayıcı üzerinde sözde öğelerle (yani : önce ve : sonra ) bir kaplama oluşturun .

Tatmin edici bir çift ton efekti elde etmek için, yüksek kontrastlı siyah beyaz bir resim kullanmanız önerilir. Bunu, gri tonlama ve yüksek kontrast seviyesi ayarlamak için CSS filtreleri uygulayarak yapabilirsiniz.

Diğer bir harika özellik, öğenin içeriğini doğrudan üst öğesinin içeriği veya arka planıyla harmanlamanıza olanak tanıyan mix-blend-modudur . Bu özellikle üst üste binen yazılarda işe yarar. Neden bu durumda sadece opaklığı ayarlamadığımızı sorabilirsiniz – cevap basit: sadece şeffaflığı kullanarak renk canlılığını kolayca kaybedebiliriz.

Doğrudan web tarayıcınızda düzenlenebilen görüntüler çağı geliyor, ancak tarayıcı uyumluluğunu unutamayız – şu anda harmanlama modları için destek sınırlıdır. Ve bu görüntüleri güvende tutmak için bulut depolama seçeneklerinizi keşfettiğinizden emin olun .

  1. Bir maske ekleyin
    Maskeleme, tarayıcınıza hangi varlık öğelerinin görünür olması gerektiğini söyler ve yaratıcı şekiller ve düzenler oluşturmak için çok kullanışlıdır. Maskeleme üç şekilde yapılabilir: bir raster görüntü (ör. Saydam parçalar içeren PNG biçimi), CSS degradeleri veya SVG öğeleri kullanarak.

Tipik bir tarama görüntüsünden farklı olarak, SVG’nin önemli bir kalite kaybı olmadan ölçeklenebileceğini veya dönüştürülebileceğini unutmayın.

img {
mask-image: url(‘mask.png’) linear-gradient(-45deg,
rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
mask-image: url(#masking); /referencing to the element generated and defined in SVG code/
}

Firefox’un yalnızca en yenisini desteklediğini belirtmek önemlidir, bu nedenle satır içi bir SVG maske öğesi kullanmamız gerekir. Şeffaflık seviyelerine sahip bir raster görüntü kullanırsak ne olur? Görüntünün saydam kısımları görülmeyecektir – başka bir deyişle, opak kısımlar diğer parçaları gizleyerek gösterilecektir.

Maskeleme özellikle güçlüdür çünkü aynı özellikleri arka plan görüntülerine uygulamanıza, konumlarını, boyutlarını ve tekrarlarını tanımlamanıza olanak tanır.

CSS maskeleme için harika bir kullanım durumu, metin ve resimleri birleştiren makalelerdir. Düzensiz kaplar ve görüntüler baskıda çok popülerdir, ancak web’de uygulanması yorucu ve zaman alıcıdır. Ama maskeleme sayesinde artık değil!

Ayrıca, animasyonlu görüntülerin (ör. GIF dosyaları ) bir kısmını kesmek için şeffaflık seviyelerini kullanarak eğlenebilirsiniz . Ancak, bu özellikleri kullanırken, tarayıcılar arası desteği unutmayın ve satıcı önekleri ekleyin.

  1. Kesmekten korkmayın
    Bir başka harika özellik de CSS kırpmadır. Bir şeklin sınırına klip yolu adı verilir (kullanımdan kaldırılan clip özelliğiyle karıştırılmamalıdır) ve kırpma, hangi görüntü alanının görünür olması gerektiğini tanımlar. Kırpma, bir kağıt parçasını kesmeye benzer – yolun dışındaki her şey gizlenirken yolun içindeki her şey görünecektir.

Örneğin, bir daire işlevi bir görüntünün üstüne kırpma maskesi koyarsa, görüntünün yalnızca bu daire içindeki kısmını görürsünüz.

clip-path: circle(radius at x, y);
clip-path: url(#clipping); /referencing to SVG element/

Güzel olan şey, şekil işlevlerini ve SVG’yi klip yolları olarak kullanabilmemizdir, bu da bize birçok fırsat sunar – örneğin, onları şekil değiştiren şekillere canlandırabiliriz.

Kırpma ve maskeleme arasındaki farkın ne olduğunu merak ediyorsanız, maskelerin görüntü olduğunu ve kliplerin yalnızca vektör yolları olduğunu unutmayın. Tam bir görüntüyle çalıştığınız için maskelemenin daha fazla bellek tüketeceğinden bahsetmeye değer, böylece her şey piksel piksel yapılmalıdır.

Bu nedenle, kısmi bir şeffaflık efekti istediğinizde maske kullanmanız önerilir; keskin kenarlar istiyorsanız, en iyisi kırpma yollarını kullanmaktır.

  1. Kutunun dışında düşünün
    Biçim dışı ve içi şekil kurtarmaya! Metin kaplarının her zaman dikdörtgen olması gerektiğini kim söyledi? Kelimenin tam anlamıyla kutudan çıkalım ve sayfa düzenlerimizi daha zengin ve daha az kutu yapan yeni formlar keşfedelim. dış şekil ve iç şekil özellikleri, içeriğinizi CSS’de özel yolların etrafına sarmanıza olanak tanır.

Peki nasıl çalışıyor? Aşağıdaki kodu verilen kayan görüntüye veya kaba uygulamanız yeterlidir:

shape-outside: circle(50%); /* content will flow around the circle*/

Float özelliğinin ve elemanın boyutlarının – yükseklik ve genişlik – tanımlanması gerektiğine dikkat etmek önemlidir, aksi takdirde bu işe yaramaz. Şekil için circle () , polygon () , inset () veya elips () kullanabilirsiniz .

Olası başka bir değer de url () işlevidir. Bu durumda bu, şekil-dışı özelliğinin görüntüye dayalı bir eleman şekli tanımlamasını sağlar. Çok sayıda eğri ve noktaya sahip özellikle karmaşık bir grafiğiniz varsa ve içeriğin onu sorunsuz bir şekilde sarmasını istiyorsanız, polygon () yerine url () işlevini kullanmayı seçebilirsiniz .

Öğeniz ve içerik arasında daha fazla alan oluşturmak istiyorsanız , tıpkı bir kenar boşluğu gibi davranacak olan şekil kenar boşluğu özelliğini kullanın . Şekil işlevleri canlandırılabilir, ancak yalnızca tanımlı çokgenler için – url () işlevi maalesef canlandırılamaz.

Dış şekil için tarayıcı desteği şu anda sınırlıdır, ancak diğer tarayıcılarda hızlı uygulanması için parmaklarınızı çapraz tutun.

  1. Animasyon için SVG’yi deneyin

Dürüst olmak gerekirse, bugünkü web’in SVG’siz (ölçeklenebilir vektör grafikleri) olduğunu hayal edemiyorum . Adı kendi adına konuşur – ölçeklenir, bu nedenle duyarlı web tasarımıyla ilgili tüm endişeleri yanıtlar . SVG grafiği, görüntülendiği cihazın ekran çözünürlüğü ne olursa olsun net olacaktır.

Ölçeklenebilirliğin yanı sıra, sizi SVG ile oynamaya teşvik etmesi gereken başka bir özellik daha var: SVG’yi CSS ile işleme yeteneği. CSS animasyonlarında ve SVG kodunda hiç denemediyseniz, şimdi denemelisiniz – bu kadar hızlı harika efektler elde edebilmeniz inanılmaz.

Bazı durumlarda tarama görüntülerini kullanmanın daha kolay olduğunu düşünebilirsiniz, ancak SVG’nin sıradan görüntülere göre büyük bir avantajı vardır. SVG’ye dahil edilen kelimeler etiketinde tutulur ve böylece metin olarak kalır, bu da onu aranabilir, seçilebilir ve erişilebilir kılar. Ayrıca, doğrudan kod içinde düzenleyebileceğiniz anlamına gelir. Ancak, yazı tipinin işleneceğinden emin olmak için yazı tipi yüzünü yerleştirmeyi unutmamalıyız.

SVG’yi CSS ile canlandırmak, HTML’deki diğer herhangi bir öğeye animasyon uygulamak gibidir – geçişler, dönüştürmeler ve ana kare animasyonlarıyla yapılabilir. SVG kodunu öğrendikten sonra, gerisi basit ve sezgiseldir, çünkü temelde bunu tıpkı HTML’de yaptığınız gibi yaparsınız.

SVG ile ilgili en harika şey, istediğiniz herhangi bir parçayı yakalayabilmeniz ve CSS animasyonlarıyla canlandırabilmenizdir. Bu, JavaScript kullanmadan çok ilginç bazı dinamik efektler oluşturabileceğimiz anlamına gelir. SVG’nin kendi DOM API’si vardır, bu yüzden aslında tüm SVG kodu, bu konuyu keşfederken kullanmanızı şiddetle tavsiye ettiğim DevTools kullanılarak kolayca incelenebilir.

  1. Biraz gürültü yap
    1980’ler ve 1990’lar geri döndü! Glitch – kaos, gürültü ve sıkışma estetiği – bu yıl popüler bir tasarım trendi haline geliyor. Hataların, hataların ve hataların kutlanması web’de de görülebilir. Perspektifle oynamak ve görsel olarak daha kaotik olmak istiyorsanız, sitenizin öğelerini dönüştürerek ve eğerek bunu kolayca yapabilirsiniz.
  2. Kolaj ile yaratıcılığınızı konuşturun

Kolajdan ilham alan tasarımlar, görsel sanatlarda anlarının tadını çıkarıyor
Geleneksel yaklaşım, bir grafik düzenleyicide hazırlanmış raster görüntüleri basitçe eklemektir, ancak bu makalede tartıştığım tekniklerle, CSS özelliklerini kullanarak benzer efektler oluşturmak mümkündür. Hatta web’in gereksinimlerine tam anlamıyla uyum sağlayan ve ölçeklenebilir, animasyonlu ve etkileşimli kolajlar bile hazırlayabilirsiniz .

Tüm bu harika CSS özelliklerini kullanarak bazı örnekler hazırladım, böylece web’de kolaj benzeri bir stil elde etmek için nasıl birleştirilebileceklerini görebilirsiniz.

  1. Tarayıcı desteğini unutmayın
    Tüm tarayıcılar tarafından desteklenmediğinden şüphelendiğiniz CSS özelliklerini kullanmak istediğinizde kendinizi engellenmiş hissediyorsanız , @supports kuralı size yardımcı olmak için var. @supports , CSS özelliği: değer çiftleri için tarayıcı desteğini kontrol etmenizi sağlar.

@Supports bloğuna dahil edilen kod, yalnızca bu koşullar doğruysa oluşturulur, aksi takdirde kod tarayıcı tarafından okunmaz. Tarayıcının @ support’ları anlamadığı bir durumda , kodun belirli bir bölümünü de oluşturmaz.

@supports (mix-blend-mode: overlay) {
.example {
mix-blend-mode: overlay;
}
}

Karıştırma modları, maskeleme, kırpma, CSS şekilleri ve SVG’nin gücü gibi özellikleri birleştirmek, bize yaratıcılığımızı artırmak ve normdan kopmak için harika bir araç seti sağlar. Bu araçlarla, şu anda baskıda gördüğümüz şeylerin bir web sürümünü oluşturma fırsatına sahibiz.

Bazı özellikler hala tarayıcıların uyumluluğuyla ilgili sorunlar yaşayabilse de (çok fazla sorun yaşıyorsanız, daha sağlam bir web barındırma hizmeti düşünün ), onlarla oynamaktan çekinmeyin. Tarayıcı desteği şu anda sınırlı olsa da, bu muhtemelen gelecekte olmayacak. Bu sadece bir zaman meselesi.

Bilmeniz gereken 11 CSS sırrı

 

Comments are closed.

Your nameYour emailYour text

Kategoriler

Log in
Register
Send message