bUTschy.de

Suchen

OL reversed

Zählrichtung umkehren mit <ol reversed>. Listenmarker in Rot mit ::marker.

/* css */
ol[reversed]>li::marker { color: red; }
ol[reversed]>li>span { margin-left: .5rem; }

Ein "margin" zwischen Marker und Listenpunkt bekomme ich leider nur mit einem <span> hin, ohne den CSS Code unnötig aufzublähen. Kann man machen, solange der Listenpunkt auch nur aus einem Einzeiler besteht.

CSS Farben

Wie war noch gleich der Hex bzw. RGB oder Hue Code für die Farbe Rot? ... Oder, ich nehme erst mal so nen Farbnamen wie:

Red IndianRed LightCoral Salmon DarkSalmon LightSalmon Crimson FireBrick DarkRed Maroon IndianRed Brown Salmon LightSalmon DarkSalmon

Für die anderen Farbtöne (Orange, Gelb, Grün usw...) klick auf:

CSS - color

Textfarbe:
red orange yellow green blue purple white black

Hintergrundfarbe:
bg- bg- bg- bg- bg- bg- bg- bg-

Ramenfarbe:
border- border- border- border- border- border- border- border-

Bullet (class dot)

CSS var

Variablen sind ein Teil der CSS Spezifikation und heißen CSS Custom Properties

:root {
--red: #f8312f;
}

Überall dort, wo ich wiederholend die Farbe "Rot" benötige, verwende ich diese CSS Klassen:

.red { color: var(--red); }
.bg-red { background-color: var(--red); }
.border-red { border: var(--border) var(--red); }

Free SVG Icons

1424 Open source free SVG icons. Highly customizable. No attribution required. For commercial use.

WEIß

Die Farbe Weiß in allen CSS Varianten.

{ color: #fff; } /* hexadezimale */
{ color: white; } /* farbname */
{ color: rgb(255, 255, 255); } /* rgb */
{ color: rgba(255, 255, 255, 1); } /* rgba */
{ color: hsl(0, 0%, 100%); } /* hsl */
{ color: hsla(0, 0%, 100%, 1); } /* hsla */

#weiss #weiß #white #ffffff

Form ::placeholder Color

Eine andere Farbe für den Formular "placeholder" in allen Browsern

::-webkit-input-placeholder { color: red; }
:-ms-input-placeholder { color: red; }
::-moz-placeholder { color: red; opacity: 1; }

Und mit opacity: 1; ist der Text im Firefox auch gleich etwas besser Lesbar.

Code

<!-- html -->
<!doctype html>
<meta charset="utf-8">
<title>Titel</title>
<meta name="theme-color" content="black">
<!-- img -->
<img src="..." loading="lazy" alt="">
<!-- link -->
<a href="https://www.link.de">https://www.link.de</a>

Blur Text

Ein bischen text-shadow und color auf transparent...

Und schon kann man diesen Textabschnitt im Firefox Browser nicht mehr lesen ;)

Beim Chrome schon etwas deutlicher und beim IE ist alles Weiß.

QuickPic 4.0 Beta

QuickPick ist meine App für Android wenn es um Bilder geht.

In der aktuellen Beta gibt es jetzt eine neue Funktion mit der sich in den Einstellungen beliebige Ordner definieren lassen, die automatisch zu einem Cloud-Dienst deiner Wahl gesichert werden können.

Und dann noch:

  • Colorful themes for action bar
  • Support photo sphere
  • Google account login with Play Service
  • Sort folder by file size
  • Faster scanning folders

View & Download der apk

HTML Gerüst

Also, ich fange mal an:

<!-- html -->
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="black">
<title>TITLE</title>
</head>
<body>

<h1>Hallo Welt!</h1>

</body>
</html>

Fertig.. ne ne, das war es schon ;)

CSS3 und :valid

Nun meckert der W3C CSS Validierungsdienst von wegen:

Entschuldigung! Es wurden die folgenden Fehler gefunden

  1. Unbekanntes Pseudoelement oder Pseudoklasse: :required
  2. Unbekanntes Pseudoelement oder Pseudoklasse: :valid

Momentan stehe ich echt auf dem Schlauch und finde keine valide Lösung.

HTML & CSS

HTML5 Tags!


code q em strong cite samp var u s del ins span small abbr math sub sup mark kbd #link Extern. Intern. orange style 🄬️ fs-20 Icon


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,