![]() ![]() This emoji was used for the slides during my TalkCSS talk. The tears are a single div making use of this tool. I wanted to experiment how i far i can go with this new treasure i found aka CSS Fancy Borders. If you are interested, watch the recording of my talk here 5. Although no one probably was aware that i totally messed up my script, i received messages of encouragement from the audience afterwards and have also been recognised by a couple of people during other socialising events that i went to shortly after. To my delight, the audience seemed to receive the talk well. I included the snail and sunflower created separately before into the drawing for more comical effect, plus the sunflower appeared in the last anime ending in the second season of the show, and i liked it. Instantly i could figure out the parts of the Mob drawing that i was scratching my head over - eg his feet - and included this detail swiftly in the talk. The event saw around 20+ tech people with various levels of experience in the industry gathering together in the charming office of Rakuten Singapore, and needless to say i was scared sh*tless because my talk was not intended to be technical at all.Īlthough i had planned to not include any technical details in the talk, halfway through the preparation i stumbled upon Fancy CSS Borders by 9elements and immediately realised how much of a life saver this would be to me. Compare to this, giving lessons as a Teaching Assistant in university was a different level of exposure because the content was already decided. I have never ever given a talk in front of total strangers who are out of school and in the industry. I started on Mob shortly after my own self portrait, but left it sleeping for quite some time.Īfter attending JSCon Asia in June and aware that my senior at work Gao Wei has connections with organisers of TalkCSS (i did not realise she was a co-organiser for TalkCSS), i decided to give a talk about drawing Mob and anime characters in general as an excuse to finish up Mob’s drawing - yes, i do seek out events as an excuse to go berserk quite frequently. I thought, why don’t i try to draw this guy? His design looks simple enough. The story of drawing Mob dates back to a few months earlier shortly after i saw the Pure CSS Francine portrait and started to watch Mob Psycho 100. July 2019 - TalkCSS #41 and Kageyama Shigeo aka Mob The shell on the snail’s back took me a real long time. Some attempts to create real-life objects. May 2019 - Maple leaf + Snail + sunflower Because the functionality is more important and because it would be a pain to make him into a beauty, i left him as a simple and hilarious dancer instead (sorry TD). I like to call him Tiny Dancer - after the Elton John’s song, as i wanted to theme the talk Hooks + Music.Īs you can see, asthetically there is not much to it. However i was asked if i wanted to demo something about React Hooks, and an opportunity presented itself. I actually started this as an entry for the JSConf.Asia animations vying for a free ticket, but lost interest half way and went for a kaleidoscope animation instead. ![]() You can see that the elements used are very basic CSS tricks: the face and each of the glasses frames is a single div with uniform border radii, while the hair locks are div with single borders, a common trick to create triangles. Draw a heart shape, then a pair of wings, then combine and make it a Cupid… If you would like some code snippets for some inspiration (i hope it does inspire) feel free to check out my post on drawing a strawberryīelow is the timeline of the drawings i have created, all of which are done in CSS and HTML only - meaning no preprocessors like SASS or SCSS, and of course no use of javascript. And the easiest way to figure that out is, flex our keyboard muscles and create something! Anything at all. I kept pondering how i could achieve something similar. This got me obsessed for as long as a few months. “CSS can do this?” was what crossed my mind. Not that i am an expert at drawing with CSS, but just as with any other craft i had to try drawing quite a few pieces before being able to draw this one, starting with my most primitive knowledge of creating shapes with CSS to form a face (which was actually based on my own, more on that later).īefore any of the portraits began, i stumbled on this pure CSS Francine by Diana Smith some time at the beginning of 2019. So, someone asked me on Twitter how i started drawing this portrait of Yosano Akiko as portrayed in the Japanese anime Bungou Stray Dogs. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |