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;
}
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.
ive got a css problem with td´s in a table row.
hovering on a td makes a box shadow visible but its always cut on the right side, except the last one. showing here: http://i39.tinypic.com/2ztdk6c.jpg
ive already tried to fix it by increasing z-index value up but it didnt fix it.
td:hover {-webkit-box-shadow: 0px 0px 10px -1px #888;box-shadow: 0px 0px 10px -1px #888;z-index:100;}
how can i fix it so the box shadow shows on all 4 sides?
thanks
You need to set position for z-index to take effect, unless you already did in td style definition.
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.
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.
I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
You could try something like this:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the values until it suits you.
Single line of code :
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element
Done!
If I give a line-height to a block element like h1 it adds the space above and below the each text line, that means the element does not begin on the same top position. What if I just want a spacing below each line? I know that vertical-align does only work with inline-elements.
I also recognized that a text of a block element like a p tag is not on top with line-height "normal", by default. If I add a background-color to the element, the colour is also visible a few pixels above the text. Why?
TLDR: Use position: relative and a negative top value to fake it.
Explanation: You're right. Line-height is always added above and below each character. So if your font-size is 12px and you have a line-height of 18px, you'll get 3px above and 3px below each "line". Each of those 3px spaces is called a "half-leading".
However, you can use position: relative with a negative top value to make it seem like there is only space added beneath each line.
So lets say you wanted to have 8px of space between each line instead of just 6px from the example above (18px/12px = 6px = 3px on top + 3px on bottom) . To do this, increase the line-height from 18px to 20px to make the half-leading 4px and give a total of 8px of space between lines. Then add position: relative; top: -2px to bump the line back to same place it was when the line-height was 18px.
Even though the browser is still adding 4px of space above and below each line, the negative vertical positioning will make it seem like that extra top spacing was cut off.
What if I just want a spacing below each line?
I don't really see how the accepted answer is any better than this, for most cases:
margin-bottom: .5em
The important thing is to use em since is will be based on the current font size.
In addition note that if the text wraps to two lines and you're using line-height: 2 then you'll end up with a huge gap between the lines. Then you're almost certainly better off using margin-bottom with a default line-height.