Create a Vibrant Digital Poster Design with CSS3

Read the full post

Add to Flipboard Magazine.

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

View the CSS poster demo

The Circlicious poster art makes use of plenty of circular geometric shapes and features lots of transparency to add multiple levels to the design, giving the design that bright and crisp feel of typical vector artworks. Being a design that makes use of CSS3 properties, it’s only suited to the modern browsers of Firefox, Safari and Chrome.

View the CSS poster demo

Firefox, Safari & Chrome = Win. Opera… Meh. Internet Explorer… I wouldn’t even bother.

Creating the idea in Illustrator

The initial idea and design concept was first laid out in Illustrator as reference for the HTML/CSS stages later. Multiple circles overlay with varying levels of transparency, allowing the colours to mix and change.

The slab-serif Chunk font is one that’s freely available for web use, so it was chosen to form the typographic part of the design.

A Clipping Mask tidied up the final design concept, making it ready for colour samples and measurements to be taken.

The digital poster in HTML

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Circlicious CSS Poster</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

	<div id="poster">
		<h1>Circl<br />icious</h1>
			<li>Large blue circle</li>
			<li>Large pink circle</li>
			<li>Large green circle</li>
			<li>Medium Yellow circle</li>
			<li>Medium green circle</li>
			<li>Medium red circle</li>
			<li>Medium purple circle</li>
			<li>Small red circle</li>
			<li>Small orange circle</li>

A typical HTML5 document is laid out complete with Doctype and link to the CSS stylesheet. A <div> with ID of “poster” contains the contents and acts as the overall frame of the design. The typographic part of the design is placed first as a <h1>, followed by a <ul> with multiple <li> elements to create the array of circles. Each circle is given a brief description inside the list element, allowing the markup to relate to the overall appearance of the design the best it can.

Styling with CSS

body, div, h1, ul, li {
	margin: 0; padding: 0;

body {
	background: #eee;

#poster {
	width: 895px; height: 1266px; margin: 100px auto;
	position: relative;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FEEADE), to(#FEF8F5));
	background-image: -moz-linear-gradient(100% 50% 90deg,#FEEADE, #FEF8F5); 

The CSS document begins with a reset to remove any default styling from browsers, then gets to work laying out the basic framing of the poster. The #poster div is given specific dimensions to create the portrait page layout, and moved into place centrally with margin:100px auto;. Being a containing element, position:relative; is added to allow child elements to be positioned absolutely at the later stage. The gradient background is then generated with CSS3 gradients. Two different declarations are need for both Webkit and Mozilla, which both require different syntax. The CSS Gradient Generator comes in handy here.

#poster ul {
	width: 875px; height: 1246px;
	border: 10px solid rgba(0,174,239,0.2);
	position: absolute; list-style: none;

The #poster ul is then styled with the same dimensions, and is given the 10px blue border. The rgba value allows the colour to be specified in RGB format, with the A representing an alpha level to reproduce the transparency effect. This border was originally added to the #poster container, but in order to tweak it to sit inside the dimensions of the page, rather than on the outside, it needed to be added to a child element.

#poster ul li {
	text-indent: -9999px; position: absolute;
	-moz-border-radius: 50%;
	-webkit-border-radius: 390px;
	border-radius: 390px;

Each list item is then given some generic styling, starting with a text-indent:-9999px; to shift the text from within the <li> elements completely off the screen. position:absolute; is set, which will then be tweaked on an individual basis to move each circle into place on the design. To convert each list item into a circle, the border-radius property comes in handy. Setting the radius to 50% works perfectly in Firefox, but for Webkit browsers a specific figure is required. The largest circle is 780px, so half this figure is 390px. Although saying that, any large number would have been sufficient, as once the radius reaches a perfect circle the radius amount no longer has an affect.

#poster ul li:nth-child(1) {
	width: 780px; height: 780px;
	bottom: -280px; left: -220px;
	background-color: rgba(0,174,239,0.5);

Because we’ve already left IE way behind by using CSS3 goodies such as border-radius etc, more posh CSS3 selectors can be used to target each list element. The :nth-child pseudo selector comes in handy to target the lists based on their number, without the need of any classes in the HTML. The first list item represents the large blue circle, so the size is measured from the design concept and added to the CSS. The circle’s position is also measured according to the page boundaries and added to the CSS. position:absolute; was added to the overall #poster ul li rule, so the actual positioning can be added directly to each item. Finally the color is added in rgba format as a background-color.


With absolute positioning being used to move the circle outside of the page boundaries it now needs to be clipped down similar to how the clipping mask in the design concept was used. overflow:hidden; doesn’t do the job, but the CSS clip property works wonders. The clip is added to the parent #poster ul, creating a rectangle mask at the exact dimensions of the poster. Anything beyond this rectangular area is clipped.

#poster ul li:nth-child(2) {
	width: 635px; height: 635px;
	bottom: -120px; right: -80px;
	background-color: rgba(236,0,140,0.3);

The second circle is then styled up in the same way. Width and height is set and the circle is moved into place with positioning. When setting the background colour, it’s important to remember to sample the colour from the design concept at 100% opacity, so when the rgba transparency comes into play the colour will then match.

#poster ul li:nth-child(4) {
	width: 260px; height: 260px;
	top: 400px; right: 120px;
	background-color: rgba(255,242,0,0.5);
#poster ul li:nth-child(5) {
	width: 350px; height: 350px;
	top: 290px; right: -80px;
	background-color: rgba(43,182,115,0.3);
#poster ul li:nth-child(6) {
	width: 290px; height: 290px;
	top: 60px; right: -100px;
	background-color: rgba(237,28,36,0.5);
#poster ul li:nth-child(7) {
	width: 250px; height: 250px;
	top: 190px; left: 130px;
	background-color: rgba(102,45,145,0.3);
#poster ul li:nth-child(8) {
	width: 140px; height: 140px;
	top: 180px; left: 290px;
	background-color: rgba(237,28,36,0.5);
#poster ul li:nth-child(9) {
	width: 250px; height: 250px;
	top: -80px; left: -90px;
	background-color: rgba(252,176,64,0.5);

The process is repeated for all the remaining list elements, giving each one specific widths, positioning, background colour and level of transparency.

@font-face {
	font-family: Chunk;
	src: url("Chunkfive.ttf") format("truetype");

The typographic element of the design makes use of the slab-serif Chunk font. It isn’t a font that’s available in standard font stacks, but with the @font-face rule, the font-file can be referenced for supporting browsers to put it into effect.

#poster h1 {
	position: absolute; top: 355px; right: -10px;
	font: 210px/160px  "Chunk", Helvetica, Sans-Serif; text-align: right; text-transform: uppercase;
	color: rgba(0,174,239,0.5); z-index: 10;

The #poster h1 is then given absolute positioning and moved into place in the mid-right portion of the design. A small amount of negative right positioning aligns the text exactly on the page edge. The Chunk font is then set with large fontsize and line-height, aligned to the right and transformed to uppercase. z-index:10; is then used to ensure the text sits above the other elements.

-moz-box-shadow: 0 10px 20px #b0b0b0;
-webkit-box-shadow: 0 10px 20px #b0b0b0;
box-shadow: 0 10px 20px #b0b0b0;

A touch of box-shadow is then added to the #poster rule to give a final visual effect, leaving the digital poster design complete.

View the CSS poster demo

View the CSS poster demo

Firefox, Safari & Chrome = Win. Opera… Meh. Internet Explorer… I wouldn’t even bother.

  • 187
100 HD Blurred Backgrounds

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of 100 HD Blurred Backgrounds + bonus 10 realistic web shadows.

100 HD Blurred Backgrounds

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques collating creative website designs. You can follow Iggy on Twitter.


  1. Jinson says:

    Great article really surprised to see the capability of CSS3. Definitely an informative article. Thanks for sharing this.

  2. mintocity says:

    Good work. CSS3 is amazing

  3. Amazing work Chris. CSS3 will revolutionize the web industry. Thanks for sharing :)

  4. Sam says:

    The demo site works in chrome on my PC but not firefox, even though I have Chunk installed.

    • ZAM says:

      +1… same here Chris, in PC Firefox, Font seems not working. But works fine in Chrome.

      • Natha says:

        They are still working on modifying Firefox so it can manage CSS3 and HTML 5 without problem. Hopefully it will work soon! :)

        Great tut! :D

  5. Nisha singh says:

    Good work Chris. amazing,

  6. Arshad says:

    Same here Chris;

    Not working on Firefox

  7. This is an amazing article!! I look forward to testing this out myself soon!

    Thanks so much for making this available!

  8. Callum Chapman says:

    Great to see the capabilities of CSS3. Might try this when I get some time! Keep up the good work! :)

  9. Tutorial Lounge says:

    useful techniques for learn about CSS3.

  10. Spence says:

    I think the @font-face call you've used should be a little more "bulletproofed". FontSquirrel has a cool tool to build the stack automatically, or Paul Irish provides a good explanation on how to do it @

    Otherwise, great tut!

  11. Deepu Balan says:

    Very well done mate! CSS rocks!


  12. Antoine Guédès says:

    Wow! Awesome result!
    I will give it a try, for sure!

  13. Remus says:

    nice work i like it :)

  14. Anonymous says:

    I've been searching about what's up with FireFox support and I can't say that I found much useful stuff. For example, appears to display correctly. The only difference is the lack of "format" declaration.

    Anyone has an explanation? (Cheers for an awesome link, Spence, though I haven't found the answer there…)

  15. Laira says:

    Fabulous tutorial also it is very useful technique….

  16. DeadJam says:

    Thanks, I'll give that a go one of these days and may even try and bit of experimenting with transparency.

  17. Mark says:

    This is lovely :)

  18. That is a great looking digital poster.

  19. zebno says:

    Well explained! thanks for sharing it …

  20. Paul Anthony Webb says:

    Bravo Chris, this is pretty nifty.

  21. Very awesome article and very cool website.

  22. jayson says:

    Easy to follow, Thanks alot….

  23. kevin says:

    Works fine with Opera 10.5.

  24. Rav3 says:

    Ok first of all i don't mean to sound like an ass or anything, but whats the point of doing this as opposed to doing it in Illustrator? Im really curious because i just don't see a reason.

  25. Scott Dylan says:

    Great tutorial there Chris.

    Scott Dylan

  26. Curious – why use li:nth-child(1) etc. instead of a simple class – eg li.largeBlue or some such names.

    Those would seem more readable/understandable (to me) when looking at the css who isn't looking at the html and the specific ordering of li tags.

  27. Alina says:

    Good work!

    ——————— this work for freelancers

  28. Susana says:

    Great tutorial, It's very useful.

  29. badrun says:

    Page bookmarked, I'll try soon..
    Thanks for the great tutorial..

  30. James says:

    Would it work better for all browsers if the google font api was used instead?

  31. wordpressapi says:

    really nice article…I learned new thing today

  32. fuzzimo says:

    CSS3 rules! Thanks for the tutorial!

  33. Great tutorial! It really explains the power of CSS3! Thank you very much Chris!
    I made this using your tutorial:

  34. Great tut, its always interesting to use various platforms to create stunning work. Well done!

  35. Prefabrik says:

    Thank you for sharing has been nice knowing I'm constantly sharing
    and keep track of your shares I would like to share my very nice and informative shares

  36. Shubhojit says:

    Surely HTML5 and CSS3 is going to revolutionize front end client technologies give non designers a foray into front end design

  37. Rob says:

    Interesting stuff, good to see what can be done with CSS3. Will have to get practicing!

  38. Kelly says:

    It's working for me in Firefox 3.5.3 Mac

  39. Giselle says:

    Wow, I'm impressed! And excited to see what else CSS 3 can do.

  40. leon says:

    great tutorial! hope that IE will support css3 in the future.

Leave a response