Victor Loux → Bookmarks → Tag: css

134 bookmarks tagged “css”

Right-to-left Styling

rtlstyling.com/posts/rtl-styling

Designing Beautiful Shadows in CSS

joshwcomeau.com/css/designing-shadows/
When I look around the web, most of the shadows I see are fuzzy grey boxes. It doesn't have to be this way, though! CSS gives us the tools to create rich, lush, lifelike shadows. In this tutorial, I'll show you how.

Table of Contents | The Elements of Typographic Style Applied to the Web

webtypography.net/toc/

5 steps to faster web fonts /// Iain Bean

iainbean.com/posts/2021/5-steps-to-faster-web-fonts/
Fine-tune your font files and optimise your loading strategy for maximum speed + minimum FOUT

Fluid Typography

fluid-typography.netlify.app/
Calculate CSS declarations for beautiful fluid typography headings.

Home | The Component Gallery

component.gallery/
The Component Gallery is a collection of components from the best Design Systems.

Continuous Typography / Max Kohler

maxkoehler.com/posts/continuous-typography/
Notes toward a continuous framework for screen typography

CSS Auditing Tools — Smashing Magazine

smashingmagazine.com/2021/03/css-auditing-tools/
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers to get their work done better and faster. Starting out with a few tools for getting to the bottom of CSS.

Gradient Generator: Create Beautiful, Smooth Gradients

learnui.design/tools/gradient-generator.html

Underline Hover Styles for Links | Codrops

tympanus.net/Development/LineHoverStyles/
Some ideas for underline hover styles on links using various techniques.

CSS Scroll Snap

ishadeed.com/article/css-scroll-snap/

Link hover animation

codepen.io/aaroniker/pen/VwjexVy

yuanchuan on CodePen

codepen.io/yuanchuan/

Generative art with CSS

generative-art-with-css.commons.host/
Translation of Generative art with CSS by Yuanchuan at the 5th CSSConf in China

What does 100% mean in CSS?

wattenberger.com/blog/css-percents
<p>One of the CSS units I use most is the wonderful <b>%</b> — so handy for positioning elements on the page.</p><p>Unfortunately, the rules aren’t exactly straightforward. One question I’m always asking myself is: Percent of what?</p>

Building a hexagonal grid using CSS grid - ninjarockstar.dev

ninjarockstar.dev/css-hex-grids/

Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks

css-tricks.com/custom-styling-form-inputs-with-modern-css-features/

brumm.af

brumm.af/shadows
Web site created using create-react-app

Solved by Flexbox — Cleaner, hack-free CSS

philipwalton.github.io/solved-by-flexbox/

Smoother & sharper shadows with layered box-shadows | Tobias Ahlin

tobiasahlin.com/blog/layered-smooth-box-shadows/
With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects