I have a background image to blockquote but i want it to stop 30px or so from the bottom of the blockquote.
current css:
.project-inner-quotes blockquote
{
background: url("Img/quoteTop.gif") no-repeat scroll center top transparent ;
margin: 0 3px 0 3px;
font-style:italic;
font-size:14px;
}
the reason is I have a p tag in the quote which has the closing speech buuble...
.project-inner-quotes blockquote > p:last-child
{
background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
padding: 30px 20px 50px 50px;
}
that can be "faked" with css in a tricky way because it depends on your design. I will make some assumptions now, first of all your blockquote container element has a #fff background (could be any color really).
in that case you could do this:
.project-inner-quotes blockquote > p:last-child {
background: url("Img/white-image_8x30") repeat-x scroll left bottom transparent;
}
.project-inner-quotes blockquote > p:last-child span {
background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
padding: 30px 20px 50px 50px;
display: block;
}
this will "fake" a 30px offset from the bottom. wrap your p text inside the span that will get the background image and display block to get the padding applied.
you will need to create a 8px wide (for better tiling) and 30px high image that will be applied to the paragraph at the bottom. the color of the image will be the color of the background you are trying to get when "offsetting" the quoteTop image... however this approach will fail if you do not have a solid color as main background.
let me know if it's not clear
Related
I'm working on my website header which has a logo image (100px x 100px) in the left hand corner and a navigation bar which is vertically aligned centrally using css table properties. Both the logo image and the navigation bar UL element are in a #header div which has a width of 100%.
What is the best way to reduce the gap between logo and the navigation element without ruining my layout?
Added the borders so elements can be distinguished easily. I'm also using the Twitter Bootstrap framework.
The HTML for my page can be found here: http://pastebin.com/RpgcPDdh
Here is my CSS:
#wrapper {
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: medium none;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
margin: 0 auto;
padding: 0 50px;
}
body {
background: url("images/maze_bg.png") repeat scroll 0 0 #DDDDDD
}
#header {
display: table;
padding: 20px 0;
width: 100%;
}
#header ul{
border: solid 1px red;
display: table-cell;
vertical-align: middle;
}
#header img{
border: solid 1px blue;
}
Appreciate any help.
Throw in a
margin-right: 20px;
or something on the #header ul. That will move it left.
padding-right did the trick! I guess I should've persevered instead of creating a question on here.
I want to Create Box shadow as given below.
As per my study of Box shadow. It takes below parameters:
DIV {
box-shadow: <horizontal> <vertical> <blur> <color> [inset]
}
Please, Find the jsfiddle for this.
To create above examples, I need to use box shadow.
For example 1, I used below style:
box-shadow:0px 10px 22px 0px gray;
Here, I am getting lighter shadow on top, left and right side also (which I don't want)
In example 2, I used below style:
box-shadow:10px 10px 22px 0px gray inset;
I don't want inner shading to right and bottom part.
Is it possible to remove unnecessary shading in box-shadow ?
You can have a box shadow just on one side, on two sides, three sides, but in that case you should set the blur value to zero - see demo http://dabblet.com/gist/1579740
However, you can emulate the first kind of shadow by wrapping your div into another outer div of the same width, but slightly bigger height on which you set overflow: hidden;
If you don't need the background of your div to be semitransparent, then you could also emulate the second one using an absolutely positioned pseudo-element in order to obscure the bottom and right shadows.
DEMO http://dabblet.com/gist/3149980
HTML for first shadow:
<div class="outer">
<div class="shadow1"></div>
</div>
CSS for first shadow
div {
width: 100px;
height: 100px;
}
.outer {
padding-bottom: 35px;
overflow: hidden;
}
.shadow1 {
box-shadow: 0px 10px 22px 0px gray;
background: #f0f0f0;
}
HTML for second shadow
<div class="shadow2"></div>
CSS for second shadow
.shadow2 {
box-shadow:10px 10px 22px 0px gray inset;
position: relative;
background: #f0f0f0;
}
.shadow2:before {
top: 22px;
bottom:0;
left:22px;
right:0;
position: absolute;
background: #f0f0f0;
content:'';
}
You can do it with some extra markup (an extra div wrapping the element so that it hides the other shadows you don't want)
Or you could use the shadow spread property (the 4th number in the box-shadow declaration) to shrink the shadow down to hide the side parts of your shadow.
This creates a smaller shadow on the bottom, but it requires no extra HTML.
http://jsfiddle.net/hBMQm/2/
#b {
position:absolute;
width:100px;
height:100px;
top:200px;
left:200px;
background-color:#F0F0F0;
text-align:center;
box-shadow:20px 20px 22px 0px gray inset;
}
Now you have the inner shadow, but not on you right, or bottom as you asked for. Did i misunderstand you?
box-shadow takes one more parameter the spread
using following code i was able to achieve the desired effect
box-shadow: 0px 20px 22px -20px gray inset;
see here http://jsfiddle.net/hBMQm/3/
I'm trying to figure out the best way to create three 284x87 rounded rectangle boxes, which will contain an icon on the left and text to the right. Is it worth trying to pull this off purely with CSS, or is there no way to get out of using images? Here's what I have so far, using a background image of the entire image:
<style type="text/css">
.blurect {
background-image: url(blurect1.gif);
width: 284px;
height: 87px;
color: #FFF;
}
</style>
<div class="blurect">Test</div>
You can certainly use CSS. As cale_b said, set a background image with the appropriate position, then adjust the padding-left so that the text doesn't overlap the icon. Here's the appropriate CSS:
.rect {
background: url(path/to/image.png) 4px center no-repeat;
padding: 4px 4px 4px 24px;
width: 200px;
height: 20px;
line-height: 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
4px center in the background rule sets the image 4px from the left edge and centered vertically. The left padding is set to 24px to move the text away from the background icon
Here's a demo:
http://jsfiddle.net/6p8Rz/
The dimensions are obviously adjustable to suit your needs
This question already has answers here:
Offset a background image from the right using CSS
(17 answers)
Closed 7 years ago.
In this case
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB}
I want 20px space in right side before to background image and I can't give margin on li because border should touch the edges.
So I need to set 20px but it takes 20px from left side not right side.
li {background: url("../img/grey-arrow-next.png") no-repeat 20px center;
border-bottom: 1px solid #D4E8EB}
in your css mention position right then "spacing value(50px)" then other position(center/top)
li {background: url("../img/grey-arrow-next.png") no-repeat right 50px center;
border-bottom: 1px solid #D4E8EB}
Older Browser and IE8 and old version of IE does not support this code. Latest updated browsers has no conflicts with this method and hopefully future updates will support it too.
If you are using modern browser, try background-position: calc(100% - 50px) center; as suggested in another answer too. calc has long way to go as it is logically and mathematically capable to produce much accurate result.
You can use the CSS3 "calc" function:
example:
background-position: calc(100% - 10px) center;
Just add 20px blank space to the image right side in a graphic editor.
You can use other object inside li tag, and give it your background image with a margin-right:
li #image {
margin-right: 20px;
background: url(pp.jpg) no-repeat right center;
}
li {
border: 1px solid #D4E8EB;
}
use the following code to add 20px to the right of the background-image --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-right:20px}
use the following code to add 20px to the left of the background-image --
li {background: url("../img/grey-arrow-next.png") no-repeat right center;
border-bottom: 1px solid #D4E8EB; padding-left:20px}
border-right: 20px solid transparent;
unfortunately the 'easy' solution is edit your image and add 20px right and bottom of transparent space.
you could achieve it with background-clip / background-origin probably but that'd take a bit of playing with...
place a span tag within the <li> and add the margin to that, that way your <li> should still stretch to the edge along with your border.
I want to Create DIV based Flexible corners. as per shown in the Image.
This is Not regular rounded corner, but something more complicated. This is Something like challenge .
And Please Note that I want Image based rounded Corners, so please give answer as per requirments.
Thanks a Lot
Well, the easiest answer is: use CSS3:
#roundedCornerDiv {
-moz-border-radius: 1em; /* for mozilla-based browsers */
-webkit-border-radius: 1em; /* for webkit-based browsers */
border-radius: 1em; /* theoretically for *all* browsers
dependant on implementation of CSS3 */
border: 12px solid #ccc;
}
you should be able to do this with 9 explicitly sized and floated divs. the corner divs are fixed size and have background-url for the 4 corners and the side divs are repeat-y and top bottom divs have repeat-x
You should look into The Thrashbox approach for this.
You can use a series of spans and 4 images, one for each corner, to make a resizable rounded corner div. Like this:
div {
background: white url(topleft.gif) top left no-repeat;
}
div span {
display: block;
background: url(topright.gif) top right no-repeat;
}
div span span {
background: url(bottomright.gif) bottom right no-repeat;
}
div span span span {
padding: 2em;
height: 0; /* fixes a padding bug in IE */
background: url(bottomleft.gif) bottom left no-repeat;
}
div span span > span {
height: auto; /* sets the height back to auto for all other browsers */
}
And now for the HTML:
<div><span><span><span>Round corners!</span></span></span></div>
For an actual example and code please refer to this page for a working example and source code.
border-radius: 10px 10px 10px 10px;
first is the left-upper corner.
second is the right-upper corner.
third is the right-lower corner.
fourth is the lower-left corner.
you can use that basically in any tag where you want the round corners. just remember to specify the border like:
border: 2px solid black;
if you specify the border separately, eg:
border-left: 6px;
border-right: 6px;
border-top: 2px;
border-bottom: 2px;
you can get some awesome-looking stuff.