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.
Related
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 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
I was trying to figure out how to get a blinking box, and as I did not really find a solution on the net, I was fiddling around a bit.
I came up with the following, this works fine in general. My question is simply a) if there is an easier way to do this, and b) if I can program it in a way that it increases / decreases by gradient, instead of me having to program so many classes and stuff like that.
See this code in action: http://jsfiddle.net/ZUJ5b/7/
html
<div id="test" class="test">Hello</div>
jQuery
$(document).ready(function () {
setInterval(blink, 75);
});
function blink() {
if ($('#test').hasClass("test")) {
$("#test").removeClass('test').addClass('test1');
} else if($('#test').hasClass("test1")) {
$("#test").removeClass('test1').addClass('test2');
} else if($('#test').hasClass("test2")) {
$("#test").removeClass('test2').addClass('test3');
} else if($('#test').hasClass("test3")) {
$("#test").removeClass('test3').addClass('test5');
} else if($('#test').hasClass("test4")) {
$("#test").removeClass('test4').addClass('test5');
} else if($('#test').hasClass("test5")) {
$("#test").removeClass('test5').addClass('test6');
} else if($('#test').hasClass("test6")) {
$("#test").removeClass('test6').addClass('test7');
} else {
$("#test").removeClass('test7').addClass('test');
}
}
CSS
.test {
padding: 20px;
width: 100px;
border: 1px #ED0 outset;
box-shadow: 0px 0px 6px 1px #FE4;
-moz-box-shadow: 0px 0px 6px 1px #FE4;
-webkit-box-shadow: 0px 0px 6px 1px #FE4;
}
.test1 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 6px 1px #FFE544;
-webkit-box-shadow: 0px 0px 6px 1px #FFE544;
}
.test2 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test3 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test4 {
padding: 20px;
width: 100px;
border: 1px #EA0 outset;
box-shadow: 0px 0px 8px 3px #FFCC44;
-moz-box-shadow: 0px 0px 8px 3px #FFCC44;
-webkit-box-shadow: 0px 0px 8px 3px #FFCC44;
}
.test5 {
padding: 20px;
width: 100px;
border: 1px #EEB600 outset;
box-shadow: 0px 0px 7px 2px #FFD444;
-moz-box-shadow: 0px 0px 7px 2px #FFD444;
-webkit-box-shadow: 0px 0px 7px 2px #FFD444;
}
.test6 {
padding: 20px;
width: 100px;
border: 1px #EEC300 outset;
box-shadow: 0px 0px 7px 2px #FFDD44;
-moz-box-shadow: 0px 0px 7px 2px #FFDD44;
-webkit-box-shadow: 0px 0px 7px 2px #FFDD44;
}
.test7 {
padding: 20px;
width: 100px;
border: 1px #EED000 outset;
box-shadow: 0px 0px 6px 1px #FFE544;
-moz-box-shadow: 0px 0px 3px 1px #FFE544;
-webkit-box-shadow: 0px 0px 3px 1px #FFE544;
}
Wow! You're dedicated! There are much easier ways to animate with css. Check out CSS transitions (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions)
It is pretty easy with css transitions (but only for new versions of browser)
Here is demo fiddle
Just add a transition property to your css class and in that define on which property you want to put transition on (in your case border shadow) and also define for how much time you want to make the transition.
transition: box-shadow 1s;
. .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.
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