css on maik.io https://maik.io/tags/css/ Recent content in css on maik.io maik.io de-de Tue, 20 Jan 2026 18:07:08 +0200 Better Monospace https://maik.io/notes/2026-01-20-better-monospace/ Tue, 20 Jan 2026 18:07:08 +0200 https://maik.io/notes/2026-01-20-better-monospace/ <p>Vor <a href="https://maik.io/notes/2009-08-12-better-helvetica/" title="Better Helvetica | maik.io" target="_blank" >langer Zeit</a> hatte ich mir einmal CSS-Code notiert, der Helvetica oder ähnliche Schriftarten nutzt, sofern sie lokal auf dem jeweiligen System verfügbar sind. Kürzlich brauchte ich etwas Vergleichbares für Code, also Schriftarten mit fester Laufweite. Nach etwas Recherche bin ich auf folgenden Code gekommen.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">font-family</span><span class="o">:</span> <span class="nt">ui-monospace</span><span class="o">,</span> <span class="nt">SFMono-Regular</span><span class="o">,</span> <span class="s2">&#34;SF Mono&#34;</span><span class="o">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">Menlo</span><span class="o">,</span> <span class="nt">Monaco</span><span class="o">,</span> </span></span><span class="line"><span class="cl"> <span class="nt">Consolas</span><span class="o">,</span> <span class="s2">&#34;Cascadia Mono&#34;</span><span class="o">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;Liberation Mono&#34;</span><span class="o">,</span> <span class="s2">&#34;DejaVu Sans Mono&#34;</span><span class="o">,</span> </span></span><span class="line"><span class="cl"> <span class="s2">&#34;Courier New&#34;</span><span class="o">,</span> <span class="nt">monospace</span><span class="o">;</span> </span></span></code></pre></div> Vor langer Zeit hatte ich mir einmal CSS-Code notiert, der Helvetica oder ähnliche Schriftarten nutzt, sofern sie lokal auf dem jeweiligen System verfügbar sind. Kürzlich brauchte ich etwas Vergleichbares für Code, also Schriftarten mit fester Laufweite. Nach etwas Recherche bin ich auf folgenden Code gekommen.

font-family: ui-monospace, SFMono-Regular, "SF Mono",
             Menlo, Monaco,
             Consolas, "Cascadia Mono",
             "Liberation Mono", "DejaVu Sans Mono",
             "Courier New", monospace;
]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Testen von Mailanwendungen https://maik.io/notes/2025-01-04-testen-von-mailanwendungen/ Sat, 04 Jan 2025 21:43:00 +0100 https://maik.io/notes/2025-01-04-testen-von-mailanwendungen/ <p>Durch den Einsatz von CSS ist es möglich, Nutzer eindeutig zu identifizieren. Unabhängig davon, ob die Nutzung von Cookies weiterhin reguliert oder verboten werden, zeichnet sich bereits ab, dass Nachfolgetechnologien bereitstehen, um ähnliche Funktionen zu übernehmen.</p> <p>Annabelle Theobald schreibt in »<a href="https://idw-online.de/de/news845262" title="Digitaler Fingerabdruck: CSS eröffnet neue Möglichkeiten zum Nutzer:innen-Tracking" target="_blank" >Digitaler Fingerabdruck: CSS eröffnet neue Möglichkeiten zum Nutzer:innen-Tracking</a>« für idw-online.de</p> <blockquote> <p>Noch spannender war für ihn aber das Testen von Mailanwendungen. Denn während JavaScript von vielen Mailclients standardmäßig blockiert wird, ist der Einsatz von CSS bislang nicht begrenzt. „Wir haben 21 Mailclients untersucht, darunter sowohl Android- und iOS- als auch Desktop und Web-Clients. In neun Fällen konnten wir alle unsere Techniken erfolgreich einsetzen und so Informationen über die Nutzenden sammeln. 18 der 21 Mailclients davon waren für mindestens eine bestimmte Technik anfällig“, erklärt</p> Durch den Einsatz von CSS ist es möglich, Nutzer eindeutig zu identifizieren. Unabhängig davon, ob die Nutzung von Cookies weiterhin reguliert oder verboten werden, zeichnet sich bereits ab, dass Nachfolgetechnologien bereitstehen, um ähnliche Funktionen zu übernehmen.

Annabelle Theobald schreibt in »Digitaler Fingerabdruck: CSS eröffnet neue Möglichkeiten zum Nutzer:innen-Tracking« für idw-online.de

Noch spannender war für ihn aber das Testen von Mailanwendungen. Denn während JavaScript von vielen Mailclients standardmäßig blockiert wird, ist der Einsatz von CSS bislang nicht begrenzt. „Wir haben 21 Mailclients untersucht, darunter sowohl Android- und iOS- als auch Desktop und Web-Clients. In neun Fällen konnten wir alle unsere Techniken erfolgreich einsetzen und so Informationen über die Nutzenden sammeln. 18 der 21 Mailclients davon waren für mindestens eine bestimmte Technik anfällig“, erklärt

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Mit CSS gestalten https://maik.io/notes/2024-07-16-mit-css-gestalten/ Tue, 16 Jul 2024 13:54:15 +0100 https://maik.io/notes/2024-07-16-mit-css-gestalten/ <p>Auf dem Blog onli-blogging.de von Onli bin ich auf einen spannenden Beitrag gestoßen. Dort wird gezeigt, <a href="https://www.onli-blogging.de/2384/Externe-Links-mit-CSS-kennzeichnen.html" target="_blank" >wie man ausschließlich Links, die zu externen Seiten führen, mit CSS gestalten kann</a>. Das gefällt mir, da es erneut dazu beiträgt, den Einsatz von JavaScript zu verringern.</p> Auf dem Blog onli-blogging.de von Onli bin ich auf einen spannenden Beitrag gestoßen. Dort wird gezeigt, wie man ausschließlich Links, die zu externen Seiten führen, mit CSS gestalten kann. Das gefällt mir, da es erneut dazu beiträgt, den Einsatz von JavaScript zu verringern.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> :has() https://maik.io/notes/2024-03-26-has/ Tue, 26 Mar 2024 20:22:00 +0100 https://maik.io/notes/2024-03-26-has/ <p>Ahmad Shadeed demonstriert in einem <a href="https://ishadeed.com/article/css-has-guide" title="CSS :has() Interactive Guide" target="_blank" >interaktiven Artikel</a> die Möglichkeiten des CSS <code>:has</code> Selektors. Es ist wirklich beeindruckend zu sehen, welche fortwährend neuen Gestaltungsmöglichkeiten sich dank CSS eröffnen, die einst auf Flash oder JavaScript angewiesen waren.</p> Ahmad Shadeed demonstriert in einem interaktiven Artikel die Möglichkeiten des CSS :has Selektors. Es ist wirklich beeindruckend zu sehen, welche fortwährend neuen Gestaltungsmöglichkeiten sich dank CSS eröffnen, die einst auf Flash oder JavaScript angewiesen waren.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Style RSS Feeds https://maik.io/notes/2024-02-27-style-rss-feeds/ Tue, 27 Feb 2024 07:54:00 +0100 https://maik.io/notes/2024-02-27-style-rss-feeds/ <p>In seinem Artikel »<a href="https://bleepbloop.studio/posts/did-you-know-you-can-style-rss-feeds" title="BLEEPBLOOP.studio | Did you know, that you can style RSS Feeds?" target="_blank" >Did you know, that you can style RSS Feeds?</a>« erklärt Nils Riedemann, wie man den eigenen RSS-Feed attraktiver gestalten kann. Obwohl dies für mich momentan nicht relevant ist, wird es hier dennoch vermerkt.</p> In seinem Artikel »Did you know, that you can style RSS Feeds?« erklärt Nils Riedemann, wie man den eigenen RSS-Feed attraktiver gestalten kann. Obwohl dies für mich momentan nicht relevant ist, wird es hier dennoch vermerkt.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> CSS Loaders https://maik.io/notes/2023-11-16-css-loaders/ Thu, 16 Nov 2023 07:04:34 +0100 https://maik.io/notes/2023-11-16-css-loaders/ <p><a href="https://css-loaders.com/" title="CSS Loaders: A collection of more than 500 loading animations" target="_blank" >CSS Loaders</a> ist eine umfangreiche Kollektion an Ladebalken die mittels CSS Animation gebaut wurden. Danke an <a href="https://github.com/Afif13/" title="GitHub-Account von Temani Afif" target="_blank" >Temani Afif</a> für die tolle Sammlung.</p> CSS Loaders ist eine umfangreiche Kollektion an Ladebalken die mittels CSS Animation gebaut wurden. Danke an Temani Afif für die tolle Sammlung.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> CSS Brighter https://maik.io/notes/2020-08-06-css-brighter/ Thu, 06 Aug 2020 03:05:00 +0000 https://maik.io/notes/2020-08-06-css-brighter/ <p><a href="https://twitter.com/missmatsuko/status/1264033342317449216" target="_blank" >Wie Matsuko</a>, finde ich Videos manchmal ebenfalls zu dunkel, wenn ich abends Netflix oder YouTube schaue. In der Regel stelle ich dann den Bildschirm heller, ich würde aber lieber nur das Video heller stellen. Mit dem folgenden Codeschnipsel kann man genau das tun.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="c">/* Brighter Netflix and YouTube videos */</span> </span></span><span class="line"><span class="cl"><span class="nt">video</span><span class="o">[</span><span class="nt">src</span><span class="o">^=</span><span class="s2">&#34;blob:https://www.netflix.com/&#34;</span><span class="o">],</span> </span></span><span class="line"><span class="cl"><span class="nt">video</span><span class="o">[</span><span class="nt">src</span><span class="o">^=</span><span class="s2">&#34;blob:https://www.youtube.com/&#34;</span><span class="o">]</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">filter</span><span class="p">:</span> <span class="nb">brightness</span><span class="p">(</span><span class="mf">1.4</span><span class="p">);</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div> Wie Matsuko, finde ich Videos manchmal ebenfalls zu dunkel, wenn ich abends Netflix oder YouTube schaue. In der Regel stelle ich dann den Bildschirm heller, ich würde aber lieber nur das Video heller stellen. Mit dem folgenden Codeschnipsel kann man genau das tun.

/* Brighter Netflix and YouTube videos */
video[src^="blob:https://www.netflix.com/"],
video[src^="blob:https://www.youtube.com/"] {
  filter: brightness(1.4);
}
]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Little Trick https://maik.io/notes/2020-04-26-little-trick/ Sun, 26 Apr 2020 22:00:00 +0000 https://maik.io/notes/2020-04-26-little-trick/ <p>Auf Twitter bin ich über einen cleveren Trick von <a href="https://twitter.com/flaviocopes/" target="_blank" >Flavio</a> gestolpert.</p> <p>Mit folgendem Quellcode kann man auch unterschiedliche Bilder beim Wechseln zwischen hellem und dunklem Modus nutzen.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">picture</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">source</span> <span class="na">srcset</span><span class="o">=</span><span class="s">&#34;dank.png&#34;</span> <span class="na">media</span><span class="o">=</span><span class="s">&#34;(prefers-color-scheme: dark)&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">img</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;bright.png&#34;</span><span class="p">&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">&lt;/</span><span class="nt">picture</span><span class="p">&gt;</span> </span></span></code></pre></div> Auf Twitter bin ich über einen cleveren Trick von Flavio gestolpert.

Mit folgendem Quellcode kann man auch unterschiedliche Bilder beim Wechseln zwischen hellem und dunklem Modus nutzen.

<picture>
  <source srcset="dank.png" media="(prefers-color-scheme: dark)">
  <img src="bright.png">
</picture>
]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Hello Darkness https://maik.io/notes/2020-03-31-hello-darkness/ Tue, 31 Mar 2020 22:00:00 +0000 https://maik.io/notes/2020-03-31-hello-darkness/ <p>Solltet ihr ein Gerät nutzen, das einen Darkmode hat, so färbt sich dieses kleine Blog nun auch entsprechend eurer Systemeinstellung.</p> <p>Mit Hilfe der <a href="https://adactio.com/journal/15941" target="_blank" >Beschreibung von Jeremy Keith</a> konnte ich das ganz schnell umsetzen.</p> <p>Eigentlich ist es sehr, sehr einfach. Einfach den folgenden Code in seine <code>style.css</code> packen und die gewünschten CSS-Eigenschaften für den Darkmode hinterlegen.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">@</span><span class="k">media</span> <span class="o">(</span><span class="nt">prefers-color-scheme</span><span class="o">:</span> <span class="nt">dark</span><span class="o">)</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="c">/* Darkmode CSS-Eigenschaften hier */</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p>Man könnte jetzt noch überlegen, ob man einen Schalter im Blog möchte, mit dem man die Einstellung überschreiben kann. Thomas Steiner beschreibt das <a href="https://web.dev/prefers-color-scheme/" target="_blank" >hier</a> auch ganz gut.</p> Solltet ihr ein Gerät nutzen, das einen Darkmode hat, so färbt sich dieses kleine Blog nun auch entsprechend eurer Systemeinstellung.

Mit Hilfe der Beschreibung von Jeremy Keith konnte ich das ganz schnell umsetzen.

Eigentlich ist es sehr, sehr einfach. Einfach den folgenden Code in seine style.css packen und die gewünschten CSS-Eigenschaften für den Darkmode hinterlegen.

@media (prefers-color-scheme: dark) {
  /* Darkmode CSS-Eigenschaften hier */
}

Man könnte jetzt noch überlegen, ob man einen Schalter im Blog möchte, mit dem man die Einstellung überschreiben kann. Thomas Steiner beschreibt das hier auch ganz gut.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> CSS Shadows https://maik.io/notes/2020-01-17-css-shadows/ Fri, 17 Jan 2020 23:00:00 +0100 https://maik.io/notes/2020-01-17-css-shadows/ <p>Schatten in CSS von Hand zu schreiben ist zwar möglich aber ein Krampf. Es gibt schon seit Jahren diverse Tools, um visuell schöne Schatten zu erstellen. Ein weiteres Tool ist von <a href="https://brumm.af/" target="_blank" >Philipp Brumm</a>.</p> <h3 id="smooth-shadow"><a href="https://brumm.af/shadows" title="Make a smooth css shadow" target="_blank" >Smooth Shadow</a></h3> <p>Für alle die nicht wissen was gemeint ist, ein simpler Schatten in CSS kann so aussehen:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">box-shadow</span><span class="o">:</span> <span class="nt">0</span> <span class="nt">2</span><span class="p">.</span><span class="nc">8px</span> <span class="nt">2</span><span class="p">.</span><span class="nc">2px</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="p">.</span><span class="nc">02</span><span class="o">),</span> <span class="nt">0</span> <span class="nt">6</span><span class="p">.</span><span class="nc">7px</span> <span class="nt">5</span><span class="p">.</span><span class="nc">3px</span> <span class="nt">rgba</span><span class="o">(</span><span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="o">,</span> <span class="nt">0</span><span class="p">.</span><span class="nc">028</span><span class="o">),</span> </span></span></code></pre></div> Schatten in CSS von Hand zu schreiben ist zwar möglich aber ein Krampf. Es gibt schon seit Jahren diverse Tools, um visuell schöne Schatten zu erstellen. Ein weiteres Tool ist von Philipp Brumm.

Smooth Shadow

Für alle die nicht wissen was gemeint ist, ein simpler Schatten in CSS kann so aussehen:

box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028),
]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> A Single Div https://maik.io/notes/2018-01-11-a-single-div/ Thu, 11 Jan 2018 23:00:00 +0100 https://maik.io/notes/2018-01-11-a-single-div/ <p>Was man inzwischen mit reinem CSS anstellen kann ist schon erstaunlich. Was man alles in einem einzigen <code>div</code> bekommt, zeigt die Seite <a href="http://a.singlediv.com" target="_blank" >A Single Div</a> von <a href="https://twitter.com/lynnandtonic" target="_blank" >Lynn Fisher</a>.</p> <p>Von Köpfen, über Süßigkeiten, Comicfiguren hin zu schönen Symbolen ist alles dabei. Wirklich beeindruckende Spielerei.</p> <p><a href="https://eay.cc/2017/a-single-div/" target="_blank" >Thank you Stefan</a></p> Was man inzwischen mit reinem CSS anstellen kann ist schon erstaunlich. Was man alles in einem einzigen div bekommt, zeigt die Seite A Single Div von Lynn Fisher.

Von Köpfen, über Süßigkeiten, Comicfiguren hin zu schönen Symbolen ist alles dabei. Wirklich beeindruckende Spielerei.

Thank you Stefan

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Bilder mit CSS bearbeiten (bisher nur Webkit) https://maik.io/notes/2012-07-08-bilder-mit-css-bearbeiten-bisher-nur-webkit/ Sun, 08 Jul 2012 22:00:00 +0000 https://maik.io/notes/2012-07-08-bilder-mit-css-bearbeiten-bisher-nur-webkit/ <h3 id="css3-filters-altering-html-and-images-with-just-css-"><a href="http://www.inserthtml.com/2012/06/css-filters/" target="_blank" >CSS3 Filters: Altering HTML and Images with just CSS →</a></h3> <blockquote> <p>CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work.</p> </blockquote> <p>Schwarz-Weiß- und Blur-Filter sollten unbedingt in den HTML5-Standard aufgenommen werden. Damit könnte man so großartige Dinge umsetzen.</p> <p>Thank you <a href="http://tutorialzine.com/2012/06/quick-tip-css-filters/" target="_blank" >Jonathan</a></p> CSS3 Filters: Altering HTML and Images with just CSS →

CSS3 Filters are a quite interesting offshoot from SVG, allowing you to modify HTML elements and images with blurs, brightness and a lot more. In this quick tutorial we’ll go over exactly how they’re going to work.

Schwarz-Weiß- und Blur-Filter sollten unbedingt in den HTML5-Standard aufgenommen werden. Damit könnte man so großartige Dinge umsetzen.

Thank you Jonathan

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]> Better Helvetica https://maik.io/notes/2009-08-12-better-helvetica/ Wed, 12 Aug 2009 22:00:00 +0000 https://maik.io/notes/2009-08-12-better-helvetica/ <p>Wer eine gut lesbare, hübsche und von vielen Systemen unterstützte Schriftart auf seiner Website einsetzen will, sollte auf Helvetica setzen. Hier ein sehr guter Code-Snippet.</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="nt">body</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="k">font-family</span><span class="p">:</span> <span class="s2">&#34;HelveticaNeue-Light&#34;</span><span class="p">,</span> <span class="s2">&#34;Helvetica Neue Light&#34;</span><span class="p">,</span> <span class="s2">&#34;Helvetica Neue&#34;</span><span class="p">,</span> <span class="n">Helvetica</span><span class="p">,</span> <span class="n">Arial</span><span class="p">,</span> <span class="s2">&#34;Lucida Grande&#34;</span><span class="p">,</span> <span class="kc">sans-serif</span><span class="p">;</span> </span></span><span class="line"><span class="cl"> <span class="k">font-weight</span><span class="p">:</span> <span class="mi">300</span><span class="p">;</span> </span></span><span class="line"><span class="cl"><span class="p">}</span> </span></span></code></pre></div><p>Der Code ist von Chris Coyier am <a href="https://css-tricks.com/snippets/css/better-helvetica/" target="_blank" >10. August 2009</a> veröffentlicht worden.</p> Wer eine gut lesbare, hübsche und von vielen Systemen unterstützte Schriftart auf seiner Website einsetzen will, sollte auf Helvetica setzen. Hier ein sehr guter Code-Snippet.

body { 
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300; 
}

Der Code ist von Chris Coyier am 10. August 2009 veröffentlicht worden.

]]>

Vielen Dank fürs Lesen! Wenn du Lust auf noch mehr Gedanken, Updates und ab und zu einen Blick hinter die Kulissen hast, folge mir doch gern auf Mastodon oder Instagram.

Hast du Fragen oder Feedback? Schreib mir gern eine E-Mail.

]]>