CSS

486 readers
1 users here now

founded 1 year ago
MODERATORS
1
11
submitted 1 month ago* (last edited 1 month ago) by [email protected] to c/css
 
 

Making a site JavaScript-less with bootstrap but the CSS is kicking my ass- I do the code directly as it is meant to be, then I try to add one thing and it breaks. I'm gripping on w3schools for dear life and I just can't seem to wrap my head around anything other than the basics. CSS is pain ESPECIALLY when I'm doing it on an external sheet. (I don't want to do internal because all the text gets overwhelming.) Anyone have some ideas to help with this?

Edit: So I realized the browser tool thing is really easy for visuals + that BOOTSTRAP IS INSANELY VAST. For just about every CSS element theirs another 1.5k sub rules which is great for getting specific but not great when you are basically creating a rule for a already ruled element that you have no way of finding easily. Bootstrap is just a functionality CSS sheet I think and not the equivalent to a HTML DLC

(Image is my CSS sheet compared to the crazy amount of CSS sub sheets that exist in bootstrap. My measly little 16 rules look pathetic)

2
 
 

Hi everyone,

I have something like this

<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.barfoo in their childs.

is it possible with CSS ?

I'm at

#container> div :not(div.barfoo) {} 

but this is not working, and will select anyway #container > div > div

Any ideas ?

3
10
submitted 2 months ago* (last edited 2 months ago) by Corsair to c/css
 
 

Hi everyone,

I would like one of my div to have an background-attachment: fixed

But the background still scroll ๐Ÿ˜ค

This div is under html body div div div div div

and it CSS properties are

#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

4
4
submitted 2 months ago by [email protected] to c/css
5
5
CSS Selectors (css-tricks.com)
submitted 3 months ago by mac to c/css
6
 
 

Hi,

No matter what I try


<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>
<!-- 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.

7
 
 

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.

8
9
10
8
CSS Folding Effect (www.joshwcomeau.com)
submitted 7 months ago by starman to c/css
11
12
10
submitted 7 months ago by mac to c/css
13
13
CSS variables (gomakethings.com)
submitted 7 months ago by mac to c/css
14
15
16
17
12
submitted 7 months ago by mac to c/css
18
 
 

Video basically explaining how to use named grid columns to avoid those negative margins for breakout and full-width sections

19
21
submitted 8 months ago* (last edited 8 months ago) by starman to c/css
20
 
 

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.

21
11
CSS Relative colors (techhub.iodigital.com)
submitted 9 months ago by mac to c/css
22
22
submitted 9 months ago by mac to c/css
23
3
submitted 10 months ago* (last edited 10 months ago) by mac to c/css
 
 

^ 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

24
 
 

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.

25
4
CSS animation-composition (12daysofweb.dev)
submitted 10 months ago by mac to c/css
view more: next โ€บ