Vorlage:CSS Background/doc
Diese Seite ist die Dokumentations-Unterseite der Vorlage CSS Background |
Die Vorlage {{CSS Background}} Textbox mit Wow-Effekt
- Blending Modes Demystified by Justin McDowell
- Basics of CSS Blend Modes
- CSS mix-blend-mode Property
- Blend-Modes
- Snippets Background: diese Seite ist mit Google nicht zu finden
Alle Boxen: Anm, BlueBox, Console, CSS Background, Csscol, Gedicht, Hr, Infobox, InfoBox, Neues Klavierstück, Neues Weihnachtslied, Neues Weihnachtslied mit Orgelbegleitung, OraSql, Palegreen, Portal table, ShowMe, Taste, Wico, Überschrift
Parameter
Name | Beschreibung | Standard | Status | |
---|---|---|---|---|
1 | großer Text | leer | optional | |
2 | kleiner Text | leer | optional | |
width | Breite der Box | 50% | optional | |
gradient | Farb-Hintergrund | linear-gradient(to left, yellow, ..., white) | optional | |
wbig | Fontweight des großen Schriftzugs | bold | optional | |
ptop | Abstand des Textes vom oberen Rand | 3vw | optional | |
bis | Schriftgröße des großen Schriftzugs | 7 vw | optional | |
small | Schriftgröße des kleinen Schriftzugs | 3 vw | optional | |
wsmall | Fontweight des kleinen Schriftzugs | normal | optional | |
bgcolor | dunkle Hintergrundfarbe | rgb(40, 40, 40) | optional | |
pbottom | Abstand des Textes vom unteren Rand | 3vw | optional | |
blendmode | Überblendmodus CSS mix-blend-mode Property | multiply | optional |
Kopiervorlagen
|1=
|2=
|width=
|gradient=
|wbig=
|ptop=
|bis=
|small=
|wsmall=
|bgcolor=
|pbottom=
|blendmode=}}
|1=
|2=
|width=
|gradient=
|wbig=
|ptop=
|bis=
|small=
|wsmall=
|bgcolor=
|pbottom=
|blendmode=}}
Anwendung
{{CSS Background}}
<div style="width: 50%; "><div style="background: linear-gradient(to left, yellow, red, blue, orange, green, white); width:100%; margin: 0; padding: 0">
<p style="color: #000; border: 20px solid; background: rgb(40, 40, 40); margin: 1em 0; padding: 0; mix-blend-mode: multiply; box-shadow: 0px 0px 10px 0 #fff inset; text-align: center;">
<div style="color: #000; font: bold 7vw 'Alfa Slab One'; line-height: 0.9; text-align: center; text-shadow: 0px 0px 15px #fff, 0px 0px 15px #fff; padding-top: 0">Online Bar</span>
</p></div></div>
{{CSS Background|1=LilyPond|width=1200px|bgcolor=#fff|border=0|lheight=3em}}
<div style="width: 1200px; "><div style="background: linear-gradient(to left, yellow, red, blue, orange, green, white); width:100%; margin: 0; padding: 0">
<p style="color: #000; border: 0; background: #fff; margin: 1em 0; padding: 0; mix-blend-mode: multiply; box-shadow: 0px 0px 10px 0 #fff inset; text-align: center;">
<div style="color: #000; font: bold 7vw 'Alfa Slab One'; line-height: 3em; text-align: center; text-shadow: 0px 0px 15px #fff, 0px 0px 15px #fff; padding-top: 0">LilyPond</span>
</p></div></div>
Code
<includeonly>
<onlyinclude><div style="width: {{{width|50%}}}; "><div style="background: {{{gradient|linear-gradient(to left, yellow, red, blue, orange, green, white)}}}; width:100%; margin: 0; padding: 0">
<p style="color: #000; border: {{{border|20px solid}}}; background: {{{bgcolor|rgb(40, 40, 40)}}}; margin: 1em 0; padding: 0; mix-blend-mode: {{{blendmode|multiply}}}; box-shadow: {{{boxshadow|0px 0px 10px 0 #fff inset}}}; text-align: center;">
<div style="color: {{{tcolor|#000}}}; font: {{{wbig|bold}}} {{{big|7vw}}} 'Alfa Slab One'; line-height: {{{lheight|0.9}}}; text-align: center; text-shadow: 0px 0px 15px #fff, 0px 0px 15px #fff; padding-top: {{{ptop|0}}}">{{{1|{{{text|Online Bar}}}}}}</span>
{{#if:{{{2|}}}|<br><div style="color: #000; font: {{{wsmall|normal}}} {{{small|3vw}}} 'Alfa Slab One'; line-height: 0.5; text-align: center; text-shadow: 0px 0px 7px #fff, 0px 0px 7px #fff; padding-bottom: {{{pbottom|{{{ptop|0}}}}}}">{{{2|}}}</div>}}</p></div></div></onlyinclude>
</includeonly>
{{Dokumentation}}