I love pure CSS solutions to complex design problems.
This was an interesting little problem to solve: How do we make a column of text display on top of an angled background color? Better yet, how do we cut a corner out of the text to make it fit better?
The answer to the first problem was comparatively straightfoward: two nested blocks, one rotated 45 degrees down and the other rotated 45 degrees right back. The second problem was trickier, but can be solved if you’re using a browser that supports CSS Shapes.
Only suitable for modern browsers, naturally.
Of course, you have to start with the traditional spinning cube. It’s practically the “Hello World!” of 3D animation:
That’s the easy part. The hard part is using equilateral CSS triangles to build a spinning octahedron:
And then pulling together even more trigonometry to build an icosahedron:
Which was, while confusing at times, a surprisingly fun puzzle to solve.
Seriously, how did I never know about this until today?
An invisible, “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use
­to insert a soft hyphen.
A couple of pure (mostly) CSS widgets/toys I came up with as part of an actual project today.
Continue reading Fun with CSS
Most browsers won’t print background colors, and print-only CSS can (or should) be set to force all text to be black so it looks good on a white background. But what about images? What if you have a logo with white text and a transparent background that’s normally displayed over a dark background? Webkit browsers support the
-webkit-print-color-adjust: exact style, but that still leaves out Firefox. Continue reading force browsers to print background colors of elements
If you have a very long list of options, neither <select multiple> nor <input type=”checkbox”> is quite ideal. This combines the two using jQuery.
When an option is selected, a checkbox (with label) is automatically created using the same “name” and “value” attributes. When the checkbox is un-checked, it fades away (after a brief delay) and is re-attached to the single-select.