Last active
December 4, 2020 08:16
-
-
Save WordPress-Handbuch/0eb279156bb9fa0584ef27bc5300a63c to your computer and use it in GitHub Desktop.
Code fragment for ribbon include example – CSS part
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .ribbon { | |
| width: 150px; | |
| height: 150px; | |
| overflow: hidden; | |
| position: absolute; | |
| z-index:9; | |
| } | |
| .ribbon span { | |
| position: absolute; | |
| display: block; | |
| width: 250px; | |
| padding: 10px 0; | |
| background-color: #880000; | |
| color: #fff; | |
| font: 900 15px sans-serif; | |
| text-align: center; | |
| } | |
| .ribbon-top-right { | |
| top: 0px; | |
| right: 0px; | |
| } | |
| .ribbon-top-right span { | |
| left: -25px; | |
| top: 30px; | |
| transform: rotate(45deg); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hallo Julian, das freut mich sehr, dass Ihnen das Buch gefällt. Bei so einer dicken Referenz ist es manchmal verzwickt, wie weit man mit den Entwicklungsthemen geht, ohne dass gleichzeitig ein HTML/CSS/PHP-Kompendium daraus entsteht (und dann 2000 Seiten dick wird :) ). Dass das Eyecatcher-Band absolut rechts oben erscheint, ist durchaus beabsichtigt. Aber selbstverständlich können Sie diesen Beispielcode beliebig an eigene Bedürfnisse anpassen.
Viel Erfolg und Spaß.