CSS Standart Codeschnipsel

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • CSS Standart Codeschnipsel

    Da der Thread Coding - Schnipsel hier noch nicht existiert fange ich mal an.

    CSS:

    Text-shadow:

    einfacher Schatten nach unten:

    CSS-Quellcode

    1. text-shadow: 0px 1px 0px #fff;


    einfacher Schatten nach oben:

    CSS-Quellcode

    1. text-shadow: 0px -1px 0px #fff;


    einfacher Schatten nach rechts:

    CSS-Quellcode

    1. text-shadow: 1px 0px 0px #fff;


    einfacher Schatten nach links:

    CSS-Quellcode

    1. text-shadow: -1px 0px 0px #fff;


    Kontur:

    CSS-Quellcode

    1. text-shadow: 0px -1px #000, 1px 0px #000, 0px 1px #000, -1px 0px #000;



    Text - Veränderungunen:

    Kapitälchen:

    CSS-Quellcode

    1. font-variant: small-caps;


    Erster Buchstabe groß:

    CSS-Quellcode

    1. text-transform: capitalize;


    Alle Buchstaben groß:

    CSS-Quellcode

    1. text-transform: uppercase;


    Alle Buchstaben klein:

    CSS-Quellcode

    1. text-transform: lowercase;



    Box-Schatten:

    Schatten nach innen:

    CSS-Quellcode

    1. box-shadow: inset 0px 0px 1px 1px #000;


    Schatten nach außen:

    CSS-Quellcode

    1. box-shadow: 0px 0px 5px 0px #000;



    Transitions:

    Transition der Breite:

    CSS-Quellcode

    1. #content { width: 100px; transition: width 2s; }
    2. #content:hover { width: 200px; }


    Transition des Hintergrundes:

    CSS-Quellcode

    1. #content { background-color: #ff0; transition: background-color 2s; }
    2. #content:hover { background-color: #f0f; }


    Transition der Position:

    CSS-Quellcode

    1. #content { transition: margin 2s; }
    2. #content:hover { margin-top: 20px; margin-left: 50px; }

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von xGreekz7x ()

  • Abrundugen:

    alle 4 Kanten abrunden:

    CSS-Quellcode

    1. broder-radius: 5px;


    einzelne Kanten abrunden:

    CSS-Quellcode

    1. border-top-left-radius: 5px;
    2. border-top-right-radius: 5px;
    3. border-bottom-right-radius: 5px;
    4. border-bottom-left-radius: 5px


    Ränder - Border:

    Linienarten:

    CSS-Quellcode

    1. border-style: solid;/*Durchgezogene Linie*/
    2. border-style: dotted;/*Gepunktete Linie*/
    3. border-style: hidden; /*unsichtbare Linie, jedoch vorhanden*/
    4. border-style: none; /*keine Linie, nicht vorhanden*/
    5. border-style: dashed; /*Gestrichelte Linie*/
    6. border-style: double; /*Doppelt-Durchgezogene Linie*/
    7. border-style: inset; /*Linie befindet sich innen*/
    8. border-style: outset; /*Linie befindet sich außen*/


    Liniendicke:

    CSS-Quellcode

    1. border-width: 1px;


    Linienfarbe:

    CSS-Quellcode

    1. border-color: #000;