Interactive generator for gradients, borders, noise textures and box shadows
CSSmatic lets you play around with four rather complex CSS stylings and gives you CSS or SASS code to use your result right away.
- Gradients
- Borders
- Noise textures – offers a texture download
- Box shadows
Related cards:
IE9: Linear gradients remove border-radius and inset box-shadows
When you add a linear gradient to an element, IE9 removes all border-radius and inset box-shadows. This is because you probably are doing linear gradients with this weirdo Microsoft filter:
filter: progid:DXImageTransform.Microsoft.gradie...
CSS: Emulate borders with inset box shadows
When is this useful?
- When both parent and child elements have borders, with this technique you don't get two borders (which looks ugly). This is because child elements are rendered over inset box shadows, not inside inset ...
CSS: Emulate linear gradients with inset box shadows
Why is this useful?
- You can have a background image on the same element, overlaying it with a transparent gradient.
- Since you are probably using gradients to give an element a glossy or three-dimensional feel, box shadows w...
Many box shadows will make your app unusable on smartphones and tablets
Box shadows are awesome. Unfortunately they are also very costly to render. You will rarely notice the rendering time on a laptop o...
Make box shadows look the same in IE and other browsers
The box shadows created rendered in IE by CSS3PIE look darker and are blurred differently than in browsers that render box-shadow natively.
If possible, try to be OK with this. If not, make an IE-only stylesheet that uses...
CSS box-shadow not working in IE9 inside tables with collapsing borders
Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.
Consider this HTML:
<table style="border-collapse: collapse">
<tr>
<td>
...
Large CSS box shadows can bring browsers to a crawl
Browser rendering engines are very slow at rendering large box shadows. I had a situation where a complex layout with fixed elements and large shadows slowed Firefox down to 2 frames/second for scrolling and DOM manipulation.
Some advice:
- Be a...
Browser support for box-shadow
Basic box shadow support is available in all browsers today, but you need to check to which extend they are supported. Implementations differ:
- Are multiple box shadows (separated by comma) possible?
*...
An auto-mapper for ARIA labels and BEM classes in Cucumber selectors
Spreewald comes with a selector_for helper that matches an English term like the user's profile into a CSS selector. This is useful for steps that refer to a particular section of the page, like the fol...
How to create Rails Generators (Rails 3 and above)
General
- Programatically invoke Rails generators
-
Require the generator, instantiate it and invoke it (because generators are
Thor::Groups, you need to invoke them withinvoke_all). Example:require 'generators/wheelie/haml...