![]() If you're not sure how CSS positions work, try out this article: To make good CSS art, you must understand positioning very well. This is because they are next each other, not on top of each other Full HTML code: Positioning Notice how the ghost and legs layers are under each other in the code. Any layer that is on top of another layer will be a div inside the opening and closing tags of the layer below it.Įxample: the "circle" layer is on top of the "canva" layer and the "ghost" and "legs" layers are on top of the "circle" layer but next to each other, so the HTML code will be as follows: Remember the way we split our sketch to layers? those layers are our divs. (See the eyes layer, there is a pupil inside the eye that I didn't name because it will be easier to create using eyes:before or eyes:after instead of having it on a div of its own.) if something is too simple to have its own layer, I don't name it.Any two layers that are next to each other (not stacked on top of each other) I separate them by adding each one in its own "bubble" (look at ghost and legs layers, the ghost layer is the main body of the ghost and the legs layer is the ghost's legs, they are next to each other they don't overlap, so I added each one in a bubble to make that clear.).A "circle" layer behind the main CSS art to make it pop.There is no right or wrong way of layering your CSS art. ![]() I know it looks ugly at the end of the day this is just an asset to help you build the actual thing. I like to simply add arrows on top of the sketch with the name of the layer, like this: You can think of every part of your sketch as a sticker that goes on top other parts (stickers).īasically, it's planning how your HTML div tags will be structured to fit your needs for this CSS art. I know I didn't do the little crown in the CSS art, I decided against it because I didn't like how it looked :/ Splitting your Sketch into layersĬongrats! You got your basic sketch! Now, it's time to plan how your sketch will be split into layers (divs). The most important thing about this stage is getting the structure and lines of your art, the colors come second. What you can do is pick colors during coding with an online color picker. If you're using pen and paper, color picking will be more complicated. It took me more time to pick out the colors because I overthink way too much. The lines aren't perfect, but I could make out what I want to draw from this sketch. It took me 10 mins to make without colors. However, you can use pen and paper for sketching! You don't have to be an artist to sketch just draw roughly how you want your art to look. The design is given to them by the designers and they implement that design. Developers in their day-to-day jobs don't come up with designs on the spot while coding. ![]() Why? Simply because it's so hard to code something that you can't see. Do not jump straight to code if you have an idea. In that case, friends come to the rescue! Don't be afraid to ask your friends about what you should do, and they could give you some solid ideas! Sketching I do get stuck about making decisions on what I should implement with CSS. So, you can literally get inspiration from everyday things and that's the beauty of art, right? Other times, like in this egg CSS art, I got my inspiration simply because mum was making Eggs for herself and I thought "cool, I'll draw this with a face on it and make it with CSS". I usually search for art and doodles and see if I like something, I don't copy anything and draw things in my own style, I just get inspiration from Pinterest.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |