I would like to create an animation starting when my div's attribute changed using pure CSS.
The div's initial state is:
display: none;
Changing display attribute to a value unequal none,
a animation should be played (inner glow effect using an inset box shadow).
The change of the attribute can occour multiple times. After every change the animation
should be played.
Is this possible using pure css? Or do I need to use javascript additionally?
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.0);
animation-duration: 5s;
animation-name: card-appear;
#keyframes card-appear{
0% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.0);
}
10% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.2);
}
20% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.4);
}
30% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.6);
}
40% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.8);
}
50% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,1.0);
}
60% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.8);
}
70% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.6);
}
80% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.4);
}
90% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.2);
}
100% {
box-shadow: inset 0px 0px 20px 5px rgba(255,255,255,0.0);
}
}
Related
I want to set box shadow inside a box or div but only at right and left sides.
I want something like this below. Please help me.
To get it to appear only on the sides you need to essentially have two different sets:
box-shadow:inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000;
You can create one inner div and one outer div. Then you need to set the shadow separately for both divs.
.outer, .inner {
width: 200px;
height: 50px;
display: inlin-block;
}
.outer {
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75);
}
.inner {
-webkit-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
<div class="inner"></div>
</div>
Or you can use also one div, with 2 inset parameters:
.outer {
width: 200px;
height: 50px;
display: inlin-block;
-webkit-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 0px 23px -9px rgba(0,0,0,0.75), inset -10px 0px 23px -9px rgba(0,0,0,0.75);
box-shadow: inset 5px 0 8px -5px #000,inset -5px 0 8px -5px #000, inset -10px 0px 23px -9px rgba(0,0,0,0.75);
}
<div class="outer">
</div>
And what about a linear-gradeint solution:
.box {
width:200px;
height:100px;
background:
linear-gradient(to left,#ccc , transparent 20%),
linear-gradient(to right,#ccc , transparent 20%);
}
<div class="box">
</div>
You can do this using the two div's. check the below code.
But it will great if you can use the background image.
<div class="div1">
<div class="div2"><div>
<div>
.div1 {
width: 200px;
height: 100px;
border: 1px solid #c51e1e;
margin: 50px;
overflow: hidden;
}
.div2 {
width: 80%;
height: 100px;
margin: 0 auto;
box-shadow: 0px 0px 27px 17px #d6cdcd;
}
try this with html:
<div id="box"></div>
and css:
#box {
border: 1px solid;
position: relative;
overflow: hidden;
}
#box:before {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
}
#box:after {
content: "";
box-shadow: 0px 0px 20px 10px #888888;
position: absolute;
height: 100%;
width: 0px;
right: 0px;
top: 0;
}
Here is code i have tried but box shadow
div {
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div>abc</div>
what i need is this, , It is possible using background image but what i want to do this using css.
here is original image :
Thank you
#Prasanga Please find following code as per your requirement.
div {
box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);
width: 100px;
height: 100px;
margin: 50px;
background: white;
}
<div></div>
You can also try this ---
div {
width: 300px;
height: 100px;
background-color: yellow;
box-shadow:0px 15px 0px 0px white,0px -15px 0px 0px white, 5px 0px 8px #444,-5px 0px 8px #444;
}
<html>
<head></head>
<body>
<div ></div>
</body>
</html>
Very simple here :
div{
background: white;
box-shadow: -10px 0 8px -8px black, 10px 0 8px -8px black;
}
<div>abc</div>
by default, Blogger's Simple Template comes with a box/shadow around images. You can see them around images in any Blogger blog that hasn't edit it, like this one:
http://conalmadefiesta.blogspot.com.es/
I found a code to completely remove it:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
And also I have found a code to remove it only in some images. Adding the class noborder on the html of every post with an image, and this in the css:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
I want to do JUST the opposite: find a code that doesn't show the shadow by default but that it does when I try add a class (let's say: border) to the image.
Any ideas on how can I do this?
Thanks!
You got it yet! You've got the code to remove the shadows, so thinking a little you can make the opposite (I'm using :not() pseudoselector in CSS):
/* remove all boxshadows except tags with "border" classname */
.post-body img:not(.border), .post-body .tr-caption-container:not(.border), .Profile img:not(.border), .Image img:not(.border),
.BlogList .item-thumbnail img:not(.border) {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
So if you need to put a box shadow in some img you can add border class:
<img src="img.png" class="border">
It works!
See more information about :not() selector:
https://developer.mozilla.org/es/docs/Web/CSS/%3Anot
you should like this -
.post-body img.noborder , .Profile img.noborder , .Image img.noborder , .BlogList .item-thumbnail img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
or you can use !important-
img.noborder {
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
}
Maybe you just need to create an other class called .border with:
.border {
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
And then add this class to images that you want with shadows.
In this case, you should ignore this:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
And leave:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Here, the images will not have shadows except for those with .border
I have this problem where I want to have a border and a box-shadow, but the shadow must be over the border.
The box-shadow property starts when the border ends, is it possible to move it over the border?
.border
{
border: solid rgba(128,42,42,.98) 16px;
}
.img-box-shadow
{
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}
My HTML:
<img class="border img-box-shadow" src="img.png">
Already tried inset in my box shadow, but it didn't work!
I'm looking for this effect:
And I'm getting this result:
I think this would be much more easily achieved with two overlayed box shadows
Something like this approaches what you're looking for
box-shadow: 0 0 20px 5px #000000,
0 0 0 16px rgba(128,42,42,.98);
Seem like you want an inset box shadow, then you can use:
box-shadow: inset 0 -15px 10px -10px #444;
-moz-box-shadow: inset 0 -15px 10px -10px #444;
-webkit-box-shadow: inset 0 -15px 10px -10px #444;
Fiddle Demo
How about this one?
.ds-bottom {
position:relative;
overflow:hidden;
border-bottom:1px solid #ddd;
}
.ds-bottom:before {
content: "";
position:absolute;
z-index: 1;
width:96%;
bottom: -10px;
height: 10px;
left: 2%;
border-radius: 100px / 5px;
box-shadow:0 0 18px rgba(0,0,0,0.6);
}
You can try using inset and then lowering the alpha value of your border. It may not exactly be what you want, but it's close.
.border
{
border: solid rgba(128,42,42,.5) 4px;
}
.img-box-shadow
{
-moz-box-shadow: inset 0px 0px 20px #000000;
-webkit-box-shadow: inset 0px 0px 20px #000000;
box-shadow: inset 0px 0px 20px #000000;
}
Alternate option (borrowed from this question). Don't use the .border and just use this (you can play around with pixel values):
.img-box-shadow
{
box-shadow: rgba(0,0,0,.98) 0px 0px 3px, inset rgba(0,0,0,.98) 0px -2px 3px;
}
Here's a JSFiddle
First, you have mistake in box shadow format.
box-shadow: 0px 0px 20px #000000;
Change to
box-shadow: 0px 0px 20px 0 #000000;
Due to the right format of Box Shadow Properties
box-shadow: horizontal-length vertical-length blur-radius
spread-radius;
Next, to make it works with your requirement you must wrap your image inside div. Box-shadow wont works over border.
Here's the style
div {
display:inline-block;
padding:4px; /* Act as border width */
background:rgba(128,42,42,.98); /* Act as border color */
}
.img-box-shadow
{
box-shadow: inset 0px 0px 20px 0 #000000;
-webkit-box-shadow: inset 0px 0px 20px 0 #000000;
-moz-box-shadow: inset 0px 0px 20px 0 #000000;
}
And the HTML Markup
<div class="img-box-shadow">
<img src="http://graph.facebook.com/715380382/picture?type=large">
</div>
Check live demo http://jsbin.com/hex/1/edit
i have a line of width: 15px; and height of 2px;
my question is, how to create the shadow only on right and left side?
This fiddle has examples showing shadows only on:
Top and bottom
Left and right
Top
With that you should be able to do any kind of shadow.
http://jsfiddle.net/rafaelchiti/5jdHW/
The code:
div {
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 100px;
}
.horizontal {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset,
0px -15px 10px -11px rgba(0, 0, 0, .1) inset;
}
.vertical {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset,
0px -15px 10px -11px rgba(0, 0, 0, .1) inset;
}
.one-side {
box-shadow: 0px 15px 10px -11px rgba(0, 0, 0, .1) inset;
}
Hope this help.
Try this (based on the link you gave in your comment above):
box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
-webkit-box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 1);
You can tweak it to how you like it using the CSS3 Generator
CSS Box Shadow
Add the following class to apply shadow. Check this jsfiddle example
.shadow {
-moz-box-shadow: 3px 3px 10px 1px #000;
-webkit-box-shadow: 3px 3px 10px 1px #000;
box-shadow: 3px 3px 10px 1px #000;
}
The horizontal offset of the shadow, positive means the shadow will
be on the right of the box, a negative offset will put the shadow on
the left of the box.
The vertical offset of the shadow, a negative one means the
box-shadow will be above the box, a positive one means the shadow
will be below the box.
The blur radius (optional), if set to 0 the shadow will be sharp,
the higher the number, the more blurred it will be.
The spread radius (optional), positive values increase the size of
the shadow, negative values decrease the size. Default is 0 (the
shadow is same size as blur).
Color Hexadecimal color value.
.box {
height: 150px;
width: 300px;
margin: 20px;
border: 1px solid #ccc;
}
.top {
box-shadow: 0 -5px 5px -5px #333;
}
.right {
box-shadow: -5px 0 5px -5px #333;
}
.bottom {
box-shadow: 0 5px 5px -5px #333;
}
.left {
box-shadow: 5px 0 5px -5px #333;
}
.all {
box-shadow: 0 0 5px #333;
}
in the body put..
<div class="box top"></div>
<div class="box right"></div>
<div class="box bottom"></div>
<div class="box left"></div>
<div class="box all"></div>