CSS-Simulation zum CSS-Attributen ( Border, Box-shadow )

Design von Berandungen border-Att, box-shadow

border short

border-width: 1px; border-width: 0px; border-width: 2px; border-width: 3px; border-width: 4px; border-width: 5px; border-width: 6px; border-width: inherit; border-width: thin; border-width: medium; border-width: thick; border-width: 0.1em; border-width: 0.3em; border-width: 0.7em;

border-style: solid; border-style: dashed; border-style: dotted; border-style: double; border-style: groove; border-style: inset; border-style: outset; border-style: ridge; border-style: none; border-style: hidden;

box-shadow box-sizing

border-radius: 0px; border-radius: 2px; border-radius: 5px; border-radius: 10px; border-radius: 15px; border-radius: 20px; border-radius: 25px; border-radius: 30px; box-shadow: none; box-shadow: 0px 0px 5px #000; box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 15px #000; box-shadow: 5px 5px 0px #000; box-shadow: 5px 5px 10px #000; box-shadow: -5px 0px 2px #000; box-shadow: -5px 0px 2px #000, 5px 0px 2px #000; box-shadow: none; box-shadow: 5px 5px 0px 0px rgba( 25, 25, 153, 0.3) inset; box-shadow: 0px 0px 5px 5px hsla(240, 72%, 35%, 0.3) inset; box-shadow: 0px 0px 10px 5px #aaa inset; box-shadow: 5px 5px 5px #000, -1px -1px 0px #ccc, 10px 5px 50px 45px #efe inset; box-shadow:-5px 0px 0px rgba(96,0,0, 0.75), 5px 0px 0px 0px rgba(0,0,96, 0.5) inset; box-shadow: 0 0 0 .2em rgba(130,170,100,0.3),0 0 0 0.4em rgba(0,55,0,0.5),inset 0 .5em .5em rgba(200,100,0,0.7),0 .5em rgba(55,155,55,0.9); box-sizing: content-box; box-sizing: border-box; box-sizing: inherit; box-sizing: padding-box;

↓ Vorschau

Design von Schrift font-style,-weight,-size-family; text-shadow,-decoration

font short

font-style: normal; font-style: italic; font-style: oblique; font-style: inherit; font-weight font-weight: normal; font-weight: bold; font-weight: lighter; font-weight: bolder; font-weight: inherit; font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; font-weight: 500; font-weight: 600; font-weight: 700; font-weight: 800; font-weight: 900;

font-size: 16px; font-size: 9px; font-size: 10px; font-size: 11px; font-size: 12px; font-size: 13px; font-size: 14px; font-size: 15px; font-size: 16px; font-size: 17px; font-size: 18px; font-size: 20px; font-size: 24px; font-size: 32px; font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: smaller; font-size: larger; font-size: inherit; font-size: 1em; font-size: 2em; font-size: 3em; font-size: 4em; line-height line-height: 18px; line-height: 9px; line-height: 10px; line-height: 11px; line-height: 12px; line-height: 13px; line-height: 14px; line-height: 15px; line-height: 16px; line-height: 17px; line-height: 18px; line-height: 20px; line-height: 24px; line-height: 32px; line-height: normal; line-height: inherit; line-height: 1em; line-height: 1.1em; line-height: 1.2em; line-height: 1.3em; line-height: 1.5em; line-height: 2em; line-height: 3em; line-height: 4em; font-family: "Palatino Linotype", "Book Antiqua", Palatino,serif; font-family: "Times New Roman",Times,serif; font-family: Georgia,serif; Times, Garamond oder Georgia font-family: Arial,Helvetica,Frutiger,sans-serif; font-family: "Arial Black",Gadget,sans-serif; font-family: "Comic Sans MS",sans-serif; font-family: Impact, Charcoal,sans-serif; font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif; font-family: Tahoma, Geneva,sans-serif; font-family: "Trebuchet MS",Helvetica,sans-serif; font-family: Verdana, Geneva,sans-serif; font-family: Palatino,Garamond,Georgia,Arial,"Book Antiqua",sans-serif; font-family: "Courier New",Courier,monospace; font-family: "Lucida Console",Monaco,monospace; font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace; font-family: Pristina, Ravie,fantasy; font-family: '21st Century',fantasy;

text-shadow text-shadow: none; text-shadow: 0px 0px 2px #000; text-shadow: 0px 0px 5px #000; text-shadow: 0px 0px 10px #000; text-shadow: 2px 2px 0px #000; text-shadow: 2px 2px 5px #000; text-shadow: -2px 0px 2px #000; text-shadow: -2px 0px 1px #000, 2px 0px 1px #000; text-transform text-transform: none; text-transform: capitalize; text-transform: lowercase; text-transform: uppercase; text-align text-align: left; text-align: right; text-align: center; text-align: justify; text-align: match-parent; text-align: start; text-align: end;

text-indent text-indent: 12px; text-indent: 14px; text-indent: 16px; text-indent: 18px; text-indent: 20px; text-indent: 2%; text-indent: 5%; text-indent: 10%; text-indent: 2em; text-indent: 4em; text-indent: 6em each-line; text-indent: 6em hanging; word-spacing word-spacing: normal; word-spacing: inherit; word-spacing: -4px; word-spacing: -3px; word-spacing: -2px; word-spacing: -1px; word-spacing: 0px; word-spacing: 1px; word-spacing: 2px; word-spacing: 3px; word-spacing: 4px; word-spacing: 5px; word-spacing: 9px; word-spacing: 10px; word-spacing: 11px; word-spacing: 12px; word-spacing: 13px; word-spacing: 14px; word-spacing: 15px; word-spacing: 16px; letter-spacing letter-spacing: normal; letter-spacing: inherit; letter-spacing: -2px; letter-spacing: -1px; letter-spacing: 0px; letter-spacing: 1px; letter-spacing: 2px; letter-spacing: 3px; letter-spacing: 4px; letter-spacing: 5px;

white-space white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-line; white-space: pre-wrap; white-space: pre-line;

↓ Vorschau

Infos zum CSS-Toolchen

Dieses Toolchen ist für Informatiker gedacht, die beim Design-Entwurf zahlreich Style-Properties ( W3C Recommendation ) verwenden. Style-Properties ( aktuelle Übersicht )

Zu CSS3 gehören ( 2014 ) etwa 310 Style-Properties.

Ein Toolchen kann die gegenseitigen Property-Abhängigkeiten veranschaulich und mit experimetellen Simulationen ein vertieftes Verständnis fördern.

• Die select-Tags dienen der schnellen Auswahl
• Die ausgewählten Style-Properties werden in eine Textarea ausgegeben.
• Der Textarea-Text kann von Hand geändert und mit dem Vorschau-Button in einem div-Tag angezeigt werden.

Anmerkung: Corporate-Design der THMM ( Hausfarben, wie z.B. Grün #80ba24, Grau #4a5c66 ).