so this is driving me crazy. I have two divs, floated left, the bottom one has a drop shadow box shadow, in this JS fiddle http://jsfiddle.net/q79Lg/ the shadow renders correctly, it covers the content, but when I copy literally the exact same thing to a page http://www.klossal.com/portfolio/index_backup2.html the shadow doesn't cover the content in the div above. Why is this happening??
Ultimately I'd like to use it here http://www.klossal.com/portfolio/index_backup5.html but it's just the same issue as listed in the first two sources, but I've taken all the other garbage out.
Thanks so much for helping me.
Try
<div align="center" style="background: #ffffff; position: absolute; bottom: 0px; left: 0px; z-index: 5; border:1px solid red; -webkit-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); -moz-box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); box-shadow: 0px -7px 20px 0px rgba(0, 0, 0, 1); width:100%;height:200px;">
for the botttom div, see if that works :)
Related
I have a menu header. The drop shadow effects of it as present in the adobe photoshop are:
Blend Mode: Multiply
Opacity: 0.25 (25%)
Distance: 3px
Spread: 15%
Size: 9px
Color: #282829
I am trying to use the above code in my CSS for my menu header (adove) but unfortunately for some reasons I am unable to replicate it. The code which I am using for the menu header are:
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.5);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
Try this and adjust the pixel values if necessary. The 4th value is the blur size, the 3rd value is the size of the spread. The 1st and 2nd values adjust the X and Y offsets of the dropshadow.
-webkit-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
-moz-box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
box-shadow: 0px 0px 9px 3px rgba(41,41,41,.25);
I have a div with 0.5 transparency. This acts as a darkening rectangle over a bigger background slider image (an outer div) to make the text more readable over the slider background picture.
<div class="darken-rectangle">
<!-- inner text container divs go here -->
</div>
CSS:
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
}
This works great, however I would like to a few pixel (3px-6px) gradient border for the rectangle which drives the alpha from the outer light to the inner darken.
Unfortunately I can not find how to do this, even does not know is it possible with pure CSS, or do I have to create 4 png images for the 4 "border and arrange the layout?
I think what you want is box-shadow, see jsFiddle
HTML
<div class="darken-rectangle">
Test Text
</div>
CSS
.darken-rectangle {
/* ... */
background-color: rgba(0, 0, 0, 0.5);
color: white;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}
.darken-rectangle {
padding: 30px 30px 30px 30px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
border-radius: 3px;
}
I am creating a full width website. The website appears full width on my computer but when I check it on other computers, the website appears to have free space on both left and right.
How can I make this website full width?
.wrapper_boxed {
width: 1000px;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
One solution that I have read is I redevelop using percentage width.
Just change your main container :-
.wrapper_boxed {
width: 100%;
margin: 0
background-color: #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
You will probably need to go through the elements within wrapper boxed to change any width pixel values to percentages.
Percentage is definitely the easiest way, if you post some code we can look at uaing what you have and extending divs to keep the design and essentially stretch the sides. However anyone would just use:
width: 100%;
In our website we have got this button:
Now we need to create link from that but without this tape on top of it.
The problem is that it also creates link in empty space (top left corner of tape).
What we tried
Make the tape straight and rotate it with CSS. It is quite good, except the thing that it is not supported in older browsers. Also it would be better to keep that link just in that white space (container div).
HTML
<div class="box-body buttons-text clearfix">
<a href="#">
<div class="tape"></div>
<img src="/images/fire.png" class="left">
<span>HOT JOB</span>
</a>
</div>
CSS
.box-body {
padding: 10px 20px;
position: relative;
background: #ffffff;
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}
.tape {
background: url("../images/tape.png") center 0 no-repeat;
width: 145px;
height: 54px;
position: absolute;
bottom: 46px;
left: 83px;
}
The problem is that it also creates link in empty space (top left corner of tape).
For modern browsers, you could use pointer-events:
.tape {
pointer-events: none;
}
You can use image map.
Use the button as an image.
Then use a correct image-map to define clickable area of the image.
EDIT: Thanks for all the help! Finished table is here: http://jsfiddle.net/MnLkD/
I am trying to get a shadow to appear inbetween the borders on this table:
http://jsfiddle.net/g2fy4/
I'm guessing it might not be possible but thought I'd ask the experts anyway :-P . I have tried setting a border-spacing of 2px, no border, and assigning the drop shadow to the th and td tags but it didn't work.
If anyone has any ideas I would be grateful for the input :-)
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:0;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
What, you mean like this? (scratches head)
http://jsfiddle.net/g2fy4/2/
All I did was change the items that got shadow from table to td and made sure there was border spacing.
#content.postagepage table {
margin:0 auto 40px auto;
border-spacing:3px;
}
#content.postagepage td {
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
If you want shadows on the td elements, put it on the td elements!
It sounds like you want to do this?
http://jsfiddle.net/b9chris/sXQvp/
CSS:
div {
width: 100%; height: 100%;
-webkit-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
box-shadow:7px 7px 10px rgba(0, 0, 0, 0.5);
}
HTML:
<table>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
<tr><td><div>Hi</div></td><td><div>Hi</div></td></tr>
</table>
Basically the answer is, you can't make this happen with TD tags alone, but you can wrap the cell contents in a tag like divs and style those instead.
Do you want to achieve something like this:
http://img856.imageshack.us/img856/8865/tableim.jpg
?
My only idea currently is to set few absolute positioned divs in table (but then table cells width and heights should be set), and to add box-shadow to these divs...