Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (Versiegelte Benutzer:Phorgo/Labor/Style-Generator (‎[edit=sysop] (unbeschränkt) ‎[move=sysop] (unbeschränkt)))
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

Formular

Text
Farbe:
Schriftart:
Diverses:


Rahmen
Breite:
Art:
Farbe:
Krümmung:

Vorschau


Linktipps: Faditiva und 3DPresso