Category: Web design
-
The Shapes of CSS
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals. We also get…
-
Codepen Challenges
Challenges are fun opportunities for leveling up your skills by building things. Each week, you’ll get a new prompt surrounding a monthly theme to riff on. The best Pens get picked and featured on the homepage!
-
Bricklayer.js
Bricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library.
-
A Complete Guide to calc() in CSS
CSS has a special calc() function for doing basic math. In this guide, let’s cover just about everything there is to know about this very useful function.
-
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).
-
Creating Fluid Typography with the CSS clamp() Function
In this article, we’ll dig into how to use the CSS clamp() function to scale the size of text across a range of device sizes.
-
Native CSS Masonry Layout In CSS Grid
There is now a specification for native CSS masonry layout, as part of the Grid Layout spec. In this article, Rachel Andrew explains how it works with the help of a couple of demos you can try out in Firefox Nightly.
-
Approaches for a CSS Masonry Layout
Nothing against JavaScript, but it’s understandable we might not want to lean on it for doing layout. Is there anything we can do in CSS directly these days?
-
Packery – Gapless, draggable grid layouts
Packery is a JavaScript library and jQuery plugin that makes gapless and draggable layouts. It uses a bin-packing algorithm to fill in empty gaps. Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in a specific spot, or dragged around. It’s perfect for draggable dashboard and seamless Masonry image galleries.
-
Smush – Optimize Images | Compress and Lazy Load Images | Convert WebP
WordPress plugin, preso da https://wordpress.org/plugins/search/lazy+load/