CSS Sanatını nasıl yaparım

0
39

Haziran 2021’in üçüncü günü, ilk CSS sanatımı yarattım. Bunu inşa ederken çok eğlendim ve daha fazlasını inşa etmeye ve onları oluşturmak için farklı yöntemler deneyimlemeye devam ettim. CSS sanatım, çalıştıkça daha iyi hale geldi ve bu sayede CSS’yi daha iyi tanıdım. Aslında, CodePen daha önce öne çıkarmak için CSS sanatlarımdan ikisini (dört taneden) seçti. Bu blog yazısını, en başından itibaren sanatın codepen’de yayınlanmasına kadar olan düşünce sürecimi göstermek için yazmaya karar verdim. Umarım, bu daha fazla insanı CSS sanatı yaratmaya çeker ve onunla eğlenir.

Bu blog yazısında, bu sevimli hayalet CSS sanatını sıfırdan nasıl yaptığımı anlatacağım. Düşünce sürecim aşağıdaki bölümlere ayrılmıştır:

İlham Bulma Çizim Temel Çizim Çizimi katmanlara bölme Kod HTML Konumlandırma Duyarlılık CSS

Bu, bir fikre karar vermek için ÇOK zaman gerektiren kısımdır. İlham bulmaya çalıştığım iki yol var:

Pinterest’te gezinme Bulunduğum yerde etrafa bakıyorum ve bulduğum rastgele şeyleri çiziyorum.

Burada gösterdiğim CSS sanatı için, açıkçası Pinterest’te geziniyordum (ya da belki evin etrafında hayaletlerim var, belki ben bir hayaletim, hepiniz kesin olarak bilemezsiniz lol). Genelde sanat ve karalamalar ararım ve bir şeyi beğenip beğenmediğime bakarım, hiçbir şeyi kopyalamam ve kendi tarzımda bir şeyler çizmem, sadece Pinterest’ten ilham alıyorum.

Diğer zamanlarda, bu yumurta CSS sanatında olduğu gibi, ilhamımı sadece annem kendisi için Yumurta yaptığı için aldım ve “harika, bunu bir yüzle çizip CSS ile yapacağım” diye düşündüm. Yani, kelimenin tam anlamıyla günlük şeylerden ilham alabilirsiniz ve bu sanatın güzelliği, değil mi?

Yine de hepsi eğlence ve oyun değil. CSS ile ne uygulamam gerektiğine karar verme konusunda takılıyorum. Bu durumda, arkadaşlar kurtarmaya gelir! Arkadaşlarına ne yapman gerektiğini sormaktan korkma, onlar sana sağlam fikirler verebilirler!

Bu KRİTİK bir adımdır. Bir fikriniz varsa doğrudan koda atlamayın.

eskiz 👏🏻 👏🏻 ilk 👏🏻

Niye ya? Basitçe göremediğiniz bir şeyi kodlamak çok zor olduğu için. Geliştiriciler, günlük işlerinde kodlama yaparken anında tasarımlar ortaya çıkarmazlar. Tasarım onlara tasarımcılar tarafından verilir ve onlar da o tasarımı uygularlar.

Temel Eskiz

Eskiz yapmak için procreate kullanıyorum. Ancak, eskiz yapmak için kalem ve kağıt kullanabilirsiniz! Eskiz yapmak için sanatçı olmanıza gerek yok; sadece kabaca sanatınızın nasıl görünmesini istediğinizi çizin.

resim.png

Bu, procreate üzerine çizdiğim eskiz. Renksiz yapmak 10 dakikamı aldı. Çizgiler mükemmel değil ama ne çizmek istediğimi bu çizimden çıkarabiliyorum. Çok fazla düşündüğüm için renkleri seçmem daha fazla zaman aldı.

Kalem ve kağıt kullanıyorsanız, renk seçimi daha karmaşık olacaktır. Yapabileceğiniz şey, çevrimiçi bir renk seçiciyle kodlama sırasında renkleri seçmektir. Bu aşamadaki en önemli şey, sanatınızın yapısını ve çizgilerini elde etmektir, renkler ikinci sırada gelir.

Not: Küçük tacı CSS sanatında yapmadığımı biliyorum, görünüşünü beğenmediğim için vazgeçtim :/

Sketch’inizi katmanlara ayırma

Tebrikler! Temel eskizini aldın! Şimdi, çiziminizin katmanlara (div’ler) nasıl ayrılacağını planlamanın zamanı geldi. Çiziminizin her parçasını diğer parçaların (çıkartmalar) üstüne çıkan bir çıkartma olarak düşünebilirsiniz.

çıkartmalar

Temel olarak, HTML div etiketlerinizin bu CSS sanatı için ihtiyaçlarınıza uyacak şekilde nasıl yapılandırılacağını planlıyor.

Çizimin üzerine katmanın adıyla birlikte oklar eklemeyi seviyorum, şöyle:

oklarla kroki

Çirkin göründüğünü biliyorum; günün sonunda bu, asıl şeyi inşa etmenize yardımcı olacak bir varlıktır. CSS sanatınızı katmanlaştırmanın doğru ya da yanlış bir yolu yoktur. Genellikle aşağıdaki kurallarla giderim:

kök div’e “canva” denir. Ana CSS resminin arkasında, onu ortaya çıkarmak için bir “daire” katmanı. Yan yana olan (üst üste yığılmamış) herhangi iki katmanı, her birini kendi “kabarcığına” ekleyerek ayırırım (hayalet ve bacak katmanlarına bakın, hayalet katmanı hayaletin ana gövdesidir ve bacaklar katmanı hayaletin bacaklarıdır, yan yanadırlar; örtüşmezler, bu yüzden bunu netleştirmek için her birini bir balonun içine ekledim.) eğer bir şey kendi katmanına sahip olamayacak kadar basitse, yapmam Adını sen koy. (Göz katmanına bakın, gözün içinde adını vermediğim bir gözbebeği var çünkü kendi div’inde kullanmak yerine gözleri:önce veya gözler:sonra kullanarak oluşturmak daha kolay olacak.)

HTML

Çizimimizi katmanlara ayırma şeklimizi hatırlıyor musunuz? bu katmanlar bizim div’lerimizdir. Başka bir katmanın üstündeki herhangi bir katman, altındaki katmanın açılış ve kapanış etiketlerinin içinde bir div olacaktır.

Örnek: “circle” katmanı, “canva” katmanının üzerindedir ve “hayalet” ve “bacaklar” katmanları, “circle” katmanının üstünde ancak yan yanadır, dolayısıyla HTML kodu aşağıdaki gibi olacaktır:

Kodda hayalet ve bacak katmanlarının birbirinin altında nasıl olduğuna dikkat edin. Bunun nedeni üst üste değil yan yana olmalarıdır.

Tam HTML kodu:

konumlandırma

İyi bir CSS sanatı yapmak için konumlandırmayı çok iyi anlamalısınız.

CSS konumlarının nasıl çalıştığından emin değilseniz, bu makaleyi deneyin:

CSS Düzeni – Konum Özellik

CSS sanatındaki kural basittir, eğer bir div üst div’ine göre belirli bir konumda (üst, alt, sol veya sağ özellikleri kullanarak) olması gerekiyorsa, o zaman üst div’in konumu: göreceli ve alt div’in konumu: mutlak

Cevaplanabilirlik

Bir CSS sanatını duyarlı hale getirmenin birkaç yolu vardır. Benim tercih ettiğim yol, boyutlandırma birimlerine ihtiyaç duyduğum her yerde vmin kullanmaktır. vmin, vw ve vh’nin küçük olanıdır. Daha fazla bilgi için burayı inceleyebilirsiniz.

CSS

Bu bölümde kodu detaylı olarak ve CSS yazarken nasıl düşündüğümü anlatacağım.

*

* { kenar boşluğu: 0; dolgu: 0; }

Net bir canva’ya sahip olmak için tarayıcının varsayılan kenar boşluğunu ve dolgusunu devre dışı bırakarak başlamak istiyorum.

Canva

.canva { arka plan: #f7f5ff; yükseklik: 100vh; genişlik: 100vw; ekran: esnek; hizalama öğeleri: merkez; haklı içerik: merkez; pozisyon: göreceli; }

Bu, CSS sanatının arka planıdır (çok hafif, neredeyse beyaz, mor). Arka planı ayarladım, tuvali ekranın tüm genişliğini ve yüksekliğini alarak uzattım ve tuvalin çocuklarını ortaladım.

Çocukları ortalamanın birkaç yolu var ama benim için çok sezgisel olduğu için flexbox yolunu tercih ediyorum.

Canva’nın konumunu göreli yaptım çünkü onu manuel olarak konumlandırmayacağım. Bu kod satırını kaldırabilirsiniz, çünkü canva div’in yalnızca bir çocuğu vardır ve konumu mutlak değildir, bu nedenle bu özel durumda önemli olmaz.

Daire

.circle { genişlik: 70vmin; yükseklik: 70vmin; arka plan: #e8e0ff; sınır yarıçapı: %50; ekran: esnek; hizalama öğeleri: merkez; haklı içerik: merkez; esnek yön: sütun; }

Çember sadece dekorasyon amaçlı olduğu için burada söylenecek fazla bir şey yok, CSS kullanan basit bir çember. Genişliği ve yüksekliği atamak için vmin kullandığımı görebilirsiniz. Ayrıca çocuklarını ortalamak için flexbox kullandım.

Hayalet

.ghost { konum: göreli; sınır: 0,5vdak düz siyah; genişlik: 30vdak; yükseklik: 30vmin; sol üst kenarlık yarıçapı: 100 piksel; sağ üst kenarlık yarıçapı: 100 piksel; sınır-alt: 0; kutu boyutlandırma: kenarlık kutusu; arka plan: #FFDCDF; }

Bu hayaletin vücudu. Kenarlığı ve arka planı olan yarım daire benzeri bir şekil istedim. bu yüzden sadece sol üst ve sağ üst kenarlık yarıçaplarını atadım ve alt kenarlığı kaldırdım.

bacaklar

.legs { ekran: esnek; genişlik: 30vdak; } .legs div { genişlik: 7.5vmin; yükseklik: 6vdak; sınır: 0,5vdak düz siyah; sınır-alt-sol-yarıçap: 100 piksel; sınır-sağ-yarıçap: 100 piksel; üst sınır: 0; arka plan: #FFDCDF; }

Bacak kısmı yan yana dört yarım daire şeklindedir. Yarım daireyi arka arkaya yapmak için flexbox kullandım ve hayaletle aynı genişlikte verdim. Her yarım dairenin genişliği = 30vmin/4 = 7.5vmin’dir. Sol alt ve sağ alt yarıçapları atayarak yarım daireleri oluşturdum ve üst kenarlığı kaldırdım.

Kalp

.heart { konum: göreceli; genişlik: 5vdak; yükseklik: 5vdak; arka plan rengi: #FF3737; transform: çevir(22vmin, 6vmin) döndürme(25deg) scale(0.5); } .heart:before { pozisyon: mutlak; alt: 0 piksel; sol: -2.5vmin; genişlik: 5vdak; yükseklik: 5vdak; içerik: ”; -webkit-border-radius: %50; -moz-border-radius: %50; -o-sınır-yarıçapı: %50; sınır yarıçapı: %50; arka plan rengi: #FF3737; } .heart:sonra { pozisyon: mutlak; üst: -2.5vmin; sağ: 0 piksel; genişlik: 5vdak; yükseklik: 5vdak; içerik: ”; -webkit-border-radius: %50; -moz-border-radius: %50; -o-sınır-yarıçapı: %50; sınır yarıçapı: %50; arka plan rengi: #FF3737; }

Kalp bir kare ve iki dairedir. Bir kalp şekli oluşturmak için bu öğreticiyi takip ettim ve ardından tercihlerimi buna ekledim. Ayrıca ihtiyaçlarıma uygun hale getirmek için bir döndürme dönüşümü ekledim.

Önce ve sonra seçicilerin çalışması için kalbin göreceli bir konumda olması gerekiyordu. Ancak yerini değiştirmem gerekiyordu. Önümde iki seçenek vardı:

Heart div’i başka bir div ile sarmak ve bu div’in konumunu mutlak yapmak translate translate kullanın.

Daha hızlı olduğu için ikinci seçeneğe gittim, ancak ilk seçenekte de yanlış bir şey yok.

Gözler

.eyes { pozisyon: mutlak; genişlik: 5vdak; yükseklik: 5vdak; arka plan: #000; sınır yarıçapı: %50; üst: 13vmin; sol: 5vdak; kutu gölgesi: 14vmin 0; } .eyes:önce{ içerik: “”; pozisyon: mutlak; arka plan: beyaz; genişlik: 2.5vdak; yükseklik: 2.5vmin; sınır yarıçapı: %50; sol: 2vdak; kutu gölgesi: 14vmin 0 beyaz; }

Nasıl “göz” olarak adlandırıldığına dikkat edin ama sadece bir div mi? Bunun nedeni, box-shadow özelliğini kullanarak tek bir div’de her iki gözü de oluşturacağım. Göz iki kısımdan oluşur: gözün kendisi ve üzerindeki vurgu.

Gözle başlayalım.

Normal bir siyah daire oluşturdum ve sol ve üst özellikleri uygun bulduğum yere yerleştirdim. Bu özellikler, position: absolute beyan etmediğiniz sürece çalışmaz.

Diğer gözü oluşturmak için bu gözü çoğaltmak için box-shadow özelliğini kullandım ve x ekseni konumunu uygun bulduğum şekilde değiştirdim.

Şimdi vurguya geçin.

Bunu oluşturmak için :before seçicisini kullandım. Tam olarak göze benzer ancak farklı renk ve boyuttadır. Her şeyin mükemmel bir şekilde hizalandığından emin olmak için aynı x ekseni değeriyle box-shadow özelliğini de kullandım.

Ağız

.mouth { pozisyon: mutlak; genişlik: 4vdak; yükseklik: 2vdak; sınır: 0.7vdak düz siyah; sınır-alt-sol-yarıçap: 100 piksel; sınır-sağ-yarıçap: 100 piksel; üst sınır: 0; üst: 16vmin; sol: 12vdak; }

Ağız, mutlak bir konuma sahip sadece yarım dairedir. Burada pek bir şey yok.

Eller

.sol el, .sağ el { pozisyon: mutlak; genişlik: 4vdak; yükseklik: 4vdak; sınır: 0,5vdak düz siyah; sınır-alt-sol-yarıçap: 100 piksel; sınır-sağ-yarıçap: 100 piksel; üst sınır: 0; } .sol el { üst: 22vmin; sol: 6vdak; transform: döndür(-45deg) } .sağ el{ üst: 22vmin; sol: 18vdak; dönüştürmek: döndürmek (45 derece) }

Eller de sadece yarım daire şeklindedir ancak döndürme dönüşümü vardır. Dikkat edin burada box-shadow kullanmadım çünkü her elin farklı bir döndürme değerine sahip olmasını istedim.

CSS sanatını yapmak zevklidir ancak bunu yaparken akılda tutulması gereken bir miktar bilgi gerektirir. Umarım, bu blog yazısı size biraz CSS ile oynamayı denemeniz için ilham verdi ve CSS ile ilgili kafa karışıklığını giderdi! Düşüncelerinizi duymayı çok isterim ve daha fazla ipucu eklemek isterseniz bu harika olur!

CEVAP VER

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