Line25

Create a Vibrant Digital Poster Design with CSS3

Read the full post

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>
<html>
<head>
<meta charset="utf-8" />
<title>Circlicious CSS Poster</title>

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

<body>
	<div id="poster">
		<h1>Circl<br />icious</h1>
		<ul>
			<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>
		</ul>
	</div>
</body>
</html>

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.

clip:rect(0px,895px,1266px,0px);

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.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://designgiveaways.com/ Callum Chapman

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

  • http://www.getjins.com Jinson

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

  • http://www.mintocity.com mintocity

    Good work. CSS3 is amazing

  • http://www.thoughtsofnature.com Sudarshan Gurung

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

  • Sam

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

    • ZAM

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

      • Natha

        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

  • http://www.tutoriallounge.com Tutorial Lounge

    useful techniques for learn about CSS3.

  • http://nisha.in Nisha singh

    Good work Chris. amazing,

  • http://www.designbeep.com Arshad

    Same here Chris;

    Not working on Firefox

  • http://www.antoineguedes.com Antoine Guédès

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

  • http://www.remworks.fr Remus

    nice work i like it :)

  • http://www.foxyhare.com Bryce Wisekal

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

    Thanks so much for making this available!

  • Spence

    Chris,
    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 @ http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

    Otherwise, great tut!

  • http://laira.pathseek.info/ Laira

    Fabulous tutorial also it is very useful technique….

  • http://www.deepubalan.com Deepu Balan

    Very well done mate! CSS rocks!

    -deepu

  • Anonymous

    I've been searching about what's up with FireFox support and I can't say that I found much useful stuff. For example, http://craigmod.com/journal/font-face/ 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…)

  • http://www.deadjam.co.uk DeadJam

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

  • http://futurekode.com Mark

    This is lovely :)

  • http://dsgn.pw-software.com Paul Anthony Webb

    Bravo Chris, this is pretty nifty.

  • http://www.ate5.com Jordan Walker

    That is a great looking digital poster.

  • http://www.dreammediadesign.co.uk jayson

    Easy to follow, Thanks alot….

  • http://k-win.fr kevin

    Works fine with Opera 10.5.

  • http://www.dirspice.com zebno

    Well explained! thanks for sharing it …

  • http://geeseoff.com Geese Control

    Very awesome article and very cool website.

  • http://absinthe-design.com Rav3

    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.

  • http://www.jobboard2bid.com/ Alina

    Good work!

    ———————
    http://www.jobboard2bid.com/- this work for freelancers

  • http://www.scottdylan.net Scott Dylan

    Great tutorial there Chris.

    Scott Dylan

  • http://www.nikhilk.net Nikhil Kothari

    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.

  • Susana

    Great tutorial, It's very useful.

  • http://www.etcshow.com/ badrun

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

  • http://wordpressapi.com wordpressapi

    really nice article…I learned new thing today

  • James

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

  • http://www.fuzzimo.com/ fuzzimo

    CSS3 rules! Thanks for the tutorial!

  • http://andreapasottiweb.com andreapasotti

    Great tutorial! It really explains the power of CSS3! Thank you very much Chris!
    I made this using your tutorial:
    http://bit.ly/shot4dribbble

  • http://www.strafecreative.co.uk Web Design Nottingham

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

  • http://www.prefabrikev.biz Prefabrik

    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

  • Shubhojit

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

  • http://www.designbysoap.co.uk Rob

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

  • http://www.thumbslinger.comI Kelly

    It's working for me in Firefox 3.5.3 Mac

  • http://gsanmiguel.ca Giselle

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

  • http://webme.co.il leon

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