If you look closely you’ll notice a dot pattern in the water similar to an old-school comic strip. What a great way to utilize SCSS color functions! I love this concept and would love to see more people use it in their work. Then check out the results as I change $sun1 to orange, dodgerblue, and darkgray. On the left is Ben’s original color and four of the colors that are based on it. If we were to use -60deg we’d get a green color.īen is using this function and many other SCSS/Sass color functions to create his palette from the color you choose. The result is more of a ‘blue’ rather than teal. We can make a new color by increasing the teal’s hue by 60deg. Hue is a value between 0 and 360 as you can see in the color wheel below. From that seed, Ben shifts the hue, changes the saturation, brightness, and opacity to create the rest of the colors.Īs an example, let’s set the variable $start to aqua then use the adjust-hue function to make a new color. What’s cool is that by using SCSS color functions, every other color is based on this one color. Instead of white between the colors, he makes the gap transparent and changes the color to add depth. Ben’s using box-shadow here in a more complex way than he did for the King’s hair.
The eyelashes, eyebrows, face fuzz, and head hair all have different properties and make it feel more realistic. The perfectly detailed hair really makes this piece. Ben used the same technique in the next piece for the center of the lemons. If you look close you can see that the iris is a bunch of rounded squares rotated around the center point.
#Simple css drawing skin
All the subtle touches he added to this to make the skin feel more realistic are just fantastic. This was the first piece I saw of Bens, and it’s still probably my favorite. Pretty awesome.Ĭheck out the video timelapse for this one to watch it all come together. When you hover over the card it does a nice little spin and light Īnd you might not believe it, but the back of the card is just a single element. The key for crisp lines? Setting the third property, blur-radius, to 0. In my version, I changed the $blue to different colors to show us how it’s working. Ben alternates blue and white, increasing the offset each time to space them out. Let’s check it out by messing with it.īy using commas you can put multiple box-shadows on a single element. Ben is using it for WAY more creative purposes in his work! The hair on the king is actually multiple layers of box-shadow. I’ve mainly used the box-shadow element for making soft blurry shadows under cards and other elements. Let’s see how he used this technique to make the hair of the King of Hearts. Then most of the actual drawing uses background: linear-gradient and/or box-shadow.īox-shadow and linear-gradient are extra useful because they allow for multiple values separated by commas. He shapes the pieces with border-radius and various transforms, and sizes them with rems. Then he moves them into place by using transform: translate3d(). Great technique! Drawing Techniquesīen sets the elements he’s drawing with to position: absolute top: 0 left: 0 so that they leave the document flow. So if we base everything in rems, they’re all relative to the same value. The rem unit is relative to the font-size of the root element. The vmin unit responds to the viewport’s smallest side, so it will decrease if the screen gets smaller. The fact that all of these pieces are responsive is pretty dang neat. Ben says, “Safari in particular gets very confused with pseudo-elements and z positioning.” Responsive rems You might think this makes it harder to keep track of, but Ben leaves comments by the major pieces and that makes it easier to sort through.Ī great tip from Ben for anyone trying CSS illustration: Start with the background and work forward instead of using z-index or translateZ. This way he doesn’t have to name things or change his HTML. There he doesn’t need to worry about naming each bit, because he’s using the nth-of-type selector.
So how does he style all these elements if they don’t have classes? Styling with nth-of-typeīen creates a bunch of elements in his HTML and then moves to his CSS. For your own mental model you can think of them as behaving just like divs. They’re custom elements so there’s no default CSS to battle against.
#Simple css drawing code
Ben explains that he’s obsessed with small code and likes the appearance of the elements.
0 kommentar(er)
