I try to build the form of the div with the gradient. The one where the corner in the top left is gone. But I don't know how I can do that with the clipPath function. Does anyone know how to do that?
image
This is my Div and i need to cut the top left corner like the picture describes
<div className="rounded-lg rounded-tl-none border">
<p>{title}</p>
<p>{content}</p>
</div>
Related
My task is to create website x, with a given background image. In addition, there is a div that lives on the side of the website, and when hovered over it animates the movement of another div from the right side of the screen.
The problem is that I would like to have the background blur in the area under the div.
After some research and brainstorming I have come up with the following method of doing that:
I have my background draw on the body element. Then, I have a div that moves when another parent div is hovered over. Next, within that div I have another div which has a set width and is meant to act as a cropping mechanism over the last child, which is the same background but with a filter: blur(10px) property.
Here is what that would look like:
<div class="draws-background">
<div class="moves-child-when-hovered">
<div class="overflow-hidden-to-crop-child">
<div class="draws-blurred-background-with-fixed-position" />
</div>
<div class="some-content-that-needs-to-be-moved" />
</div>
</div>
Note the following:
The div which acts as a crop HAS to move with the content, so that the underside can look blurred.
I did get this to work 90% of the way; the blurred background works.
The problem with the code is that the blurred background moves alongside everything else, so the effect actually seems more like a section of a blurred background moving, not a div scrolling over a blurred background.
I am trying to achieve an effect similar to that of the notification bar in MacOS.
Am I approaching this problem wrong or is there some way to stop the blurred background from moving with its parent?
I want an Image to have a fading effect from top to bottom, so that no matter what color the image is the text that I want to put on the image is visible.
P.S. I'm not talking about a background image, I'm talking about a regular image.
I only say this because when I look this up I see people asking how to do it with a bg image. Oh, and I want the overlaying fade to be black.
For this you can use a div overlay with backgroud:rgba(0,0,0,0.1).
<div>
<img src="">
<div style="position:absolute;height:50px;left:0;bottom:0;background:rgba(0,0,0,0.1)">Image Title</div>
</div>
Probably you may require to give index property as well.
I am just starting out making my first website.
What I am trying to do is put a chart over top of a picture. I have a tiled background image, and then I have another large image onto of the background. I want a chart to be put on top of the large image. In my CSS panel I have set the placement to where I want the chart to be (on top of the image), but when I change the position to "absolute" the chart just disappears. I think it might be behind my other picture? When I change the position to "relative" it goes where I want it to be, but of course I don't want it relative (moving with the window) I want it to be in the same place when the window changes.
I'm hoping there is a quick fix for this that I'm not aware of.
For absolute to work the element must be inside an element with its position set to relative, fixed, or absolute.
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute;top:100px;left:100px">
blah
</div>
</div>
edited to remove link. Just google "position absolute values"
I have a div who are show as rectangle block. i want to show in them on Right top corner a close image who used for remove them like Windows have.
<div class="block"></block>
the especial thing i need to use in this that i not want to put HTML in the div and thing to do this using background image but another thing is i don't know how much div it's have because div have test who user type already.
if i put the background-position 619px 4px that i am unsure that they work when div are much big or too small.
so can someone show me how i can do this
If you want your close icon a few pixels off the right-top corner, you could do this:
You can add some transparent pixels to your background image to the right (the offset from the right side), then you can use:
background-position: right 3px;
I'm currently working on this layout
http://imstillreallybored.com/gridiron/indexx.html
at the top menu i have to different backgrounds for the menu the red one and the gray gradient. I need the gray gradient to continue on the right side of the menu off of the page i cant seem to get this to work. I tried absolute positioning but when you resize the browser it covers the menu which wont work. I cant seem to think of the right way to do this anyone have any ideas?
You can create a very long background image for your #menuContainer that is half red and half grey, and then center position it, so it will always stay red on the left and grey on the right. It might be a hacky solution, but that is the easiest thing you can do without changing your markup.
try nesting a few divs. run the grey gradient all the way across, then put your red image over that in another div, and left align it. make the red image like 500px wide and it'll always be on the left, but will extend under the menu and be hidden.
<div style="background-image:url('grey-gradient.jpg'); background-repeat:repeat-x;">
<div style="background-image:url('red.jpg'); background-repeat:no-repeat;">
<div>
<ul>menu</ul>
</div>
</div>
</div>