Stylus is great, but… where’s my Compass/Bourbon? Kouto Swiss offers an answer to that as it’ll make lots of handy functions and mixins available to you. Take this Kouto Swiss provided font-face function for example: font-face( “Roboto”, “./fonts/Roboto-Regular-webfont”, normal ) Which will render into this: @font-face { font-family: “Roboto”; font-weight: normal; src: url(“./fonts/Roboto-Regular-webfont.eot”); src: url(“./fonts/Roboto-Regular-webfont.eot?#iefix”) …
Tag Archives: css
color: rebeccapurple;
From now on, rebeccapurple means #663399. A great tribute to a great man and his daughter who was passed away at the age of just six. Every time Eric blogged about Rebecca’s condition and how it changed over time it tore me into pieces. This is the right thing to do, just as #663399Becca was. …
Automatic Placement when using CSS Grid Layout
Inverse trigonometric functions with Sass
See the Pen Pure CSS 3D animated icosidodecahedron (pentagonal gyrobirotunda) by Ana Tudor (@thebabydino) on CodePen. You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll …
Continue reading “Inverse trigonometric functions with Sass”
Good-Looking Shapes Gallery
Layouts where content hugs the boundaries of illustrations are common in print and rare on the web. One of the reasons non-rectangular contour-hugging layouts are uncommon on the web is that they are difficult to produce. They are not difficult to produce anymore. And once again I have a flashback to (the now offline) The …
WTF, forms?
CSS True Titles
Multicolor Fonts in the browser
Seemingly out of nowhere, big guys like Apple, Google, Microsoft, Mozilla and Adobe are proposing multicolor font formats, and rushing to have them implemented in browsers and OSes. This sudden interest is not so much fueled by typographers, designers or web developers, but by an unlikely group: teenagers. More specifically: teenagers who demand their communication …
Using the :target pseudo-selector for alternative layouts
Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple. Neat trick by Vasilis: give the root html element an …
Continue reading “Using the :target pseudo-selector for alternative layouts”
CSS `will-change` Property
#header { will-change: opacity; } Modern CSS renderers perform a number of complex optimizations in order to render webpages quickly and efficiently. Unfortunately, employing these optimizations often has a non-trivial start-up cost, which can have a negative impact on the responsiveness of a page. The will-change property defined in the CSS Will Change Module allows …