Create Digital Poster Design with CSS3 Only

    written by Nikola Lazarevic

    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.

    Preview

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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);
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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;
    }
    

    Create Digital Poster Design with CSS3 Only

    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.

    Preview

    VIEW THE CSS POSTER DEMO

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

     
    Authored by

    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.

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