Bad Skizoff is a cool, grungy font by Bumbayo Font Fabrik.
It’s free and you can get it at dafont.
Just finished up a quick Pen to try out some diagonal swipe/background hover animations using transform: skew.
I have an example page here and you can check out the code below. All of the background images are courtesy of Unsplash It.
See the Pen Diagonal Hover Effects by Lauren Ashpole (@laurenashpole) on CodePen.
I don’t remember what sent me down this path but here I am browsing through pure CSS lettering and icons. My favorite finds so far:
CSS Sans - Just a basic looking sans serif font but it’s all CSS
CSS Illustration - ABC - A super detailed Art Deco CSS alphabet
Material Design Alphabets in CSS - A cool, colorful geometric alphabet
icono - Single element CSS icons
This is a promising looking Vanilla JS implementation of Tilt.js. I might try it out for the hover parallax effect.
Quick! Before another Friday gets away and I miss two weeks in a row, here’s a font rec.
Domino by Luc Mahler is a cool, jazzy looking number.
I can’t find a site for the designer but you can download from dafont here.
UPDATE 11/14/19: At some point in the years since I originally posted this, Google made some improvements to the way AMP handles URLs and I’ve updated my headers to keep up. Most of the information below is still applicable but I’ve updated the Access-Control-Allow-Origin and AMP-Access-Control-Allow-Source-Origin settings to:
res.setHeader('Access-Control-Allow-Origin', req.headers.origin);
res.setHeader('AMP-Access-Control-Allow-Source-Origin', req.query.__amp_source_origin);So keep that in mind while reading the original post…
I’m in the middle of creating Google AMP pages for my fonts and everything was going pretty well until I tried getting the amp-form component working with Node.js. I followed the AMP by Example code, my page passed validation, but whenever I tried to use the form data all I got was an empty req.body.
Finding a solution took more effort than the usual reading through the first few Stack Overflow results, so I thought it might be useful for anyone else out there struggling.
Creative Market is killing it this week with their free goods.
I’m not sure what I would use the Papercut Style Sushi Elements for but they’re definitely worth downloading just in case. And I LOVE these Urban Jungle Patterns.
Get them this week!
The clip-path property is pretty handy way to create shapes in CSS if you aren’t overly concerned about Internet Explorer. CSS Tricks has a good overview but Clippy is really the only site you’ll need to start creating paths.
And now I don’t know how I got anything done without them. I’m a late to the game here but if you are too, these are PSDs that let you show off how a font or logo would look in the wild. Want to see your work on a poster or a card or a shirt? Just update a Smart Object in Photoshop and you can.
Below is a list of the mockups I’ve used for my fonts lately. And if you want a wider range of high quality mockups to browse through, Mockup World is a good place to get started.