I have the current CSS box shadow code which I'm trying to imitate the effects of this website http://danielladraper.com/
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
http://jsfiddle.net/GCwBT/
If you scroll down to the bottom of that site and hover over one of their products, you'll see that a box shadow appears over one of the products. However when I apply this to my div's, which are floated next to each other, only part of the the box shadow is visible, the other portion seems to get blocked.
I have no idea why this is happening, even though both of our divs appear to be floating left.
Anyone able to tell me what sort of js/css combo that site is using to achieve that CSS shadow effect?
Thanks
You have to consider that box-shadow only appears when the user hovers the box.
In your jsfiddle, all the boxes have shadow. You have to change it to:
.boxes {
width: 200px;
height: 200px;
float: left;
background-color: #ccc;
border-style: solid;
border-width: 1px;
border-color: #fff;
position: relative;
}
.boxes:hover {
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index: 999;
}
The z-index property brings the box to front. And it works with position:relative (or any others, you need position:relative)
Regards.
Your shadow must be blocking because you are not using z-index, along with this css you also need to specify the z-index when you hover.
.boxes:hover{
-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.5);
z-index:10;
}
JSFIDDLE
P.S. For your case position:relative property is required to bring z-index in effect
Related
For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers.
Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.
In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.
This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.
I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb
I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox.
http://codepen.io/anon/pen/vOmQxr
How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)
I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.
The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.
Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.
document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0]; rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});
.parent {
display:inline-block;
margin-left: 35px;
position:relative;
}
/* repplicating input range track background */
.divFill {
position: absolute;
width: 100%;
height: 6px;
top: 7px;
z-index: -2;
background: #00c9ff;
}
/* track fill */
.divLowerFill {
position: absolute;
height: 6px;
width: 70px;
top: 7px;
background-color: #273042;
z-index: 0;
pointer-events:none;
}
/* input range track style settings */
input[type=range] {
-webkit-appearance: none;
width: 70px;
margin: 2px 0;
vertical-align: middle;
position: relative;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
width: 100px;
height: 6px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 0px;
z-index: 1;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
z-index: 2000;
position: relative;
}
/* Firefox track style settings */
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: none transparent;
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
position: relative;
z-index: -1;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
/*cursor: pointer;*/
position: relative;
z-index: 100;
}
/* IE style settings */
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #00c5fa;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #00c9ff;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
height: 6px;
z-index: 2000;
position: relative;
}
input[type=range]:focus::-ms-fill-lower {
background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
background: #05caff;
}
<div class="parent">
<div class="divFill"></div>
<div class="divLowerFill"></div>
<input id="rangeinput" type="range" min=0 max=100 value=100>
</div>
After following various online tutorials on how to style my Radio buttons and Checkboxes. I have managed with the following code:
.radio input {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 7px;
border-radius: 50px;
display: inline-block;
position: relative;
outline: none;
margin-right: 10px;
margin-top: 6px;
}
.radio input:checked:after {
content: ' ';
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
top: 2px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 2px;
font-size: 32px;
}
.radio input:checked {
background-color: #e9ecee;
color: #99a1a7;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}
This works for modern browsers, it gives me the following:
Unfortunately I must support IE8 too, and the above does not work for IE8. I know that the :checked pseudo element does not work for IE8, so I have the following script that is supposed to provide me with that functionality.
I also have a conditional CSS comment that brings in a stylesheet specifically for IE8.
<!--[if IE 8]>
<link href="#Url.Content("~/Content/ie8-styles.css")" rel="stylesheet" type="text/css" />
<![endif]-->
The first thing I want to know is, does IE8 support something like this (bear in mind the JS script)?
.radio input:checked:after {
content: "boo";
width: 10px;
height: 10px;
border-radius: 50px;
position: absolute;
top: 2px;
background: #99a1a7;
box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
text-shadow: 0;
left: 2px;
font-size: 32px;
}
I'm curious if it'll read the double pseudo elements of :checked:after because right now I don't see the word boo before my radio buttons!
As you are not opposed to using JS, you might want to checkout http://selectivizr.com/. We have used this in several projects that require older browser support and functional custom style checkboxes/radios.
I normally use the 'hide the input' and use an image on larger projects, but for simpler projects that run on IE8, I use the following CSS, and it works perfect. This has a negligible effect on newer browsers. The height/width has no effect unless you add the background-color. This would be great for an IE8 specific style-sheet.
input[name="bdu"] {height:1em; width:1em; background-color:#000;}
And the html..
<input name='bdu' type='radio' value='S'/> SET
Here are 3 examples, pulled right off a working page.. No CSS, 1em and 2em.
. .I have a button at the middle of the page. . .on click a pop up dialog box appears but. . it is centered to the top of the page but not center to the current screen at the middle of the page.. each time i have to scroll up and close the dialog box.The function which i need is where ever in the page i click the button the pop up should appear center to the current screen.Please help me out guys
#blanket {background-color:#111;opacity: 0.65;position:absolute;z-index: 9001; /*above nine thousand*/top:0px;left:0px;width:100%;}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-top:-250px;
margin-left:-23px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}
And the html code is
<div id="blanket""></div>
<div id="popUpDiv">
<div align="right"><font color="green">close[X]</font> </div>
<div align="center">Please Enter Your Area Pincode</div>
</div>
<input type="button" value="pincode" onclick="popup('popUpDiv')";>
Is There any .js function that can be added to solve this problem
You need to set the top and left to 50%, then the margin to negative half height/width for the corresponding margin. Also, if you are looking to flow the element when you scroll, you need to use position: fixed; instead of using position: absolute;
#popUpDiv {
position:fixed;
top: 50%;
left: 50%;
background-color:#eeeeee;
border:5px solid #68ad0e;
width:300px;
height:130px;
margin-left:-150px;
margin-top:-65px;
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-moz-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
-webkit-box-shadow: 12px 0 15px -4px #000000, -12px 0 15px -4px#000000;
z-index: 9002; /*above nine thousand*/}
Just add margin-left:auto; and margin-right:auto; to #popupDiv.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
My goal is to make a a head of a screw which looks really realistic. So now what I have done is the following:
<div class="screw"><div class="indent"></div></div>
.screw {
position: absolute;
top: 10px;
left: 49%;
width: 30px;
height: 30px;
border-radius: 50px;
background-image: url('img/nail-head.jpg');
-moz-box-shadow: 0px 3px 8px #000;
-webkit-box-shadow: 0px 3px 8px #000;
box-shadow: 0px 3px 8px #000;
}
.indent {
height: 10px;
width: 30px;
margin-top: 10px;
background-image: url('img/nail-head.jpg');
-moz-box-shadow: inset 0px 3px 8px #222;
-webkit-box-shadow: inset 0px 3px 8px #222;
box-shadow: inset 0px 3px 8px #222;
transform:rotate(150deg);
-ms-transform:rotate(150deg);
-webkit-transform:rotate(150deg);
border-radius: 2px;
}
It also adds a little shadow around the screw so that it looks like it is popping out. How do I make this look "real". Any tips would be great!
Well, here's my try.
I have applied a grey gradient on the circle, also added border and changed the shadow.
box-shadow: 0px 2px 4px #000, -1px -1px 5px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.1);
http://jsfiddle.net/Hfw2D/
Note: I haven't wrote the rules for all browsers (-ms,-moz, etc...). Tested on chrome.
I think the title is misleading..as i couldnt think of an appropiate title.
I have 4 webpages which i want to demo..
[page1] [page2] [page3] [page4]
What I want is.. on top of all my pages.. have like 4 of these "buttons" (or something else)
When I am on page 1..page 1 button is bold and rest of the three are light..
When I am on page 2.. page 2 button is bold and so on..
And that each of them link to each other.
Any suggestions
<style>
button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #123d54;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#afd9fa 0%,
#588fad);
background: -webkit-gradient(
linear, left top, left bottom,
from(#afd9fa),
to(#588fad));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
button.current {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient(
top,
#faafaf 0%,
#d11919);
background: -webkit-gradient(
linear, left top, left bottom,
from(#faafaf),
to(#d11919));
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #003366;
-moz-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
-webkit-box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
box-shadow:
0px 1px 3px rgba(000,000,000,0.5),
inset 0px 0px 1px rgba(255,255,255,1);
text-shadow:
0px -1px 0px rgba(000,000,000,0.7),
0px 1px 0px rgba(255,255,255,0.3);
}
</style>
<a href="/page1.html">
<button class="current">Demo Page 1</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 2</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 3</button>
</a>
<a href="/page1.html">
<button class="">Demo Page 4</button>
</a>
copy the above at the top of each page you have, for the first page, the button class should be current, for the second one the second button should be current and so forth.
The buttons were generated CSS3 buttons for illustration purposes