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.

display: table

/* css */
display: table  /* <table> */
display: table-row /* <tr> */
display: table-cell /* <td> */
display: table-column /* <col> */
display: table-column-group /* <colgroup> */
display: table-footer-group /* <tfoot> */
display: table-header-group /* <thead> */

Font Awesome Unicode

Den Unicode für das 𝕏 (X) Icon bekommen wir so: e61b, dem muss noch ein &#x vorangestellt werden und kann dann z.b. so verwendet werden.

<!-- html -->
<i icon="&#xe61b;"></i>

Damit das so auch funktioniert, kommt noch dieser Snippet in die CSS Datei:

/* css */
[icon]:after {
  content: attr(icon);
  font-family: 'FontAwesome'; 
}

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 important

.green

.bg-green

.border-green

.neon-green

CSS - font-size

CSS - font-weight

CSS Check Warnungen (xx)

Wenn der W3C CSS Validierungsdienst meldet:

Gratulation! Es wurden keine Fehler gefunden.

Weiter unten dann aber mehrere Warnungen kommen al´a:

Due to their dynamic nature, CSS variables are currently not statically checked

CSS - border-radius

Radius1 Radius2 Radius3 Radius4

:root {
 --radius: 3rem .7rem 2rem .7rem/.7rem 2rem .7rem 3rem;
}
.radius {
 border-radius: var(--radius);
}

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 - animation

<i class="fas fa-bowling-ball fa-spin"></i>

blablabla

blablabla...

.gratismut { background: 🖕; }

.lippenbekenntnis { background: 🖕; }

.gutmensch { background: 🖕; }

CSS - font-family

Ich habe die Google-Fonts gelöscht (kein berechtigte Interesse) und mit system-ui eine sehr gute Alternative gefunden.

Mit font-weight 100 hab ich ein sehr dünnes Schriftbild wie z.b. bei Roboto (100) und mit font-weight 900 ist der Text auch fett genug, so das ich auch die Schriftart Anton nicht mehr brauche.

Ein weiterer Schritt in Richtung die Ladezeit einer Seite zu verbessern.

Logbuch 05032022

Ach da war doch was, wie sieht denn das progress Tag im Darkmode aus? Ja nicht hier, hier ist alles noch Lightmode.

Update: 05.03.2022 - Logbuch

navbar-toggler

Zwei Zeilen CSS Code entfernen den Rahmen um das navbar-toggler-icon in der Navbar von Bootstrap 5 seiner Navigation.

.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler {
  border: 0;
}

#remove #hover #border #navbar #demo

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); }

CSS Attribut-Selektor

Selektoren auf der Basis von Attributen werden in eckigen Klammern notiert.

h2[title^="H2 Titel"] { ... }
a[href^="https:"] { ... }
a[href^="tag/slug"] { ... }
input[type="password"] { ... }
img[alt~="Alt-Text"] { ... }
img[src~="bilder"] { ... }

hidden scrollbars

Den Scrollbalken deaktivieren in allen Browsern geht so:

body, html { 
 overflow: hidden;
}

Wer den Balken aber nur Verstecken bzw. Ausblenden will ohne dabei die Scroll-Funktionalität zu verlieren, muss Weiterlesen.

Neumorphism

Neumorphism, so nennt sich der neue heiße Design scheiß und sieht mit etwas CSS in etwa so aus.

Erinnert mich sehr stark an mein Seitenlogo von 2018

p + p

add paragraph spacing without adding additional spacing after the last one

p + p {
 margin-top: 1rem;
}

Wie lange habe ich danach gesucht, es kann so einfach sein.

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

Rimworld Mods

Mods für Rimworld auch ganz ohne dem Workshop von Steam.
(download rimworld mods without steam and workshop)

• https://www.nexusmods.com/rimworld
• https://lttlword.ru/tag/rimworld-v1
• https://catalogue.smods.ru/game/rimworld
• https://rim-world.com

Font Awesome v5.2.0 - How to Use

In einem HTML Dokument.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

Oder via @import in der CSS Datei.

@import url(https://use.fontawesome.com/releases/v5.2.0/css/all.css);

CENTER

Ein Element horizontal und vertikal positionieren mit so wenig Code wie möglich und so viel wie nötig.

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

CSS - style scoped

Bootstrap 4.1.0

Das CSS Framework Bootstrap ist jetzt Currently v4.1.0 und was alles neu ist kann hier nachgeschlagen werden.

Mein Pen dazu bei Codepen: https://codepen.io/butschy/pen/zpwEMN

CSS Ei

Ich habe da mal ein Ei "Programmiert" :p

Zum Pen

CSS Vendor Prefixes

Bei Browsern die CSS3 nur bedingt unterstützen.

• -webkit- (Chrome, Safari, neuere Opera-Versionen)
• -moz- (Firefox)
• -o- (ältere Opera-Versionen)
• -ms- (Internet Explorer)

https://css3please.com

Flexbox 1

Bis ich es kann, war doch mit z.b. margin: x x x x; auch nicht so schwer ;)

.flex-item {
 flex-grow: 1; /* Wachstumsfaktor */
 flex-shrink: 1; /* Schrumpffaktor */
 flex-basis: 25rem; /* Basisbreite */
}

Oder das gleich in Kurz:

.flex-item {
 flex: 1 1 25rem;
}

Ich nenne es mal WSB.

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.

TinyMCE 4.3

Es gibt wieder einige Neuerungen im TinyMCE, aber immer noch kein Images-Upload bzw. einen File-Manager.

Ein bischen JS und man bekommt wenigstens ein Images-Upload ganz ohne Plugin hin.

Mobile First Testseite

Ein Hamburger Menu, eine fixe Navigation im Header beim Scrollen (position: sticky;) alles Responsive und nach dem "Mobile First" Prinzip.

CSS Lightbox

Nur zwei Zeilen CSS Code für eine simple CSS Lightbox.

Font Awesome 4.5

Das Icon-Font und CSS Toolkit Font Awesome ist aktuell in Version 4.5 erschienen und bringt wieder 20 neue Icons mit.

Darunter auch das für den Edge . Zudem wurden auch diverse Google Icons auf den neusten Stand gebracht.

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>

CSS-Puns

#kim_kardashian {
padding-bottom: 9999px;
}

oder

Font Awesome 4.4.0

Das Icon-Font und CSS Toolkit Font Awesome ist in Version 4.4.0 erschienen und bringt z.b. 66 neue Icons mit.

CSS3 valide

War nach viel Spielerei wieder nötig laut CSS-Validator

CSS xxx-of-type

Um z.b. nur dem letzten "p" Element in einem Container eine CSS-Eigenschaft zuzuordnen, kann man folgenden Code verwenden.

article p:last-of-type {
padding-bottom: 1rem;
}

Oder nur dem ersten.

article p:first-of-type {
padding-top: 2rem;
}

CSS Schlagschatten

Alle Boxen haben einen "Schatten"

article, aside, section { 
 box-shadow: 0 0 1rem rgba(0, 0, 0, .3);
}

WTFCFH Framework

Ein Artikel auf Webkrauts.de vom 1 April 2015 stellt ein CSS Framework vor, welches sich ganz speziell an die Bedürfnissen von Kunden und Desingner richtet.

Aus die Maus mit nichtssagenden Klassennamen, WTFCFH (What The Fuck, Client From Hell) löst das so:

/* ---- Feinjustierung ---- */
.einHauchNachLinks {}
.einTuckenNachOben {}
.einWenigDunkler {}
.dasMussZweiMillimeterNachOben {}
.logoHauchTuckenIdeeSonstwohin {}
.einWenigMehrWeissraum {}
.makeMyLogoBigger {}

Und wenn es Konkreter wird, dann so:

Zeit in Worten

Den halben Tag werkel ich schon an meiner "Wordclock".

Hier ein bischen HTML, da ein wenig CSS und auch etwas JS... Nun habe ich keine Lust mehr und lasse den Block jetzt so wie er ist.

Flexbox Bilder

Bilder mit Bildunterschrift nebeneinander positionieren und das Responsive ?

.flex {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

linear-gradient

Ein Farbverlauf mit CSS linear-gradient.

Farbverlauf von Weiß (#fff) zu Grau (#eee) von oben nach unten.

Der CSS Code:

.gradient {
background: linear-gradient(to bottom, #fff 0%, #eee 100%);
}

#top #left #right

Unicode und ASCII

¯ \ _ (ツ) _ / ¯

Unicode Zeichen die auf allen Geräten und Browsern gleich aussehen und sich mit CSS einfärben lassen. Hier ein paar mehr oder weniger Nützliche.

Blätterfunktion v2.0

Die sieht nun so aus

So ein Sonntag verschafft einem viel Zeit zum Basteln, warum also nicht mal den Code der alten Blätterfunktion überarbeiten.

CSS Webfont Icons

Ich wollte auch mal solche Webicons für mein 4CMS.

Warum nicht das Icon-Set von Font Awesome.

Hier stehen mehr al 479 unterschiedliche Icons zur Auswahl die sich leicht einbauen lassen.

CSS - buttons

default red orange yellow green blue purple white black

Dropdown Menu

Klicke hier auf Weiterlesen und wenn ich alle richtig gemacht habe, bekommst man dort ein horizontales "only CSS" Dropdown-Menu zu sehen.

CSS Panel

Geben wir den Panel Boxen mal etwas Farbe.