bUTschy.de

HTML & CSS

HTML5 Tags!

code q em strong cite samp var u s del ins span small abbr time $math$ _sub ^sup mark kbd #link Extern. Intern. orange style 🄬️ fs20

Für mein 4CMS das ich hier auf butschy.de verwende, versuche ich ein möglichst schlankes und klassenloses (classless) CSS Framework zu bauen.

Für eine Live Vorschau nutze ich ein Pen auf Codepen,

h* Überschriften

H2

H3

H4

H5

H6

blockquote + q cite

pre

ul { list-style-type: none; }
ul { list-style-type: circle; }
ul { list-style-type: square; }
ol { list-style-type: upper-roman; }
ul { list-style-image: url('bild.gif'); }

• ul li
• ul li
• ul li

• ul li 1
• ul li 2
• ul li 3
• ul li 4
  • ul li 4-1
  • ul li 5-2
  • ul li 6-3
• ul li 4

• ul li a
• ul li a
• ul li a

• ul li span
• ul li span
• ul li span

1. ol li
2. ol li
3. ol li

1. ol li a
2. ol li a
3. ol li a

1. ol li span
2. ol li span
3. ol li span

1. upper-roman
2. upper-roman
3. upper-roman
4. upper-roman
5. upper-roman
6. upper-roman
7. upper-roman
8. upper-roman
9. upper-roman
10. upper-roman

dt

dd

dt

dd

dt

dd

Meter Color - green - Grün
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

Meter Color yellow - Gelb
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%

Meter Color red - Rot
0% 50% 20% 30% 40% 50% 60% 70% 80% 90% 100%

10% = red 10%

20% = orange 20%

30% = yellow 40%

40% = green 40%

50% = blue 50%

60% = purple 60%

70% = white 70%

80% = black 80%

90% = dark 90%

100% = darkest 100%

button Liste

default .btn

red orange yellow green blue purple white black

red orange yellow green blue purple white black

red orange yellow green blue purple white black

⏺ Red ⏺ Orange ⏺ Yellow ⏺ Green ⏺ Blue ⏺ Purple ⏺ Black ⏺ White

🔴 🟠 🟡 🟢 🔵 🟣 ⚫ ⚪
🟥️ 🟧️ 🟨️ 🟩️ 🟦️ 🟪️ ⬛ ⬜

.btn .btn .btn .btn .btn .btn .btn .btn

.btn .btn .btn .btn .btn .btn .btn .btn

click dialog to open

Kommentare