I have a div with a vignette effect.
<div id="box" class="glow"></div>
#box
{
padding:10px;
border:solid 1px #ddd;
width:100px;
height:400px;
position:relative;
}
.glow:after
{
-webkit-box-shadow:inset 0px 0px 70px #CE1A1A;
-moz-box-shadow:inset 0px 0px 70px #CE1A1A;
box-shadow:inset 0px 0px 70px #CE1A1A;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: "";
}
Here's the jsfiddle: http://jsfiddle.net/bEFha/
But what I am really after is a glow from the inside out. So red in the center and white in the sides. The effect I'm trying to achieve is as if there is a red light source shining from underneath the div.
I've tried various things but just not able to the vignette effect to spread out from the center.
Any help is appreciated.
UPDATE: If possible I would like to not modify the background property of #box as I need that to be white.
You could use a radial-gradient background.
See: https://developer.mozilla.org/de/docs/Web/CSS/radial-gradient
Here's a very basic example, you could tweak: http://jsfiddle.net/bEFha/5/
background-image: radial-gradient(farthest-corner at center center, #CE1A1A 0%, #ffffff 100%);
I also find this visual editor very helpful http://www.visualcsstools.com/
I'm not quite sure what your after, but by playing around I got this:
box-shadow:inset 0px 3px 20px 10px #FFF;
background-color: #CE1A1A;
Fiddle Here
Try this vintage effect Demo
Just give background color to the box and you will get cool vintage effect.
#box{ background:#FFE4E4; }
UPDATED ANSWER:
Demo
CSS Changes
#box:after{
content:"";
background: #CE1A1A;
opacity:0.5;
}
.glow:after {
-webkit-box-shadow:inset 0px 0px 120px #fff;
-moz-box-shadow:inset 0px 0px 120px #fff;
box-shadow:inset 0px 0px 120px #fff;
}
Your #box is still white but I added #box:after to make it red.
Demo with Image
Related
everyone, I am trying to add border to one side of a a element, however, when I add it to one side it give it a sharp diagonal edge:
I am trying to remove the sharp edge and make it a square.
I have tried using pseudo-elemnts to achieve this but I have had no luck:
Currently, I am using:
a{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-left-width: 0;
border-radius: 0px;
position: relative;
}
a::before{
border-left: 2px solid rgba(0, 0, 0, 0.9) !important;
border-radius: 0px;
position:absolute;
content:'';
}
But this is still giving me the results below. How can I do this successfully?
See if this works for you:
box-shadow: -10px 0 0 0 black;
Just that, no borders.
I have an img tag and I want to add another gradient div layer on top of it ( that gradient div will have text).
Something like this :
I already know that I can do this with linear-gradient but I don't want that becuase not all mobile versions supports this feature.
Also - I've already seen that it can be achieved via box-shadow with inset
But it's not the same. I only want top and bottom gradient - without any differences on the edges. ( just like in my first picture here ^)
This is what i've tried : JSBIN
But again , I don't want the edges to be darker. I want only the strip in the red rectangle to be from left to right.And also - symmetric - in the bottom ( same gradient should be at the bottom).
Question
How can I fix my code to achieve straight-equal gradients in top and bottom without using linear-gradient ?
NB
I need to add text on that gradient div ( text is from DB) . So It can not be a pseudo ::before/::after element div.
By using multiple shadows you can target the sides you want.
Here done setting the spread radius (4:th parameter) of the blur to a negative value, keeping it from spreading along the sides, and use the horizontal and vertical offset of the shadow to, in this case, target only the top and bottom.
.innerDiv
{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px'>
<div class='innerDiv'>
Some text
</div>
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
Based on earlier comments, here is a pseudo element version producing the exact same result, and by using the CSS attr() avoiding the issue of compile time data in the CSS.
I also added a script to show the text can be added dynamically as well.
window.addEventListener('load', function() {
var div = document.querySelector('div');
var text = div.getAttribute('data-text');
div.setAttribute('data-text', text + ', and this were added dynamically using script');
})
div
{
position:relative;
}
div::after
{
content: attr(data-text);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background :transparent;
opacity:1;
border:solid 1px red;
padding:5px;
z-index:92299;
box-shadow:
inset 0 50px 50px -40px rgba(0,0,0,1),
inset 0 -50px 50px -40px rgba(0,0,0,1);
}
<div style='position:relative;border:solid 1px lightgray;height:400px' data-text="Some text set using an attribute in the markup">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
As I also suggested in comment that if you can achieve this using pseudo elements as ::after and ::before of your img container DOM element.
You can define the pseudo elements and then play with the box-shadow to replicating that gradient effect.
Here I have made some changes in your DOM structure as:
Code Snippet:
.img-container {
position: relative;
}
.img-container img {
max-width: 100%;
}
.img-container::after,
.img-container::before {
content: "";
display: inline-block;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 50px;
}
.img-container::before {
top: 0;
-webkit-box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px 25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
.img-container::after {
bottom: 0;
-webkit-box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0px -25px 16px -10px rgba(0, 0, 0, 0.5) inset;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
</div>
(using the answer of #vivekkupadhyay as example) you could just make an overlay div and give this the inset shadow. Then you can add whatever content you want.
.img-container,
.img-overlay {
position: absolute;
top: 0;
left 0;
}
.img-container {
overflow: hidden;
}
.img-container img {
max-width: 100%;
}
.img-overlay {
width: 120%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
box-shadow: inset 0px 0px 25px 5px rgba(0,0,0,0.75);
margin-left: -25px;
padding: 0px 30px;
color: white;
}
<div class="img-container">
<img src='http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg' height="400px" />
<div class="img-overlay">
some text
</div>
</div>
EDIT: you could also make two seperate overlay div's for top and bottom if you want the to both have content, but this is just a quick example.
Given an image, is there a way to soften the edges using css? Or through some js library (although css would be preferred)? The idea is that the edges of the image should blur into transparency, so they fit in better with the background.
Example, original image:
Image with softened edges:
There are many similar questions asked on stackoverflow, however none (that I can find) offer an answer to do exactly this. Mostly they're concerned with blurring the whole image, or setting a semi-transparent border on the image, neither being what I'm looking for.
You can try something like this:
JSFiddle Example
HTML :
<div id="image-container"><div>
CSS:
#image-container {
background: url(http://pic2.ooopic.com/11/26/30/31b1OOOPIC48.jpg) left top no-repeat;
box-shadow: 25px 25px 50px 0 white inset, -25px -25px 50px 0 white inset;
width: 300px;
height: 300px;
}
You can try that: fiddle
<div class="shadow">
<img src="http://via.placeholder.com/350x150/" />
</div>
And CSS.
shadow
{
display:block;
position:relative;
}
img {
width: 100%;
height: 100%;
}
.shadow:before
{
display:block;
content:'';
position:absolute;
width:100%;
height:100%;
-moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
-webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}
I cannot get box-shadow to create a shadow around the entire perimeter of a div. The following works in FireFox, however not in IE 11.
I have tried the following: Internet Explorer - CSS Shadow All Around
Here is a JSFiddle for the problem.
CSS:
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px #004C7E;
}
HTML:
<div class="addAccountPanel"> </div>
There is a fourth parameter in the box-shadow that lets you increase the size of the shadow, and makes it more visible
.addAccountPanel
{
width:250px;
height:200px;
margin:auto;
background-color: rgba(0,0,0, .2);
position:relative;
box-shadow: 0px 0px 4px 2px #004C7E;
}
fiddle
As the title suggests I'm having an issue with an inset box shadow going underneath my H2 elements background, I need it to be above the element.
http://jsfiddle.net/9QYT4/
I've set the background image up to allow easy editing of the colors depending on pages of the site visited, any help on how to make the shadow appear above the h2 is appreciated, thanks!
Also, would it be possible to do something like this with a png gradient as well? That would be a better solution as I'm trying to only get the shadow on the right (but it's showing on the top and bottom as well)
SASS
#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
color:#646567;
text-align:center;
}}
View the HTML on the JSfiddle, thanks!
I created pseudo after element that contains your shadow: http://jsfiddle.net/jPUX3/
#region-postscript-second:after{
content: " ";
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%; width: 14px;
box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}
and to #region-postscript-second I added:
position: relative;
Here at the end is something about one side box-shadows - http://css-tricks.com/snippets/css/css-box-shadow/