.darken {
position: relative;
width: auto;
height: auto;
margin: 10px;
border-radius: 20px;
border: hidden;
padding: 20%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), no-repeat center top / cover;
}
<div class="darken" style="background-image: url("https://smorder.blob.core.windows.net/images/6/d9ffff37-79a2-44b2-aef4-6c8aadff1c6e");"></div>
But, it does not achieve what I want exactly. As I want to darken the left side of the image partially. I want to achieve something like this: http://prntscr.com/gj0hs8
Any ideas how to achieve this darkening effect?
linear gradient is treated as a background image too.
You can use it as an overlay if set first while using multiple background-image.
Mind the start/stop value, direction and to set 2 different colors in order to draw a gradient (tune provided example below to your needs).
A simple gradient always covers its container, no need to reset background-size to it
example below.
.darken {
position: relative;
width: auto;
height: auto;
margin: 10px;
border-radius: 20px;
border: hidden;
padding: 20%;
}
<div class="darken" style="
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.8) 40%, rgba(0, 0, 0, 0) 70%) no-repeat center top ,
url(http://lorempixel.com/800/500/nightlife/7) 0 0 /cover ;">
test</div>
You need a div as overlay and give this one the gradient and it should work
Hope this might work
.darken {
position: relative;
width: auto;
height: auto;
margin: 10px;
border-radius: 20px;
border: hidden;
padding: 20%;
background-image: url("https://preview.ibb.co/fQxszF/security.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.overlay::before {
position: absolute;
top: 0;
left: 0;
transform: translate(-230px, -60px) rotate(145deg);
content: '';
display: block;
width: 77%;
height: 65%;
background: rgba(0, 0, 0, 0.9);
}
<div class="darken overlay"></div>
Include the class overlay in the div.
Appreciate if useful.
Related
This question already has an answer here:
Mask Image, create rectangle from multiple gradients
(1 answer)
Closed 1 year ago.
Using the backdrop-filter css parameter, you can blur the background of a div:
#image {
width:300px;
height:300px;
background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}
#image div {
position: absolute;
top: 75px;
left: 75px;
width: 150px;
height: 150px;
backdrop-filter: blur(12px);
}
<div id="image">
<div>Blurred</div>
</div>
Using the mask-image parameter, you can add a gradient mask to fade out an edge:
#image {
width:300px;
height:300px;
background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}
#image div {
position: absolute;
top: 75px;
left: 75px;
width: 150px;
height: 150px;
backdrop-filter: blur(12px);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
}
<div id="image">
<div>Blurred</div>
</div>
Is there a way to create a blurred square with these faded edges, that can handle being resized? Or a way to receive the same effect with another method?
You could use a black png to do so like this one
https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png
#image {
width:300px;
height:300px;
background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
}
#image div {
position: absolute;
top: 75px;
left: 75px;
width: 150px;
display:flex;
justify-content:center;
align-items:center;
height: 150px;
backdrop-filter: blur(12px);
mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/7/76/WX_circle_black.png');
-webkit-mask-size: cover;
}
<div id="image">
<div>Blurred</div>
</div>
Use the box-shadow inside of an element (inset).
Syntax:
<inset> <x-offset> <y-offset> <blur-radius> <spread-radius> <color>
In this example I just used blue for demonstration purpose.
#image {
width:300px;
height:300px;
background: url(https://i.picsum.photos/id/527/300/300.jpg?hmac=wk333ApmV6eJV8v2QbKrGH1urFbDlb2bEt92dWS5Yno);
box-shadow: inset 0 0 50px 10px rgba(0, 0, 255, 0.8);
}
<div id="image">
</div>
Wasn't quite sure how to word the question succinctly, so I hope the above image helps to illustrate what I'm trying to accomplish.
I'm developing sites using Bootstrap and our designer keeps throwing curveballs at us. At first, the absolute element in the example used to just be a solid color extending to the edge of the viewport--ezpz, just use overflow:hidden somewhere and make the element 9999px wide, no problem. But now we're beginning to use pictures and gradients inside of these suckers, where I will need to know where the edge of the screen is, or otherwise cut off some of the image or only see a portion of the gradient.
I am fully aware that I am able to accomplish this with JS and some simple math, but I would like to know if there are any solutions using styles that can get the job done. I tend to develop sites using a very black and white approach wherever possible and view using JS to handle "styling" as a hack, rather than a solution. It feels like I'm brute forcing something that should have a way to finesse it. So I'm more or less just curious if there is a solution that will make my brain a little happier, rather than "how do I do this plz?"
Here's a fiddle, specifically showing the issue with a gradient. Example 1 with solid black works great. Example 2 with a gradient is too wide and basically just looks red (but would look great on a monitor with 20k pixel width!). I'm wondering if there's maybe some clever use of the vw unit that would solve this?
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example1 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example2 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
Note: If this question stays open for a while with no css solutions or the community seems to all agree that JS is the way, I will select the top voted answer as correct!
If your "rail" has a fixed width, this is as simple as a 3-part calc.
0.5 * viewport width - 0.5 * rail width + parent container width
E.g.
calc(50vw - 150px + 100%);
Since your rail width is fixed at 300px and 100% will refer to the full relative element's width because it is fixed.
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example1 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: 9999px;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: 100px;
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
#example2 .absoluteElement {
position: absolute;
top: 0;
right: 0;
width: calc(50vw - 150px + 100%);
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
<div class="absoluteElement">
</div>
</div>
</div>
</div>
Because position absolute will snap to the first relatively positioned parents boundary, why not remove the absolutely positioned element from the element2 parent and place a position relative on your body, then set its position left and top relative to the body.
To alleviate having to change the height and top properties that will live inside two different elements, set their lengths to a CSS variable then set each elements properties (the height of the proceeding example2 element, and the top of the absolutely positioned element you wish to bound to the side of left side of the body) to the CSS variables length. I would do this with both absolutely positioned element and then set their top properties to match that of their parents placements. Then you can change your width to a view port length and your gradient will show up nicely.
Alternately the bubbling up effect of the absolute positioning, you could forgo position relative on your body and adjust according to the HTML element with a few minor adjustments to the left and/or top properties of your absolute elements.
:root {
--height: 100px;
}
body {
position: relative;
}
#example1 {
background-color: #fff;
overflow: hidden;
}
#example1 .container {
width: 300px;
height: var(--height);
margin: 0 auto;
background-color: #ddd;
}
#example1 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
.absoluteElement {
position: absolute;
top: 0;
left: 0;
width: 50vw;
height: 25px;
background-color: #000;
}
#example2 {
background-color: #eee;
overflow: hidden;
}
#example2 .container {
width: 300px;
height: var(--height);
margin: 0 auto;
background-color: #ccc;
}
#example2 .relativeElement {
position: relative;
width: 100px;
height: 50px;
}
.absoluteElement2 {
position: absolute;
top: var(--height);
left: 0;
right: 0;
width: 50vw;
height: 25px;
background: rgb(255, 0, 0);
background: -moz-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: -webkit-linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
background: linear-gradient(270deg, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#000000", GradientType=1);
}
<div id="example1">
<div class="container">
<div class="relativeElement">
</div>
</div>
</div>
<div class="absoluteElement">
</div>
<div class="absoluteElement2">
</div>
<div id="example2">
<div class="container">
<div class="relativeElement">
</div>
</div>
</div>
In my ionic/angularJS app i'm using either the camera or the gallery to pick a photo and upload it as avatar. My problem is, depending the source file, if the image is small or rectangle, i'm not able to resize it the way i want to have a proper rounded image. What do you think ?
Here is what i have :
Or here, same image but it's too much zoomed in...
/* ZOOMED IN IMAGE CSS */
.menu-image-2 {
position: relative;
max-width: 150px;
max-height: 150px;
border-radius: 50%;
overflow: hidden;
border: 2.5px solid rgba(255, 255, 255, 0.4);
left: 50%;
transform: translateX(-50%);
}
.menu-image-2 > img {
width: 150px;
border-radius: 0%;
}
figure{
width:150px;
height:150px;
left: 50%;
transform: translateX(-50%);
}
/* CROPPED IMAGE CSS */
.moncompte-image {
position: relative;
max-width: 200px;
max-height: 200px;
border-radius: 50%;
overflow: hidden;
border: 2.5px solid rgba(255, 255, 255, 0.4);
left: 50%;
transform: translateX(-50%);
}
.moncompte-image > img {
max-width: 200px;
border-radius: 0%;
}
figure_monCompte{
}
figure_monCompte > img{
max-width:200px;
max-height:200px;
}
<!--ZOOMED IN IMAGE -->
<div class="menu-image-2">
<figure><img data-ng-src="xxxxx"></figure>
</div>
<!-- CROPPED IMAGE -->
<div class="moncompte-image">
<figure_monCompte>
<img src="xxxxxx"> </figure_monCompte>
</div>
EDIT :
I have a question about the second snippet, I would like to use it, but i need to set the background image out of the css file, but when trying this the image is not set as background so the result is an image squeezed instead of have a nice hidden overflow... Do you have ideas to overtake this ?
#rounded-image {
border-radius: 50%;
width: 150px;
height: 150px;
border: 5px solid rgba(0, 0, 0, 0.4);
overflow: hidden;
}
#rounded-image:before {
content: "";
/* background-image: url(https://i.ytimg.com/vi/7xWxpunlZ2w/maxresdefault.jpg) center; */
background-size: cover;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
<img data-ng-src="{{avatar}}" id="rounded-image">
You need to set the image as background-image, background position center, background size contain, top left 0, background repeat no repeat
If you dont specify the image as background image, the image might get stretched
*Sorry for the formatting, im stuck in a traffic only with my phone
As mentioned in my comment, you can just use border-radius: 50%; but you may want to include browser prefixes:
img {
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}
Browser prefixes: https://lifewire.com/css-vendor-prefixes-3466867
<img src="https://image.ibb.co/h9mYY0/moz.png" style="border-radius:50%;border: 5px solid rgba(0, 0, 0, 0.4);">
Alternatively, you can use Psuedo elements, to set the images as the background images of the ::before element... this way, you're DIV border radius will work correctly: Can I put a border radius on a before or after pseudo selector image?
Or as the background image of the DIV itself, though this leaves you with less flexibility.
New snippet using Psuedo elements, works with rectangles and small images:
#rounded-image {
border-radius: 50%;
width: 150px;
height: 150px;
border: 5px solid rgba(0, 0, 0, 0.4);
overflow: hidden;
}
#rounded-image:before {
content: "";
background-image: url(https://ichef.bbci.co.uk/news/976/cpsprodpb/9947/production/_103893293_ec317eb7-0fa2-4ec8-ab8e-53c9ce976a63.jpg);
background-size: cover;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
<div id="rounded-image"></div>
UPDATE:
<style>
#rounded-image:before {
background-image: url('{{bgImg}}');
}
</style>
<div id="rounded-image"></div>
Obviously, you still need your CSS file for the rest of the styles, but do that in the <head> of your page, or just before the tag, but <head> is nicer ... childish giggle
After creating a clip path to mask away a part of an image leaving behind a downward pointing arrow, I get this thin line on high resolution screens or when i zoom in on a regular screen.
here is the css for the clip path:
.clearflowptr {
margin-bottom: 40px;
margin-top: 40px;
background: white;
height: 50px;
width: 100%;
-webkit-clip-path: polygon(0 0, 46% 0, 50% 100%, 54% 0, 100% 0, 100% 100%, 0 100%);
the margin-bottom and margin-top just add spacing to the element. I tried playing around with the padding but to no avail.
Any help is appreciated.
Thanks
You can try this one instead of using clip-path if its not a requirement.
div{
background-color: #0b8192;
width: 100%;
height: 15px;
position: relative;
}
div:after{
content: '';
width: 0px;
height: 0px;
border: 40px solid #0b8192;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: auto;
border-right-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
}
<div>
</div>
Can someone help me out making such a cut out from div?
Found possible solution,but dont have knowledge in SVG.Maybe someone can help me out.
HTML:
<svg viewBox="0 0 400 150">
<path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
</svg>
CSS:
svg {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
overflow-x: hidden
}
svg {
left: 47%;
position: relative;
top: -24%;
transform: translate(-50%, -50%);
width: 2000px;
}
Try it:-
#oval_parent{
background:black;
width:200px;
height:120px;
overflow:hidden;
}
#oval{
width: 220px;
height: 100px;
margin:10px 0 0 -10px;
background: white;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
<div id="oval_parent">
<div id="oval"></div>
</div>
The easiest way of doing this is create a div right after the navigation and make curved png with Photoshop and apply it as background to that div. So in that way you have rectangle navigation and div with curved background after navigation.
.nav-bot{
background: url(https://s23.postimg.org/jakqjag8r/nav_bot.png);
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 20px;
}
Here is example fiddle.
EDIT
If you don't want to use image there is another way to do this Using css gradient and box-shadow.
.nav-bot{
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 50%);
width: 104%;
margin-left: -2%;
height: 50px;
border-radius: 50%;
margin-top: -19px;
-webkit-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 1px 3px 5px 0px rgba(0,0,0,0.75);
}
Here is example for that.
Hope this helps you.
Html:
<div class="oval"></div>
css:
.oval { width: 100px; height: 50px; border-radius: 50%; background: red; overflow: hidden;}
The trick is to have one side bigger than the other. Overflow hidden to cut out the background stuff if you use an image.
Change the width and height depending on the direction of the oval.
Here's a JSfiddle:
https://jsfiddle.net/10cq0vmv/