This question already exists:
Make rounded bottom corners via css [duplicate]
Closed 2 years ago.
I have an image with the following sharp bottom corners:
I've tried border-radius but seems it's possible to create only smooth corners.
How to achieve these 'sharp bottom corners' effect using clip-path property or any other css technique?
You need to use ::after and ::before take a look at this link: https://css-tricks.com/the-shapes-of-css/
make a shape like those and put them on your background image.
As i figured out on your image your tag is white so when you color the shape's white they would be invisible and you can also do your corner or whatever.
I think you can use border-radius for sharp borders.
#sharp-img {
border-radius: 0% 0% 31% 33% / 0% 0% 16% 17%;
}
<img id="sharp-img" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" width="500" alt="technology" />
More visualize at Fancy Border Radius Generator.
Related
I have tilted text and a background using -webkit-transform: rotate(-#deg); and background selectors, but the ends of the background stay perpendicular to the text. How can I customize the degree at which the ends are cut off (à la the Cinemax logo).
I've tried putting the span in a parent div to cut off the edges, but it's tricky. What's the best way to angle the ends of the background in CSS?
In addition to the rotate, you should also skew your element:
div {
transform: rotate(-5deg) skew(-10deg);
}
Here's the fiddle: http://jsfiddle.net/VANrX/
I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see the image fades out at the top and the bottom. That means I can't just use a background image using css that is left aligned in the column on the right.
So then I though maybe I can use a css 3 border shadow that has a radial gradient. I am probably going to use table cells to do this because I need the shadow to stretch to the height of the tallest column. How do I do this?
Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow"
You can use a radial gradient to simulate a border shadow without images.
Demo: http://jsfiddle.net/sonic1980/wRuaZ/
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
| | | |
| | | +--> color end
| | +--> color start
| +--> size of gradient ellipse (x-axis, y-axis)
+---> position of ellipse center
It's easy to modify to make it vertical or implement using :before or :after pseudo-classes.
Another example, an <hr> tag with shadow: http://jsfiddle.net/sonic1980/65Hfc/
i have a suggestion that you do not need use css3, you may use two different class, one is normal, and other has background. And when loading page finish, and call js method, settimeout to dely some seconds, toggle class.
I think I am just going to use the image, and set a min-height on the div :-)
.column.right {
padding-left: 30px;
background: url(/img/shadow.png) no-repeat left top;
min-height: 265px;
}
Another solution would actually allow for a dynamic height column, but it only has IE8+ support.
What you'd do is apply a background-image positioned to the edge of the tallest column. Then you could use the :before and :after pseudoelements, set to absolute positioning of top:0; and bottom:0 respectively, to set the 'cap' on the shadows.
Does that make sense? Here's a JSFiddle that shows it using a border and text, instead of images.
Of course, the height parameter of the div in the JSFiddle is of no consequence; it could be min-height or nonexistent. I just set it to give the div some size.
How can I create a programmatic horizontal gradient that starts at a prescribed location (in pixles on the x-axis)?
Here's the issue- I've got an image set as background-image - ideally, what I'd like to do is declare a CSS gradient that starts close to the edge of the image (~1800 pixels) and fades gracefully to full black.
So far, the best solution I have is to have two div elements- one with the photo background and the other with a 1px tall gradient image repeated along the y-axis with a background-position that starts at 1780px.
This works, but I really want to get away from the 1px image trick. Any ideas?
<div id="photobg">
<div id="gradientbg">
</div>
</div>
#photobg {
background-image:url('photourl.jpg');
}
#gradientbg {
background-image:url('1pxgradient.jpg');
background-repeat: repeat-y;
background-position: 1780px 0;
height: 100%;
}
What I'd like to do, in theory, is use color stops at 1780 px for a CSS gradient but as I understand it, CSS only supports % values as color stops.
Reference:
CSS 3 Gradient n pixels from bottom - Webkit/Safari
No, you can use pixels with linear gradient:
background-image: linear-gradient(transparent 1780px, black 100%);
You can also combine this gradient with multiple background images on one div.
You might want to check out this jsbin, I've made for you:
http://jsbin.com/sonewa/1/edit
This block of css will do what you want
background: -moz-linear-gradient(center top , #00AFF0, #53D4FE); //this is for mozilla
background-image: -webkit-linear-gradient(top, #00AFF0, #53D4FE); //this is for chrome and safari
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00AFF0', endColorstr='#53D4FE', GradientType=0); //this is for IE
while the gradient is from color #00AFF0 to #53D4FE (top to bottom)
I am working on a website which uses multiple css3 gradients as overlay for a background tiled with texture image
site url: --snipped--
currently for header i am using following css:
#header {
background: #DBD6D3;
height: 364px;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF));
}
#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;}
here headerBg.png is a semi-transparent texture of size 5x5 pixel, ad for body I need to create this background:
I need to know how to make this kind of radial background in CSS3, initially I had used same code as header but with rgba() for color, setting end of the gradient with 0 opacity but it created too much noise.
tried few online generators as well for CSS3 radial background but none of them were good!
This image i am using is taking up 280kbs and I want to reduce it as it significantly effects the performance! Help would be appreciated.
update:
Upload psd, can be downloaded from
http://ylspeaks.com/stackoverflow_css3.zip
and adding bounty
Edit Jan 2011:
Webkit nightly now supports elliptical gradients http://webkit.org/blog/1424/css3-gradients/, these will eventually find their way into Safari and Chrome. Faking elliptical radial gradients through css transforms will eventually be unnecesary.
Your problem has the most difficult constraints I've ever encountered, but it is an interesting challenge and it illustrates the limitations of each browsers approach for radial backgrounds, so that's why I decided on trying.
First, the rgba approach is stillborn because the opacity is going to hide some of the noise. It's better to apply semitransparent noise on top of the gradient, you can avoid the extra div by applying multiple background on the same image:
background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent;
You may notice the color property at the end of declaration, it looks weird but this how you declare colors when you apply multiple backgrounds.
Second, webkit doesn't support elliptical backgrounds, so the work around to this is squishing the gradient through -webkit-transform and positioning it a bit further up:
-webkit-transform: scale(1, 0.7) translate(0, -350px);
For sanity, the right thing to do would seem be applying circular backgrounds on both FF and webkit and then transform them. However, Firefox's transform doesn't support scaling gradients! So we apply an elliptical background:
background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent;
But, since Webkit's container is squished, Firefox's gradient is larger! At this point we would think about applying different css rules for the height of the gradient, but since Firefox doesn't scale the gradient, we can apply the same transformation on the elliptical background the get the containers to be of the same height:
-moz-transform: scale(1, 0.7) translate(0, -250px);
And voila! we have an elliptical gradient with noise, that works on both Safari and Firefox!
http://duopixel.com/stackoverflow/gradient/
background: #702914;
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914);
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));
Can someone take a look at my background shadow? Here is the link:
link text
I'm trying to find the best solution for having a background shadow for a card in the front (layered).
Is it possible to make the sides of shadow cave in with CSS?
I'm currently using a PNG with transparency and I can't get the shadow to match with the background!
Any suggestions would be helpful.
To get your image to line up you can do it in css:
#card_main {
background:url("/img/shadow.png") no-repeat scroll 0 0 transparent;
margin:0 auto;
min-height:800px;
position:relative;
top:-1px;
width:980px;
}
Though your background gray color seems to be different in the image than the background.
you can also make your shadow.png only be the text shadow, not including the background-color for the header and content area in the png.
or, you can simply use the box-shadow css declaration for webkit and FF. and a filter for IE. if you're interested in this solution i can post some sample code.