This is a painting that I produced for Volta’s homepage. The customer provided a concept – a dragon rider leading his army towards the viewer – and I took it on, first changing the male rider to a female.
CSS3 elevates the feasibility of what we can build on websites using just HTML and CSS. You can find amazing examples that we have previously featured. But let’s not get too far ahead of ourselves, a complicated design will need codes that may give you a headache.
Instead, we are going to create something simple to help you understand shapes and positioning with CSS first, before venturing to more advanced designs. Since Valentine’s day is just around the corner, let’s create a heart shape using HTML and CSS.
Basically, we can create a new shape by joining one or more basic shapes, like rectangles and circles. If we examine a heart shape we can find that it is made up of two circles and a rectangle combined. HTML elements are essentially a square or rectangle. Thanks to CSS3 border radius we can transform a rectangle into a circle easily.
Begin by adding a <div> element as the foundation of our heart shape.
Then, we make it a square by specifying the width and the height equally. Choose a background color you like.
Rather than add new elements, we will make use of the pseudo-elements, :before and :after. We first set the :before pseudo-elements as our first circle. We make it a square with equal size on the width and height just like we did with the div. We then transform it into a circle by giving it border-radius of 50% and put it on the left side of the square.
Notice that we now set the alpha channel of the rgba(250,184,66, 1) in the background to 1 to remove the transparency. Now this is what our Heart looks.
Now that we have a perfect heart shape, we can replace the background to another color (e.g. pink or red) with ease. The only downside here is that we could not add a border to the shape due to the stacked elements. Adding a border line will make the heart look weird.
With CSS3 creating a shape like a Heart shape is now easily doable. The border-radius property allows us to make elements or even a pseudo-element into a circle. With CSS3 transformation, we can rotate or move the coordinates of the object with ease.
You are limited only by your creativity and imagination!
With all the flat style madness going on in the design community, we can quickly see how this is the direction of the future. Whether it’s icon design, mobile design, or web design, beautiful playful colors, lines and shapes are creating a new world for us to play in. Having said that, the current tutorial […]
Perth-based Poppy Lissiman has been making her clientele happy for some time with her super-bold and bright clutch creations. Relying heavily on striking motifs—eyeballs, dollar signs, lips and love-hearts—and plenty of metallics and sparkles, Lissiman……
01. Pick your inspiration Designing a tattoo always begins with a premise, so the first thing I do is sift through some Celtic mythology to get my mind going. I consider designs based on The Morrigan and Cú Chulainn, but it’s the Four Treasures of the Tuatha Dé Danann that seems most fit for body art.
Getting smooth, flattering skin isn’t hard at all using Curves in Photoshop. Begin with a simple palette: light peach for your base colour, neutral blue for your shadow, and black, which will be used to intensify blue shadows.
ImagineFX, the number one magazine for digital artists, is now on sale, and Fred Augis’ bright, confident cover image is just a taster of what’s inside this month’s sci-fi art special. Want to know more?
youtube: yXtSnq-Nvro If you thought GIFs were just another annoying internet trend that will disappear in a year or so, you’d be wrong. There have been a number of artistic projects concerning animated GIFs, with photographers, illustrators and graphic designers all turning their hand to the craft.
Celebrated designers (and brothers) Ronan and Erwan Bouroullec have been working side by side since 1999 (when they launched their own eponymous design firm), collaborating with many of the top design manufacturers on projects ranging from small……