Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen
Aus Stupidedia, der sinnfreien Enzyklopädie!
Phorgo (Diskussion | Beiträge) K (Versiegelte Benutzer:Phorgo/Labor/Style-Generator ([edit=sysop] (unbeschränkt) [move=sysop] (unbeschränkt))) |
Phorgo (Diskussion | Beiträge) |
||
Zeile 1: | Zeile 1: | ||
<html> | <html> | ||
− | + | <h2>Formular</h2> | |
+ | <form action="rein_damit();" id="pStyleGenerator-form"> | ||
+ | <table id="pStyleGenerator-table"> | ||
+ | <!-- | ||
+ | Text | ||
+ | --> | ||
+ | <tr> | ||
+ | <td class="pStyleGenerator-h3" colspan="2">Text</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Farbe:</td> | ||
+ | <td> | ||
+ | <input type="text" name="color" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Schriftart:</td> | ||
+ | <td> | ||
+ | <input type="text" name="fontFamily" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Diverses:</td> | ||
+ | <td> | ||
+ | <input type="checkbox" name="fontWeight" value="bold" id="pStyleGenerator-fontWeight" /> | ||
+ | <label for="pStyleGenerator-fontWeight" style="font-weight: bold;">Fett</label> | ||
+ | <br /> | ||
+ | <input type="checkbox" name="fontStyle" value="italic" id="pStyleGenerator-fontStyle" /> | ||
+ | <label for="pStyleGenerator-fontStyle" style="font-style: italic;">Kursiv</label> | ||
+ | <br /> | ||
+ | <input type="checkbox" name="textDecoration" value="underline" id="pStyleGenerator-textDecoration-underline" /> | ||
+ | <label for="pStyleGenerator-textDecoration" style="text-decoration: underline;">Unterstrichen</label> | ||
+ | <br /> | ||
+ | <input type="checkbox" name="textDecoration" value="overline" id="pStyleGenerator-textDecoration-overline" /> | ||
+ | <label for="pStyleGenerator-textDecoration" style="text-decoration: overline;">Überstrichen</label> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <!-- | ||
+ | Rahmen | ||
+ | --> | ||
+ | <tr> | ||
+ | <td class="pStyleGenerator-h3" colspan="2">Rahmen</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Breite:</td> | ||
+ | <td> | ||
+ | <input type="text" name="borderWidth" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Art:</td> | ||
+ | <td> | ||
+ | <select name="borderStyle"> | ||
+ | <option value="solid">Durchgehend</option> | ||
+ | <option value="dotted">Gepunktet</option> | ||
+ | <option value="dashed">Gestrichelt</option> | ||
+ | <option value="double">Doppelt</option> | ||
+ | <option value="inset">Nach innen abfallend</option> | ||
+ | <option value="outset">Nach außen abfallend</option> | ||
+ | <option value="groove">Nach innen gebogen</option> | ||
+ | <option value="ridge">Nach außen gebogen</option> | ||
+ | </select> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Farbe:</td> | ||
+ | <td> | ||
+ | <input type="text" name="borderColor" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <td>Krümmung:</td> | ||
+ | <td> | ||
+ | <input type="text" name="borderRadius" /> | ||
+ | </td> | ||
+ | </tr> | ||
+ | </table> | ||
+ | </form> | ||
+ | <h2>Vorschau</h2> | ||
+ | <div id="pStyleGenerator-preview"> | ||
+ | |||
+ | </div> | ||
+ | <style type="text/css"> | ||
+ | #pStyleGenerator-table { | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .pStyleGenerator-h3 { | ||
+ | font-size: 132%; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .pStyleGenerator-h4 { | ||
+ | font-size: 116%; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #pStyleGenerator-table input[type="text"], | ||
+ | #pStyleGenerator-table select { | ||
+ | width: 100%; | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |
Version vom 1. Oktober 2013, 21:15 Uhr