I have a page where I want the border to home more than one line.
h2.bord
{
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
}
This (when used) displays a border around the text.
However,
I want to home more than I one line in this border.
Help?
use a div with border and inside that place this h2 bord
Is border-style:double; what you are looking for?
Alternatively, if you wanted more than a double border's, or borders of multiple styles you could use multiple nested divs, e.g.
<style>
.inset-border { border: 4px inset Black; }
.double-border { border: 4px double Black; }
</style>
<div class="inset-border">
<div class="double-border">
<h2>content</h2>
</div>
</div>
Standard CSS borders only support at the very most a double line (see #Jaimal's answer).
If you need more than that, you need to try the following:
Additional markup: ie more container elements, each with their own border.
Use :before and :after and give them a border. Done right, they should wrap around the original box and give you extra borders. Won't work in IE6 or IE7.
Use the outline property in addition to the border. Outline works very similarly to border, but does have some slight differences. It can give you a third border box though, if used in addition to border-style:double;. Note that it might not work in older browsers.
CSS3 border-image. Using this, you can define your own graphics for the border, which means you can define as many lines as you like. Note: this definitely won't work in older browsers; it's only a fairly recent addition to CSS.
Use background-image to fake it. If you know the size of your box, this might be the simplest and most cross-browser compatible way to do it. Not so useful if you don't know the size of the box in advance though.
Hope that helps.
I'm assuming you're trying to achieve an 3d/'raised' type of border; if that's so, then you could simply use the border-style: groove: JS Fiddle demo.
However, if you're able, you could use the ::after pseudo-element, and an outset border-style:
h2.bord {
border-style:inset;
border-width:8px;
border-color:green;
background-color:black;
color:white;
text-align:center;
position: relative; /* in order to position the pseudo element relative to the parent */
margin: 8px; /* to move the edges of the element from the container element in order to see the borders of the pseudo-element */
}
h2.bord::after {
content: '';
position: absolute;
top: -16px;
left:-16px;
right: -16px;
bottom: -16px;
border: 8px outset green;
}
JS Fiddle demo.
Related
Before flagging this as already asked, pls read the whole scenario. Thanks
SHORT VERSION :
Just to clearly state what i am trying to achieve, here's the page https://www.facebook.com/MercedesBenzPolska/ and I want to add border to the target element (on which i am hovering), whether it be <div> or <img> or <p>, without the shaking
DETAILED VERSION
Webpage in question: Any of Facebook's page.
Requirement: Moving a cursor over an element should add border to the target element [only on hover therefore temporary border not permanent]. Permanent border will be added ONLY if I click on that element. [Simply, if I hover over an element it will be highlighted with, say, pink border and only when i click on it, a green border would be added]
Initial problem: adding border on elements on hover would make the whole page's structure shaky, since I am constantly adding and removing the border. For that what I did was add a transparent 1 px border to all the elements of the page, and on hover just change the color of the border from transparent to pink; thus no shaky.
Present problem: The above solution was working for all the pages till I encountered Facebook's page. It turns out adding the initial 1 px border totally disrupts the structure i.e. the look and feel of the page. DIVs move from somewhere to somewhere else.
How do I now solve my original problem? Is there a way of, maybe like, applying a negative margin or border, so that adding the extra 1 px border does not dirupt the page's structure? I don't know I am just suggesting. Pls help
[SCREENSHOTS]
1. this is when the page loads [without applying the border]
2. Now when I hover over the div containing image ie adding 1 px border on hover, the divs move here and there
css I am using
* { border: 1px solid transparent !important;} //when page loads
.hover-selected{ border: 1px solid #e42a78 !important;} //on hover border
.option-selected:hover { border: 3px solid #529c56 !important;cursor: default;} //when option is selected
The images and the css both reflect towards the same problem, the default 1px transparent border disrupts the page's css and If I don't do that, the on hover border application becomes shaky and the page's css anyway gets disrupt
box-shadow: 0px 0px 0px 1px #000;
Use box shadow instead border. Box-shadow don't take up space.
div {
width:300px;
height:300px;
background: red;
}
div:hover {
box-shadow: 0px 0px 0px 1px #000 inset;
}
<div> Test </div>
outline is perfect for this. It works in a very similar way to border but does not effect layout at all.
div:hover {
outline: 1px solid orange;
}
<div>
Lorem ipsum sit amet.
</div>
<div>
<img src="https://placehold.it/200x100">
</div>
<div>
Lorem ipsum sit amet.
</div>
you can use box-sizing property in css. Try below code with and without box-sizing property
<div class="item">
</div>
.item {
box-sizing: border-box;
height: 50px;
width:50px;
background:red;
}
.item:hover{
border:1px solid black;
}
I would start from something like this and move from there:
*:hover:last-child:before {
display:block;
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
border:2px solid red !important;
}
Using a pseudo-element instead of putting a border on the actual object might not create as many issues with the initial layout. Still not exactly what you asked for, but I believe it's at least a bit closer. :-)
EDIT
I believe that the only way to achieve this as good as possible would be to be less greedy when selecting elements in the CSS, and specify a list like so:
a:hover:before,
img:hover:before{
display:block !important;
content:"" !important;
position:absolute !important;
top:0 !important;
bottom:0 !important;
left:0 !important;
right:0 !important;
border:2px solid red !important;
}
How do I create distance between the text and the border below the text as shown in the image attached using sass/css?
I want the distance to be 5px and the font-size of the text to be 15px.
I tried doing
.selected {
color: #284660;
}
.selected:after {
content: '';
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 5px;
border-bottom: 2px solid #284660;
}
but that created a border that was too wide.
I feel couple of things which can be improved in the above snippet.
You may not need psuedo element for desired effect
You should not use absolute positioning for that , in case you want to use psuedo element
In any case you can try this out.
&.selected {
color: #284660;
border-bottom: 2px solid #284660;
padding-bottom:10px ; // this should give you some spacing.
}
Try a negative
{
bottom: -5px;
}
Besides the complete lack of knowledge of your DOM profile or what element the & refers to, if you just slap a border and padding on an inline element, you'll have the effect you want.
No need to play with pseudoelements.
<span style="padding-bottom:5px; border-bottom:2px solid black;">Some Text</span>
Obviously, you should put that styling info in the css file, I merely inlined it for the example.
Oh and next time, please include sample HTML with your sample CSS. Only reason I even bothered was because the solution was as simple as "What is padding for 15, Trebek?"
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I recently worked on creating an element with some text inside it, but it has to be flag based shaped. I googled and found below nice css to achieve it. They basically created small triangles out of div(pointing to left/right/top/bottom) using css and attaching it with adjacent div.
However,I did not find any answers with the logic mentioned thus making me little confused about the triangle creation out of div using CSS.
I wanted to know how that css works, specifically for arrow-left class used below.
HTML:
<div class='element'>
<p>OFFER</p>
<div class="arrow-left"></div>
</div>
CSS:
.element{
background-color:#E47911;
display:inline-block;
position:relative;
padding:2px 15px 2px 10px;
color:white;
line-height:18px;
}
p{
font-size:10px;
margin:0;
}
.arrow-left {
width: 0;
height: 0;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid white;
display:inline-block;
position:absolute;
top:0px;
right:0px;
}
Here's the codepen link: http://codepen.io/anon/pen/JGvBpN
Any pointers is much appreciated! Thanks.
It doesn't create a triangle so much as it appears to given how border intersections are rendered at an angle.
.arrow-left {
width: 0; /* unnecessary, but does override any unexpected width */
height: 0; /* unnecessary, but does override any unexpected height */
/* These set up the intersecting borders, set each one to a different color to see the borders forming the "triangle" e.g. red, green, blue */
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-right: 11px solid white;
display:inline-block; /* unnecessary, you're taking the elemtn out of the document flow when you absolute potiion it and the div id a block level element anyway, but to correctly have a border you'll need this so it's a decent safeguard */
/* this takes the element out of the document flow and positions it absolutely within the nearest positioning parent, in this case, the relatively positioned parent */
position:absolute;
/* this moves it to the top right edges of the positioning parent*/
top:0px;
right:0px;
}
Here'es an illustration of the box in chrome's dev tools, pulled out of position to make the effect of what's going on made more obvious:
And here it is with positioning restored:
Note that the part you think is transparent is actually opaque so this isn't masking any part of the orange checkout block; it would be obvious that you drew a white part there if the background of the underlying page were not also white.
For what it's worth, it may be worth looking into using an image or SVG and CSS masking to actually "cut" part of the button out, but you'll need to check the user agent support for your needs or try some work arounds.
Alright, of course I understand why this is happening, I'm just hoping there's some creative solution. Let's say I have this element:
.element {
padding:0 1px;
}
.element:hover {
font-weight:bold;
}
It's crucial that the padding be in place for visual consistency, but is there some magical way I'm not aware of to lock the element's width down before engaging in the hover behavior?
No JavaScript allowed, unfortunately.
JsFiddle:
http://jsfiddle.net/M9V3Q/
More Info
The client is extremely specific about what they want on certain parts of the site, and the nav is one of them, much to my frustration. They insist on hover being black text on a dark shade of red used in their logo, and they want the buttons to be centered. Since different browsers render text differently, the only way to create a consistent look is to use padding to create the width. Unfortunately, with normal font weight the black is very difficult to read.
You can use this approach:
#hoverEle {
width: 100px;
}
#hoverEle {
display:inline-block;
border:1px solid black;
padding:3px;
text-align: center;
}
#hoverEle:hover {
font-weight:bold;
}
Fiddle: http://jsfiddle.net/M9V3Q/4/
Cons is fixed width.
By the way, I think it is bad idea to focus buttons like this. More beautifull for user will be simple color change (e.g. #ccc) and, probably, transition effect. I think it is much more better.
Try this fiddle: http://jsfiddle.net/M9V3Q/9/
I think it is much more beautifull even in this variant :)
Try something like:
.element {
padding: 0 1px;
border: 2px solid transparent;
}
.element:hover {
font-weight: bold;
border: none;
}
A fiddle: http://jsfiddle.net/F4knz/
Could always try CSS3 box-sizing. It cuts into the elements width etc for padding, border..., and so prevents the element from expanding outside its set width.
Need to prefix -moz- or -webkit- for Firefox and safari.
Right now we have a web page with a bunch of link sections on one page. Each section has a header like so:
This header background is actually two images. The first is just a rectangle and the second has the slanted side on it. As I was looking at this solution, I was wondering if I could solve this with CSS instead of images. While I am not a CSS guru, I did look at a number of examples and was able to get something similar working. However, when I attempt to put text on top of the background, it ends up above the color instead of inside it. The CSS I have also has a fixed size, which is less than idea. I would rather specify a percentage of the available area and have it fill in the color.
Here is the code I've been working with:
<STYLE type="text/css">
.mini_banner
{
display:inline;
border-bottom:30px solid blue;
border-left:0px solid transparent;
border-right:30px solid transparent;
}
</STYLE>
I wanted to apply this to a cell in a table. I also don't want to break compatibility with modern browsers. My "customers" (mostly internal people) are going to be primarily on IE8 or later but I don't want to limit myself if I can help it.
So first, is this possible? Second, how would I accomplish this? And third, is there a way to make it relative in scale instead of fixed?
I would say that you'll have less headaches all the way around if you revert to using a single background image - in this case, a white image with the notch cut out (a PNG-24 with alpha transparency). Make it bigger than you think you need by about 200%, then do something like this:
.minibanner {
background: blue url(..images/notch.png) no-repeat middle right;
font-size: 1.5em;
}
The reason is that relying on border sizes may result in some whackiness across browsers, and it will definitely look weird if any element runs to two lines.
If you make the notch image 200-300% larger, but vertically align it in the middle of the background, and you do increase the font-size, the box will grow, but your white notch will grow right along with it.
UPDATE:
The only other way I can see pulling this off is to add a non-semantic element, such as a or something similar, after your text:
<div>
<p>Hello text</p>
<span></span>
</div>
Then in your CSS:
p {
background: blue;
color: white;
float: left;
padding: 0 20px;
height: 50px;
margin:0;
line-height: 50px;
}
span {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 0px solid transparent;
display: inline-block;
border-left: 50px solid blue;
}
See this JSFiddle.
The shape is based on this tutorial on CSS triangles. Now, I've only tried this on a webkit based browser, and it works. You will have to adjust the heights every time you want to change font size, so that is a drawback.
I made it work without an extra span: jsFiddle
.mini_banner
{
width:18em; height:1.5em;
color:white; font-weight:bold; padding-left:0.5em;
margin-bottom:.5em;
}
.mini_banner:before {
display:inline-block; content:''; overflow:hidden;
width:17em; height:0;
margin-bottom:-1.5em; margin-left:-.5em;
border-bottom:1.5em solid blue;
border-right:1.5em solid transparent;
}
Tested in FF, Safari, Opera and IE. (Works in IE8, but not in IE7)