This question already has answers here:
Div with rounded border
(3 answers)
Closed 4 years ago.
consider blue section as a container like div. I want to have this with rounded corners like the sample. I used border-radius property but couldn't create the same. Also I searched a lot and couldn't fine anything like this.
p.s. I know clip-path property is a good option for this but I want something with more support on browsers.
Use border-radius on the bottom corners;
div {
width: 100%;
height: 250px;
border-radius: 0 0 50% 50%; /* topleft topright bottomright bottomleft */
background: #f90;
}
<div></div>
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Why does clip-path (and other properties) affect the stacking order (z-index) of elements later in DOM?
(1 answer)
Closed 1 year ago.
My goal is to have boxes with a blur-glass effect. To do this I use:
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(7px);
Additionally on certain events I want to blur the whole page, except for one element (let's call it element-x). For the overlay I use:
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(2px);
z-index: 5999;
}
I'm able to create the blur-glass effect. And I'm also able to make a blur-overlay.
But as soon as the element-x lies within the box (nested) with the blurred-glass effect. It gets blurred with the overlay.
When I remove backdrop-filter: blur(7px); from the box, it works.
I know it's a stacking order problem (z-index). But I can't get it to work, as expected. How can I solve this problem?
OK. I build a codepen for you to reproduce (use Google Chrome):
https://codepen.io/54mu3l/pen/JjNdBwd
On the top you'll find the solution that is not working.
On the bottom you'll find the expected behaviour (but without the glassed-blurred-box).
As you can see the top box has a blurred background. The bottom box hasn't:
As soon as the overlay is activated (just click anywhere on the screen). The orange box on the top gets blurred (but shouldn't). The orange box at the bottom is not blurred:
EDIT:
useful links:
CSS: backdrop-filter messing up stacking order
https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
http://jsfiddle.net/A2xht/
This question already has answers here:
Invert rounded corner in CSS?
(10 answers)
Closed 3 years ago.
I am trying to make the following design layout in css/html, but I can't get the inverted border-radius style encircled in blue (BOTTOM-LEFT).
So far, i am using the following css properties in my div:
border-radius: 0 0 0 3rem;
The result is the following:
I have tried to make a margin-top:-3rem of the next div which works but destroys the div height structure for full screen ui and make me change all the weight percentages which is not elegant. Also, I found these tricks from stackoverflow but I don't know how can I get the result based on their code and also it's not simple at all.
Looking for suggestions and easy tricks to achieve this.
Pardon the inline styling but you just need to work with position, z-index and negative margin-bottom
<div style="border-bottom-left-radius: 50px; margin-bottom: -50px; position:relative; z-index: 1; height:150px; background-color: blue;"></div>
<div style="border-bottom-left-radius: 50px; position:relative; z-index: 0; height:150px; background-color: red;"></div>
if you want to make design like the example, just add padding to your div. And it will solve your problem.
This question already has answers here:
Is it possible to generate a box-shadow that follows the shape of a clip-path polygon?
(3 answers)
Closed 3 years ago.
I'm trying to add box-shadow to a <div> element but it just doesn't show up.
I've already tried adding height and width in px to the class and tried using z-index on class and parents, nothing worked for me.
Here's the code. https://codepen.io/mateus-ramos/pen/BaBbyMG
I want to add shadow to ".imagem-container" class.
Clip path is cutting off your shadow. A workaround for this is to create a parent div for the element, then put the box-shadow on that. Then use filter to follow the path of your imagem-container (otherwise it will be a square box shadow). This article might help: https://css-tricks.com/using-box-shadows-and-clip-path-together/
You have to add a drop-shadow filter in the parent div, so the effect can be shown. In your code add this into the .job class
.job { /*parent div of .imagem-container*/
display: flex;
padding: 5%;
height: 500px;
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
The problem in your case is that the shadow is applied to the text as well. You need to create a parent div only for your .imagem-container div, the text can be outside of that scope and the effect doesn't apply to all the content.
This question already has answers here:
How can I display just a portion of an image in HTML/CSS?
(5 answers)
Closed 6 years ago.
I want to use some images as backgrounds but I have no control over the images. If the images are 500px x 500px , is it possible with just CSS3 to scale the image down to 200px x 200px and then only use 100px x 100px from the center?
You could use something like this:
div {
width:100px;
height:100px;
background-size: 200px 200px;
background-position: center;
background-image: 'your image here';
}
This question already has answers here:
Position a CSS background image x pixels from the right?
(21 answers)
Offset a background image from the right using CSS
(17 answers)
Closed 2 years ago.
I want to set a background image for a div, in a way that it is in the upper RIGHT of the div, but with a fixed 10px distance from top and right.
Here is how I would do that if wanted it in the upper LEFT of the div:
background: url(images/img06.gif) no-repeat 10px 10px;
Is there anyway to achieve the same result, but showing the background on the upper RIGHT?
In all modern browsers and IE down even to version 9 you can use a four-value syntax, specified in CSS3:
background-position: right 10px top 10px;
Source: MDN
Use the previously mentioned rule along with a top and right margin:
background: url(images/img06.gif) no-repeat top right;
margin-top: 10px;
margin-right: 10px;
Background images only appear within padding, not margins. If adding the margin isn't an option you may have to resort to another div, although I'd recommend you only use that as a last resort to try and keep your markup as lean and sementic as possible.
There are a few ways you can do this.
Do the math yourself, if possible. You already know the dimensions of your image. If you know the dimensions of the div, you can just put the image at (div width - image width - 10, div height - image height - 10).
Use Javascript to do the heavy lifting for you. Pretty much the same method as above, except you don't need to know the dimensions of the div itself. Javascript can tell you.
A more hackish way would be to put a 10px transparent border around the top and right of your image, and set the position to top right.
I don't know if it is possible in pure css, so you can try
background: url(images/img06.gif) no-repeat top right;
and modify your image to incorporate a 10px border on the top and right in a transparent color
You can use percentages:
background: url(...) top 98% no-repeat;
If you know the width of the parent div it should be pretty easy to determine what percentage you need to use.
One solution is to absolutely position an empty div, and give that the background. I don't believe there's a way to do it purely with CSS, no changes to the image, and no extra markup in a fluid layout.
You can fake the space on the right hand side with a border in pixels (white most of the time or maybe something else)
background-image: url(../images/calender.svg) center right
border-right: 5px white solid
The correct format is:
background: url(YourUrl) 0px -50px no-repeat;
Where 0px is the horizontal position and -50px is the vertical position.
CSS background-position accepts negative values.