I got a requirement for text that looks like this:
Top shadow: 2px, #000, 75%
What does that mean? Is that just a text-shadow? What's the 75% mean?
Top Shadow, as described in this post, uses CSS3's box-shadow and the :before pseudo selector to add a shadow under the browsers bar by targeting the body element.
There is no top-shadow property in CSS, regarding the Top shadow: 2px, #000, 75% bit. There is however text-shadow & box-shadow.
It is not valid text-shadow.
May be you need such example (with correct syntax):
text-shadow: 0 0 2px rgba(0, 0, 0, .75);
or
text-shadow: 0 2px 2px rgba(0, 0, 0, .75); /* down shadow */
Notes:
rgba(0, 0, 0, .75) = #000 with 75% opacity
Updates: #Xander found technique which you are asked us about. In it box-shadow with css generated content are using:
body:before {
content: '';
position: fixed;
top: -1px;
left: 0;
width: 100%;
height: 1px
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
z-index: 100;
}
Related
I'm playing at CodePen and trying to make a cinematic CSS3 lens flare like in multimillion blockbusters. I tried to make it through the box-shadows but I'm unable to make them with needed shape, this is totally wrong. I can't use canvas or JS at all, so the point is to make it only with css, if it's possible. The result effect I want to get is something like this:
http://codepen.io/byob/pen/azzbjB This is that pen
#-webkit-keyframes blink {
0% { box-shadow: none; }
100% {
box-shadow: inset 10px 0px 50px 0px rgba(255, 0, 0, 0.5),
inset -10px 0px 50px 0px rgba(255, 0, 0, 0.5),
1px 1px 500px 30px rgba(255, 0, 0, 0.5),
50px 0px 0px 0px rgba(255, 0, 0, 0.5),
-20px 0px 0px 0px rgba(255, 0, 0, 0.5);
}
}
The one i want to do, is way more complex, so, guess i need help or the fact that it is impossible w/o js.
I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/
Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>
As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.
You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread
Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.
Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2
None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.
CSS border radius works fine, but it's now revealing a white background. (I'd prefer transparent or grey, similar to body background...)
CSS:
.window_header{
width:600px;
height:42px;
background: #333 url("../img/bg-2.png") repeat;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-bottom:1px dotted #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15);
}
The white should be from the background of the container "behind" the one you applied border-radius to.
Maybe try to apply border-radius to it as well.
I would recommend either applying Border Radius to the underlying Element so instead of having rough white edges, the element would have rounded corners. So you wouldn't see the white edges.
-or-
Place the whole element edit before the containing element so it sits on top of the white background and go from there.
Perhaps the bg-2 file isn't transparent in that area? Depending on the editor that you used to create the image, it may not have had the ability to make it transparent.
Max Gherkins's explanation is also a very big possibility. :)
background: #333 url("../img/bg-2.png") repeat;
Your background image is not transparent. If it is a "flattened PNG", make sure the background is "transparent" and not "white".
I have two questions about creating shadows like www.apple.com/ipodshuffle...
On the website, you'll see the main section with a white background - it contains all the information about the iPod Shuffle. The right, left and bottom of this main section have a shadow, but the top does not. How do I code this?
Just above the 2nd image of the iPod Shuffles (where they're all stacked on top of each other, and the text reads "Design. As beautiful as it is wearable.") there is a shadow border that looks like it's popping out of the page, and then fading back into the page. How do I code this?
Here's the code you're searching for :
.box{
padding: 20px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
<div class="box">
Lorem ipsum
</div>
More informations about box-shadow here : http://www.css3.info/preview/box-shadow/
For the central shadow, they just used an image.
.box {
width: 200px;
height: 100px;
margin: auto;
padding: 20px;
border-radius: 5px;
background-color: #e4e4e4;
border: 1px solid #adadad;
-webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}
<div class="box">
Lorem ipsum
</div>
I am having trouble trying to style a select element in opera.
What happens, is that most of the styles applied to this element in the css is shown in Opera (11.60), but for some reason bits also get left out, like the box shadow effect and border radius.
It seems to me that opera displays the select element above these styles, as I have noticed in the transitioning that the curved border does exist, it's just behind the select element. As in, the select element when unfocused appears to have no border radius effect, but when focus is applied to the element, you then see the border in transistion then it disappears behind the element again.
In IE 9, Firefox 9 and the latest version of Chrome, the select element in question comes out near uniform. And in all, including Opera, the input element comes out perfectly with the same element styles applied.
Here's the HTML:
<div class="searchBox">
<form method="post" action="'.$_SERVER['PHP_SELF'].'" name="search">
<label for="bizName">Biz Name:</label>
<input name="bizName" class="bizName" type="search" placeholder="Search..." />
<label for="bizCategory">Biz Category:</label>
<select name="bizCategory" class="bizCategory" onchange="this.form.submit()">
<option>Choose</option>
</select>
<button type="submit" name="searching" class="search" value="Search">Search</button>
</form>
<!-- end .searchBox --></div>
And heres the pages' CSS:
input, select {
background: #fcfcfc;
border: 0px none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #6a6f75;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-background-clip: padding-box;
-webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */
-moz-transition: all 0.7s ease-out 0s; /* FF4+ */
-ms-transition: all 0.7s ease-out 0s; /* IE10? */
-o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */
transition: all 0.7s ease-out 0s;
}
input {
padding: 7px 25px;
width: 135px;
}
select {
padding: 7px 10px;
width: 185px;
}
input:focus, select:focus
{
background: #6699cc;
color: #e7f3ff;
text-shadow:
-1px -1px 0 #666,
1px -1px 0 #666,
-1px 1px 0 #666,
1px 1px 0 #666;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
.bizCategory {
margin-right: 15px;
}
I don't see why Opera should react this manner, as I believe it does support the W3C spec somewhat?
In anycase, my assumption is that Opera is applying some sort of default style to this select tag. But that is only an assumption.
Would anyone else be able to provide any input in this regard; or would anyone that has experienced this problem before, be able to explain what exactly is going on here?
Thank you in advance to taking the time to read through this!
Improved answer for 2015:
I found my using of styled select lists very needed for the time we're in now - so here is the once that i have the best experience with so far. And there isn't really any none javascript solution to the issue. Tough you could use a unordered list and list elements and style it, and grab the info from the selected li with some javascript and post trough an ajax post method. IE8+ approach for this without any frameworks would look like this:
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
If you are using a framework checkout the build-in selects in angular and bootstrap below.
Angular
Angular select comes from angular material you can style on top of this as crazy as you want or style your own, using the frameworks javascript i done the same.
There is also Bootstrap UI which is an angular framework for all kind of form fields.
Bootstrap
If your not using angular in your project i think the way that bootstrap solved it's the best i've used so far. Bootstrap select
Old answer
Generally i would say never redesign a select button, but anyhow checkout its way to approche it https://gist.github.com/itsadok/1139558
If you only need to hit newer browsers, you can use this, and just style it like any other object:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
See some stuff about it HERE
Or i would go for a javascript solution there's a lot of people out there already done it and shared like this: adam.co/lab/jquery/customselect or this bulgaria-web-developers.com/projects/javascript/selectbox or build it my self like a jquery plugin build on ul and li's
in your issue you could even go for a menu structure like "ul & li", that gave a jquery call on click something like THIS FIDDLE
just take the text from the ".yourtextholder" and send to the url
It is the background of the select element which does not respect the rounded corners. (Similar to ActiveX filters in IE8)
If you don't need a specific background color, you can use a completly transparent background:
select {
background-color: rgba(255, 255, 255, 0.0)
}
The drop down button still overlaps the corners on the right, but at least on the left you get rid of those 'dog ears'.