A rather geeky/technical weblog, est. 2001, by Bramus
From StackOverflow: It’s possible to include Emoji characters in modern browsers, but how can one make it a single color and choose that color? Using an (inset) text-shadow in combination with transparent text color this indeed is possible: With some more CSS – and an extra attribute – it’s possible to even achieve a (faux) …
Continue reading “Emoji Silhouettes and Emoji Outlines with CSS”
rotate syntaxIn the CSS Transforms Module Level 2 there will be individual transform properties for translate, scale, and rotate. This pen by Wes Bos demonstrates the new rotate syntax (use Canary): See the Pen ALbmzN by Wes Bos (@wesbos) on CodePen. So how exactly is said syntax? Here’s a snippet from the spec: The rotate property …
List assembled by Jordan Little: The CSS calc() function The pointer media query The currentColor variable The :valid, :invalid, and :empty pseudoclasses Counters using only CSS Predictable tables with fixed layout Easy form states using adjacent sibling selectors Algebraic nth-child() selection Animating elements with animation-fill-mode As a tenth feature I’d like to add the use …
MatthiasMullie\Minify is a JavaScript and CSS Minifier written in PHP. Usage is straightforward: use MatthiasMullie\Minify; $sourcePath = '/path/to/source/css/file.css'; $minifier = new Minify\CSS($sourcePath); // we can even add another file, they'll then be // joined in 1 output file $sourcePath2 = '/path/to/second/source/css/file.css'; $minifier->add($sourcePath2); // or we can just add plain CSS $css = 'body { color: …
Continue reading “Minify: A JavaScript and CSS Minifier Written in PHP”
A typical issue with the well supported Viewport Relative Units (you know: vh, vw, vmin, and vmax) that bothers me a lot is that MobileSafari (Safari on iOS) fails to take the height of the address bar into account for 100vh. Take a look at the footer of that first block in the screenshot below: …
Continue reading “Making viewport units work properly in Mobile Safari”
@supports)There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code …
Ana Tudor has recreated the Twitter Heart Animation in pure CSS: See the Pen no sprite, no JS heart animation – click it! by Ana Tudor (@thebabydino) on CodePen. Easy to follow step-by-step instructions in the original post. The most surprising part – to me – is that the particles are rendered using box-shadow. Recreating …
CSS is powerful, you can do a lot of things without JavaScript. A quite commonly known example is usage of the Adjacent Sibling Selector (viz. +) to build custom radio buttons/checkboxes or tab interfaces. See the Pen CSS Custom Checkboxes / Radio Buttons by Bramus! (@bramus) on CodePen. With a few more CSS tricks such as …
“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. …