Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I want to create this shape using CSS:
I used clip-path before but it only makes polygons but I'm trying to make it curvy
If you want to use CSS only you can use ellipse within a clip-path.
.shape {
background: orange;
width: 80px;
height: 100px;
}
.shape:after {
content: '';
background: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: ellipse(100px 120px at -10px -10px);
}
<div class="shape"></div>
The disadvantage of this is that clip-path only allows you to select which parts to keep, not which parts to remove. This means that the cut-out part will be white not transparent.
As you can see, we're not cutting the orange part, but adding the white circle on top of an orange background.
If you want a specific shape you might be better of with using an SVG as Andrew suggested in his answer.
Try this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69.2 100"><defs><style>.cls-1{fill:#f7931e;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M69.2,100H0C39.29,81.25,57.14,33,69.2,0Z"/></g></g></svg>
Creating svg curves is rather complicated, so it is often best to use a tool to assist. I created the above code used Adobe Ilustrator. Learn more here: https://www.w3schools.com/graphics/svg_path.asp
If you want the cut-out parts to be transparent then radial-gradient may be helpful.
e.g.
div {
background-image: radial-gradient(at -20vmin -60vmin, transparent 0%, transparent 80%, orange 80%, orange 100%);
height: 80vmin;
width: 60vmin;
}
<div></div>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I wanna adjust this hover style that I have attached below.
https://clay.global/
In the footer of this website, when you hover on items, you can see a half-background and pink color on it. I appreciate it if you can help me and say what CSS style shall I use.Thanks
https://clay.global/
A simple way to highlight just the bottom half of an element is to set a background image linear-gradient with the top half transparent and the bottom half some color.
For example:
button:hover {
background-image: linear-gradient(transparent 0 50%, pink 50% 100%);
}
<button>business set</button>
For an HTML like:
<p>Text to highlight</p>
CSS could be sth like:
p {
position: relative; /*must be relative or absolute */
display: inline; /* must be inline for ::after to be the same width as p */
}
p::after {
background: pink;
content: ""; /* content must be here for it to show up*/
position: absolute; /*must be absolute to be positionied over p*/
z-index: -1; /* put it behind the text*/
width: 104%; /* set the highgligth a bit thicker*/
left: -2%; /* set the highlight left proporcionally to the width*/
bottom: -4%; /* set the position offset respect to the text*/
height: 0.5em; /* set the height difference respect to the text*/
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm looking for a way to gradient images from the bottom to top
initial vs
goal
Images run in slick slider. I've already tried with radiant gradient but without any useful results.
It is not blur, it is linear gradient from black to transparent. You can use some element or pseudoelement (after/before) to place it over image and give it linear-gradient.
Something like this:
.my-cool-item {
position: relative;
display: inline-block;
}
.my-cool-item:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 300px;
background: linear-gradient(180deg, rgba(0,0,0,0), black);
}
<div class="my-cool-item">
<img src="https://i.stack.imgur.com/IuWLZ.jpg"/>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I have on the left a css Gradient, and on the left a slider with images.
How can i combine the two, so that the images on the right take the shape like on the images below ?
UPDATE
HTML
<div class="row shape-background">
</div>
CSS
.shape-background {
text-align: center;
background: -moz-linear-gradient(125deg, #e20613 25%, white 25%);
background: -webkit-linear-gradient(125deg, #e20613 25%, white 25%);
background: -o-linear-gradient(125deg, #e20613 25%, white 25%);
background: -ms-linear-gradient(125deg, #e20613 25%, white 25%);
the problem is that when i add another backgroud image on the righr side of the same div, the linear gradient does not work.
Should i make my slider with img tag, or can i achieve this use case with background images ?
background: linear-gradient(125deg, #e20613 25%, white 25%);
}
demo from my comment:
body {
margin: auto;
height: 200px;
width: 300px;
background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);
border:solid;
}
html {
display:flex;
height:100%;
background:white;
}
but this doesn't make a slider.
example of a css slider with image in the HTML
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Is it possible with CSS to apply a background-color and a background-image in one div at the same time?
I want it like this. Half image, half color. Ignore the blur effect, I don't need that:
The reason why I want this is because I have to apply an adjustment-layer on it all the time to get this effect.
Background color will only apply to the transparent parts of the background image (if both are set on an element).
You could create a pseudo element though with :before or :after and use that for the color layer.
(if you want to put content inside the element, you should use the pseudo element for the background image)
.background {
position: relative;
background-color: rgba(200, 50, 50, 0.5);
width: 500px;
height: 400px;
color:#fff;
}
.background:before {
content:'';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:url('http://lorempixel.com/500/400/cats/1') 0 0 no-repeat;
z-index:-1;
}
<div class="background">
content here..
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
So here's my perdiciment.
I have 4 divs inside of a container div.
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Each of the nested divs are squares. I need to somehow create a floating yellow circle with a drop shadow inside each square div. The trick is I cannot edit the HTML. It all has to be done in css.
I've played around with borders but that just breaks the square.
And box shadows don't make a nice clean circle.
Any ideas?
You can make a circle with a box-shadow inside the square using :after pseudo-element as follows:
div div {
height: 50px;
width: 50px;
background: #ccc;
margin: 20px;
}
div div:after {
content: " ";
height: 40px;
width: 40px;
display: block;
border-radius: 50%;
background: yellow;
box-shadow: 5px 5px 5px #888888;
}
Example here.