I want to put a specific border like below around my element.
How can I do this with css.
I use this css for showing a border around an element:
.ui-selected {
-moz-box-shadow: 0 0 1px 1px black;
-webkit-box-shadow: 0 0 1px 1px black;
box-shadow: 0 0 1px 1px black;
}
But I want to show border like in the image. Is this possible?
I want to put those eight square around an element.
I use $('#element').addClass('ui-selected') to add
and $('#element').removeClass('ui-selected') to remove.
I want css classes, is it possible
Here is the solution:
box-shadow: 2px 2px 1px 0 #666;
border-top: 1px solid white;
border-left: 1px solid white;
You can see on JSFiddle.
You can specify a different colour for each side, using the border-(top|lef|right|bottom)-color property to add the highlights/shadows. The corners will be mitred accordingly.
Border-top-color
You may then try to use individual CSS3 border images placed at the corners to acheive the black squares.
border images
For the drag handles: although you could place them there with CSS, you would not be able to attach event handlers to them, nor change the mouse cursor when it goes over them.
To get both of these, you need the dots to be actual elements. See this example for one way to position corner elements. Cached for StackOverflow posterity (in the unlikely event that my site is down):
<html lang="en"><head>
<title>Positioning Images</title>
<style type="text/css">
.compass { position:relative }
.compass .north,
.compass .south,
.compass .east,
.compass .west,
.compass .center { width:15px; height:15px; position:absolute; left:50%; margin-left:-8px; top:50%; margin-top:-8px; cursor:pointer }
.compass .north { top:0; margin-top:0 }
.compass .south { bottom:0; top:auto; margin-top:0 }
.compass .east { right:0; left:auto; margin-left:0 }
.compass .west { left:0; margin-left:0 }
</style>
</head><body>
<div class="compass">
<!-- your element here -->
<img class="north west" src="c1.png" alt="resize">
<img class="north east" src="c2.png" alt="resize">
<img class="south east" src="c3.png" alt="resize">
<img class="south west" src="c4.png" alt="resize">
<img class="north" src="up.png" alt="resize">
<img class="south" src="dn.png" alt="resize">
<img class="east" src="rt.png" alt="resize">
<img class="west" src="lt.png" alt="resize">
</div>
</body></html>
You could experiment with pseudo elements:
div:after {
content: '\25A0\25A0\25A0 \25A0\25A0\25A0 \25A0\25A0\25A0';
position: absolute;
top: -37px;
left: -5px;
width: 100%;
height: 100%;
text-align: center;
line-height: 75px;
letter-spacing: 67px;
}
This looks good in Webkit, and is a few pixels off in Firefox.
Demo
Related
I have a problem where I need to make a border-bottom, with a given offset in CSS
for example, in this JSFiddle, I have a black border-bottom.
https://jsfiddle.net/uexma4o6/343/
<div style="border-bottom: 2px solid black; width:500px; height:40px; background-color:lightcoral"></div>
but I want to give an offset to this 2px solid black border to be 5px above from where it is.
Is it possible?
This can be done with a linear-gradient:
.box {
background:
linear-gradient(black,black) 0 calc(100% - 5px)/100% 2px no-repeat,
lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
You can also do it like this:
.box {
background:
linear-gradient(black,black) bottom/100% 2px no-repeat,
lightcoral;
border-bottom:5px solid lightcoral;
width: 500px;
height: 40px;
box-sizing:border-box;
}
<div class="box"></div>
Another idea with box shadow:
.box {
background:lightcoral;
border-bottom:2px solid black;
box-shadow:0 5px 0 lightcoral;
width: 500px;
height: 40px;
}
<div class="box"></div>
And with inset shadow:
.box {
background:lightcoral;
box-shadow:
0 -5px 0 lightcoral inset,
0 -7px 0 black inset;
width: 500px;
height: 40px;
}
<div class="box"></div>
Solution
https://jsfiddle.net/StephanieSchellin/j7pmxkc3/
Use CSS ::after to add a pseudo element that has the border you are looking for. Then move the pseudo element around to position it how you like. This pseudo element will always be tied to its root element but you still have to take into account modifying it for #media query changes and such.
You see in the image below that this solution is layering the pseudo element over the root one. You can choose to use ::before or experiment with other positioning setups to accommodate your layout needs.
Always do plenty of cross browser testing when doing edge case things like this because its possible you will run into box model issues.
HTML
<div class='the-div'></div>
CSS
.the-div {
width:500px;
height:40px;
background-color:lightcoral;
position: relative
}
.the-div::after {
border-bottom: 2px solid black;
content: '';
width:500px;
position:absolute;
bottom:5px;
}
Further Reading
See https://css-tricks.com/pseudo-element-roundup/
There are lots of cool things you can do with pseudo elements.
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/
I am hoping someone can help me with a css problem...
I am using a listview to display some results, there is required to be a concept of grouping, to achieve this i am using 2 background colors alternating between groups. I am trying to add a border to these elements, but as the border-top and the border-left may be different colors, is there any way of removing the triangle where they meet?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p
{
border-top:10px solid red;
border-left:10px solid white;
border-bottom-style:dotted;
border-left-style:solid;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can write like this:
p{
width:200px;
height:200px;
background:red;
border-left:5px solid pink;
-moz-box-shadow:inset 0 5px green;
box-shadow:inset 0 5px green;
}
Check this http://jsfiddle.net/nRWux/1/
box-shaow not work in IE8 & below.
Here's a solution compatible with IE8+ using :before pseudo:
Fiddle http://jsfiddle.net/PhilippeVay/hXrW5/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
position: relative;
border-top:10px solid red;
border-bottom-style:dotted;
border-left-style:none;
}
p:before {
content: '';
display: block;
width: 10px;
position: absolute;
top: -10px; /* top: 0; if you want red over blue (top over left) */
bottom: 0;
background: blue;
}
</style>
</head>
<body>
<p>2 different border styles.</p>
</body>
</html>
You can use box-shadow for the border-top,
In your example: http://jsfiddle.net/C7jnJ/
margin-top:10px;
box-shadow:0 -10px 0 10px red;
Instead of border-top. The margin-top is added because the shadow is displaying outside the 'p', If you would like it inside, then it would be: http://jsfiddle.net/C7jnJ/1/
box-shadow:inset 0px 10px 0px red;
No, it is not possible to remove the triangle where they meet. borders are implemented that way and there is no way around.
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}