Category: CSS
-
Cover Flow with Modern CSS: Scroll-Driven Animations in Action
—
Today, we can recreate this effect on the web using only HTML and CSS, thanks to advancements like CSS scroll-driven animations. Modern CSS to the Rescue: Scroll Snap & Scroll-Driven Animations Fast-forward to today: modern CSS has evolved to handle interactive animation patterns that previously required JavaScript. Two CSS features in particular make a pure-CSS…
-
Viewport units
—
in CSSViewport units aren’t perfect. On mobile browsers, the “viewport” can shift when the address bar appears or disappears, meaning your perfectly calculated 100vh section might jump unexpectedly. Also, text sized in vw can become unreadably small on tiny screens—or gigantic on ultra-wide monitors. The workaround? Combine viewport units with other constraints. For example: Dynamic Viewport Units Dynamic viewport units…
-
Basics of CSS Blend Modes
—
Multiply is a nice and useful one, but there is also: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which reset it.
-
Implementing a Browser-Window Fullscreen Video
—
Learn how to display a video in full browser view without taking over the entire monitor
-
CSS-Only Lightbox
—
in CSShttps://webdesignerhut.com/pure-css-image-lightbox .lightbox { /** Hide the lightbox */ opacity: 0; top: -100%;}.lightbox:target { /** Show lightbox when it is target */ opacity: 1; outline: none; top: 0;}
-
::before / ::after
—
The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but Internet Explorer (IE) 8 only supports the single-colon, so for now, it’s recommended to just use the single-colon for…
-
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!
-
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
—
in CSSOur 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?