Skip to content
HTML.dk logo
  • Snippets
  • Tutorials
    • Lav din egen hjemmeside
    • Tjene penge på nettet
    • Guide til HTML
    • Guide til CSS
    • Artikler
  • Nyheder
  • Bidrag til sitet
Søgning

Sådan laver du et bånd / skilt med CSS

  • HTML.dk
  • 3. april 2019
  • CSS snippets

Skal du lave et pænt lille skilt eller et bånd med lidt tekst henover et område, så kan du selvfølgelig lave dette med CSS uden brug af grafik.

Herunder få du en snippet til netop dette, som du kan kopiere og bruge på din egen side.

Først lidt HTML

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>

Og så selvfølgelig lidt 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;
}

Og det var alt – du kan se en demo her.

Denne snippet blev indsendt af Find-a-kasse-priser.dk


Det bør du vide om billedformater
Font med CSS shorthand

Seneste artikler

  • Skab en hyggelig atmosfære med en biopejs
  • Boost dit salg ved hjælp af et webbureau
  • Sådan kan du sælge webhoteller til dine kunder
  • Sådan skaber du en rolig og naturlig stemning på kontoret
  • Hvordan finder du en luksusseng

Mere fra HTML.dk

  • Alle snippets 24
  • Artikler 92
  • CSS snippets 13
  • HTML snippets 4
  • jQuery / JavaScript snippets 6
  • Nyheder 18
  • Scripts 2
  • Tutorials 7
  • Uncategorized 5
  • WordPress snippets 1

Kontakt

HTML.dk
Ceres Allé 7
Aarhus C
Skriv til os

Links

Om HTML.dk
Skriv til os!
Send et bidrag
Nyheder
Snippets

Nyt indhold fra HTML.dk

  • Skab en hyggelig atmosfære med en biopejs
  • Boost dit salg ved hjælp af et webbureau
  • Sådan kan du sælge webhoteller til dine kunder
  • Sådan skaber du en rolig og naturlig stemning på kontoret
  • Hvordan finder du en luksusseng
  • 4 geniale gaveideer til udvikleren

HTML logo big