CSS ve SVG ile Blob Oluşturmanın Üç Yolu

0
15

Lekeler, tuhaf bir kaliteye sahip olan ve sadece eğlenceli olan pürüzsüz, rastgele, jöle benzeri şekillerdir. Web’de illüstrasyon öğeleri ve arka plan efektleri olarak kullanılabilirler.

Peki nasıl yapılırlar? Sadece bir illüstrasyon uygulamasını açın ve devam edin, değil mi? Tabii, bu harika. Ancak burada CSS Hileleri ile ilgili bir gönderideyiz ve bunu CSS ve SVG ile yapmamız gereken olasılıklara bakmak çok daha eğlenceli olacaktır – en sevdiğimiz iki bileşen!

Aslında bloblar hakkında gitmek için birkaç yolumuz var. Onları kontrol edelim.

SVG’de daire çizme

Kolay başlayalım. SVG’yi Illustrator, Sketch, Figma veya başka bir şeyle çizebiliriz, ancak bunun yerine SVG koduyla çizeceğiz.

SVG, uygun şekilde adlandırılmış olması sayesinde daire çizmeyi oldukça önemsiz hale getiriyor. element:

Bu acayip özellikler? Onları parçaladığınızda mantıklı geliyorlar:

cx, çember merkezinin x koordinatını tanımlar .cy y koordinatını tanımlar. r yarıçaptır. dolgu, şekli renkle doldurmak için kullanılır.

Bu pasaj, merkezi x ekseninde 100 piksel ve y ekseninde 100 piksel olan 40 piksel yarıçaplı bir daire oluşturur. Koordinatlar, üst kapsayıcının sol üst köşesinden başlar.

Bunun gibi birden fazla örtüşen daire oluşturalım:

tüm farklı şekil ve şekillerin çizildiği sanat tahtası görevi görür. Bu nedenle, yüksekliği ve genişliği, tüm çizimin içine alınması gereken boyutu gösterir. Şeklin bir kısmı SVG’nin boyutunun sınırları dışında ise, o zaman o kısım kesilecektir.

CodePen Embed Yedeklemesi

Ancak lekeler her zaman o kadar mükemmel değildir… yuvarlak. Bir şeyleri kullanarak karıştırabiliriz onun yerine :

Bu, yatay (rx) ve dikey (ry) yarıçapları ayrı ayrı tanımlamak için etiket adındaki ve iki yarıçap değerindeki değişiklik dışında daireyle neredeyse aynıdır. İşin garibi, eğer yarıçap değerleri aynıysa, istersek yine de mükemmel bir daire elde edebiliriz. Yani bir anlamda biraz daha çok yönlüdür.

Ve ihtiyacınız olan tek şey bir çemberse, muhtemelen SVG olmadan CSS’ye güvenebiliriz. Herhangi bir kutu öğesi, kenarlık yarıçaplı bir daire veya elips olabilir.

.circle {border-radius:% 50; yükseklik: 50px; genişlik: 50px; }

… Ama daha sonra bunun üzerine.

SVG yollarıyla serbest bırakma

SVG’ler sayesinde etiket, her türlü şekli oluşturabiliriz. Kurşun kalemle çizmek gibidir. Bir noktadan başlayıp çizgiler, eğriler, şekiller çiziyorsunuz ve döngüyü kapatıyorsunuz.

Aşağıdaki gibi farklı görevler için birçok veri parametresi vardır:

M – Noktaya hareketL – Çizgi çizmeC – Bir eğri çizmeQ – Bézier eğrisiZ – Yolu kapatma

Chris’in bu parametreleri ayrıntılı olarak açıklayan süper kapsamlı bir kılavuzu var.

Gerçek çizim için sadece eğri (C) parametresine ihtiyacımız var. Ama aynı zamanda başlangıç ​​noktasını hareket ettirip yolu kapatacağız, böylece M ve Z parametrelerine de ulaşacağız.

Bu, SVG’leri kullanarak bir araya getirdiğim rastgele bir damla şekli öğesi.

Bunu yıkmaya hazır mısınız? Koordinatlar büyük rol oynar bu yüzden bakacağımız şey, kodumuzun içinde sıkışmış Google Haritalar verileri gibi görünecek. Ama ne yaptıklarını bildiğimizde çok daha anlamlı oluyor.

Bunu al…

Burada, d özelliği yol verilerini depolar. Çizimin nerede başladığını, hangi yöne gittiğini, hangi şekli izlediğini ve nerede bittiğini içeren bilgileri tutar. Örneğin:

Yolumuzun, kendilerinden önce gelen M ile gösterilen 10 10 koordinatlarından başladığını gösteriyor. Ardından, iki kontrol noktasıyla bir Kübik Bézier eğrisi (C) oluşturur. Bézier eğrileri, aralarındaki eğriliği kontrol eden bir yolun her iki ucundaki tutamaçlar gibidir. İki Bézier “tutamacımız” var: biri eğrinin başlangıç ​​konumu (20 20) ve diğeri bitiş konumu (40 20) için.

Blobumuzu tasarlamak için bu bilgiyi kullanalım. Çizdiğim blob, birkaç eğri ve kontrol noktasıyla aslında biraz karmaşık. Koordinatların çoğunun tam sayı olmamasına yardımcı olmuyor. Ama yine de, şimdi ne olduğunu bildiğimize göre sd parametresi yapar ve yol boyunca noktalar çizmek için kullandığı öznitelikler o kadar da korkutucu görünmüyor.

CodePen Embed Yedeklemesi

Ama, hey, anladım. Bu sadece elle yazmakla kalmayıp, aynı zamanda tam olarak doğru yapmak için de çok fazla kod. Sizin için kodu oluşturmak üzere bu araç gibi bir şey kullandığınız için sizi suçlamam.

CSS ve SVG filtreleriyle aşırı duygusal efektler

SVG yolu karmaşıktır. Sağ? Ya size birçok özel şekli (div’ler aracılığıyla oluşturabileceğiniz) yapışkan bloblara dönüştürmenin bir yolunu sunarsam? İşte fikir. Kesişen iki dikdörtgen oluşturacağız. Aynı renkteler, ancak kesiştikleri yeri karartmak için biraz şeffaflıkları var.

CodePen Embed Yedeklemesi

Ardından, dikdörtgenleri lekelemek için SVG’nin bulanıklaştırma özelliklerinden yararlanarak, daha yumuşak kenarlara sahip ekstra yapışkan bir damla oluşturacağız. Kesişen iki dikdörtgen buna dönüşecek –

Öncelikle SVG’de filtrelerin nasıl çalıştığını anlayalım. Kullanılarak ilan edilirler HTML öğelerinde veya daire gibi diğer SVG öğelerinde.

circle {filter: url (“# id_of_filter”); }

temelde aşağıdakileri içeren gerçek filtre efektleri için bir sarmalayıcıdır:

Daha fazlası… Tam listeye buradan ulaşın.

Blobumuz bulanık ve renklidir, bu yüzden ve kullanmak.

birden çok öznitelik alır, ancak bunlardan yalnızca ikisiyle ilgileniyoruz: ne kadar bulanıklık istediğimiz ve onu nerede istediğimiz. Standart sapma (stdDeviation) ve özelliklerdeki özellikler sırasıyla bu ihtiyaçlarla uyumludur.

in iki değerden birini kabul eder:

SourceGraphic – Tüm şekli bulanıklaştırırSourceAlpha – Alfa değerini bulanıklaştırır ve gölge efektleri oluşturmak için kullanılır

Biraz oynadıktan sonra, işte burada etki:

Bu, blobumuzun üst öğesinde çağırdığımız bir kimlik ile HTML biçimlendirmesinde doğrudur:


Filtre, biçimlendirmede olsa bile gerçekte işlemez. Bunun yerine, blob’un ana öğesinde bir CSS filtresi olarak referans veriyoruz:

/ * Blob üst öğesi * / .hooks-main {konum: mutlak; genişlik:% 100; yükseklik:% 100; filtre: url (“# goo &”); taşma: gizli; }

CodePen Embed Yedeklemesi

Bu henüz yapılmadı. Bulanıklık dağılır ve öğenin şekli sınırını ve rengini kaybetti. Sınırları bulanıklaştıran bir şişkinlik efektine ve şekli doldurmak için düz bir renge ihtiyacımız var. Bir sonraki SVG filtremiz burada, , devreye giriyor.

İki tane istediğimiz özellikler:

in – Aynı şekilde efektin nerede uygulandığını gösterir .values ​​- Dört satır ve beş sütundan oluşan bir matris.

Değerler özelliği biraz daha fazla nüans taşıyor. Her pikselin renk ve alfa değerleriyle çarpılan ve o piksel için yeni bir renk değeri oluşturan bir matris tutar. Matematiksel olarak konuşursak:

yeni piksel rengi değeri = (değerler matrisi) × (geçerli piksel renk değeri)

Buraya biraz sayı alalım. Bu denklemde, değerler matrisi şuna eşittir:

[F-red1 F-green1 F-blue1 F-alpha1 F-constant1
F-red2 F-green2 F-blue2 F-alpha2 F-constant2
F-red3 F-green3 F-blue3 F-alpha3 F-constant3
F-red4 F-green4 F-blue4 F-alpha4 F-constant4]

Burada F-kırmızı, 0 ile 1 arasında değişen bir değere sahip piksel cinsinden kırmızı bir kesri anlamına gelir. F-sabiti, renk değerine eklenecek (veya çıkarılacak) sabit bir değerdir.

Bunu daha da detaylandırırsak… RGBA değeri rgba (214, 232, 250, 1) olan bir renk pikselimiz var. Onu yeni bir renge dönüştürmek için, onu değerler matrisimizle çarpacağız.

Değerler MatrixColor Pixel (RGBA) New Color (RGBA)[1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 0 0 1 0
 0 0 0 0 1]×[214
 232
 250
 1
 1]= [ 214×1 + 232×0 + 250×0 + 1×0 + 1×1
      214×0 + 232×1 + 250×0 + 1×0 + 1×1
      214×0 + 232×0 + 250×1 + 1×0 + 1×1
      214×0 + 232×0 + 250×0 + 1×1 + 1×1
      214×0 + 232×0 + 250×0 + 1×0 + 1×1 ]= [214
  232
  250
 1
  1]

Piksel değeri değişmedi çünkü onu kimlik matrisiyle çarpıyoruz, ancak matrisin değerlerini değiştirirseniz piksel değeri de değişecektir. MDN belgelerinden değerler matrisi hakkında daha fazla bilgi edinin.

Bizim durumumuzda, bu değerler oldukça iyi çalışıyor gibi görünüyor:




CodePen Embed Yedeklemesi

Blob’u köşeden uzatmak için birkaç stil daha ekledim.

CodePen Embed Yedeklemesi

Bu filtre değerlerini başka şekillerde kullanmayı deneyin ve yorumlarda sizin için nasıl çalıştıklarını bana bildirin.

CSS border-radius kullanma

Bunu daha önce yaptık, ancak şimdi CSS border-radius özelliğine geçelim. Ayrıca, bir öğenin köşelerini düzleştirme yeteneği sayesinde damla benzeri bir şekil oluşturabilir. Bu mümkündür çünkü her köşe yarıçapı, her kenar için bir tane olmak üzere iki yarıçapa bölünmüştür. Bu yüzden daire ve elips dışında daha fazla şekle sahip olabiliriz.

Bir öğenin dört köşesinin tamamı için bir kısaltma olarak border-radius kullanmaya alışkın olabilirsiniz:

. yuvarlak {border-radius:% 25; }

Bu, tüm köşelerde tekdüzelik elde etmenin güzel bir yolu. Ancak damlalar o kadar tek tip değil. Bazı köşelerin yapışkan görünen bazılarını elde etmek için diğerlerinden daha yuvarlak olmasını istiyoruz. Bu nedenle, border-radius bileşenini oluşturan özellikler için gidiyoruz, örneğin:

.element {border-top-left-radius:% 70% 60; border-top-right-radius:% 30% 40; kenarlık-sağ alt-yarıçap:% 30% 60; kenarlık-sol alt yarıçap:% 70% 40; }

Ve her özelliğin nasıl iki değer aldığını görüyor musunuz? Bu, köşenin her bir kenarı için bir tane, bize bir öğeyi ilginç şekillere dönüştürmek için büyük bir esneklik sağlıyor. Daha sonra bir arka plan rengi bırakabilir, bir gradyanla doldurabilir veya hatta düzgün bir etki elde etmek için üzerine bir kutu gölgesi koyabiliriz.

CodePen Embed Yedeklemesi

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz