P粉818561682 2023-10-26 10:39:42 1 2 209

• Div with transparent semicircle cutout

  I want to make a transparent cut out semicircle shape using only CSS3. The only requirement is that all elements forming the shape must be black or transparent. I can't use a black rectangle with a white circle on it because the semicircle has to be transparent and let the background show through. R...

  P粉022285768 2023-10-22 17:51:09 0 2 303

• How to apply transparency to CSS color variables?

  I'm designing an app using Electron so I can access CSS variables. I have a color variable defined in vars.css: :root{--color:#f0f0f0;} I want to use this color in main.css but with some opacity applied: #element{background:(somehowusevar( --color)atsomeopacity);} How do I do this? I'm not using any...

  P粉573809727 2023-10-13 15:48:04 0 1 302

• How to apply opacity on CSS color variable?

  I'm designing an app using Electron so I can access CSS variables. I have a color variable defined in vars.css: :root{--color:#f0f0f0;} I want to use this color in main.css but with some opacity applied: #element{background:(somehowusevar( --color)atsomeopacity);} How do I do this? I'm not using any...

  P粉496886646 2023-10-13 14:43:49 0 1 329

• Change background image opacity while preserving visibility of child elements

  Is it possible to set the opacity of a background image without affecting the opacity of child elements? All links in the sample footer require custom bullets (background image), and the custom bullets should have an opacity of 50%. HTML

  • P粉354602955 2023-10-10 19:40:19 0 1 257

  • Is it possible to achieve a smooth transition from text drawn in one color to an animated gradient?

    There is white text on the page and a button below it. Additionally, animated gradients are applied to fill the text. When the button is clicked, the -webkit-text-fill-color property will become transparent, causing the text color to suddenly change to match the gradient. Like this: https://codepen....

    P粉762447363 2023-09-16 09:22:05 0 1 459

  • How to use transparent div to achieve page background blur effect

    I have code for a web page where I want to blur the background via a transparent div. I actually want to make the div semi-transparent. I tried adding the CSS of a blur filter to the div, but the result is that the text inside the div is also blurred, which is not what I want.

    P粉908643611 2023-09-14 21:09:28 0 1 164

  • Project implementation method to limit div height

    I have a three column layout where the middle column is having issues with part of its height. Generally speaking, it is a chat application. The class name is: for the container containing these three columns (I decided to use a grid like this to make the columns equal height): display:grid;grid-tem...

    P粉814160988 2023-09-13 20:46:45 0 1 204

  • CSS: Remove drop shadow from div inside Vuetify dialog with drop shadow

    I have a dialog with a triangle added using CSS on a div. But the CSS trick is that part of the border is transparent. The problem I'm trying to overcome is removing the shadow from the transparent border without removing the shadow from the dialog itself. Adding this to the div doesn't work: box-sh...

    P粉826429907 2023-09-13 19:57:28 0 1 210

  • The specific meaning of the CSS animation name refers to the fill mode of the animation

    Recently I tried using CSS to create an animation where the opacity of a specific class went from 0% to 100%. But I encountered some problems with the animation of class="bar". We can see that animation-fill-mode not only applies to the title animation (which will change the opacity), but ...

    P粉441076405 2023-09-13 10:16:28 0 1 216

  • How to implement random mapping of element background?

    I want to randomly set the background color of each element but when I insert it into the following code, the background color becomes transparent: {modules.map((module,index)=>(

    P粉286046715 2023-09-11 22:32:31 0 1 227

  • The re-expressed title is: v-if based on DOM updates

    I have some elements rendered using v-for each element contains text and buttons only when the text overflows the height of the div I need to show the button {{el.text}}Clickme

    P粉163951336 2023-09-10 08:59:42 0 1 237

  • Why doesn't my gradient effect fade out at the edges of the image?

    I want the edges of the image to be blurry, or at least fade out vaguely. Nothing I've tried works and I've looked at all the questions on Stackoverflow. I'm using CSS, not Sass. To complicate the problem, I have a background image on the page and cover it with a white mask with an opacity of 0.8. C...

    P粉317679342 2023-09-09 23:34:16 0 1 241

  • How can I apply a style only to the parent element without affecting the styles of the child elements?

    In this example, I'm trying to make the parent element more transparent without changing the opacity of the child elements.