CSS

Cascading Style Sheets

903, 2017

Sprite Sheet Generator

Von |März 9th, 2017|CSS, Webdesign|0 Kommentare

„CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site.

Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area […]

2411, 2016

AVADA Child-Theme CSS nach Update nicht mehr erkannt

Von |November 24th, 2016|Content Management Systeme, CSS, Webdevelopment, WordPress|0 Kommentare

Schon beim Zweiten Projekt habe ich das Problem, dass das CSS (styles.css) beim Avada-Theme Version 5.x nicht mehr erkannt wird.

Beim ersten Projekt war es nach einem Avada-Update. Da es nur wenige Zeilen Code waren, habe ich Diese einfach in die Theme Options kopiert. Nun bin ich aber gerade dabei eine neue WordPress-Seite mit einem frischen, […]

812, 2014

Verläufe ohne Bilder und mit CSS darstellen…

Von |Dezember 8th, 2014|CSS, Webdevelopment|0 Kommentare

CSS Gradient Background Maker

http://ie.microsoft.com/TestDrive/Graphics/CSSGradientBackgroundMaker/Default.html

812, 2014

Superfish Tutorial

Von |Dezember 8th, 2014|CSS, Webdesign, Webdevelopment|0 Kommentare

Tutorial: jQuery Dropdown Menü mit Superfish
Schon etwas älter und bei heute aktuellen Browsern ist es teilweise nicht mehr nötig aber wer dennoch eine ausführliche Anleitung möchte, findet diese hier.
Das für mich beste Skript, um dynamische Dropdown-Menüs zu erzeugen, ist das jQuery-Plugin von Joel Birch. Durch zahlreiche Parameter können wir uns das Multi-Level-Menü mit Leichtigkeit in […]

2304, 2012

Umrechnung: px % em pt

Von |April 23rd, 2012|CSS, Webdevelopment|0 Kommentare

Übersicht von Werten für die Umrechnung von Pixeln, in Punkt, % und/oder EM
Es sind lediglich Annährungswerte – abhängig von Schrift, Browser und Betriebssystem aber es ist schon mal ein guter Anfang.

Eine Übersicht gängiger Pixel-Größen in die Einheit „em“ umgerechnet.

Ausgehend von 16px Browser standard Schrift-Größe

Pixel (px)
EM’s (em)
Prozent (%)
Punkt (pt)

6px
0.375em
37.5%
5pt

7px
0.438em
43.8%
5pt

8px
0.500em
50.0%
6pt

9px
0.563em
56.3%
7pt

10px
0.625em
62.5%
8pt

11px
0.688em
68.8%
8pt

12px
0.750em
75.0%
9pt

13px
0.813em
81.3%
10pt

14px
0.875em
87.5%
11pt

15px
0.938em
93.8%
11pt

16px
1.000em
100.0%
12pt

17px
1.063em
106.3%
13pt

18px
1.125em
112.5%
14pt

19px
1.188em
118.8%
14pt

20px
1.250em
125.0%
15pt

21px
1.313em
131.3%
16pt

22px
1.375em
137.5%
17pt

23px
1.438em
143.8%
17pt

24px
1.500em
150.0%
18pt

2401, 2012

CSS3 & Responsive Web

Von |Januar 24th, 2012|CSS, Webdesign, Webdevelopment|0 Kommentare

Sven Wolfermann beim MULTIMEDIA TREFF 28 „Webtechnologien – HTML5, CSS3 & Co“
„Sven Wolfermann, freier Webentwickler und Gast-Autor des CSS3 Adventskalender, kratzte gekonnt an der Oberfläche von CSS3 und Interessantes trat zu Tage. Aber sind die Spezifikationen bereits in den Browsern angekommen? Die Antwort lautet: Teilweise. Moderne Browser verbreiten sich immer mehr und schneller, so dass neue […]

1312, 2011

Box Shadow – Generator

Von |Dezember 13th, 2011|CSS, Webdesign, Webdevelopment|1 Kommentar

CSS3 Box-Shadow erstellen
Mit CSS3 lassen sich ohne Grafiken Schatten für Block-Elemente erstellen, mit Hilfe der CSS-Eigenschaft „Box-Shadow“. Um die Erstellung eines Schattens zu vereinfachen, kann man in diesem Tool Farbe, sowie die Richtung des Schattens mit Hilfe von Schiebereglern festlegen.

http://www.webmaster-elite.de/online-tools/boxshadow-generator.html

Damit auch ältere Internet Explorer auch einen Schatten anzeigen…
…muss man (wie so oft ;) noch etwas […]

811, 2011

Squirel WebFonts

Von |November 8th, 2011|CSS, Fonts, Webdesign, Webdevelopment|0 Kommentare

Vor einigen Tagen habe ich einen Artikel zu dem Thema WebFonts via @font-face {} gepostet.
„Schriften in einer Website anzeigen, die nicht auf allen Mac- und Windows-Rechnern installiert sind.“

Natürlich gibt es außer den beschriebenen Google Web Fonts noch weitere Möglichkeiten Schriften auf Websites einzubinden. 
Font Squirrel zum Beispiel. Hier gibt es hunderte von Schrifttypen und zusätzlich […]

211, 2011

Google Web-Fonts

Von |November 2nd, 2011|CSS, Fonts, Freeware, Webdesign|0 Kommentare

Schriften in einer Website anzeigen, die nicht auf allen Mac- und Windows-Rechnern installiert sind.
@font-face {} heisst das „Zauberwort“, mit dem nicht nur Fonts – also Schrifttypen – angezeigt werden können, die auf dem jeweiligen Rechner des Betrachters einer Website installiert sind. Auch Fonts, die entweder auf dem eigenen Server „liegen“ oder auf einem beliebigen anderem […]