This question already has answers here:
Is there a way to use two CSS3 box shadows on one element?
(2 answers)
Closed 4 years ago.
I have code like this
body {
/*some styling for make div on center*/
}
div {
width: 50px;
height: 50px;
background-color: white;
border-radius:50%;
box-shadow: 0 0 5px 7px rgba(230, 230, 230, 0.4);
}
http://jsfiddle.net/zu9rd1jq/68/
I wanna make multiple box-shadow after box-shadow. It can be when we using photoshop, but how we do using css? Any idea, please :)
I Hope you are looking for this
div {
width: 50px;
height: 50px;
background-color: white;
border-radius:50%;
box-shadow: 0 5px 0 rgba(255, 0, 0, 1), 0 10px 0 rgba(0, 255, 0, 1);
}
Related
I have the following css in my angular Component
.folders {
border-left: 5px solid #b8744f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
/*START*/
background: -webkit-gradient(
linear,
center top,
center bottom,
from(#327aa4),
color-stop(45%, #2e4b5a),
to(#5cb0dc)
);
/*END*/
background: -moz-linear-gradient(
top,
rgba(50, 123, 165, 0.75),
rgba(46, 75, 90, 0.75) 50%,
rgba(92, 176, 220, 0.75)
);
border: solid 1px #102a3e;
box-shadow: inset 0 0 1px #fff;
display: inline-block;
overflow: visible;
}
The part marked between the comments START and END are not right as per the IDE. It keeps complaining like the following:
Mismatched parameters ([linear | radial] , , [ ,]? [, ]? [, [color-stop() | to() | from()]]*)
-webkit-gradient is not working in angular 12
It keeps pointing to a parameter
Use linear-gradient:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: linear-gradient(
#327aa4,
#2e4b5a 45%,
#5cb0dc
);
}
CSS vendor / browser prefixes like -webkit or -moz are not necessary and makes the code messier and you repeat yourself (DRY). I recommend to use Angular with SCSS. Angular supports it out of the box.
If you want to rotate the gradient (e.g. horizontal) you can add the value 90deg. See the docs and web.
I'm making a little game in Eml, and I'm using css for visualization.
I have a grid with cells, all get the class cell.
However there is also one that has the class selected with obvious use.
Now, to visualize this to the user I have the following css:
.game .cell:hover {
box-shadow: inset 0 0 5px rgba(200, 50, 50, 1);
}
.game .cell.selected {
box-shadow: 0 0 5px rgba(50, 50, 200, 1);
}
So this adds a shadow to the cell you are currently hovering over, and a different one if the cell is selected.
However when you hover over the currently selected one, it just shows the "selected-shadow", not both.
A simple fix of course is to add this:
.game .cell.selected:hover {
box-shadow: 0 0 5px rgba(50, 50, 200, 1), inset 0 0 5px rgba(200, 50, 50, 1);
}
Then it works for both, so that's great.
However it's not perfect.
What if I decide to change the hover-effect, then I'll also have to change the selected+hover effect.
So there's duplicated data, and my question is: can the same be achieved without duplicating data?
Note: I'm wondering about a pure css solution, no extra libraries such as SASS or similar if possible.
You can do a little trick and use a pseudo element:
.cell {
width: 100px;
height: 100px;
display: inline-block;
border: solid 1px;
position: relative;
}
.cell:hover {
box-shadow: inset 0 0 5px rgba(200, 50, 50, 1);
}
.cell.selected:after {
content: "";
position: absolute;
top: 0px;
right: 0;
bottom: 0;
left: 0;
box-shadow: 0 0 5px rgba(50, 50, 200, 1);
}
<div class="cell"></div>
<div class="cell selected"></div>
I have come humbly to you big brains, as my little ol' brain just is not engaging on this one.
I have a need to do a lifted corner effect on all 4 sides of an image.
I've found 3 different methods to accomplish the lifted corners:
with box shadow and rotate
http://jsfiddle.net/zuul/mPnTP/
.drop-shadow {
position:relative;
float:left;
width:40%;
padding:1em;
margin:2em 10px 4em;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:before,
.drop-shadow:after {
content:"";
position:absolute;
z-index:-2;
}
.drop-shadow p {
font-size:16px;
font-weight:bold;
}
/* Lifted corners */
.lifted {
-moz-border-radius:4px;
border-radius:4px;
}
.lifted:before,
.lifted:after {
bottom:15px;
left:10px;
width:50%;
height:20%;
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.lifted:after {
right:10px;
left:auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-ms-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
<div class="drop-shadow lifted">
<p>Lifted corners</p>
</div>
with linear gradient and rotate
http://cssdeck.com/labs/page-curl-box-shadow
with box shadow and skew
http://www.readitsideways.com/css3_demos/shadows/.
The skew example seems to deform more on zoom than the rotate. There is probably one method that is cleaner than the others?
All the examples show only two sides with the effect - and my diddling to try and add the other two sides appears to cancel out the original two. I have also been unsuccessful with applying the styling directly to the image, though that's probably a padding or margin issue.
My questions:
Can this be done on 4 sides?
Two divs, one div nested and stacked on top of another with the image in the inner div?
Or, can it be done with one div and an image?
I'd appreciate any help in sorting this out because I am totally adrift.
Thanks!
UPDATE 12/1
#Vals
Thanks for your contribution! So many different methods to get a similar result! I posted 3 methods above, then found a 4th that uses box shadow and linear gradient, no rotate or skew:
http://cjwainwright.co.uk/webdev/liftedcorners/
Yours uses box shadow and transform, and I'm calling it method #5. I note that this covers 2 sides, top and bottom, where I was seeking a 4 sided solution.
I received a 4 sided solution (#6) that uses box shadow and rotate with spans, thankyou to Danny Williams from the WW list:
http://codepen.io/dsongman/pen/PPMdpb?editors=110
I am not sure if this is a duplicate , there are lots of examples about this.
But I don't see any with all 4 corners, so here is my solution
.test {
width: 700px;
height: 300px;
margin: 50px;
position: relative;
background-color: lightgreen;
}
.test:before {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
left: 40px;
transform: perspective(500px) rotateY(10deg);
transform-origin: left center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
.test:after {
content: "";
position: absolute;
width: 30%;
height: 96%;
top: 2%;
right: 40px;
transform: perspective(500px) rotateY(-10deg);
transform-origin: right center;
box-shadow: 0px 0px 30px 10px black;
z-index: -1;
}
<div class="test"></div>
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Anyone know of a way to create one of these lines (refer to image) in CSS?
Here's a rough approximation to start with. You'll need to adjust the specifics. Basically what I've done is create an overhang div, and beneath that is a div that will create a shadow with a falloff on the ends. The overhang div sits on a higher layer so you only see the edge of the shadow.
Demo:
http://jsfiddle.net/X5muV/
Another one, slightly darker: http://jsfiddle.net/X5muV/1/
HTML:
<div id="container">
<div id="overhang"></div>
<div id="falloff-shadow"></div>
</div>
CSS:
#container {
background: #5A5A5A;
width: 700px;
padding: 200px 0 80px 0px;
}
#overhang {
background: #5A5A5A;
border-top: 1px solid #666;
height: 80px;
width: 600px;
margin: 0 auto;
position: relative;
z-index: 5;
}
#falloff-shadow {
width: 500px;
margin: 0 auto;
-webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
position: relative;
z-index: 1;
height: 1px;
top: -65px;
}
Yes, you can create that in css3. You will have to combine some effects, but I think a grey line (you will have to add some extra space below, explained later) with a shadow will do.
To write a shadow that appears only in one side (top), check this question/answer: How can I add a box-shadow on one side of an element?
Based on that example, you can try something like:
.myDiv
{
width: 700px;
height: 50px;
border-top: 2px solid #333;
-webkit-box-shadow: 10px 0px 0px -2px #888 ;
}
The shadow is still there on the left, but hidden (-2px). That gives you the illusion of a single shadow. This is just a start-up, try different options and come back if you have any particular questions. But do it yourself first.