URI encoded SVG Bei der Verwendung von URI encoded SVG in CSS ist darauf zu achten dass nicht nur der Name des Kodierung sondern auch das Attribut charset verwendet wird. Andernfalls kann das Bild von Internet Explorer nicht interpretiert werden. /* This will not work in IE */ .my-style { background-color: url(“data:image/svg+xml;utf8,/* … */ “); […]
Category: SASS
SASS: Functions
px-Werte nach em Konvertieren //// /// Calculate em for given pixel $values based on $context font-size /// /// @param {List} $values To be converted pixel values /// @param {Number} [$context] Font-size for em calculation //// @function calc-em($values, $context: $font-size-default) { $result: (); @each $value in $values { $result: append($result, 0em + ($value / $context)); } […]
CSS/SASS: Listen
Mit CSS3 können Listen im Tabellen-Style definiert werden. Dadurch wir die Position von nummerierten Aufzählungszeichen und Inhalt dynamisch und die Aufzählungszeichen lassen sich einfach umsetzen. =============================== <li> | 1. | Description | =============================== </li> … =============================== <li> | 20. | Description | =============================== </li> :before ol { counter-reset: ordered-list; display: table; padding-left: 0; > li […]
CSS/SASS: Cross Browser
Platzhalter1 // Webkit ::-webkit-input-placeholder { color: #ff0000; opacity: 0.5; } // Firefox 4-18 :-moz-placeholder { color: #ff0000; opacity: 0.5; } // Firefox 19+ ::-moz-placeholder { color: #ff0000; opacity: 0.5; } // IE10+ :-ms-input-placeholder { color: #ff0000; opacity: 0.5; } http://blog.ajcw.com/2013/09/css-placeholder-cross-browser-support/ [↩]
SASS: Nützliche Funktionen
SASS Compass Farben tint($color, $amount) Hellt die übergebene Farbe mit der übergebenen Weiss-Intensität auf. shade($color, $amount) Dunkelt die übergebene Farbe mit der übergebenen Schwarz-Intensität ab.
SASS: Mixins
Responsive Query @mixin media-query($media) { // screens bigger than 1200px @if $media == big { @media only screen and (min-width: 1200px) { @content; } } // retina content @else if $media == retina { @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min–moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and […]
SASS: Einleitung
SASS & Compass Die neuen Anforderungen an modernes Webdesign haben gezeigt, dass traditionelles CSS an seine Grenzen stösst. Dabei sind das fehlen von Variablen, Funktionen und das aufwändige Schreiben von Responsiven Designs nur einige Beispiele. Um den heutigen Anforderungen des Internets und seinen Benutzer gerecht zu werden wird für die Web-Projekte von gyselroth in Zukunft […]
SASS: Basics
PhpStorm FileWatcher konfigurieren Die native Compass-Unterstützung von PhpStorm unterstützt leider nur eine config.rb. In einem Projekt mit mehreren Themes o.Ä. sollte deshalb manuell ein FileWatcher eingerichtet werden. Compass Projekt erstellen Über die Konsole in den gewünschten Ordner navigieren in dem später die Style-Dateien abgelegt werden sollen und dort den folgenden Befehl ausführen. $ compass […]
CSS/SASS: Reset
Reset (28.07.2015) /** * @section reset *********************************************************************** */ * { margin: 0; padding: 0; } a { text-decoration: none; outline: none; } a:active { /* IE */ background-color: transparent; } iframe, img { display: block; /* ff spacing fix */ border: 0; } input, textarea { outline: none; } input[type=text], input[type=password], input[type=number], input[type=color], input[type=date], input[type=month], […]