i want to add radial-gradient on an element, it works when i set an image as a background image but not on element. Is there any way to do this, what am trying to achieve here is fade the image from bottom.
*My Code*
<div class="slideBanner">
<img src="/media/{{show.banner}}" style="background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%); background-blend-mode: multiply; width: 500px; height: 500px; z-index: 1;">
</div>
I imagine that your answer is like this codepen-resolve
codepen-image
.slideBanner {
position: relative;
width: 100%;
height: 100%
}
.slideBanner:before {
position: absolute;
content:"";
background: red radial-gradient(ellipse at center, rgba(0,0,0,0) 10%,rgba(0,0,0,1) 90%);
background-blend-mode: multiply; width: 500px; height: 500px;
z-index: 0;
opacity: 0.7;
width: 100%;
height: 100%
}
img {
width: 100%;
height: 100%
}
<div class="slideBanner">
<img src="https://1.bp.blogspot.com/-2hrW2w5l99U/XYuD2fDHydI/AAAAAAAAIKY/Wu_bQmABRL0-lm9LAt3tzs75uKT8S0nhwCKgBGAsYHg/s320/15694239854007711595824302455034.jpg" >
</div>
Related
The goal is to create something like this:
.square {
width: 100px;
height: 100px;
background-image: linear-gradient(45deg, purple 50%, gray 50%);
}
<div class="square"></div>
With a square it's easy, as we know that if we make a line from the two corners in front of each other, it will close 45deg with the side next of it. But what if we don't know the width and height of the element, but we want to keep the effect? Just a logic, but maybe it helps to find the solution: the effect could be earned with a square transform(scale)-d to the required parameters, but the problem still exists: we don't know those parameters. Another logic: if the gradient would be an image, (with worse quality) with background-size, it could be stretched.
Any ideas?
Yep, there’s a syntax for corners!
.square {
width: 200px;
height: 100px;
background-image: linear-gradient(to top right, purple 50%, gray 50%);
}
<div class="square"></div>
Maybe you can try using clip-path with :after and ':before' pseudo class.
.square {
width: 100px;
height: 100px;
position: relative;
}
.rectangle {
margin-top: 1em;
width: 100px;
height: 200px;
position: relative;
}
.square:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: grey;
clip-path: polygon(100% 100%, 0 0, 100% 0);
}
.square:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: purple;
clip-path: polygon(100% 100%, 0 0, 0 100%);
}
<div class="square"></div>
<div class="rectangle square"></div>
How to make multiple images gradient blend to each other at only certain area as in the attached image below using CSS?
What I've tried:
.container {
position: relative;
display: flex;
height: 200px;
}
.container:before {
content: '';
position: absolute;
width: 80px;
top: 0;
bottom: 0;
right: 50%;
margin-right: -40px;
background: url(https://www.w3schools.com/w3css/img_fjords.jpg);
filter: blur(5px);
-webkit-filter: blur(5px);
}
.container > div {
flex: 1;
background-size: 100% 100%;
}
<div class="container">
<div style="backgroud-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
<div style="background-image:url(https://www.w3schools.com/w3css/img_fjords.jpg)"></div>
</div>
However, there's no fading/transition respecting to the background images as shown in below image:
UPDATE
I haven't receive any solid answer for my question but this code seems like the closest answer I can get till date.
A modification from PEN BY Peter Ramsing
<div class="hero-image">
<img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>
<div class="hero-before">
<img src="http://static.peter.coffee/codepen-assets/keyboard-background.jpg" />
</div>
<style>
img {
/* To contain the image to the confines of the div */
max-width: 100%;
}
.hero-image {
max-width: 100%;
width: 800px;
margin: auto;
}
.hero-before {
max-width: 100%;
width: 800px;
margin: auto;
}
.hero-image::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 100%);
margin-top: -50px;
height: 40px;
width: 100%;
content: '';
}
.hero-before::after {
display: block;
position: relative;
background-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
margin-top: -345px;
height: 50px;
width: 100%;
content: '';
}
</style>
You may use some pseudo element that you put between the two images and apply linear gradient on it. By using the same colors you will create this effet. You may notice that the solution will work by using background color and also backround image, you simply need to respect the color used in the background and apply them to the pseudo element.
Here is an example, you may adjust the width of the pseudo element depending on your needs :
.container {
position: relative;
display: flex;
min-height: 100px;
margin-bottom:20px;
}
.container:before {
content: '';
position: absolute;
width: 80px;
top: 0;
bottom: 0;
right: 50%;
margin-right: -40px;
background: linear-gradient(to right, #c3986b, #0a4b67);
}
.container>div {
flex: 1;
background-size:100% 100%;
}
<div class="container">
<div style="background:#c3986b;"></div>
<div style="background:#0a4b67;"></div>
</div>
<div class="container">
<div style="background-image:url(https://dummyimage.com/150x100/c3986b/14151a)"></div>
<div style="background-image:url(https://dummyimage.com/150x100/0a4b67/14151a)"></div>
</div>
Here is another idea with mask that will work with any kind of images
.container {
display: flex;
min-height: 300px;
margin-bottom:20px;
}
.container>div {
flex: 1;
background-size:0 0;
position:relative;
z-index:-1;
}
.container>div::before {
content:"";
position:absolute;
background-image:inherit;
background-size:cover;
background-position:center;
z-index:-1;
top:0;
bottom:0;
}
.container>div:first-child::before {
left:0;
right:-50px;
-webkit-mask:linear-gradient(to left,transparent ,#fff 50px);
mask:linear-gradient(to left,transparent ,#fff 50px);
}
.container>div:last-child::before {
right:0;
left:-50px;
-webkit-mask:linear-gradient(to right,transparent ,#fff 50px);
mask:linear-gradient(to right,transparent ,#fff 50px);
}
<div class="container">
<div style="background-image:url(https://picsum.photos/id/1074/800/800.jpg)"></div>
<div style="background-image:url(https://picsum.photos/id/1060/800/800.jpg)"></div>
</div>
<div class="container">
<div style="background-image:url(https://picsum.photos/id/1070/800/800.jpg)"></div>
<div style="background-image:url(https://picsum.photos/id/1062/800/800.jpg)"></div>
</div>
You can combine the background: linear-gradient() with Flexbox to achieve something like this:
div {
display: flex; /* displays flex-items (children) inline */
justify-content: space-around; /* horizontal alignment / icons are evenly distributed with equal space around them, i.e. all have equal space on both sides, that's why there are two units of space between them / you can also experiment with other values such as: "space-between", "space-evenly", "center" etc. */
align-items: center; /* vertically centered */
height: 100px;
background: linear-gradient(to right, #c3986b 45%, #0a4b67 55%); /* adjust the % to your needs, the sum of both needs to evaluate to 100% */
}
img {border-radius: 50%}
<div>
<img src="http://lorempixel.com/50/50/" alt="icon1">
<img src="http://lorempixel.com/50/50/" alt="icon2">
</div>
In the given example I've made the linear-gradient() to be 10% of parent's width. The number is calculated by subtraction of both values in %, 55% - 45%.
In order to increase its width, if so desired, just increase the bigger number and decrease the lower one, preferably by the same amount of %, e.g. 40% / 60%, to leave it horizontally centered. For decreasing its width, just do the opposite.
For a website I'm developing I need to include some diagonal shaped borders to a div. These are the main examples which I need to recreate.
double diagonal top border, triangle shaped
Now been scouting the web on how to achieve this, and my first thought as well would be by using ::before. However I can't get it to work without it being positioned absolute which messes up the entire page.
This is my code I have tried to achieve something like this:
.slider-container{
background-color: $blue;
width: 100%;
overflow: hidden;
position: relative;
.col-md-3{
img{
padding: 40px;
width: 100%;
max-width: 400px;
margin: auto;
}
}
&::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
}
<section id="slider">
<div class="container-fluid">
<div class="row slider-container">
<div class="col-md-3">
<p>imgae 1</p>
</div>
<div class="col-md-3">
<p>imgae 2</p>
</div>
<div class="col-md-3">
<p>imgae 3</p>
</div>
<div class="col-md-3">
<p>imgae 4</p>
</div>
</div>
</div>
</section>
Note: it won't work in here but this is the result I get result
With just css and a bit tweaking based on your divs size you could create something like this:
.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}
.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>
Edit: Just tested this in chrome, you might need special linear-gradients for older/other browsers.
The most simple way to achieve this would probably be to use a background image, though the effect may prove to be inconsistent on smaller devices. For this reason, you may want to consider using a hard-stop gradient.
.grad {
background: lightblue; /* For browsers that don't support gradients */
background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
width: 100%;
padding: 20px;
}
<div class="grad">
<h1>Hard-stop gradient</h1>
<p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>
Using this, you can create a gradient from 0% to 15% that is white on both ends, followed by a gradient from 15% to 100% that's fully black. This completely removes the fading effect, giving you your angled background. It's probably the most efficient way as well since it only requires one line of CSS.
Something like this?
div {
background: yellow;
height: 150px;
overflow: hidden;
position: relative;
width: 300px;
}
div::before {
background: red;
bottom: 100%;
content: '';
display: block;
height: 100%;
position: absolute;
right: 0;
transform-origin: 100% 100%;
transform: rotate(-15deg);
width: 150%;
}
<div></div>
You can use clip-path.
body {
margin: 0;
padding: 0;
color: #ffffff;
}
.wrapper {
min-height: 100vh;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
background-color: red;
}
.bg {
min-height: 100vh;
min-width: 100vw;
background-color: blue;
clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);
}
<div class="wrapper">
<div class="bg"></div>
</div>
For me, the linear-gradient is not smooth ...
I would suggest either clip-path or svg:
svg {
display: block;
width: 100%;
height: 55px;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="white" />
</svg>
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid green;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
I was wondering if it is possible to create a background effect like in the image below using just one div.
I know how to achieve it with two divs, but my situation would make it really easy if it could be done in one div (maybe using :after ???). The code for the gradients is:
.bg-green {
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
.bg-red {
background-image: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%;
}
Thanks :)
Yes, this is possible using a single div with a :pseudo-element.
What you could do is add the second linear-gradient to its :after :pseudo-element. Notice the use of rgba(r, b, g, a) instead of hex colors. This way you could control the opacity of the second linear-gradient by changing its alpha value.
body, html {
height: 100%;
margin: 0;
}
div {
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(110deg, #5EDC29 45%, #FF0058 45%, #FF0058 100%);
z-index: -1;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(-180deg, transparent 0%, rgba(0,0,0,0.6) 100%);
}
<div></div>
If you want the exact same gradient colors that you've posted in your question, you'll need clipPath.
body {
background: #222222;
margin: 0;
}
.bg {
width: 500px;
height: 300px;
background: linear-gradient(-180deg, #F5515F 0%, #8E0A1E 100%);
}
.bg-2 {
position: absolute;
width: 500px;
height: 300px;
top: 0;
z-index: -1;
background-image: linear-gradient(-180deg, #95D428 0%, #20560B 100%);
}
<svg width="500" height="300">
<defs>
<clipPath id="shape">
<path d="M300,0 L501,0 L501,301 L175,301z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="500" height="300">
<div class="bg"></div>
</foreignObject>
</svg>
<div class="bg-2"></div>
You can get this effect, but you will need to set overflow hidden on the div and to set the background in a after pseudo class
.test {
width: 400px;
height: 300px;
border: solid 1px black;
position: relative;
overflow: hidden;
}
.test:after {
content: "";
position: absolute;
width: 160%;
height: 160%;
top: -30%;
left: -30%;
background-image: linear-gradient(-210deg, #95D428 0%, #20560B 100%), linear-gradient(-210deg, #F5515F 0%, #8E0A1E 100%);
background-position: top left, top right;
background-size: 50% 100%;
background-repeat: no-repeat;
-webkit-transform: rotate(30deg);
}
<div class="test"></div>
The after is rotated to get the inclined separation. The dimensions need to be bigger so as not to show missing corners.
And then, you assign the 2 linear gradients as 2 separate background-images,inclined an additional 30deg to compensate for the base inclination
I am trying to make some line appear(say about 10px) after hovering mouse on an image at the bottom of the image
I saw this on MTV's website in their "You would also like these" section below every post.They use css-background sprites to do that.
I am going mad after repeated failed attempts to recreate.Everythings works,except the main onhover line coming up.
This is my code so far
CSS
.yel_strip{background-position:-280px -495px; width:165px; margin:-8px 0 0 0; height:5px; position:absolute; display:none; z-index:1;}
.yel_strip:hover{ background:url(http://mtv.in.com/images/sprite_v1.png) no-repeat;}
HTML
<div class="movieL hover_thumb">
<div><img width="165" height="93" alt="" src=""/>
<div class="yel_strip"></div>
</div> </div>
Any help would be appreciated.Thanks
I've made working fiddle for you with no extra not needed markup in your html: http://jsfiddle.net/PJMPw/3/
Your HTML:
<a href="#" class="hoverable">
<img src="http://placekitten.com/g/300/300" />
</a>
And CSS:
.hoverable {
display: block;
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.hoverable:hover:after {
bottom: 0;
}
.hoverable:after {
content: "";
position: absolute;
width: 100%;
height: 10px;
bottom: -10px;
left: 0;
background: -moz-linear-gradient(left, rgba(46,170,232,1) 0%, rgba(255,235,137,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(46,170,232,1)), color-stop(100%,rgba(255,235,137,1)));
background: -webkit-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -o-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: -ms-linear-gradient(left, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
background: linear-gradient(to right, rgba(46,170,232,1) 0%,rgba(255,235,137,1) 100%);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
This is the HTML:
Replace http://yoururl with your url.
<div class="container">
<span></span>
</div>
This is the CSS:
Replace http//yourimage with your image address.
.container {
width: 165px;
height: 93px;
background: url('http//yourimage');
position: relative;
}
#internal_image {
display: blocK;
width: 165px;
height: 93px;
}
#internal_image:hover span {
display: block;
width: 165px;
height: 5px;
position: absolute;
background: url(http://mtv.in.com/images/sprite_v1.png) no-repeat;
background-position: -280px -495px;
bottom: 0;
}
EDIT: Added EXAMPLE: http://jsfiddle.net/BmwCe/3/
The simples thing you could do is set a border on the image on hover.
i.e
markup
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
</div>
css
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container img:hover {
border-bottom: 5px solid green;
}
If you insist that you want to have a background image instead of border you could do this
<div class="image-container">
<img src="../styles/images/Desert.jpg" />
<div class="shiny-border"></div>
</div>
.image-container {
display: inline-block;
position: relative;
}
.image-container img {
width: 100px;
height: 100px;
}
.image-container .shiny-border {
position: absolute;
top: 90px; //subtract the height of the shiny-border from 100px which is the height // to have the inset effect of the image
height: 10px;
width: 100%;
display: none;
}
.image-container img:hover + .shiny-border {
display: block;
background-image: url(../styles/images/Hydrangeas.jpg);
}