Hi I have a CSS code with the following style property.
.spotlight{
border-left: 21px solid #ffb80d;
}
I need to move the spotlight to right for RTL changes.I need to add a change like
.locale-right-to-left .spotlight {
border-right: 21px solid #ffb80d;
}
But if I make this change there will be 2 spotlights on both sides of the text. Is there a way where I can ignore the border-left property ?
.locale-right-to-left .spotlight {
border-right: 21px solid #ffb80d;
border-left: 0;
}
If you use :
element {
direction:rtl;
}
then draw your border from a pseudo-element:
element {
direction:rtl;
}
element .spotlight{
position:relative;
}
element .spotlight:before {
position:absolute;
left:auto; /* no need*/
right:auto; /* no need*/
top:0;
bottom:0;
border-left: 21px solid #ffb80d;/* or border-right */
}
The position of :before will relay on direction
Define border-left 0
.locale-right-to-left .spotlight
{
border-right: 21px solid #ffb80d;
border-left: 0;
}
Related
I have a Bootstrap list-group that looks like:
This is my CSS:
$border: 1px solid rgba(0, 0, 0, 0.125);
.customer-orders-filters {
.list-group {
box-shadow: $card-box-shadow;
color: $text-color;
font-weight: bold;
.list-group-item {
border-left: none;
border-right: none;
border-bottom: $border;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: none;
}
&.active {
border-left: 5px solid $blue;
}
}
}
}
As you can see, the border-left bottom is not very right.
I tried to remove the border-bottom on the first-child, then add a border-top to the nth-child(2) but that doesn't work, the border-top is not present. I also tried to set a border-style: outset to the border-bottom of the first-child but without effect.
I would like that the border-left be totally above or totally under the border-bottom, but not half...
Do you know how could I fix it? Should I use a pseudo-element?
Consider using a background and border like below:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
background:linear-gradient(blue,blue) left/5px 100% no-repeat;
}
<div class="box"></div>
Or the opposite:
.box {
width:200px;
height:50px;
padding-bottom:2px;
border-left:5px solid blue;
background:linear-gradient(red,red) bottom/100% 2px no-repeat;
}
<div class="box"></div>
You can also do with box-shadow:
.box {
width:200px;
height:50px;
padding-left:5px;
border-bottom:2px solid red;
box-shadow:5px 0 0 blue inset;
}
<div class="box"></div>
It looks like the problem is being caused by Bootstrap adding "margin-bottom: -1px;" to the .list-group-item class. Overwriting that rule (and moving the border line to the bottom) seems to fix the issue. (At least in Chrome, I didn't test other browsers.)
Ex:
.list-group-item {
border-left: none;
border-right: none;
border-top: $border !important;
border-bottom: 0;
margin-bottom: 0;
... etc ...
Pen: https://codepen.io/anon/pen/moyOGg
Note that making this change may have other consequences (the Bootstrap devs must have put that -1px margin rule in there for a reason) so you'll need to do some more testing!
I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
Is it possible to recreate a box like this without using background images and only one element?
Ideally, I'd be able to control which corners are darkened by adding a class, so the above image might be class="box dark-top dark-left dark-bottom dark-right". I can darken two by using :before and :after, but am having problems thinking of a good way to darken three or four corners without adding additional markup.
Here's a way to darken all four corners with one element, though I haven't figured out how to darken specific corners yet. But my theory was to have the original border as the dark border, and then /lighten/ the sides of the box with pseudo-elements.
Fiddle: http://jsfiddle.net/KZSLH/
.box {width:236px; height:236px; border:1px solid #333; position:relative;}
.box:before {content:""; display:block; width:200px; height:236px; position:absolute; top:-1px; left:18px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.box:after {content:""; display:block; width:236px; height:200px; position:absolute; top:18px; left:-1px; border-left:1px solid #ccc; border-right:1px solid #ccc;}
It's far from perfect, but this is the only way I could think of to do something like that... You'll want to play around with the border thickness, border radius and which borders are rounded to really have it suit your needs
The only thing I couldn't figure out is how to get the edges of the corners to be sharp rather than tapering off... Maybe someone could contribute that part?
First, start off with two overlapping div elements:
<div id="thick" />
<div id="thin" />
Then, use rounded corners and relative positioning to taper off and create the "bold" corners.
#thick {
position:absolute;
top:50px;
left:50px;
height:100px;
width:100px;
background-color:white;
border:3px solid black;
}
#thin {
position:relative;
top:-2px;
left:-2px;
height:104px;
width:104px;
background-color:white;
border-radius: 15px;
}
Here is a fiddle: http://jsfiddle.net/bGrdA/
And credit to this post for giving me the idea.
I think I figured it out. The key is that there must be content inside of the box in it's own element, which will always be the case my scenario.
Example: http://jsfiddle.net/n7pgP/
The classes that can be added to the box are:
dtl = darken top left
dtr = darken top right
dbl = darken bottom left
dbr = darken bottom right
Some thing this can be tried out for two elements
http://jsfiddle.net/V8jmR/
#content {position:relative;width:400px;height:300px;}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
content: ' ';
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
Original answer
CSS - show only corner border
The only possibility I know is in using additional elements:
<div class="box">
<span class="darkTopLeft"></span>
<span class="darkTopRight"></span>
<span class="darkBottomLeft"></span>
<span class="darkBottomRight"></span>
</div>
.box {
background-color: #fff;
border: 1px solid #ccc;
height: 100px;
position: relative;
width: 100px;
}
.box > span {
height: 10px;
position: absolute;
width: 10px;
}
.darkTopLeft {
border-left: 1px solid #000;
border-top: 1px solid #000;
left: -1px;
top: -1px;
}
.darkTopRight {
border-right: 1px solid #000;
border-top: 1px solid #000;
right: -1px;
top: -1px;
}
.darkBottomLeft {
bottom: -1px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
left: -1px;
}
.darkBottomRight {
bottom: -1px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
right: -1px;
}
http://jsfiddle.net/cM7xU/
Whenever I try to set left and right border for an inline-block element in my code, it won't work unless I set all.
border:2px solid black; /* does work */
border:0 2px solid black; /* doesn't work*/
Any idea?
the relevant part of CSS:
#highlights2{
width:640px;
text-align:left;
}
#highlights2 .highlight{
width:211px;
display:inline-block;
height:100px;
background-color:#0dc1d0;
}
#centerhighlight{
border:0 2px solid rgba(0,0,0,0.5);
border:2px solid black;
}
and HTML:
<div id="highlights2"><div class="highlight">asd</div><div style="" class="highlight" id="centerhighlight">fgh</div><div class="highlight">jkl</div></div>
This syntax is not valid for defining borders. If you want different styles for vertical and horizontal borders you need to write it longhand, for example:
border: 2px solid black;
border-top-width: 0;
border-bottom-width: 0;
If you want to use the shorthand for border width, you can use this:
border-width:0 2px;
border-style: solid;
border-color: black;
jsFiddle
I tried the following code css3 style for 5 px wide horizontal line
<hr style=" border: solid 1px red;padding-top:10px; margin:25px auto 15px auto;clear:both" />
but I am getting 5px wide red rectangle.
Please advise me with a proper CSS3 style code.
As long as the element has the right width, a simple:
border-bottom:5px solid red;
Will do the trick.
You should use width and height properties instead of border:
width: 5px;
height: 1px;
color: red;
http://www.sovavsiti.cz/css/hr.html
Just use the "border-width" property and set it to 5px.
<hr style="border-width: 5px !important;">
Get rid of the top-padding, and use the border-bottom suggested above... http://jsfiddle.net/ZdLfJ/
My CSS for HR Line Styling;
.line_height { height:4px; }
.line_width { width:100%; }
.line_hcenter { margin-left: auto; margin-right: auto; }
.line_vcenter { margin-top: 10px; margin-bottom: 10px; }
.line_color { color:black; }
.line_bgcolor { background-color:black; }
.line_bordercolor { border-top: solid black; border-bottom: solid black; }
Add these classes to the hr tag.
All three color ( color , bgcolor, bordercolor ) classes are needed to get a solid colored line across.
Classes .color and .bgcolor needed for browser cross compatibility or else you just get double lines.
Dont use any other thing after border property just make 5px instead of 1 px in border.
I.e