Single Div Drawings with CSS Why A Single Div? In May of 2013 I attended CSSConf and saw Lea Verou speak about the humble border-radius. It was an eye-opening talk and I realized there was much about CSS behavior I did not fully understand. This reminded me of my time as a fine arts student where I was constantly pushed to become a master of my chosen medium. As a web designer, CSS is my medium and so I challenged myself to learn all I could about it and to explore and experiment with its limits. But why a single div?
Using Slack To Monitor Your App Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! For the past few months, I’ve been building a software-as-a-service (SaaS) application, and throughout the development process I’ve realized what a powerful tool Slack (or team chat in general) can be to monitor user and application behavior.
Time to get hacking – Introducing Rec Room It’s no secret that the best frameworks and tools are extracted, not created out of thin air. Since launching Firefox OS, Mozilla has been approached by countless app developers and web developers with a simple question: “How do I make apps for Firefox OS?” The answer: “It’s the web; use existing web technologies.” was—and still is—a good answer. But if you don’t already have an existing toolchain as a web developer, I’ve been working on extracting something out of the way I’ve been creating web apps at Mozilla that you can use to write your next web app. From project creation to templating to deployment, Mozilla’s Rec Room will help you create awesome web apps in less time with more ease.
Hide your header on scroll - Headroom.js Downloads What's it all about? Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
10 Best Image Hover Effects Tutorials Need to spruce up your website with some beautiful animation and transition effects? Here's a FREE collection of superb image hover effects in both pure CSS3 and jQuery. Bring your images to life. Hover Effects included: Image Zoom, Image Flips, Border Hover, Fading and Sliding Effects, Content Overlays and more... Each tutorial includes demos and downloadable files.
Ideas for Subtle Hover Effects Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. View demo Download source It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. Snark Hunting: Force Directed Graphs in D3 — delimited There are also really fun to look at and make a good launching point for talking about D3's force layout. After some searching, I found a dataset that contains the node and link information for many common snark graphs (thank you, internet!). You can get the original data here. Creating a D3 viz is less commonly done using a pseudo-classical style, but can be a powerful way of organizing your code if you need to develop visualizations that are more like small applications or tools that provide complex interactions rather than just a simple chart or graph.