css – select, dropdown arrow

css arrow for html selects: in LESS @arrowColor: white; @arrow: escape(‘@{arrowColor}’); background-image: url(~”data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20448%22%20enable-background%3D%22new%200%200%20256%20448%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{arrow}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M255.9%20168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2%200-7.9%201.6-11.2%204.8S0%20163.8%200%20168c0%204.4%201.6%208.2%204.8%2011.4l112%20112c3.1%203.1%206.8%204.6%2011.2%204.6%204.4%200%208.2-1.5%2011.4-4.6l112-112c3-3.2%204.5-7%204.5-11.4z%22%2F%3E%3C%2Fsvg%3E%0A”); background-position: right 10px center; background-repeat: no-repeat; background-size: auto 50%; outline: none; appearance: none; &::-ms-expand { display: none }  

simple tooltip, multiline, pure css

.popover__title { cursor: pointer; } .popover__wrapper { position: relative; display: inline-block; } .popover__content { opacity: 0; visibility: hidden; position: absolute; left: -100px; top: 105px; right: -100px; transform: translate(0,10px); background-color: white; padding: 15px; border: 1px solid #e8e7e7; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.16); width: auto; } .popover__content:before { position: absolute; Read more…

sass spacing helper – margin and padding

// // margin and padding helper classes // @for $i from 1 through 10 { $pixel: $i * 5; .mt#{$pixel} { margin-top: #{$pixel}px; } .mr#{$pixel} { margin-right: #{$pixel}px; } .mb#{$pixel} { margin-bottom: #{$pixel}px; } .ml#{$pixel} { margin-left: #{$pixel}px; } .pt#{$pixel} { padding-top: #{$pixel}px; } .pr#{$pixel} { padding-right: #{$pixel}px; } .pb#{$pixel} Read more…

less helpers – spacings

// // spacing helpers // @spacings: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50; // mixin to iterate over colors and create CSS class for each one .generate-spacing-helpers(@i: length(@spacings)) when (@i > 0) { .generate-spacing-helpers(@i – 1); @name: extract(@spacings, @i); @space: unit(extract(@spacings, @i), px); // margin .mt-@{name} Read more…

unveil.js – lazy loading image with css animation

http://luis-almeida.github.io/unveil/ https://stephanwagner.me/only-css-loading-spinner LESS // unveil image loading img.unveil-is-loading { @keyframes spinner { to {transform: rotate(360deg);} } &:before { content: ”; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #333; animation: spinner .6s linear infinite; text-indent: Read more…

SASS and LESS mixin for transitions

Better than pure CSS ist, to write LESS or SASS/SCSS. Here are some mixins … SCSS: @mixin transition($property: all, $duration: 500ms, $type: linear) { -webkit-transition: $property $duration $type; -moz-transition: $property $duration $type; -o-transition: $property $duration $type; transition: $property $duration $type; } LESS: .transition (@property: all, @duration: 500ms, @type: linear) { Read more…

css3 generators

http://cssarrowplease.com/ http://www.css3-generator.de/ http://css3generator.com/ Pixel to em: http://pxtoem.com/ Collection of CSS3 hover effects: http://ianlunn.github.io/Hover/

Making a websites’s mega menu accessible for tablets and below

The goal is to allow click events on the first level for desktop browsers, and to trigger a hover event for mobile browsers. How to detect a mobile browser? I chose this approach: http://stackoverflow.com/a/14301832/4074710 The mega menu: <nav> <ul> <li> <a href=”#”>Item</a> <ul> <li><a href=”#”>Subitem</a></li> <li><a href=”#”>Subitem</a></li> </ul> </li> <li> <a href=””>Item</a> <ul> <li><a Read more…

less helper for responsive development

I use the following 2 mixins for responsive development (e.g. with bootstrap): .do-this-until-width(@max-width, @rules) { @media (max-width: @max-width) { @rules(); } } .do-this-after-width(@min-width, @rules) { @media (min-width: @min-width) { @rules(); } } Example: div.my-div { text-align: center; float: none; .do-this-after-width(@screen-xs-max, { text-align: left; float: left; }); }  

more semantic html with less and bootstrap

Classic Bootstrap: <div class=”container”> <div class=”row”> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> <div class=”col-xs-12 col-sm-6 col-md-4 col-lg-2″>my grid item</div> </div> </div> More semantic version: // import all bootstrap less files first @import “less/bootstrap”; // build Read more…

use fonts from google fonts library local

Download and extract selected fonts (collection) from google fonts library. Then open the link href target of your include statement in your browser e.g.: http://fonts.googleapis.com/css?family=Open+Sans Copy the desired @font-face statement from there, to your local css file: /* latin */ @font-face { font-family: ‘Open Sans’; font-style: normal; font-weight: 400; src: local(‘Open Sans’), Read more…