I am facing a problem in adding a box shadow to the right border of a polygon shape just like the image below:
and I want to add shadow where the red line is as you can see it in the image below:
and I made this shape simple by this:
HTML:
<div class="shape">
....
</div>
CSS:
.shape {
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
I did not used clip-path, since it is not compatible with IE and you have to do some extra settings to make it work on Firefox and some other browsers and I wanted to keep it simple so I went with the easy way. But the problem i am facing is to add shadow to the right corner only using CSS. Is there any solution for that? or I will have to use clip-path in order to add shadow to right corner?
If you can afford that the image is slightly rotated... (4 degrees)
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:35px;
}
.rightDiagonal img{
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
margin:-15px;
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
<div class="rightDiagonal">
<img src="http://placehold.it/100x180/0ba">
</div>
otherwise...
if not, than you'll need an additional layer (<div>) of complexity, where the most outer div is the wrapper, the inner div has the shadow and is at 4deg degrees and than the inner image if restored to 0 using -4deg
.rightDiagonal{
display:inline-block;
overflow:hidden;
padding-right:15px;
}
.rightDiagonal div {
display:inline-block;
overflow:hidden;
margin: -15px 0 -15px -15px;
-webkit-backface-visibility: hidden;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-ms-transform: rotate(4deg);
box-shadow: 16px 0 25px -20px rgba(0,0,0, 1);
}
.rightDiagonal img{
margin-right: -15px;
transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
}
<div class="rightDiagonal">
<div><img src="http://placehold.it/100x180/0ba"></div>
</div>
<div class="rightDiagonal">
<div><img src="http://placehold.it/170x200/a0b"></div>
</div>
Try this CSS:
#shadow-div{
margin-right:20px; /* Set to 0 if you don't want shadow at the right side */
margin-left:0px; /* Set to 20px if you want shadow at the left side */
margin-top:0px; /* Set to 20px if you want shadow at the top side */
margin-bottom:0px; /* Set to 20px if you want shadow at the bottom side */
box-shadow: 0px 0px 20px black;
background: url(img/1.jpg);
border-top: 400px solid transparent;
border-right: 40px solid #ffffff;
}
Related
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.
I am trying to customize bxslider, a popular js carousel plugin, below is what I want to make it look like :
Well the thing I want to add is the drop shadow and the caption below the bottom for each image. as of now I have edited the css a bit to remove the default bxslider style like the borders and stuff.
FIDDLE HERE (this is what I could achieve so far. )
Now of course if all you want to do is add a box shadow to an image, you can do it easily, like so ::
<ul class="bxslider fade out">
<li><img src="img/bp-1.jpg" /></li>
</ul>
CSS ::
.bxslider {
margin: 0;
padding: 0;
}
.bxslider li {
position: relative;
display: table;
}
.bxslider li:after {
content: '';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0,0,0,.7);
box-shadow: 0px 2px 15px rgba(0,0,0,.7);
z-index: -1;
background: rgba(0,0,0,.2);
}
.bxslider li img {
width: 100%;
max-width: 300px;
}
P.S. I need to use pseudo elements because the box-shadow cannot be 100% of the img's width.
But adding a box-shadow to an image in bx-slider is a challenge , here's why ::
bx-slider adds a class called bx-viewport which has the following css overflow: hidden;, and so the box-shadow is never seen. If you remove the overflow:hidden , you will see the shadow , but the carousel will not function properly, the hidden slides will show up and you page will get a horizontal scrollbar (not what I want) .
OK so I have given you the backdrop, my problem is pretty simple , I just want to add a box-shadow to the images in the slide you can use this FIDDLE to experiment .
So how do I go about doing this?
You can check my approach on JSFiddle.
I have added title inside by using H3.
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
<h3>X1 UNFOLDED</h3>
</li>
Just wrap your images and apply box-shadow to that wrapper. Also add additional padding to .bxslider > li. JsFiddle Link
HTML:
<ul class="bxslider">
<li>
<div class="img-wrapper">
<img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
</div>
</li>
</ul>
CSS:
.bxslider > li {
padding-bottom: 20px;
}
.img-wrapper:after {
content:'';
height: 5px;
width: 90%;
position: absolute;
bottom:5px;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
box-shadow: 0px 2px 15px rgba(0, 0, 0, .7);
z-index: -1;
background: rgba(0, 0, 0, .2);
}
Also in this wrapper you could add caption for image. bx-slider just create slides from child elements of .bxslider.
Another thing you could do is adding height to .bx-viewport container, forcing it with CSS or javascript. Maybe it's not the best solution but it will do the trick.
This is how I added a box-shadow to my carousel images:
http://jsfiddle.net/Yq3RM/995/
.bx-viewport {
padding: 3px; /* add space for box-shadow of image to show */
}
.bxslider img {
box-shadow: 0 0 3px 0 #000;
}
I'm working on a css3 3D page and i want to show the shadow through a transparent div but i can't get this to work...
I can't use a span or anything because it needs to be the same object because of jquery animation.
The basic div styling:
#Div3{
position:absolute;
border:1px solid white;
border-radius:10px;
transition: all 1s;
background:transparent;
pointer-events: none;
}
Adittional class for position + shadow + transform:
.P3{
top:22.5%;
bottom:25%;
right:25%;
height:55%;
width:20%;
margin-right:-10%;
box-shadow:10px 0px 15px rgba(255,255,255,0.6);
transform: perspective( 1000px ) rotateY( 330deg );
-webkit-transform: perspective( 1000px ) rotateY( 330deg );
}
Result:
The background is set to transparent but it won't show the box-shadow behind it,
Does box-shadow only generates a shadow for the outline of the
object?
Is there a way to make it visible using css?
He wants the shadow (the dark part) to also show on the inside of the outline. That is, having shadow on both sides of the outline.
Maybe this will help:
filter: drop-shadow(0px 3px 3px rgba(0,0,0,1));
I don't exactly know why doesn't work for you. Box shadow does show on transparent background, as you can see on the example.
Maybe you should try placing the shadow on the firs class definition for your element, #Div3.
.cartContainer{
width:150px;
height:60px;
border-radius:10px;
background:transparent;
float:left;
margin:-10px 0 0 15px;
box-shadow:inset 0 0 5px #FFFF99, #333 0 0 5px;
}
Example: Working fiddle
The effect seen is that the boxes increase in size when the mouse is over them, and there is a drop shadow too.
When the mouse is not over the boxes, they go back to the same size with no drop shadow.
Normal:
Mouse over:
Scroll over the boxes to see the effect here.
jsFiddle DEMO
Hovering over elements and making them larger can be done in many ways, and it depends on your layout requirements and the framework your using.
Since those boxes appear to be div's with CSS3 box shadow property, you can do something like that in pure CSS using :hover
HTML:
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
CSS:
body {
background-color: black;
}
.box {
background-color: grey;
width: 200px;
height: 400px;
float: left;
border: 6px solid red;
margin: 10px;
}
.box:hover{
width: 250px;
/* This is 52px total. 1/2 of that is for top and the other half is for bottom. */
height: 452px;
/* Below we are not using -26px for margin-top because .box has 6px border and 10px margin. */
/* That 16px is then divide by 2 since it's for both top and bottom, or 8px per side. */
/* Having said that, 26px - 8px is 18px. We need negative value to position it correctly. */
margin-top: -18px;
-moz-box-shadow: 0 0 50px red;
-webkit-box-shadow: 0 0 50px red;
box-shadow: 0 0 50px red;
}
EDIT 2:
Revised jsFiddle DEMO
You can accomplish this using "transform: scale(x,y)" to zoom your element.
E.g.
div:hover{
transform: scale(1.5, 1.25);
-moz-transform: scale(1.5, 1.25);
-ms-transform: scale(1.5, 1.25);
-webkit-transform: scale(1.5, 1.25);
-o-transform: scale(1.5, 1.25);
}
will zoom your div by 1.5 times on x-axis and keep 1.25 times on y-axis.
To add shadow -
div:hover{
-moz-box-shadow: 5px 5px 5px #888;
-webkit-box-shadow: 5px 5px 5px #888;
box-shadow: 5px 5px 5px #888;
}
This is easily accomplished with some HTML and CSS. They're commonly called "Dropdown" menus or "pop-out" menus and there are tons of tutorials on how to make them; here's one:
http://www.seoconsultants.com/css/menus/tutorial/
I need to create a triangle with a drop shadow using simple html and css. Answered by another stackoverflow question, I was able to create the triangle with mitered borders. Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
}
works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:
div.triangle {
border-bottom : 60px solid transparent;
border-left : 60px solid black;
-webkit-box-shadow: 0 0 10px black;
}
How do I get a triangle using only css/html with a drop shadow?
Seems like impossible. Definitely using an imagine is much more easier solution.
I've made something like triangle :) http://jsfiddle.net/5dw8M/109/ . Sorry cannot leave a comment under your post. May be it'll serve like an inspiration for someone;
What about put another div with similar property and play with positions?
something like http://jsfiddle.net/eveevans/JWGTw/
You can use the "transform" property to rotate a square 45 degrees and hide half of it, but not all browsers support it, so you'll need a fallback.
.triangle-with-shadow {
width: 100px;
height: 50px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -15px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
top: 25px;
left: 25px;
box-shadow: -1px -1px 10px 0px rgba(0,0,0,0.5);
}
Demo on jsfiddle.
Lifted from this CSS Tricks page with modifications.
Probably the best option is using filter:
filter: drop-shadow(0 0 10px black);
Would <canvas> with a PNG fallback be an option?
Demo: jsfiddle.net/Marcel/3dbzm/1
Create a duplicate of that triangle, decolorize it, give it a negative z-index value using css, and finally off center it with CSS positioning.
div.triangle {
z-index:-1;
position:relative;
bottom:-16px;
right:-16px;
}