WebTool: Web Gradients

Oha, mein letzter Beitrag ist ja schon eine gefühlte Ewigkeit her. Da wird es Zeit für einen neuen Beitrag – bessergesagt ein WebTool.

Ich bin letztens erst selber auf die Seite https://webgradients.com/ gestoßen. Hier findet ihr sehr schöne CSS-Verläufe für eure Webprojekte. Man kann sich die Verläufe als Vollbild anzeigen lassen, den CSS-Code kopieren oder auch alle Verläufe in Sketch oder Photoshop integrieren.

Sicher wird hier jeder fündig.

Bilder: Screenshots webgradients.com


Des Weiteren kann ich auch den Ultimate CSS Gradient Generator empfehlen.

Fullscreen Overlay Styles

Artikelbild Fullscreen Overlay Styles

Hier findet ihr sehr schöne Beispiele für Fullscreen Overlay Styles, d.h. beim Öffnen der Overlays wird die komplette Webseite in den Hintergrund gerückt und eine neue Ebene füllt den ganzen Bildschirm. Hier können dann Elemente wie Text, Bild oder eine Navigation eingefügt werden.

Auf jeden Fall ein schöner Eye-Catcher, den man so nicht oft sieht.

Zu den Fullscreen Overlays bei tympanus.net

Free-Font »Vollkorn 3.0« von Friedrich Althausen

… gerade bei Slanted entdeckt – den Free-Font Vollkorn 3.0 von Friedrich Althausen.

Die Vollkorn gibt es schon seit 2006, seit 2010 als eine der ersten Google Webfonts. Und jetzt kann man sie in 8 Schnitten kostenlos herunterladen. Wenn man dem Designer etwas entgegenkommen will, kann man auch etwas spenden.

Aber schaut am besten mal selber: http://vollkorn-typeface.com/

Ich finde, die Schriftart ist wirklich sehr gelungen und für den Web-Bereich ist es wahrscheinlich auch eine sehr interessante Auswahl.

Achja, der eben gelesene Artikel ist auch in der Vollkorn gesetzt. Bemerkt?

CSS – Farben einer Textauswahl ändern

Die Farben einer Textauswahl zu ändern, ist garnicht so schwer – CSS machts möglich.
Hier ein Beispiel mit rotem Hintergrund und weißer Schriftfarbe.

/* Mozilla based browsers */
::-moz-selection {
background-color: rgb(208, 51, 51);
color: rgb(255, 255, 255);
}

/* Works in Safari */
::selection {
background-color: rgb(208, 51, 51);
color: rgb(255, 255, 255);
}

/* Works in Opera */
::-o-selection {
background-color: rgb(208, 51, 51);
color: rgb(255, 255, 255);
}

::-ms-selection {
background-color: rgb(208, 51, 51);
color: rgb(255, 255, 255);
}

/* Works in Internet Explorer */
::-webkit-selection {
background-color: rgb(208, 51, 51);
color: rgb(255, 255, 255);
}