CSS
Hi everyone,
I have something like this
```html <div id="container">
<div> <div class="foobar"></div> </div>
<div> <div class="foobar"></div> </div>
<div> <div class="foobar"></div> <div class="barfoo"></div> </div>
<div> <div class="foobar"></div> </div>
<div> <div class="foobar"></div> </div>
<div> ```
I would like to select all the
#container > div(the childs of container)that do not have a
div.barfooin their childs.is it possible with CSS ?
I'm at
css #container> div :not(div.barfoo) {}but this is not working, and will select anyway#container > div > divAny ideas ?
Hi everyone,
I would like one of my
divto have an background-attachment: fixedBut the background still scroll 😤
This div is under
html body div div div div divand it CSS properties are
css #TheDiv { min-height: 100vh; min-width: 100vw; background-image: url('/anImage.jpg'); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; position: absolute; left: 0; padding: 40px; box-sizing: border-box }Any Ideas, what could cause the background to scroll anyway ?
Thanks
- css-tricks.com CSS Selectors | CSS-Tricks
A complete guide covering all of the various methods we have to select elements in CSS and how to use them for applying styles.
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.
When I use the
--sourcemapargument 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/
- • 100%ishadeed.com Flexbox Dynamic Line Separator
Using CSS flexbox default stretching behaviour to create a dynamic line separator.
- www.smashingmagazine.com Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Remember 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...
- www.joshwcomeau.com Folding the DOM
In 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!
- • 100%ishadeed.com An Interactive Guide to CSS Container Queries
Learn how to use CSS container queries today.
- • 91%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 ...
- • 88%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...
- • 100%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…
- • 100%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…
- github.com GitHub - antonmedv/finder: CSS Selector Generator 🗺
CSS Selector Generator 🗺. Contribute to antonmedv/finder development by creating an account on GitHub.
- • 100%www.css2wind.com css2wind | A minigame for learning Tailwind CSS
A minigame for learning Tailwind CSS
Video basically explaining how to use named grid columns to avoid those negative margins for breakout and full-width sections
- • 87%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.
- chat-to.dev Chat Rooms and Programming Content | Chat-to.dev
Join chat rooms and explore programming content on Chat-to.dev.
- techhub.iodigital.com CSS Relative colors - iO tech_hub
Before 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.
- moderncss.dev 12 Modern CSS One-Line Upgrades | Modern CSS Solutions
Sometimes, 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.
- • 80%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
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.
- 12daysofweb.dev CSS animation-composition | 12 Days of Web
Use the CSS animation-composition property for advanced control over how values are applied during keyframe animations.
- • 71%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.
- developer.chrome.com CSS Wrapped: 2023! | Blog | Chrome for Developers
2023 was a huge year for CSS! Learn about what landed in Chrome and across the web platform this year.
- • 88%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.
- • 100%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
> 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.
- • 100%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...
- • 100%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.
- • 100%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.
- 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 …
- • 100%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...
- 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...
cross-posted from: https://programming.dev/post/6425511
- developer.mozilla.org Getting started with CSS container queries | MDN Blog
CSS 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.
