Logga in med Facebook

När du loggar in får du tillgång till fler funktioner än vad som visas för gäster.

Vi kommer att fråga dig om vi får tillgång till vissa fält från din profil på Facebook. Vi postar inga statusuppdateringar till din tidslinje om du inte väljer att göra det själv..

×

Snippets Directory

css

Posted by AvatarbildEmil Andersson 5 år, 5 månader sedan

Banner (ribbon)

Hur man kan få fram en ribbon i CSS.

/* HTML */

<h1 class="ribbon">
   <strong class="ribbon-content">En så kallad ribbon</strong>
</h1>


/* CSS */

.ribbon {
 font-size: 16px !important;
 /* This ribbon is based on a 16px font side and a 24px vertical rhythm.
I've used em's to position each element for scalability.
If you want to use a different font size you may have to play
with the position of the ribbon elements */

 width: 50%;
    
 position: relative;
 background: #ba89b6;
 color: #fff;
 text-align: center;
 padding: 1em 2em; /* Adjust to suit */
 margin: 2em auto 3em; /* Based on 24px vertical rhythm.
48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px
themselves so we double it. */
}
.ribbon:before, .ribbon:after {
 content: "";
 position: absolute;
 display: block;
 bottom: -1em;
 border: 1.5em solid #986794;
 z-index: -1;
}
.ribbon:before {
 left: -2em;
 border-right-width: 1.5em;
 border-left-color: transparent;
}
.ribbon:after {
 right: -2em;
 border-left-width: 1.5em;
 border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
 content: "";
 position: absolute;
 display: block;
 border-style: solid;
 border-color: #804f7c transparent transparent transparent;
 bottom: -1em;
}
.ribbon .ribbon-content:before {
 left: 0;
 border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
 right: 0;
 border-width: 1em 1em 0 0;
}

You must be logged in to comment.