I am trying to add left padding to a border bottom line for a div. How can I achieve this?
This is what i tried
When I add padding left then both text and border bottom line moves.
<div class='ot'>
Black border bottom should start from 30px left <div>
.ot{
width:100%;
background-color:yellow;
border-bottom: solid;
}
You could fudge it with some pseudo content.
http://jsfiddle.net/E7fFL/3/
div {
width:100%;
background-color:yellow;
border-bottom: solid 2px;
position: relative;
}
div:after {
position: absolute;
bottom: -2px;
left: 0;
width: 30px;
height: 2px;
content: '.';
background: yellow;
text-indent: -999px;
}
This will work provided the height and bottom properties are the equivalent and inverse equivalent, respectively, of the border width.
You may use a background-image and background-size. DEMO (with linear gradient)
.ot {
width:100%;
background:yellow linear-gradient(to top, black, black) no-repeat 30px bottom;
background-size: 100% 3px;
}
Or a 1 pixel image : DEMO
.ot {
width:100%;
background:yellow url(http://dummyimage.com/1x1) no-repeat 30px bottom;
background-size: 100% 3px;
}
Note , a padding:bottom average fake border heifgt might be necessary
Related
I have a div with a background image. I want the image to always have at least a 1% left and bottom margin/padding. The container of the div is a dynamic absolutely positioned box which can have a size of 5% or 95% (and everything in between with CSS transition).
I chose to achieve this by putting the background-image on that div which has min-height of 5% and width of 100%. The background is not repeating, centred and set to be contained within the area (background-size: contain). I decided to go with a 1% padding and background-clip CSS property to content-box, which should mean that the background covers only the content which starts at 1% away from the border. I chose padding and not margin, because box-sizing is set to border-box, therefore a width 100% with additional padding would not increase the size of the div which is not the case with margin.
However this did not work as expected:
When using background-clip: content-box together with background-size: contain, the background is contained within the border-box and not content-box and the padding cuts away the areas between the content and border.
Example:
div {
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
float: left;
width: 200px;
height: 200px;
}
.clipped {
border: 1px solid blue;
padding: 20px;
background-clip: content-box;
}
.normal {
border: 1px solid green;
padding: 20px;
background-size: contain;
}
<div class="clipped">
</div>
<div class="normal">
</div>
So the questions are:
Is this the normal behaviour?
Where is this documented?
What would be the solution to achieve what I need?
p.s. I am not English so apologies for possible mistakes or misconceptions. Also I will try to explain better in case you did not understand the issue.
Yes, this is normal behavior. The content-box does not mean the image is sized within it, it means it gets clipped by it.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
In below sample I used a pseudo class to achieve it
div {
position: relative;
float: left;
width: 200px;
height: 200px;
border: 1px solid blue;
}
div::before {
content: '';
position: absolute;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: url(http://www.ghacks.net/wp-content/uploads/2011/04/standard-google-image-search.jpg);
}
<div>
</div>
I have an icon set as background, as shown below:
As you can see there must be padding right after the arrow to have nice space.
How can I solve this issue?
HTML
<span class="arrowIcon">Newsletter Sign up</span>
CSS
.arrowIcon{
background-image:url(../img/arrow.png);
background-position:right center;
background-repeat:no-repeat;
background-color:#5379A5;
padding:10px;
color:#FFFFFF;
float:right;
width:55%;
}
You can position a background image FROM the right by writing this in your css.
background-position: right 10px center;
I consider this to be the cleanest solutions.
You can do it with calc.
#test {
background-color: moccasin;
width: 500px;
height: 100px;
background-image: url('http://www.math.muni.cz/~bulik/gifs/arrow.small.left.gif');
background-position: calc(100% - 10px) center;
background-repeat: no-repeat;
}
<div id="test">
</div>
You can add a right border with the same color as the background :
border-right: 10px solid #5379A5;
A background image does not take padding into account, use background-position for that or split up your <span> into <span>newsletter sign up<img></img></span> .
Here it is :
.arrowIcon {
background-image: url(http://www.clker.com/cliparts/7/6/4/a/1206569902228245216pitr_green_single_arrows_set_1.svg.hi.png);
background-position: 95% center;
/* adjust the 98% as your needs or put px value instead if you know extact div size */
background-repeat: no-repeat;
background-color: #5379A5;
background-size: 1em;
padding: 10px;
color: #FFFFFF;
float: right;
width: 55%;
/* to display correctly in SO */
position: absolute;
top: 25%;
right: 0px;
}
<span class="arrowIcon">Newsletter Sign up</span>
Since, you have given float:right its going to be in right .
In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:
background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;
how could i float first part to left and second to right of the element?
before was:
background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;
is it real to do?
also: i use it with :hover
I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.
However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).
So that you could handle the position of each icon interdependently.
For instance:
.box:before, .box:after {
content: "";
display: inline-block; /* or position these elements by floats, etc. */
width: 48px; /* for instance */
height: 48px; /* for instance */
}
.box:before {
background: url(../images/png/elements.png) no-repeat -5px -152px;
}
.box:after {
background: url(../images/png/elements.png) no-repeat -5px -104px;
}
<div class="box"></div>
The left and right you are using belong to background-position. The pixel definitions are overriding them.
You should separate the images to two different elements.
Don't use Shorthand for this (especially in the position property):
try with something like:
div {
width: 100%;
height: 190px;
border: 1px solid red;
background: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: left top, right bottom;
background-repeat: no-repeat;
}
<div></div>
Edit: Example with pixels, zero and %.
div {
width: 100%;
height: 190px;
border: 1px solid red;
background-image: url(http://alt-web.com/Images/CSSSprite.jpg), url(http://alt-web.com/Images/CSSSprite.jpg);
background-position: 0 0, 100% -1215px;
background-repeat: no-repeat;
}
<div></div>
So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :)
Using gradients with angles is not fit for your case because (as already pointed out by King King in comments) as the width the increases, the angle of the gradient (or) the color stop percentages need to be modified to maintain the shape. That is very tricky and so this method can be employed only when the shape has fixed dimensions.
However gradients can still be used with the to [side] [side] syntax because gradients defined using this syntax can adapt to variations in container sizes. In this method no pseudo-elements are used.
$(document).ready(function() {
$('#increase').on('click', function() {
$('.gradient').css('width', '300px').css('height', '500px');
})
})
div {
display: inline-block;
vertical-align: top;
height: 300px;
width: 100px;
margin: 10px;
color: beige;
transition: all 1s;
}
.gradient {
padding: 10px;
background: linear-gradient(to top right, transparent 50%, tomato 50%) no-repeat, linear-gradient(to top right, transparent 0.1%, tomato 0.1%) no-repeat;
background-size: 100% 100px, 100% 100%;
background-position: 0% 100%, 0% -100px;
}
/* Just for demo */
body {
background: -webkit-radial-gradient(50% 50%, circle, aliceblue, steelblue);
background: radial-gradient(circle at 50% 50%, aliceblue, steelblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gradient">Some content</div>
<br>
<br>
<button id="increase">Increase Width & Height</button>
Note that it is better to make sure that the text doesn't flow into the slanted section of the shape because wrapping the text around to fit within the shape is not straight-forward.
I have attempted to make that in css as per ur image. http://jsfiddle.net/3zkme/- See if this could help. Thanks.
HTML
<div style="margin:30px">
<div class="trapezoid">
</div>
</div>
CSS
.trapezoid{
top: 150px;
vertical-align: middle;
border-bottom: 120px solid red;
border-left: 200px solid transparent;
border-top-left-radius:0px;
height: 0;
width: 150px;
transform:rotate(270deg);
-ms-transform:rotate(270deg); /* IE 9 */
-webkit-transform:rotate(270deg); /* Opera, Chrome, and Safari */
}
/* ---------- */
.trapezoid {
position:relative;
}
.trapezoid:after {
content:' ';
left:-14px;
top:10px;
position:absolute;
background:red;
border-radius:0px 0 0 0;
width:164px;
height:40px;
display:block;
}
You do not use a gradient for this, you just need to use a pseudo-element like :after.
Sample code:
#bookmark {
width: 50px;
height: 100px;
position: relative;
background: red;
}
#bookmark:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 35px solid #FFF;
border-right: 50px solid transparent;
}
Live JSFiddle
If you want the shape to be filled in with a gradient, you can do that, too. Just add that to the CSS:
background: linear-gradient(to right, #ff0000 0%,#B00000 100%);
given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color.
eg :
You can't set multiple background colors, but you could set something like:
div.twocolorish {
background-color: green;
border-left: 20px solid red;
}
As long as you don't need text to go over the part in red then this would take care of you in one div.
I ended up with this solution using linear gradients:
.dualcol-test {
background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
}
<div class="dualcol-test"> This div has a green and red background <br><br><br> </div>
You can achieve 2 colors in 1 div by using pseudo-element :before
HTML:
<div class="twocolordiv"></div>
CSS:
.twocolordiv {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}
.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
You can use linear-gradient background to do this
background: linear-gradient(90deg, green 50%,red 50%);
No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.
This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.
<style type="text/css">
#ji { width: 500px; height: 300px;
background:
-moz-linear-gradient(green, green) 0px 0px no-repeat,
-moz-linear-gradient(red, red) 200px 50px no-repeat,
-moz-linear-gradient(blue, blue) 0px 250px no-repeat,
-moz-linear-gradient(gray, gray) 300px 125px no-repeat;
-moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
}
</style>
<div id="ji">
</div>
Give this a go :)
I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).
Edit: Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size
Using the :before css attribute allows you to 'fill' a div with the two colours.
.myDiv {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
/*Set width/height of the div in 'parent'*/
width: 100px;
height: 100px;
}
.myDiv:before {
content: "";
position: absolute; /*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
/*You can choose to align it left, right, top or bottom here*/
top: 0;
right: 0;
bottom: 60%;
left: 0;
background: red;
}
<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>
An easily edited sample can be seen LIVE DEMO
Using background-image / repeat-y is the easiest solution - however, maybe you want to change colours or widths or something with Javascript.
Here's a way to do this which allows text everywhere.
http://jsfiddle.net/WQ8CG/
HTML:
<div id="container"><div class="offset">text</div></div>
CSS:
#container {
background: #ccc;
border-right: 40px solid #aaa
}
.offset {
margin-right: -40px;
zoom: 1; /* to fix IE7 and IE6 */
position: relative /* to fix IE6 */
}
Better late then never. Thought this might help:
The htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this # http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
You could you inset box shadow, and change the shadow to whatever colour you required.
CSS
-moz-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);