I've got this page where I'd like to give to the exterior of the player a blurry effect, something like this, with the black part being transparent. Is it possible to do that only with CSS?
Thanks!
Try using box-shadow instead of a css border
box-shadow: 0px 0px 10px #000000;
Related
I'm trying to find a reasonable CSS style for highlighting a particular table row (i.e. on a click selection) that doesn't involve changing the background color, because the row colors already serve a purpose in my application.
This probably means making the border stand out or doing something to the background that doesn't change its color. I've tried the following
border: 2px ... with margin: -2px or something like that. However, it doesn't display too well, especially when the table is scrolling, and doesn't offer a good highlight without a super thick border. Browser support of borders on <tr> elements also isn't great.
outline: 3px ... only seems to display on the top and bottom when the div containing the table is scrollable.
box-shadow: 5px 5px ... color inset doesn't seem to display properly without messing up the table.
Does anyone have any good CSS suggestions for how to achieve this?
It turns out that you can do this using css selectors on the <td> elements, being careful with the two ends. For example, I created the following stylus code, which could be turned into a mixin. The trick is to use a negative spread value to get rid of the borders that would show up on any side you don't want, while using the blur and horizontal/vertical values to get the nice effect on the sides you do want. The blur must be at most half the spread.
shadow-color = rgba(0,0,0,0.5)
shadow = 15px
-shadow = - shadow
blur = 5px
spread = -10px
tr.selected > td
box-shadow:
0 shadow blur spread shadow-color inset,
0 -shadow blur spread shadow-color inset
// Since we have to, make the top left and bottom right corners the dark overlapping ones
tr.selected > td:first-child
box-shadow:
shadow -shadow blur spread shadow-color inset,
0 shadow blur spread shadow-color inset
tr.selected > td:last-child
box-shadow:
0 -shadow blur spread shadow-color inset,
-shadow shadow blur spread shadow-color inset
This creates a shadow border like the following, allowing any background color to still show up:
However, it's not possible to do this with normal (non-inset) box-shadows because they will show up in between the table cells.
Change the HTML to:
<td style="padding:20px;">
<div class="tdContentWrapper">
<div>SomeStuff</div>
<div>SomeMoreStuff</div>
</div>
</td>
Change the CSS to:
#MyTable .tdContentWrapper:hover{
background: black;
}
How about increasing the padding and/or line-height with a subtle increase in font-size?
The row gets highlighted explicitly enough without affecting the visual styling of its corresponding peers; I might even tweak the color, if it's possible, depending on the alternating backgrounds.
I'm trying to apply text shadows for svg text but it is kinda buggy for firefox and chrome but I'm not sure why. I'm trying to use them to create a border around the text.
Here is my jsfiddle: http://jsfiddle.net/f3m8Z/
And here is the css I'm using for text:
text-shadow: 0px -1px 5px red,
0px 1px 5px red,
-1px 0px 5px red,
1px 0px 5px red,
-1px -1px 5px red,
-1px 1px 5px red,
1px -1px 5px red,
1px 1px 5px red;
In Chrome if I zoom in and out some of the Hello Worlds have a thicker outline and if I drag it around it leaves behind text (if you zoom in first and then drag).
In Firefox only the top Hello World has some shadow (and it's not really even noticeable) but I read that Firefox does support text shadows.
Is the problem because the text is svg and not actual text and if so is there a workaround for this?
Thanks
SVG text does not support text-shadow. The good news is that this is something that will probably be added to SVG 2 and so it will be supported at some point in the future.
One workaround would be to use <foreignObject> to embed html text, but that won't work in IE9 or IE10 as neither supports <foreignObject>
If you just want to create a border round the text, you could just apply a stroke. The disadvantage is that it would encroach on the fill of the text. But the way around that would be to overlay two copies of the text. The one underneath would have the red stroke and the front one would have no stroke.
This solution is not quite as clean as a CSS shadow, but it would achieve the effect you want.
I know how to use CSS3 shadows. However I am trying to achieve a specific design. I want the shadow to be a lot lighter and faded off on the left and right edges, please see image attached.
The only code I have come up with is the following. But not sure how to make the edges fade out more.
.shadow {box-shadow: 0 10px 6px -6px #000000;}
Any tips be helpful
I use a combination of box-shadow, border-radius and clip.
http://dabblet.com/gist/2225507
Something like this?
box-shadow: 0px 20px 37px -28px #000000;
note about parameters:
CSS3's Box-Shadow Adds Drop Shadows, Inner Shadows
hi you can create oval shaped css3 shadow through border-radius & box-shadow....
or can see the live demo:-http://jsbin.com/elacen/5/edit
you can play around with box-shadow and gradients here
css3 gen
but i don't think you can apply fading on the shadow
Right now, our mockups / live demo use images to achieve this effect (including button text). This is less than desirable for all of the standard reasons. I can get everything working except that pesky outer border. I'd really like to not add markup to my document just to have that.
I've got my test code on jsfiddle, although it doesn't work as well there as it does on my local machine: http://jsfiddle.net/Axtjm/
tldr: how to add inset border like that and keep rounded corners without extra markup.
As unintuitive as this sounds, don't use outline for outlines. Use box-shadow with a 1px spread:
box-shadow: 0px 0px 1px 1px #049ED9;
Demo: http://jsfiddle.net/Axtjm/4/
The easiest option is to add the extra container element and give each a border.
But the challenge is to do it without the border. Some ideas:
use a border and then a very thin box-shadow.
use the border style attribute AND the outline style attribute
(both dependent on the browser supporting them)
Quick JSBIN demo: http://jsbin.com/irabul
it is using border-radius property of CSS3
and simple CSS border techniques,
some of the border property,
solid Specifies a solid border
double Specifies a double border
groove Specifies a 3D grooved border. The effect depends on the border-color value
ridge Specifies a 3D ridged border. The effect depends on the border-color value
inset Specifies a 3D inset border. The effect depends on the border-color value
outset Specifies a 3D outset border. The effect depends on the border-color value
inherit Specifies that the border style should be inherited from the parent element
and here is the border-radius in detail,
http://www.css3.info/preview/rounded-border/
Use an inset box-shadow. If you're already using a box-shadow on your buttons, remember that you can stack box-shadows by using commas to separate each.
button {
border: 1px solid #369;
box-shadow: inset 0 0 1px #fff, 1px 1px 2px #000;
}
The above is just an example; replace the values with your own if necessary. If you want a bolder inset shadow, you can also stack two insets of the same value to achieve that.
Live example: http://jsfiddle.net/Axtjm/5/
I am using RGBA to create a transparent background that overlays on top of an image. Works just fine. My questions is this: Is there a way to "soften" the edges of the box to where it flows more into the picture vs a hard edge.
Here is my CSS for the box:
#past{
position:absolute;
left:0;
top:363px;
background-color: rgba(34,34,34,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
/* For IE 8*/
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99222222, endColorstr=#99222222);
z-index:10;
padding:10px;
}
I know I can do this by creating a background image in Photoshop but I was looking for a CSS only way vs using an image.
Also I would prefer if at all possible for this to work in all browsers.
Thanks for the help. =>
Another option is to use one of my personal favorite CSS tools: box-shadow.
A box shadow is really a drop-shadow on the node. It looks like this:
-moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
box-shadow: 1px 2px 3px rgba(0,0,0,.5);
The arguments are:
1px: Horizontal offset of the effect. Positive numbers shift it right, negative left.
2px: Vertical offset of the effect. Positive numbers shift it down, negative up.
3px: The blur effect. 0 means no blur.
color: The color of the shadow.
So, you could leave your current design, and add a box-shadow like:
box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
This should give you a 'blurry' top-edge.
This website will help with more information: http://css-tricks.com/snippets/css/css-box-shadow/
It depends on what type of fading you are looking for.
But with shadow and rounded corners you can get a nice result. Rounded corners because the bigger the shadow, the weirder it will look in the edges unless you balance it out with rounded corners.
http://jsfiddle.net/tLu7u/
also.. http://css3pie.com/
You can use CSS gradient - although there are not consistent across browsers so You would have to code it for every one
Like that: CSS3 Transparency + Gradient
Gradient should be more transparent on top or on top right corner (depending on capabilities)