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;
Related
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;
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 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.
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)
I have a background pattern which can be easily repeated. The problem is i have a shadow to the bottom of the background and to the right of the background. How do I repeat such an image? I thought I can probably cut the piece from the right and overlap that right shadow. Or using whole image is the only solution?
My suggestion is to use box-shadow css property to apply the shadows for your element instead repeat an image for the shadows also. You can use the following to make the shadows like your example:
-moz-box-shadow: 5px 5px 10px #000; /* FF3.5+ */
-webkit-box-shadow: 5px 5px 10px #000; /* Saf3.0+, Chrome */
box-shadow: 5px 5px 10px #000; /* Opera 10.5, IE9 */
Of course, as you see these properties doesn't support internet explorer 8 and below but you can use css3pie, a script that bring you some css3 properties to internet explorer. Is something that I often use.
Example: http://jsbin.com/iquso3
An alternative is to use a jquery solution from the many that exist.
For a background, using a whole image is the only solution, so you'll need separate images to do this on a flexible sized box.
You can probably keep the html and add the shadown using css, or by dynamically inserting extra divs using javascript/jquery.