I read this article http://heygrady.com/blog/2011/08/06/recreating-photoshop-drop-shadows-in-css3-and-compass/ many times. But I can't find the correct way to convert drop shadow of PSD to box shadow of CSS3 in this case:
Stroke: #E4E4E4; opacity 75%
Inner glow: #FFFFFF 50%; opacity 75%
Drop shadow: Angle=90 degrees; distance=1px; spread=5%; size=9px
border: 1px solid rgba(228,228,228,0.75);
box-shadow: inset 0 0 0 9px rgba(255,255,255,0.75), 0 1px 9px 0 rgba(0,0,0,.5);
I had to guess here a bit as there’s missing information. The rgba(r,g,b,a) colour syntax takes a value of 0–255 for each of the colour components and a 0–1 value for the opacity of the colour. So the border rule is equivalent to Photoshop stroke.
There’s no direct equivalent of an inner glow but you can do an inset box shadow which can simulate it. You specify multiple shadows with a comma on the same rule, so the first one can be the inset shadow. This is specified with an inset keyword to start with, then the x and y offset (none in this case), then a blur radius, then a spread distance, then finally the colour of the shadow. Play with the values; I guessed at 9px for the spread and 0 for the rest.
Finally, we specify a box shadow for the outside. The same rules apply as to the inset shadow (again with my guessing to the values). Have a play around!
There is a cloud based Photoshop extension that you can download and install in photo shop here: http://css3ps.com/. Then select a layer or layers which contain the drop shadow and click a button in toolbox then it will give you the css3 you need that matches the box shadow in the PSD. They have done the calculations for you.
I use it all the time for this question its great.
Related
I'm using Bootstrap 4 to create my website, and I want the sides to a different color and have drop shadow, making a floating paper effect. Here is an example of what I'm looking to achieve. How would I go about doing this, while using Bootstrap?
It would be something like this:
/* the numbers move the shadow: 1) r-l; 2) up-down; 3) blur. Then the color. */
box-shadow: 4px 4px 8px #ccc;
I have the following CSS shadow:
box-shadow:green 0 1px 3px;
Now, if I want to change only the direction of the shadow, I tried:
box-shadow:inherit 2px 0 inherit;
But this does not work unfortunately. Also it doesn't look like there are additional properties available like:
box-shadow-direction:2px 0;
Or
box-shadow-color:inherit;
How can the direction be changed without changing the color or strength?
A box shadow is defined like this: x y blur spread color.
So if you want to move your box shadow, change your x and y.
box-shadow: 10px 10px 5px #000;
This code creates a black box shadow that is positioned 10px from the top and left. (Note that I didn't have to specify the spread amount.)
As of I know there is no sub-attribute like background-repeat, margin-left, border-bottom for box-shadow, text-shadow CSS3 attributes. For more details, please refer: http://www.w3.org/TR/css3-background/#box-shadow .
The ‘box-shadow’ property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified
by 2-4 length values, an optional color, and an optional ‘inset’
keyword. Omitted lengths are 0; omitted colors are a UA-chosen color.
Where
<shadow> = inset? && [ <length>{2,4} && <color>? ]
So, you can't give a sub-attribute like box-shadow-direction:2px 0; after defining box-shadow to an HTML element until it or similar sub-attribute came to live in next versions of CSS.
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.
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)