Grains Of Sand Web Design, CSS Demos & HTML5 Templates by tupence

CSS3 Demos - Dymo Label Style Headings

Using text-shadow, transform, letter-spacing, word-spacing and box-shadow you can give plain text a Dymo label effect

What We're Aiming For

Label Effect Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor.

Another Heading

Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

On The Right

Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.

Step By Step

Step One
First add the text

HTML
  • <div class="label"> <!--for the example the text and headings are all contained in their own <div> -->
  • <h3 class="label1">Label Effect Heading</h3> <!--this heading will be an orange label rotated 2° anti-clockwise-->
  • <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor. </p>
  • <h3 class="label2">Another Heading</h3> <!--this heading will be a green label rotated 2° clockwise-->
  • <p>Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.</p>
  • <h3 class="label3">On The Right</h3> <!--this heading will be a purple label rotated 3° clockwise and placed on the right-->
  • <p>Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.</p>
  • </div><!--end label-->
CSS
  • /***Style the containing div***/
  • .label{
    background: #fff;
    margin: 30px;
    padding: 0 10px;
    border: 1px solid #ccc;
    }
  • /***Style the paragraph text***/
  • p{
  • font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .875em;
    color: #333;
  • }

Result

Label Effect Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor.

Another Heading

Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

On The Right

Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.

Step Two
Add basic styling to the headings

HTML
  • same as step one
CSS
  • /***The basic styling is the same for all of the headings***/
  • .label h3{
    display:inline-block; /*keeps the heading as a block item, allowing us to give it padding, margins and position, but adding inline prevents the background from spanning the full width of the container (which a block element would do unless a width as set)*/
    padding:5px 20px 5px 10px;
  • /*style the font*/
    font-family:'Metrophobic', Arial, Helvetica, sans-serif; /*Metrophobic is available at Google Web Fonts */
    font-size:1.1em;
    text-transform:uppercase;
    text-shadow: 0px 1px 0px #282828;
    letter-spacing:.1em;
    word-spacing:5px;
    color:#fff;
  • /*add a small drop shadow to the heading*/
    -webkit-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    -moz-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
    }

Result

Label Effect Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor.

Another Heading

Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

On The Right

Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.

Step Three
Add colour and a border to the labels

HTML
  • same as step one
CSS
  • h3.label1{
  • background:#ca4b29; /*colour of the label*/
  • border: 1px solid #ab5324; /*slighty darker shade than the background colour*/
    }
    h3.label2{
    background:#448d35; /*colour of the label*/
    border: 1px solid #357129; /*slighty darker shade than the background colour*/
    }
    h3.label3{
    background:#953083; /*colour of the label*/
    border: 1px solid #651d58; /*slighty darker shade than the background colour*/
    }

Result

Label Effect Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor.

Another Heading

Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

On The Right

Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.

Step Four
Position and rotate the labels

HTML
  • same as step one
CSS
  • /***Orange Label***/
  • h3.label1{
  • /*first position the label slightly outside the container*/
  • margin-top:-20px; /*will position the label 20px outside the top of the container*/
  • margin-left:-20px; /*will position the label 20px outside the left edge of the container*/
  • /*now rotate the label 2 degree anti-clockwise*/
  • -webkit-transform:rotate(-2deg);
  • -moz-transform: rotate(-2deg);
  • -o-transform: rotate(-2deg);
  • -ms-transform: rotate(-2deg);
  • transform: rotate(-2deg);
  • }
  • /***Green Label***/
  • h3.label2{
  • /*first position the label, this time fully inside the container*/
  • margin:10px 0 5px 0;
  • /*now rotate the label 2 degrees clockwise*/
  • -webkit-transform:rotate(2deg);
  • -moz-transform: rotate(2deg);
  • -o-transform: rotate(2deg);
  • -ms-transform: rotate(2deg);
  • transform: rotate(2deg);
  • }
  • /***Purple Label***/
  • h3.label3{
  • /*first position the label on the right and slightly outside the container*/
  • float: right; /*places the label on the right and, as we haven't cleared the float anywhere, wraps the text around it*/
  • margin-right:-15px; /*places the label 15px outside the right edge of the container*/
  • /*rotate the label 3 degrees clockwise*/
  • -webkit-transform:rotate(3deg);
  • -moz-transform: rotate(3deg);
  • -o-transform: rotate(3deg);
  • -ms-transform: rotate(3deg);
  • transform: rotate(3deg);
  • }

Result

Label Effect Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor.

Another Heading

Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.

On The Right

Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.

Full Code For You To Copy And Paste

HTML
  • <div class="label">
  • <h3 class="label1">Label Effect Heading</h3>
  • <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra, nunc sit amet vulputate commodo, odio leo laoreet erat, sed laoreet metus velit malesuada est. Suspendisse vehicula orci in diam vehicula mollis. Quisque luctus suscipit lorem, ut dignissim nisi convallis auctor. </p>
  • <h3 class="label2">Another Heading</h3>
  • <p>Sed cursus imperdiet purus sit amet sollicitudin. Nam nulla orci pharetra nec hendrerit vitae, bibendum at dui. Nunc laoreet semper nisl, at pretium diam mollis eget. Curabitur justo arcu,consectetur in, tincidunt ac felis. Aenean vel nisl dui. Quisque tortor augue, varius id dictum et, lobortis cursus ipsum. Nam in tincidunt ante. Praesent ac ultricies risus.</p>
  • <h3 class="label3">On The Right</h3>
  • <p>Mauris orci neque, elementum id tincidunt id, blandit non nulla. Mauris eleifend malesuada nisi et porta. Donec rutrum est accumsan orci dapibus vitae pretium dolor condimentum. Cras urna mauris, vestibulum ac cursus vel, vehicula vitae massa. Nullam a blandit lorem. Proin feugiat, libero in viverra euismod, massa neque convallis ante, non condimentum nunc erat sed sapien. Duis suscipit augue eu lacus laoreet mollis.</p>
  • </div><!--end label-->
CSS
  • /*STYLE THE CONTAINER*/
  • .label{
  • width:900px;
    background:#fff;
    margin:30px;
    padding:0 10px;
    border:1px solid #ccc;
    }
  • /*STYLE THE PARAGRAPHS*/
    .label p{
    line-height:1.5em;
    margin-bottom:10px;
    font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
    font-size:.875em;
    color:#333;
    }
  • /*THE BASIC STYLE IS THE SAME FOR EACH HEADING*/
  • h3.label1, h3.label2, h3.label3{
  • display: inline-block; /*stops the background spanning the full width of the containing element*/
  • padding:5px 20px 5px 10px;
  • font-family: 'Metrophobic', Arial, Helvetica, sans-serif; /*Metrophobic is available at http://www.google.com/webfonts/specimen/Metrophobic*/
  • color: #fff;
  • font-size:1.1em;
  • text-transform: uppercase;
  • letter-spacing: 0.1em; /*increase the gap between letters*/
  • word-spacing: 5px; /*increase the gap between words*/
  • /*add a shadow to the text*/
  • text-shadow: 0px 1px 0px #282828;
  • /*and add a shadow to the box containing the heading*/
  • -webkit-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
  • -moz-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
  • box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
  • /*Make IE work with CSS3Pie - see http://css3pie.com/ for more info and to download the latest version*/
  • behavior: url(pie/PIE.htc);
  • }
  • /*NOW APPLY INDIVIDUAL STYLES TO EACH HEADING*/
  • /**ORANGE HEADING**/
  • h3.label1{
  • background:#ca4b29;
  • border: 1px solid #ab5324; /*slightly darker than the background colour*/
  • margin:-20px 0 15px -20px; /*negative margins move the heading partially outside the containing element*/
  • /*Rotate the heading 2 degrees anti-clockwise - see http://cssdemos.tupence.co.uk/transform-rotate.htm*/
  • -webkit-transform:rotate(-2deg);
  • -moz-transform: rotate(-2deg);
  • -o-transform: rotate(-2deg);
  • -ms-transform: rotate(-2deg);
  • transform: rotate(-2deg);
  • -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • }
  • /**GREEN HEADING**/
  • h3.label2{
  • background: #448d35;
  • border: 1px solid #357129;
  • margin: 10px 0 5px 0;
  • /*Rotate the heading 2 degrees clockwise*/
  • -webkit-transform:rotate(2deg);
  • -moz-transform: rotate(2deg);
  • -o-transform: rotate(2deg);
  • -ms-transform: rotate(2deg);
  • transform: rotate(2deg);
  • -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • }
  • /**PURPLE HEADING**/
  • h3.label3{
  • float: right; /*places the heading on the right and, as the float hasn't been cleared, the text wraps around it*/
  • background:#953083;
  • border: 1px solid #651d58;
  • margin:5px -15px -5px 0;
  • padding:5px 20px 5px 10px;
  • /*rotate the heading 3 degree clockwise*/
    -webkit-transform:rotate(3deg);
  • -moz-transform: rotate(3deg);
  • -o-transform: rotate(3deg);
  • -ms-transform: rotate(3deg);
  • transform: rotate(3deg);
  • -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
  • }

Support Section

Explanations Of The CSS3 Used In The Demo

Browser Support

The demo works in all the latest browsers, including IE9. IE8 and lower will style the headings, but do not support transform:rotate, although Miscrosoft's Matrix Filter can be used to acheive the effect.

More CSS3 Demos This Way