Create Digital Poster Design with CSS3 Only

written by Nikola Lazarevic

Apr 6, 2011
tags: css tutorials
5 Comments

Follow this walkthrough of making a digital poster design made purely of HTML and CSS. Being a design that makes use of CSS3 properties, it’s only suited to the modern browsers of Firefox, Safari, Chrome and Opera.

Preview

The initial idea and design concept was first laid out in Photoshop (basic geometric shapes overlay on the canvas) as reference for the HTML/CSS stages later.

VIEW THE CSS POSTER DEMO

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Poster</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
	<div id="poster">
		<p id="text">Bauhaus<br />In its brief 14-year existence, the Bauhaus school revolutionized art, design, architecture and typography. The Bauhaus modernist &quot;International Style&quot; emphasized radical simplicity, functionalism, and geometry.<br />rectangle<br />triangle<br />o<br />X<br />Ausstelung<br />Juli-September 1968<br />Weimar</p>
	</div><!--end poster-->
</body>
</html>

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. All poster elements (text and shapes) are placed inside paragraph with an ID of “text”.
Elements are divided with single line brake tags <br>. Circle and square shapes are presented with letters “o” and “x” (we use letters as centers of those shapes).

Styling with CSS

/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	background: #fff;
	font-family: Helvetica,Arial, sans-serif;
	color: #1c1c1c;
	line-height: 1;
}

#poster {
	width: 900px;
	height: 1100px;
	margin: 50px auto;
	position: relative;
}

The CSS begins with Eric Mayer’s Reset CSS v2.0 to remove any default styling from browsers, followd with some basic styling for the body, 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:50px auto;. Being a containing element, position:relative; is added to allow child elements to be positioned absolutely.

Create Digital Poster Design with CSS3 Only

Adding Span Classes with jQuery

Download lettering.js and add link to jQuery library and “lettering.js” in header of HTML document.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Poster</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.lettering-0.6.min.js" type="text/javascript"></script>
</head>

Since we already divide elements with <br> tag “lettering.js” will wrap elements in span classes for us. Add following script block into head.

<script>
		$(document).ready(function() {
		  $("#text").lettering('lines');
		});
</script>

The resulting code will add span classes to each element inside “text” paragraph allowing us to style each element.

<p id="text">
<span class="line1">Bauhaus</span>
<span class="line2">In its brief 14-year existence, the Bauhaus school revolutionized art, design, architecture and typography. The Bauhaus modernist "International Style" emphasized radical simplicity, functionalism, and geometry.</span>
<span class="line3">rectangle</span>
<span class="line4">triangle</span>
<span class="line5">o</span>
<span class="line6">X</span>
<span class="line7">Ausstelung</span>
<span class="line8">Juli-September 1968</span>
<span class="line9">Weimar</span>
</p>

Styling Geometric Shapes

Let’s start with dashed border rectangle (class=”line3″). The size is measured from the design concept and added to the CSS. Position is also measured according to the page boundaries and added to the CSS.

.line3 {
	width: 464px;
	height: 560px;
	position: absolute;
	top: 248px;
	left: 376px;
	border-top: 2px dashed #302e2c;
	border-bottom: 2px dashed #302e2c;
	border-right: 2px dashed #302e2c;
	z-index: 1;
	text-indent: -9999px;
}

Next circle. Class “line5″ is our circle. To convert class “line5″ to circle, the border-radius property comes in handy. The circle is 560px, so to create perfect circle we need to set border-radius to half this figure – 280px.

.line5 {
	background: #1c1c1c;
	width: 560px;
	height: 560px;
	-webkit-border-radius: 280px;
	-moz-border-radius: 280px;
	border-radius: 280px;
	position: absolute;
	top: 250px;
	right: 60px;
	z-index: 2;
	color: #efe7db;
	line-height: 560px;
	text-align: center;
	font-size: 60px;
}

Then trinagle (class=”line4″),

.line4 {
	width: 0;
	height: 0;
	border-left: 424px solid #0d86ed;
	border-top: 212px solid transparent;
	border-bottom: 212px solid transparent;
	position: absolute;
	left: 98px;
	top: 104px;
	z-index: 3;
	text-indent: -9999px;
}

and at the end square (class=”line6″).

.line6 {
	background: #a20303;
	width: 210px;
	height: 210px;
	position: absolute;
	bottom: 150px;
	left: 165px;
	line-height: 210px;
	text-align: center;
	font-size: 1.5em;
	color: #efe7db;
}

Styling Blocks of Text

First “Bauhaus”,

.line1 {
	font-family: Helvetica, Arial, sans-serif;
	width: 540px;
	position: absolute;
	top: 30px;
	left: 320px;
	border-top: 15px solid #a20303;
	font-size: 110px;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	line-height: 105px;
	letter-spacing: -2px;
	padding-top: 5px;
}

then we will move on to the big text block.

.line1 {
	font-family: Helvetica, Arial, sans-serif;
	width: 540px;
	position: absolute;
	top: 30px;
	left: 320px;
	border-top: 15px solid #a20303;
	font-size: 110px;
	text-transform: uppercase;
	font-weight: bold;
	display: block;
	line-height: 105px;
	letter-spacing: -2px;
	padding-top: 5px;
}

We are going to use css3 transform properties to rotate the word “Ausstellung”.

.line7 {
	display: block;
	font-size: 60px;
	color: #a20303;
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	bottom: 752px;
	right: 635px;
	letter-spacing: -3px;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
}

Let’s move on – exibition date.

.line8 {
	display: block;
	position: absolute;
	top: 954px;
	left: 560px;
	font-size: 30px;
	color: rgba(0,0,0,0.8);
	letter-spacing: 1px;
}

Using the :before pseudo-selector we can create blue border on left side of the exibition date with just a few lines of CSS:

.line8:before {
	content: "";
	border-top: 10px solid #1985e0;
	width: 157px;
	position: absolute;
	left: -170px;
	top: 10px;
}

Let’s finish text styling with last line “Weimar”.

.line9 {
	display: block;
	position: absolute;
	top: 1020px;
	left: 45px;
	font-size: 60px;
	color: #0961ac;
	font-weight: bold;
	text-transform: uppercase;
	padding-right: 20px;
	border-right: 50px solid #121212;
	line-height: 50px;
}

Finishing Touch

	-webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	-o-box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	box-shadow: 0 10px 20px rgba(0,0,0,0.3);

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

Get some inspiration with these CG posters from SeventhStreet for your digital poster printing.

Authored by Nikola Lazarevic

Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

Enjoyed this story?

Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

FOR FURTHER READING:

20 Responsive CSS Frameworks and Grids Worth Considering

7 Articles That Will Help You Understand Responsive Typography

15 Fresh and Useful CSS3 Tutorials To Boost Your Skills

Useful CSS3 Tutorials and Techniques

15 CSS Frameworks for Responsive Web Design

Responsive Web Design

5 Comments

ADD COMMENT

Gonzo the Great says:
April 6, 2011

Hi Nikola,

well done, nice to see ‘old beauties’ get a new look ;-P

Futura, AvantGarde or ITC Bauhaus would be best choice for this poster, but I understand you can’t @font-face these commercial fonts!

Thanks for sharing, Cheers & Ciao ..
rajasegar says:
April 7, 2011

awesome design Nikola, unbelievable done in css3….
Web Design Company Mumbai says:
April 7, 2011

Nice code.
Mickey says:
April 7, 2011

Hello!

Very interesting approach!

I have one suggestion: add to ‘line7′ class the following:

-ms-transform: rotate(-90deg);

This will make the text rotated in IE9 too :)
Milos says:
April 7, 2011

What’s up with you and german, Nik? :D

WEBEXPEDITION18 Never Stop The Exploring