CSS box-shadow trick!
box-shadow:0 120px 0 $eggshell, 120px 0 0 $eggshell,80px 40px 0 $eggshell, 0 80px 0 $eggshell,80px 0 0 $eggshell, 40px 80px 0 $eggshell,40px 40px 0 $eggshell, 0 40px 0 $eggshell, 40px 0 0 $eggshell;
$eggshell, is a SASS way of declaring variables, $eggshell is assigned to the color #F3E9D2.
2. Using box-shadow as shadow and inset-shadow, the most common usage.
box-shadow:inset 10px 10px 0 rgba(#523E6B, 0.2),10px 10px 0 rgba(#523E6B, 0.2);
3. Using box-shadow to make gradient background.
In this pen/piece/work, I used
radial-gradient to draw the Maki(left),
linear-gradient to draw the lines on the tuna, salmon sushi and yellowtail sushi. (center)
box-shadow for seaweed strip on tamago sushi and shadows for the board, green tea cup.
Check this out on Codepen: http://codepen.io/sashatran/full/bgZVdm/
Speed code on Youtube: https://www.youtube.com/watch?v=UzK9Ov3sKh8
You can draw rectangles, squares and circle easily with CSS. But how about a trapezium-like coffee cup shape? This is how you do it.
border-top: 250px solid salmon;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
You can play around with the figures, to create different sizes or different shapes.
I am inspired by graphic, visual design, and cute things. But unfortunately, I am not talented in drawing by hand. I enjoy looking at other designers’ illustrations on Dribbble, and was envious that they could draw such cute and intricate illustrations that are so inviting at the same time.