Is it possible for css3 multiple shadows to be accumilated from different css rules / classes ?
i.e.
.multipleShadows {box-shadow: 0 0 10px 5px black, 40px -30px lime}
will create two shadows for the element, black and lime.
but I want to have two different classes - one for blackShadow and one for limeShadow
.blackShadow {box-shadow: 0 0 10px 5px black}
.limeShadow {box-shadow: 40px -30px lime}
and have both applied to a single element that has both classes.
<div class="blackShadow limeShadow">my div</div>
Can this be done?
Are there alternate ways that can achieve this goal?
Thanks.
Write like this:
.blackShadow.limeShadow {box-shadow: 0 0 10px 5px black, 40px -30px lime}
There isn't exactly a better method to do this other than make a separate class like .doubleShadow or to write another style for .blackShadow .limeShadow.
You can use LESS and make a mixin which you can then implement. That will be a better option if you are looking for a different solution.
Regardless of that I made a fiddle of what you have given in the question.
I ended up using an extra div placed inside the original div and applied the second shadow class to the internal div.
<div class="blackShadow"><div class="limeShadow"> my div</div></div>
This was chosen becuase it keeps the definitions of the shadow classes separate and still allows me to show both the shadows at the same time.
Related
In CSS it is perfectly possible to combine background-image and background-color, which I often use to style an element with a background color and lay a semi-transparent pattern over it, like I did with my navbar:
background-color: #fa4457;
background-image: url(../images/pattern/overlay.png);
or shorthand
background: #fa4457 url(../images/pattern/overlay.png);
The following image shows that my navbar has both a background color and a background image to create a paper-like effect, but the selected menu item has a solid white bottom-border.
if I use this code, it looks like this
border-image: url(../images/pattern/overlay.png) 0 0 10 repeat;
can I somehow combine this with
border-bottom: 10px solid #fff;
Or is there any way which does not involve creating an extra element?
You said that don't want to create extra elements, but maybe then just use pseudo elements? like :before or :after on your items,
http://www.smashingmagazine.com/2011/07/learning-to-use-the-before-and-after-pseudo-elements-in-css/
Ok, I have somehow found the solution.
This:
background: white url(../images/pattern/overlay.png) repeat;
border-bottom: 10px solid rgba(0,0,0,0);
result in this:
thanks to justtry for pointing me in the right direction of using pseudo elements. I still don't quite understand why they behave this way though.
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 am wondering if it's posible to achieve this:
I mean, applying the background color just to the text instead of the whole block,
ej
<h1>WELLCOME TO RENTAL IN MALLORCA BEATYFULL COLLECTION OF APPARTMENTS</h1>
Is there a (cross browser, if possible) way to do this?
Yes. Add a <span> inside the <h1>, and apply the background colour and a line-height to it.
Demo
In addition to Niet's answer:
to get extra space (here 10 px) on the left and right side of every line add this to the span:
h1 span {
box-shadow: 10px 0 0px 0px #EDC330, -10px 0 0px 0px #EDC330;
}
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.
Disclaimer: I have already seen the following questions and their solutions did not apply to me even though they are very similar situations:
Creating a CSS3 box-shadow on all sides but one
How to add drop shadow to the current element in a tab menu?
CSS shadows on 3 sides
Simply put, I am trying to add a -moz-box-shadow of 0 0 10px to the .current_page_item class that is applied to the currently active tab in the tab navigation at the top of my website. The website does not yet include the actual box-shadow or any of these changes, I have only been playing with these modifications in firebug for now before I actually publish them. Naturally this causes the shadow to appear on all sides, and so the bottom edge's shadow overlaps into the .content div which stores all of the blog's actual content, i.e. posts.
Based on what I have seen so far, it seems like I should set the z-index of something, not sure what (I have tried ul.menu) to something lower and the z-index of the .content div to something higher, but this seems to have no effect.
I am just wondering if this is normal behavior and if not, if someone could help me out with this situation.
Thanks, I really appreciate it.
EDIT: I put box-shadow in the post earlier, but I meant the respective specific directives, such as -moz-box-shadow. That was not the problem I was having.
You will need to add overflow:hidden on the ul.menu as honeybuzzer mentions, but since that would also cut-off the top shadow you should add some padding-top to the ul.menu as well..
overflow:hidden on ul.menu seems to get rid of the bottom shadow.
clip-path is now (2020) an excellent solution for hiding specific box-shadow edges if you're wanting the box-shadow to be cut off "clean" like this:
.shadow-element {
width: 100px;
height: 100px;
border: 1px solid #333;
box-shadow: 0 0 15px rgba(0,0,0,0.75);
clip-path: inset(0px -15px 0px 0px);
}
<div class="shadow-element"></div>
Simply apply the following CSS to the element in question:
box-shadow: 0 0 Xpx [hex/rgba]; /* note 0 offset values */
clip-path: inset(Apx Bpx Cpx Dpx);
Where:
Apx sets the shadow visibility for the top edge
Bpx right
Cpx bottom
Dpx left
Enter a value of 0 for any edges where the shadow should be hidden and a negative value (the same as the box-shadow blur radius - Xpx) to any edges where the shadow should be displayed.
This solution removes the need to apply styling to a parent element, which gives more flexibility.