Texture Mixin for Sass

Posted Over 10 years ago. Visible to the public. Linked content.

Awesome Sass plugin to experiment with Subtle Patterns Show archive.org snapshot based textures. It automatically removes the base color from the pattern, leaving a semi-transparent texture that you can tint in any color you want. It also has switches to invert the pattern.

@include texture(green, 34, 0); // color, texture-number, 0=inverted or 1=normal

If you have ever done this manually you know how much pain this can safe you. Check it out! Show archive.org snapshot

magnus-g.github.io
Henning Koch
makandra.com
Say thanks
Last edit
About 7 years ago
Deleted user #4803
License
Source code in this card is licensed under the MIT License.

Related cards:

Remove resource fork files from a FAT volume on MacOS

Be careful!
The following solution will delete files on a volume. If you don't know exactly what you're doing, you can run into big trouble with your computer.

I play mp3 files on my car stereo that are stored on a SD-C...

Micro clearfix mixin for Sass

Clearfix is a hack to clear floating elements without additional HTML markup.

If you only need to support IE8 and above, a great clearfix with few side effects is:

=clearfix
  &:after
...

Read your mail in networks that forbid e-mail traffic

If you are connected with a network that forbids e-mail traffic but allows SSH, you can tunnel your e-mail connection through a trusted, intermediary server:

 sudo ssh -i /home/local-user/.ssh/local-user.key -L 143:mail-server.tld:143 remote-...

Good real world example for form models / presenters in Rails

We have often felt the pain where our models need to serve too many masters. E.g. we are adding a lot of logic and callbacks for a particular form screen, but then the model becomes a pain in tests, where all those callbacks just get in the way. O...

How to build the perfect number of blank records for a nested form

When you render a nested form for a Movie which has_many :actors, you want to render the right number of blank Actor forms. The right number means:

  • A minimum number of blank forms so the user can add more Actors to an existing Movie, ...

How to not die with ActionView::MissingTemplate when clients request weird formats

When HTTP clients make an request they can define which response formats they can process. They do it by adding a header to the HTTP request like this:

Accept: application/json

This means the client will only understand JSON respon...

Useful collection of Sass mixins

This collection of Sass mixins enables cross-browser styling (including IE with CSS3PIE) with less lines of code.

This enables PIE for IE up to version 8 only (the first part is not possible in Haml,...

Always show all form errors during development

You've been there: A form cannot be submitted, but you don't see a validation error because the field at fault has no corresponding input field on the form. Because this is usually a bug, you insert debug information listing all errors into the fo...

Use <input type="number"> for numeric form fields

Any form fields where users enter numbers should be an <input type="number">.

Numeric inputs have several benefits over <input type="text">:

  • On mobile or tablet devices, number fields show a special virtual keyboard that shows mostly digit...

Remove quotes from Sass mixin arguments

When calling a Sass mixins, you usually don't need to quote arguments:

+tint_article(#f21)

However, when a CSS property consists of multiple parts (like background or box-shadow), the Sass parser will trip up:

+box_shadow(0 1px 2px ...
Posted by Henning Koch to makandra dev (2013-10-30 09:19)
This website uses short-lived cookies to improve usability.
or learn more