![Community banner](https://programming.dev/pictrs/image/3c981db8-5645-480d-aaa4-df4e8cc72373.jpeg)
-
How remove vertical gap between characters ?
Hi,
No matter what I try
```html
<style> .FlexColumn {display: flex;flex-flow: column nowrap } </style>
<div class="FlexColumn"> <div>X</div> <div>X</div> <div>X</div> <div>X</div> <div>X</div> </div> ```
html <!-- I tried many CSS trick here... --> <div> <span>X</span><br><span>X</span><br><span>X</span><br><span>X</span> </div>
I always get a vertical gap between the characters !Any ideas ?
Thanks.
-
Lightning CSS: Sourcemap @include paths not updated
When I use the
--sourcemap
argument in the CLI to generate the CSS builds with sourcemaps, when the CSS uses@include
, it does not update the path and therefore will not work.In the code below, the builds are stored in the dist directory, while the CSS source code is stored in the src directory.
This is my simple code to reproduce this... ```
- src/
- stylesheet.css
- dist
- my-package.css
- my-package.css.map
- demo.html
- bundle.css
- package.json ```
bundle.css
@import 'src/stylesheet.css';
demo.html
<link rel="stylesheet" href="dist/my-package.css">
package.json
{ "name": "my-package", "version": "1.0.0", "license": "MIT", "scripts": { "build": "lightningcss --sourcemap bundle.css -o dist/my-package.css" }, "devDependencies": { "lightningcss-cli": "^1.25.1" } }
src/stylesheet.css
body { background-color: red; }
dist/my-package.css output ``` @import "src/stylesheet.css";
/*# sourceMappingURL=dist/my-package.css.map */ ```
What I expected from the dist/my-package.css output ``` @import "../src/stylesheet.css";
/*# sourceMappingURL=dist/my-package.css.map */
```
Does anyone know why this is the outcome? Any help will be most appreciated.
- src/
- ishadeed.com Flexbox Dynamic Line Separator
Using CSS flexbox default stretching behaviour to create a dynamic line separator.
-
Infinite-Scrolling Logos In Single HTML Container And Pure CSS
www.smashingmagazine.com Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing MagazineRemember the HTML `` element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that makes it possible with...
-
CSS Folding Effect
www.joshwcomeau.com Folding the DOMIn this post, we'll explore a technique we can use to "fold" a DOM node, like folding a letter in real-life. On that journey, we'll learn a lot about 3D transforms and CSS animation techniques!
- ishadeed.com An Interactive Guide to CSS Container Queries
Learn how to use CSS container queries today.
- gomakethings.com An advanced way to use CSS variables
Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible ...
- gomakethings.com CSS variables
Yesterday, I mentioned that I love CSS variables. Today, I thought I’d explain what they are and how they work, for those who aren’t already familiar with them. Let’s dig in! How to define CSS variables You define a CSS variable by typing its name with a leading double-dash (--). It uses the same sy...
- frontendmasters.com What You Need to Know about Modern CSS (Spring 2024 Edition)
My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fair…
- frontendmasters.com You Want border-color: transparent, Not border: none
If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider. It’s li…
-
Finder 3.2: CSS Selector Generator - Given an element, it produces the shortest possible selector that reaches (solely) that element
github.com GitHub - antonmedv/finder: CSS Selector Generator 🗺CSS Selector Generator 🗺. Contribute to antonmedv/finder development by creating an account on GitHub.
- www.css2wind.com css2wind | A minigame for learning Tailwind CSS
A minigame for learning Tailwind CSS
-
Alternative approach to container and wrapper classes
YouTube Video
Click to view this content.
Video basically explaining how to use named grid columns to avoid those negative margins for breakout and full-width sections
- tailwindcss.com Open-sourcing our progress on Tailwind CSS v4.0 - Tailwind CSS
We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
cross-posted from: https://programming.dev/post/11085588 >We just tagged the first public v4.0.0-alpha so you can start experimenting with it and help us get to a stable release later this year.
-
CSS Relative colors
techhub.iodigital.com CSS Relative colors - iO tech_hubBefore the relative color syntax you had to rely on CSS variables or even worse: JavaScript to modify the parameters of a color. Using the from keyword the browser can convert the originating color to different color spaces and change the color properties.
-
12 Modern CSS One-Line Upgrades
moderncss.dev 12 Modern CSS One-Line Upgrades | Modern CSS SolutionsSometimes, improving your application CSS just takes a one-line upgrade or enhancement! Learn about 12 properties to start incorporating into your projects, and enjoy reducing technical debt, removing JavaScript, and scoring easy wins for user experience.
- gomakethings.com A CSS native way to prevent orphan text
In typography, an orphan or widow is a single word on its own line. It can look particularly unpleasing with headings, and is hard to “plan for” on the web, where people view your site on a wide range of viewport sizes. You can avoid them by manually added a non-breaking space ( ) before the se...
^ preview there seems to have not been created well and made the code block with a header a header but correct text is in the article
-
Hex Color To CSS Filter, Converter
cross-posted from: https://programming.dev/post/7667731
> Hi, > > As CSS do not have a color-overlay[^1] filter. > > There is some heavy work around: > > https://isotropic.co/tool/hex-color-to-css-filter/ > > that use a combination of CSS filter to target the desired color... > > Those online calculators are neat, but I would like an offline version, in case the provided one become inaccessible. > > I've downloaded the zip of https://codepen.io/sosuke/pen/Pjoqqp > > But it doesn't work locally.. :/ > > So I would like to know, if someone know one in 🐍 Python ? or how can I make one then ? > > Or if someone know another way to have the color-overlay[^1] effect in html\css, I'm all ears ! > > Thank. > > > [^1]: To apply like in Photoshop a color on the shape of the image (so not on the parts that have transparency.
-
CSS animation-composition
12daysofweb.dev CSS animation-composition | 12 Days of WebUse the CSS animation-composition property for advanced control over how values are applied during keyframe animations.
- tailwindcss.com Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more - Tailwind CSS
There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.
cross-posted from: https://programming.dev/post/7555221 >There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.
-
CSS Wrapped: 2023
developer.chrome.com CSS Wrapped: 2023! | Blog | Chrome for Developers2023 was a huge year for CSS! Learn about what landed in Chrome and across the web platform this year.
- css-loaders.com CSS Loaders: A collection of more than 500 loading animations
The biggest collection of CSS-only loaders. More than 500 loading animations made by Temani Afif using a single element.
- mackfitz.hashnode.dev Approximating a sphere using CSS - and pumpkins!
The various ways to make something that more or less resembles a sphere out of triangles and trapezoids - with just HTML and CSS
-
missing.css from creators of hyperscript and htmx
> cross-posted from: https://programming.dev/post/6940356
> Missing.css is a notch on the complexity slider that's just right for small projects and personal sites where classless CSS is not enough, Tailwind is too much and Bootstrap just doesn't have the right vibe.
- www.smashingmagazine.com A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
We’re living in somewhat of a CSS renaissance with new features, techniques, experiments, and ideas coming at us to an extent we haven’t seen since “CSS3”. It’s easy to feel overwhelmed when your profession seems to be advancing at breakneck speed, but Geoff Graham considers the ways “modern” CSS in...
- garden.bradwoods.io 3D in CSS
How to create a 3D space using CSS. How to use the CSS perspective property. How to translate and rotate an element in 3D space using CSS. Use cases for the CSS perspective property.
- cssanimotion.pages.dev Animotion — Visual CSS Animation Builder
Create CSS animations visually. Drag, resize, rotate, clip, and more — including a keyframes editor, ready-to-use animations, and 29 built-in easings.
-
The hanging-punctuation property in CSS
chriscoyier.net The `hanging-punctuation property` in CSS(I did a Twitter thread on this a while back, against my better judgment, and now moving to a proper blog.) The hanging-punctuation property in CSS is almost a no-brainer. The classic example is a …
- smashingmagazine.com A Few Ways CSS Is Easier To Write In 2023 — Smashing Magazine
We’re living in somewhat of a CSS renaissance with new features, techniques, experiments, and ideas coming at us to an extent we haven’t seen since “CSS3”. It’s easy to feel overwhelmed when your profession seems to be advancing at breakneck speed, but Geoff Graham considers the ways “modern” CSS in...
-
Interactive guide to CSS grid
www.joshwcomeau.com An Interactive Guide to CSS GridCSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in m...
cross-posted from: https://programming.dev/post/6425511
-
Getting started with CSS container queries
developer.mozilla.org Getting started with CSS container queries | MDN BlogCSS container queries are a powerful new tool for our CSS layout toolbox. In this post we'll dive into the practicalities of building a layout with container queries.
- www.joshwcomeau.com An Interactive Guide to CSS Grid
CSS Grid is an incredibly powerful tool for building layouts on the web, but like all powerful tools, there's a significant learning curve. In this tutorial, we'll build a mental model for how CSS Grid works and how we can use it effectively. I'll share the biggest 💡 lightbulb moments I've had in m...
-
What’s the most efficient way to achieve “squircles” or smooth corners with CSS?
Smooth rounded corners or continuous corners (used throughout iOS) can be easily achieved in Figma and other design software. I’m fairly sure there’s no way to do this simply on the web and it drives me mad. Do y’all know of any ways to do this that can actually be used in production?
- developer.chrome.com CSS nesting relaxed syntax update - Chrome for Developers
Lookahead nesting enabled in Chrome 120.