CSS-Tricks
A Complete Guide to Flexbox
· Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart. · Shared by 667, including zeldman, Alligator.io 🐊, Brad Frost, Kenneth Kalmer, Brian Casel, @brianleroux@indieweb.social 💙, Brad Brooks, Chris Smith, Andreas Klinger 🏝, Axel Rauschmayer (INACTIVE), Herbert Bay, Massimiliano Aroffo, Helmi, Shane_potter, Chris Coyier, Nando 💪🇦🇺🇦🇷, ᴄʟᴀᴜᴅɪᴏ sᴄʜᴡᴀʀᴢ, Laurie, Tatjana Nebel, Zain Fathoni
Webflow
Responsive web design tool, CMS, and hosting platform
4 min · · Build responsive websites in your browser, then host with us or export your code to host wherever. Discover the professional website builder made for designers. · Shared by 574, including Thomas Power, Mark Kaigwa, Meng To, Adrian Zumbrunnen, Ben Tossell, hiten.eth, designshard, Marcus Kuhn, Prof. Arun Kumar वाघचौरे, Guillermo Rauch, Tibor Martini 🇺🇦 @tibor@mastodon.social, string 🇦🇺🍗, Klaus Eck, Matthias Lampe, Chris Messina, Jonathan Kogan, Courtney Bolton ★, Bri Kimmel, femke, Pablo Stanley
UX Planet
7 Basic Rules for Button Design
9 min · · Shared by 265, including Mobile Patterns, Prof. Arun Kumar वाघचौरे, Merkstatt@troet.cafe 📯, Zain Fathoni, Greg Meyer, Chris Guselle, Mike Taylor, Mark Kaigwa, Nico Müller 🇺🇦, Ⓓarío Macchi, Nick Floro, Helmi, Rodrigo Prior, Vojtěch Hýža, ̗̀ ̗̀Manuel Marquina, Casey Smith, Nick Babich, Adobe XD, David Butler, Dennis Lembrée
medium.com
Motion Design Doesn’t Have to Be Hard
5 min · · In areas most important to a UI, motion design can and should be simple. · Shared by 264, including Fabricio Teixeira, Mohamed Azazy, von Moerenburgh, Victor Tolosa, Davy De Pauw, Jack Cross, Niklaus Gerber, Bernhard Huessy, Diane Lee, Dominik Grolimund, five5star // Design Graphique, Ⓓarío Macchi, Benny Schudel, Nando 💪🇦🇺🇦🇷, designshard, tcherno, Florian Hanke 🍎, Maarten Mieras, Nick Butcher, David Hellmann
zzz.dog
Zdog
3 min · · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG · Shared by 218, including Sachin Gawas, Nicky Case · 🐘 mas.to/@ncase, Chris Coyier, pizza.lottie 🍕, Ferit (at 🏠) 🌙, Nico Müller 🇺🇦, UX Design Weekly, Victor Tolosa, anildash.com, zeldman, Arin Basu, Joel Califa, Neal Agarwal, Simone Corsi 💻🚀, Lynn Cherny, Onextrapixel, Kam, Balda, Michael Weibel, Hans Bickhofe
gridbyexample.com
Grid by Example
1 min · · The CSS Grid Layout specification is one of a few new specifications that are redefining how we approach layout for the web. Alongside Flexbox and the Box Alignment Module it will become part of a… · Shared by 128, including Zain Fathoni, Leslie D, pizza.lottie 🍕, Boris Périsset, Tibor Martini 🇺🇦 @tibor@mastodon.social, Benny Schudel, Jessel Sookha, Fabricio Teixeira, ツ, Oscar MacDonald, mitimiti, @benp sur mastodon.social, Serge K. Keller ❦, Navjeet Chabbewal, henrik, Brad Brooks, Kam, Rodrigo Noales, Adriano Latorre, Samuel Hauser
ianlunn.github.io
Hover.css - A collection of CSS3 powered hover effects
· Fork me on GitHub Effects Setup Tutorial Licenses A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements,… · Shared by 106, including Brian, Michael Duergner, Thomas Kaul, César Suárez, David Reindl, Francis DB, Jonas Hartmann, Boris Périsset, Davo ⚡, vedi.eth {313}, Michael Musgrove, Baadier Sydow 🇿🇦, Icefox, Navjeet Chabbewal, Jon Thompson, Marc Hinse, Mathias Brenner, @felixmichel@vis.social
Codrops
Codrops
2 min · · Codrops is a web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. · Shared by 99, including Rodrigo Noales, Boris Périsset, Luca Like, Clemens, José Rodrigues, Mohamed Azazy
CSS-Tricks
A Complete Guide to calc() in CSS
9 min · · CSS has a special calc() function for doing basic math. Here's an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh - 80px); } In · Shared by 91, including David Hellmann, Alligator.io 🐊, Benoist Lawniczak, CSS Author, DON’T PANIC, Chris Coyier, Boris Périsset, Rodrigo Noales, Chris Heilmann codepo8@toot.cafe, 6clicks | John Robert-Nicoud, HeyDesigner, rohit
neumorphism.io
Neumorphism.io
· border-radius: 50px; background: linear-gradient(145deg, #5bc6ff, #4da7db); box-shadow: 30px 30px 60px #489dcf, -30px -30px 60px #62d5ff;border-radius: 50px; background: linear-gradient(145deg,… · Shared by 84, including Helmi, Marc Thiele, Tomas Vestenicky, Marius Bleuer, Oliver Raduner, David Hellmann, Boris Périsset, José Rodrigues, 6clicks | John Robert-Nicoud, mitimiti, sascha aßbach, Chris Heilmann codepo8@toot.cafe, Vojtěch Hýža, Stu Collett, Michael Sumner
responsivebreakpoints.com
Responsive Image Breakpoints Generator by Cloudinary
2 min · · The Responsive Image Breakpoints Generator efficiently analyzes each hi-res image and finds the best dimensions for embedding in your website · Shared by 72, including Davy De Pauw, Dominic Grzbielok, mastodon.social/@renestalder, Rodrigo Noales, Tibor Martini 🇺🇦 @tibor@mastodon.social, sascha aßbach, Stefan Plattner 💙✌, Samuel Hauser, Boris Périsset, Alain, Theresa, Oscar MacDonald, Niklaus Gerber
UX Planet
10 Creative Loading Indicators
6 min · · Shared by 59, including Nick Babich, Davy De Pauw, Brad Engel, Boris Périsset, Nico Müller 🇺🇦
The StartUp
The Illusion of Time — Startups, Wanderlust, and Life Hacking
14+ min · · How time perception shapes user experience. · Shared by 43, including Adrian Zumbrunnen, David Hellmann, Ibrahim Nergiz, Boris Périsset, Damian J Mullins, Andreia Costa 🇵🇹, Adrian🇨🇭
designbetter.co
Animation Handbook | DesignBetter by InVision
8 min · · The Animation Handbook will prime you not just to animate but to craft exceptional and more intuitive digital product interfaces for your customers. · Shared by 41, including Boris Périsset, Andreas Bossard, Mike Taylor, Niklaus Gerber, Marius Bleuer
Smashing Magazine 🇺🇦 🏳️🌈
Fluid Responsive Typography With CSS Poly Fluid Sizing
20+ min · · We are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using CSS Poly Fluid Sizing. · Shared by 41, including Mattia Fregola 🤔, Boris Périsset, blinch
whydoweinterface.com
Why Do We Interface?
· In this micro book we look at the past, present, and future of interfaces and how they allow us to utilize information in ways that change what it means to be human. · Shared by 29, including David Garner, Adham Dannaway, Oscar MacDonald, Hannah Milan, Boris Périsset