I have a question about box-shadow, so I have a picture with this effect.
I want to same effect like this image in my Jsfiddle example.
http://jsfiddle.net/aldimeola1122/EAb3V/2/
This is my css code :
#wrapper{
background:url("http://ealtinel.com/bg1.jpg") no-repeat;
width:1000px;
height:1000px;
}
#probe{
position: absolute;
margin-top:100px;
margin-left:200px;;
z-index: 9999;
height: 35px;
width: 138px;
background:#fff;
padding-left: 20px;
padding-top: 14px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
transition: width 0.5s;
-moz-transition: width 0.s;
-webkit-transition: width 0.5s;
-o-transition: width 0.5s;
-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
}
thanks in advance
I edited your css, I played around a while with different tweaks and got it as close as I think you will be able to:
http://jsfiddle.net/EAb3V/3/
Here is the css I modified:
Before:
-webkit-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
box-shadow: 0px 1px 40px -13px rgba(0,0,0,0.75);
After:
-webkit-box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50);
-moz-box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50);
box-shadow: 0px 1px 25px rgba(19, 19, 19, 0.50);
Here is another version I did, I added a 2px border slightly darker then the background:
http://jsfiddle.net/EAb3V/4/
-webkit-box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40);
-moz-box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40);
box-shadow: 0px 1px 20px rgba(19, 19, 19, 0.40);
border: 2px solid #cd870f;
Also there are tools out there to help out, like this one here I find is best for box shadows:
http://css3gen.com/box-shadow/
Related
Let's say i have a button class
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
and whenever i click something(not the 'mat-cancel-color' button) i want this class to gain a glow effect which would fade away over .4s.
should i create a new class and then give that class the box-shadow(glow) property, then below transition-duration property and then the the box-shadow(no glow) property again? as such:
click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}
or does transition-duration only work when switching classes or does it also work when switching properties inside a class? if it as such, how should i go about it?
EDIT: mistook transition-delay with transition-duration.
What you are looking for is a CSS animation. Mainly because you don't want the default state with the glow, that's why transition won't work here.
.mat-cancel-color {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
}
.mat-cancel-color:hover {
animation-name: glow;
animation-duration: .4s;
}
.mat-cancel-color-trans {
width: 160px;
border: 1px solid #dddddd;
color: #dddddd;
background-color: white;
border-radius: 25px;
transition: all .4s ease;
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);
}
.mat-cancel-color-trans:hover {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
/* Standard syntax */
#keyframes glow {
0% {
box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);
}
100% {
box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}
}
<button class="mat-cancel-color">Button</button>
<button class="mat-cancel-color-trans">Button</button>
You could use some psudo classes like this:
:active:not(*element/class*) {...}
and then put the glow animation that you want within the brackets. :active is a psudo class that is only applied when the element named is clicked. :not() excludes the class listed in the parentheses. As long as you have the glow animation working fine, then this should work.
This is a snippet of my test code:
a:active:not(.mat-cancel-color) {...}
I have an element on which i add two box-shadows and I want the corners of the element AND the box shadows to have the same border-radius. Somehow it's not happening.
The element appears with a different border-radius than the first box-shadow, and the first box-shadow appears with a different border radius than the second box-shadow.
Here's the code:
.stack_item{
overflow: hidden;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
transform: translate(-50%, 9%);
-webkit-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
-moz-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
}
Since you are making your shadow shrink, the border-radius is also shrinking.
Set it on a larger pseudo-element and it will be ok
.stack_item{
width: 200px;
height: 100px;
position: relative;
border: solid 1px black;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
background-color: white;
}
.stack_item:before,
.stack_item:after {
content: "";
position: absolute;
top: 0px;
bottom: 50px;
border-radius: inherit;
}
.stack_item:before {
left: 7px;
right: 7px;
box-shadow: 0px -8px 0px 0px rgb(206, 204, 204);
z-index: -1;
}
.stack_item:after {
left: 13px;
right: 13px;
box-shadow: 0px -16px 0px 0px rgb(168, 168, 168);
z-index: -2;
}
<div class="stack_item"></div>
How do you surround a div with a border?
this is what I am trying to accomplish
and was done with images.
I have the sides (or top and bottom) , I can not surround the div with the gray- silver border.
[JsFiddle code:
<div class="panel-body">
<ul>
<li>Locomotives</li>
<li>Radios</li>
<li>Televisions</li>
<li>Computers</li>
<li>Monitors</li>
<li>Satellites</li>
<li>Spaceships</li>
<li>Submarines</li>
<li>Scuba Divers</li>
</ul>
</div>
]Jsfiddle2
Use box-shadow instead:
http://jsfiddle.net/3knyndxz/1/
.panel-body {
float: left;
padding: 30px;
background: #fff;
border-radius: 10px;
box-shadow: inset 0 0 20px #ccc;
}
This can be done with multiple layers of box-shadows, its tricky if you need to build some kind metal texture.
.container {
border: 1px solid #999;
height: 200px;
width: 90%;
display: flex;
justify-content: center;
padding: 20px;
}
.children {
width: 30%;
border: 1px solid #555;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.metalone {
box-shadow: inset 0px -2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 2px 0px 0px rgba(255, 255, 255, 0.62), inset 0px 0px 1px 1px rgba(56, 8, 8, 0.91), inset 0px 0px 0px 2px rgba(192, 121, 121, 0.8), inset 0px 0px 0px 3px rgba(152, 47, 47, 0.85), inset 0px 0px 0px 4px rgba(152, 47, 47, 0.85), inset 0px 0px 1px 5px rgba(56, 8, 8, 0.945);
}
.metaltwo {
box-shadow: inset 0px 3px 0px 0px rgba(29, 29, 29, 0.62), inset 0px 0px 1px 2px rgba(46, 46, 46, 0.91), inset 0px 0px 0px 3px rgba(255, 255, 255, 0.8), inset 0px 0px 0px 4px rgba(112, 112, 112, 0.85), inset 0px 0px 0px 5px rgba(219, 219, 219, 0.85), inset 0px 0px 1px 6px rgb(250, 250, 250);
background: black;
color: white;
}
<div class="container">
<div class="metalone children">Metal Texture one</div>
<div class="metaltwo children">Metal Texture two</div>
</div>
box-shadow.
Hi I have a div at the top of my page
http://www.uk-sf.com/MyTraining.php
the box-shadow is cut on the wrapper, I tried giving it a z-index but no joy any ideas?
.titlebox{
width:977px;
background-color:rgba(48, 48, 48, 1);
padding:10px 5px;
margin: 5px 5px;
font-size: 24px;
border:3px double rgb(138, 138, 138);
-webkit-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
box-shadow: 0px 0px 51px 7px rgba(0,0,0,0.75);
}
Help appreciated
Your #contentContainer has overflow:auto; : is it on purpose?
If not, add this to your CSS :
#contentContainer {
overflow: visible;
}
or just delete the overflow:auto declaration from your CSS.
(overflow: auto is asking your contentContainer to clip its content.)
Can an inset box-shadow work on an inputfield?
JsFiddle: http://jsfiddle.net/hKTq2/
Yes, this is something I was working on the other day, it is indeed possible.
input
{
box-shadow:inset 0 0 5px 5px #888;
background: #fff;
}
You just need to have a background set for the shadow to fall onto :)
http://jsfiddle.net/Kyle_/ZCq6w/
In the meantime, this has become a common, though here's my "the perfect inset input".
input {
background: #fff;
color: #525865;
border-radius: 4px;
border: 1px solid #d1d1d1;
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.07);
font-family: inherit;
font-size: 1em;
line-height: 1.45;
outline: none;
padding: 0.6em 1.45em 0.7em;
-webkit-transition: .18s ease-out;
-moz-transition: .18s ease-out;
-o-transition: .18s ease-out;
transition: .18s ease-out;
}
input:hover {
box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.02);
}
input:focus {
color: #4b515d;
border: 1px solid #B8B6B6;
box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.01), 0px 0px 8px rgba(0, 0, 0, 0.2);
}
body {
background: #fff;
margin: 20px;
}
<input type="text" />
Yes you need to add :
background-color:transparent;
Hi ADD this css then you able to insert shadow
.innershadow{ -moz-box-shadow: inset 0 0 5px 5px #888; -webkit-box-shadow: inset 0 0 5px 5px#888; box-shadow: inset 0 0 5px 5px #888; height:15px; background-color:transparent; height:50px}
Just add background:none; on class .innershadow
http://jsfiddle.net/jack_fiddle/hKTq2/6/
you could do something like this to realize a inset dropshadow inside the text-input:
.innershadow {
font-size: 16px;
color: #999;
padding: 6px;
-moz-box-shadow:inset 2px 2px 5px #888;
box-shadow:inset 2px 2px 5px #888;
border: 1px solid #b8b8b8;
}
HTH,
--hennson