Kod yağlı boyamaya dönüşür, saça iyi gelir, yalnızca HTML + CSS kullanılır ve sanat tasarımı da şaşırtıcı!
Kaynak: Qubit
Bu makale hakkında 2509 kelime, Önerilen Okuma 4 dakika.
Bu makale, HTML + CSS ile gelişmiş ön uç çizimini tanıtır, tüm süreç PS, AI gibi grafik görüntü düzenleyicilerini kullanmaz ve basitçe kod satırlarını elle çizer.
HTML bir programlama dili değildir, ancak bu, konusunda uzman olan büyük adamların oynamasını engellemez.
Web sayfaları, basit öğeler ve zengin araçlar yapmak için HTML + CSS kullanan sıradan ön uç.
Çizmek için HTML + CSS kullanan büyük bir ön uç, tüm süreç PS, AI ve diğer grafik görüntü düzenleyicileri kullanmaz, sadece bir kod satırı yazın ve elle çizin.
Kodu dönüştürdükten sonra taze bir meyve olur:
Veya Rokoko tarzında klasik bir kadının portresini çizin:
Ayrıca Flaman Barok tarzında, orta çağ çileciliğiyle dolu insan portreleri de var:
Pembe ışık altında elbiseli bu kız gibi modern olanlar da var:
Ve 1950'lerin atmosferiyle dolu retro tarzı karakter posterleri:
Eğriler, ışık ve gölgeler, gradyanlar, her öğe oldukça karmaşıktır.
Ayrıca, oluşturma sürecinde SVG kullanılmaz, yalnızca Atom metin düzenleyici ve Chrome geliştirici araçları kullanılır.
Diğer bir deyişle, ekrandaki her eğim ve gradyan, her vurgu ve gölge, her saç ve kirpik, her dantel ve kıvrım, sıfırdan çıkarılmış kod satırlarıdır!
Böylesine bir hassasiyet ve yaratıcılıkla, güzel sanatlar okuyan netizenler "resim yapmayı öğrenmek kod yazmaktan daha iyidir" diye iç geçirdiler ve bilgisayar öğrenen öğrenciler "başka biri böyle bir sanatı yazıyor ve ders kitabımı açmanın yanlış yolu olmalı" diye düşünüyorlar.
Gerçekten disiplinler arası patron.
Bu proje ayrıca bir kez GitHub Trending sıralamasında ikinci sırada yer aldı:
Ve Konular birçok kullanıcı tarafından tapılıyor: harika! ibadet! harika!
Yazarları, Bay Area'nın ön uç tanrısı Bayan Diana Smith ve şu anda bir işletme ve yazılım geliştiricisi olan Atlassian'ın kıdemli web geliştiricisi.
Çizim süreci
Diana, CSS'ye adanmış bir web sitesi olan CSS Tricks hakkında ayrıntılı bir eğitim yazdı.
Böyle bir rakamı kaç adımda çizebilirim?
CSS kullanılmıyorsa, bu özel grafik genellikle doğrudan gömülür.
CSS kullanıyorsanız, siyah bir dikdörtgenle başlayın ve her iki tarafa da iki tane ekleyin
Beyaz arka plan rengiyle eşleşen kenarlık yarıçapı öğesi.
Önce siyah bir dikdörtgen çizin ve ardından her iki tarafı yaylarla kapatın. Temel şekle sahip olduğunuzda, bir sonraki adım ona bir degrade arka plan eklemektir. Ama onu bir dikdörtgenle doldurursanız, elde edeceğiniz etki şudur:
Diana'nın yöntemi, dikdörtgeni korurken iki kavisli div eklemek ve girintili kısmı doldurmaktır.
Nihai eksiksiz kod şudur:
div { genişlik: 500px; yükseklik: 350px; arka plan: # 000; konum: göreceli; :: sonra, :: önce { genişlik:% 20; yükseklik:% 100; konum: mutlak; üst: 0; z-endeksi: 2; içerik: ""; arka plan: # 1e5799; arkaplan: -moz-doğrusal gradyan (üst, # 1e5799% 0, # 7db9e8% 100); arkaplan: -webkit-doğrusal gradyan (üst, # 1e5799% 0, # 7db9e8% 100); arka plan: doğrusal gradyan (aşağıya, # 1e5799% 0, # 7db9e8% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 1e5799', endColorstr = '# 7db9e8', GradientType = 0); } ::sonra{ kenarlık yarıçapı:% 100% 0% 0% 100; sağ: 0; } ::önce{ kenarlık yarıçapı: 0% 100% 1000; sol: 0; } } vücut{ arka plan: # 1e5799; arkaplan: -moz-doğrusal gradyan (üst, # 1e5799% 0, # 7db9e8% 100); arkaplan: -webkit-doğrusal gradyan (üst, # 1e5799% 0, # 7db9e8% 100); arka plan: doğrusal gradyan (aşağıya, # 1e5799% 0, # 7db9e8% 100); filtre: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 1e5799', endColorstr = '# 7db9e8', GradientType = 0); }CSS stilinin gerçek çalışma efektini tamamlamak için buna da gidebilirsiniz:
https://codepen.io/jean-jordan/pen/KeKaBw
Boyadığımız portre bir insan boynuna benzemiyor mu? Tamam, portre resmine geri dönelim. Diana benzer bir işlemle bir karakterin boynunu çiziyor.
Yukarıdaki resimde Diana'nın nasıl yavaş yavaş şeklini değiştirdiğini ve sonunda figürün boynunu nasıl aldığını gördük.
Ancak sadece çeşitli geometrik şekiller çizmek sanat eseri oluşturmaz Diana çiziminde 5 önemli CSS özelliğini özetledi.
1, Sınır yarıçapı (Sınır-yarıçap)
Kenarlık yarıçapı, dikdörtgen geçişinin köşelerini daha doğal hale getirmektir. Çoğu web geliştiricisi için, farklı yarıçap değerlerini ayarlamak için yalnızca bir parametre border-radius gerekir.
sınır yarıçapı: 15px 10px 40px 30px / 40px 10px 15px 30px;
2, Kutu gölgesi (Kutu gölgesi)
Birden çok kutu gölgesini katmanlamak, derinliği artırmanın en iyi yollarından biridir. Kutu gölgesi, html kabının kenarına ve ayrıca kenarlık yarıçapı ile tanımlanan kenar boyunca yapıştırılacaktır.
kutu-gölge: 6px -11px 20px 1px kırmızı, -15px -15px 5px -10px mavi, ek 5px 5px 35px 10px yeşil;
Geliştirici, bulanıklık yarıçapını ve gölgenin içe veya dışa doğru genişleyeceğini belirleyebilir.
3. Deformasyon (Dönüştür)
Deformasyonun ana yolları şunlardır: döndürme (döndürme), yakınlaştırma (ölçekleme) ve eğme (eğme)
dönüştürme: döndürme (-45deg) dönüştürme: ölçek (0.7, 1.3) dönüşümü: eğriltme (25deg, 30deg);
Ek olarak, nesnenin uzak ve yakın görsel bir efekt üretmesine veya sadece bir yamuk çizmesine izin veren perspektif vardır.
dönüştürme: perspektif (10px) rotateY (5deg);
4. Doğrusal gradyan (Doğrusal gradyan) ve Radyal gradyan (Radyal gradyan)
Doğrusal gradyan, bir yönde gradyan efektini tanımlamak için kullanılır ve dairelerin ve elipslerin gradyan efektini tanımlamak için radyal gradyan kullanılır.
arka plan resmi: doğrusal gradyan (0deg, mavi, şeffaf% 60), radyal gradyan (% 70% 30'da daire, mor,% 40 şeffaf);
5. Çağlayan (Taşma)
İstifleme, çok sayıda dağınık öğeyi düzenli bir pakete doldurmanın bir yoludur ve bu da bazı ilginç şekiller oluşturabilir. Kenarı örtmek için, deforme olmuş parça temelinde gizli parametreyi kullanın.
taşma: gizli;
Yukarıdaki 5 element vazgeçilmezdir ve bunlardan herhangi biri tuhaf etkiler yaratacaktır.
Ama öyle olsa bile, Picasso'nun eserlerine bakıyormuş gibi soyut sanatın güzelliğine sahiptir.
Yalnızca Chrome'da çalışır
Ancak, bu tamamen kişisel bir sanatsal yaratım olduğu için, Bayan Diana, tarayıcı uyumluluğunu önemsemiyor.
Bu nedenle, bu kodlar Chrome'da mükemmel bir şekilde görüntülenebilir, ancak başka tarayıcılarda açılırlarsa farklı etkileri olabilir.
Örneğin, MAC'deki Safari tarayıcısı açıldığında kızın gözleri açıktır:
Omuzlardaki vurgular büyük bir daireye dönüştü:
Göğsündeki elbiseye de mürekkep sıçradı:
Erken Chrome ile açarsanız, baş ve vücut ayrılığının korkutucu bir etkisi olacaktır:
İlk Opera tarayıcısı, açtıktan sonra yüz kare şeklindedir:
Windows 7'de IE 6'dan IE 11'e ekran şu şekildedir:
Kalın çizgiler, hatta biraz soyut sanat.
Aynısı erken IE için de geçerlidir ve Mac'teki ile aynıdır. Bu, IE 5.1.7'nin etkisidir:
Birisi denedi ve Windows 98 sisteminin IE 7 tarayıcısında açtı ve çok pikselli bir görünüme dönüştü:
En korkutucu olan şey, Samsung telefonlarında gece modunun açık olmasıdır:
Yarış bile değişti!
Diğer resimler başka bir tarayıcıda açıldığında daha korkunç.
Kızım, sütyenindeki çelik halka çıktı!
Çekiliş tasması şeffaf ve parlak hale geldi ve yakadaki dantel, sanki kaçış zamanından kalma bir portreymiş gibi, basitçe kırıldı.
Son olarak, iPhone'unuza Chrome yüklediyseniz, Safari efektini de gösterecektir.Tam etkiyi görmek istiyorsanız, lütfen Android telefonunuzda veya bilgisayarınızda Chrome'da açın.
Bu nedenle, birçok netizen bu resimlerin bir tarayıcı test projesi olarak kullanılabileceğini düşünüyor ve bir denemede çekirdeğin kime ait olduğunu öğrenebilirsiniz.
Ters çizim
CSS öğrenmek çok mu zor? Önemli değil, kodu resme dönüştüremesek de, resmi bir koda dönüştürebiliriz.
Evet öyle ASCII sanatı DOS dönemi gibi erken bir tarihte, bazı insanlar resimleri görüntülemek için komut satırı arayüzünü kullandılar. Bugüne kadar popüler bir internet kültürü haline geldi.
Dünyaca ünlü tabloları çizmek için tek renkli karakterlerin kullanılması yeni bir şey değil. Yakın zamanda başka bir kod çiftçisi yeni bir proje geliştirdi Primg , Böylece herhangi bir resim asal sayılarla temsil edilebilir.
Örneğin, Monalisa 30.000 basamaklı bir asal sayı ikili ile çizilebilir.
Portal:
Yazarın GitHub'ı: https://github.com/cyanharlow
Yazar blog ana sayfası: https://diana-adrianne.com/
Öğretici: https://css-tricks.com/solving-lifes-problems-with-css/
Rasgele ASCII sanatı oluşturmak için asal sayıları kullanın: https://github.com/geonnave/primg
-Bitiş-
Tsinghua-Qingdao Veri Bilimi Enstitüsü'nün resmi WeChat kamu platformunu takip edin " THU Veri Pastası "Ve kız kardeş numarası" Veri Pastası THU "Daha fazla ders avantajı ve kaliteli içerik elde edin.
