Gerçek program hanımefendi, saf kodla Barok portreler çizmeye cesaret
"Duymuş olabilirsiniz" ASCII sanatı "Bu, kodla oluşturulmuş bir resim. Bu terimi duymamış olsanız bile, uzun zaman önce kullanmış olmalısınız. Hiç şaşırtıcı değil. Emoji'nin mevcut olmadığı çağda, onu kullanmış olmalısınız: -D, $ _ $, ^ (oo) ^ ve benzerleri. Doğrudan ASCII koduyla grafikler oluşturun Bu tür bir sanatın temel formudur ve bazı insanlar onu bir çiçek ya da ayı gibi daha karmaşık bir görünüme kavuşturmak için kullanırlar.Elbette, aşağıdaki resmi yazarsam, hemen anlayacaksınız, oh
Gerçekten, çocukluğumdan beri benzer şeyler gördüm ve bu şaşırtıcı değil.
Geçen yıl Temmuz ayında, Çinli sanatçı Qiu Zhijie'nin himayesindeki Microsoft'un robot Xiaoice da " Xia Yubing "Alternatif Dünyalar" sergisinde Merkez Güzel Sanatlar Akademisi Güzel Sanatlar Müzesi'nde düzenlenen "Sahte Mezuniyet Sergisi" nin adı, gerçek ortaya çıkmadan önce bu oldukça yetenekli resimlerin 18 yaşındaki bir dahi tarafından yapıldığını düşündü. Kız eli.
Yukarıdaki rezervlerle şunu görebilirsiniz " Kod boyama "O zamanlar ciddiye almadım. Normal olduğunu düşündüm. Sonuçta önce pek çok vaka var ama size söylemek istediğim bu sefer farklı. Bu yazıda tanıtılacak yazar gerçek bir biyolojik insan. İnsanlık Ve el yazısıyla yazılmış Binlerce satır kod İşleri yukarıdaki ASCII kodundaki Mona Lisa'nın pürüzlülüğünü değil, son derece yüksek kalitede tamamlamak. Söyleyecek fazla bir şey yok, resim ilk.
Bu reklam afişi gibi meyve, henüz çok gerçekçi görünmese de ışık ve renk dönüşümü açısından oldukça zengin, kodu kontrol ettim ve kullandım. Sırf 427 Sadece yaz, her satır çağrılır Diana Smith Bayan Sister teker teker bayılttı Bunu görünce, aniden biraz huşu içinde mi oldu?
Bayan kardeş uzun Bu onun GitHub'daki avatarı. Bence güzel. Gerçek kimliği Bay Area'da yaşayan ve çalışan bir UI mühendisi ve ayrıca GitHub ve Tweet'te birçoğu var. Dikkat Teknoloji harika. Genellikle kendiminkini paylaşmak isterim JavaScript geliştirme ile CSS geliştirme deneyimi Son zamanlarda html'de görüntülenen bu resim grubunun kod ve basamaklı stil sayfalarıyla paylaşılması çevrede hararetli tartışmalara neden oldu.Paylaşmayı seven her programcı gibi Diana da sadece güzel fotoğraflar yayınlamıyor, aynı zamanda oldukça En önemli tuzakları takip etmek isteyenlere hatırlatmak için bazı ayrıntılı yönergeler verdim.
Meyvenin yanı sıra diğer dört resmin tamamı kadın büstleri, modernler ve eski resimlerdir.Farklı görünümleri vardır, her biri büyüleyici ve çekicidir.Genç hanımın sanatını da görebilirsiniz. Eğitim Oldukça iyi.
Bu dört resmin kaynak kodu yüzler ile binlerce satır arasında değişmektedir. En sonuncusu siyah dantel elbise denilen aristokrat kadındır. Saf CSS Dantel , Geçen yıl Kasım ayı ortalarında yüklendi ve aqua blue elbiseli sarışın kadına deniyor Saf CSS Francine Eylül 2018'de yayınlandıktan sonra, bazı teknik topluluklarda övgüler aldı ve analiz edildi. Örneğin, ünlü teknoloji blog yazarı Andy Baio tweet'i aradı, Francine sadece doğrudan görülmemeli, kodun güzelliğine de bakmalısınız . Karmaşık kod katmanlarına sahiptir, bu katmanların elle düzenlemek ve bir araya getirmek için çok zaman harcaması gerekir, bir parametre dikkatsizdir, gösterecektir Garip etki .
Diana, kılavuzda yazarın başarısını veya başarısızlığını etkileyecek beş faktörü listelemiştir. Sınır yarıçapı (Sınır-yarıçap), Kutu gölgesi (Kutu gölgesi), dinamik (Dönüştür), Doğrusal / radyal gradyan (Doğrusal gradyan, radyal gradyan), taşma (Taşma).
Çoğu web geliştirme amacı için, border yarıçapının en büyük kullanımı, Yuvarlatılmış köşeler alın , Bir düğme oluşturmak gibi, ancak özel dairesel öğe, yüzler veya boyun gibi organik nesneleri simüle etmek için kullanılabileceği anlamına gelir. Francien'in boynu bir dikdörtgenden başladı ve yarıçapı ayarlayarak yavaş yavaş yaklaştı.
Adından da anlaşılacağı gibi kutu gölgeleri kutular içindir Gölge ekle , Resimleri yalnızca daha gerçek ve doğal hale getirmekle kalmaz, aynı zamanda Derinliği artırın En iyi yol.
Ek olarak, öğeleri sahip olacak şekilde değiştirin. Hareket duygusu veya Perspektif Döndürme, hareket, ölçekleme ve distorsiyon gibi dinamik özelliklerin kullanılması gerekir. Söylemeye gerek yok, gradyan, şeridin doğal bir geçiş sunmasını sağlayan bir araçtır. Ve taşma özellikleri, İlginç şekiller oluşturmak için çok sayıda dağınık öğeyi temiz bir çantaya koyun .
Yukarıdaki terimler, PS veya AI gibi bir yazılım kullandığınızda kulağa aynı geliyordu, ancak burada, Diana klavyeden bir sayı girerek tüm parametrelerde hata ayıklandı, hatta ilgiyle verdi. Özelliklerin uygunsuz kullanımının neden olabileceği "felaketi" gösterdik. Aşağıdaki beş fotoğraf Eksik sınır yarıçapı Francine, Eksik kutu gölgesi Francine, Eksik dinamikler Francine, Eksik gradyan Francine ve Eksik taşma Francine.
Kabul ediliyor css-tricks web sitesi Diana röportajda günlük işlerinin çoğunun uzun ve karmaşık sınırlamaları olan JavaScript etrafında döndüğünden bahsetti. Karşılaştırıldığında, kullanın html CSS Süper verimli ve özlü bir şey haline geldi. Birkaç kısıtlama ile bazı efektler elde edebilir. Yardım edemezsiniz, ancak bir teknoloji ustası olduğunuzu hissedersiniz, bu yüzden boyama için binlerce satır harcamaktan çekinmezsiniz. Ne resim.
Yaratıcı sonsuz deformasyonun tadını çıkarmakla kalmadı, resimleri izleyenler bile yaratıcı bir şekilde izleyebilirler.Örnek olarak Francine'i ele alalım.Bu resim tarayıcıların farklı versiyonlarına yerleştirilirse oluşturulabilir. Farklı stil efektlerinden:
Win 98'de şöyle görünüyor:
Vox web sitesi ürün ekibinin bir üyesi olan Guillermo Esteves, onu Windows 7 çalıştıran bir bilgisayarda 6.0'dan 11.0'a kadar olan IE sürümleriyle kontrol etti. Temelde , biraz Hollanda tarzı bir hareket mi De Stijl? hissetmek:
Chrome 9, Fovizmdir:
Opera'nın eski versiyonunda biraz ayrılıkçı göz kamaştırıcı gözler vardı:
Mac'te IE 5.1.7 kullanmak, bu soyut dönüşüm yarışmasını uç noktalara taşıdı:
Elbette, koşullara sahipseniz, resmin yerleştirilmesi gerekmesi koşuluyla, herhangi bir harika değişiklik yapıp yapamayacağını görmek için farklı bir tarayıcıyla da çalıştırabilirsiniz. Kaynak kod sayfası (Bunu Diana'nın GitHub sayfasında bulabilirsiniz.) Bu makalede zaten yaygın bir resim formatına dönüştürdüyseniz, değişmeyecek.
Referanslar
https: // www .thiscolossal .com / 2019/11 / css-portraits-diana-smith
https: // github .com / cyanharlow
https: // www .vox .com / 2018/5/3/1 73 09078 / dijital-sanat-diana-a-smith-francine-kodlu-tarayıcı-sanatı
https: // designta xi .com / news / 403658 / UI-Engineer-Behind-Popular-CSS-Paintings-Shows-You-How-to-Your-Own
https: // designta xi .com / haberler / 3994 79 / Çarpıcı-Tablolar-Geliştirilmiş-Tamamen HTML-CSS-İle-İnternet-Hayran Bıraktı
https: // diana-adrianne .com / how /? utm_campaign = DesignTAXIutm_content = DesignTAXIutm_medium = DesignTAXIutm_source = DesignTAXIutm_term = DesignTAXI
https: // css-hileler .com / css-ile-yaşam-problemlerini-çözme /
Bu makale, izniyle çoğaltılmıştır.
Bilim ve Sanat Araştırma Merkezi
(Kimlik: Art_And_Science)
Editör: Dannis
