I need to create a sidebar menu like this http://wrapbootstrap.com/preview/WB07061TJ, but I can't find the image asset of the current item (a white arrow).
How can I do this?
This is a CSS border triangle trick:
You can achieve this with a span element in absolute position where you want the arrow and the following class
.triangle {
display: inline-block;
width: 0px;
height: 0px;
border: 5px solid transparent;
border-right: 5px solid white;
}
As a side not: this "feature" is nothing bug an edge case of this http://jsfiddle.net/Xjmp5/
the arrow is made from 2 div-s
you can see the code ,he set the div width:0,height:0,line-height:0,font-size:0 to make sure the have no width and height
in this case ,if you set the border into 4 different colors ,you will see 4 triangles,in the shape of a square
what to do next is to set the border-left,border-top,border-bottom transparent .then you get a triangle,
the last thing you want to do is make another white triangle and cover it on the first one ,then you will get the arrow
I'm having trouble getting the z-index for my bottom triangle on the sidebar to work properly. I need it to be underneath the header box so I can see the 3D effect.. any ideas?
The site is - http://www.dunkleysdairy.com
The sidebar is on the right (with yellow heading)
The issue you are having is that you are trying to set the z-index of an element lower than the one it is nested in. This is not possible - see link for a graphical example:
https://developer.mozilla.org/en-US/docs/CSS/Understanding_z-index/The_stacking_context
What you need to do is make sure the element you want to move backwards is not a child descendant of the item you expect to go in front.
In your particular case you would be able to remedy this by applying your styling of .heading to the h2.
Alternatively, you might consider using a psuedo-element for this so you don't have to add extra divs. Your html would just be:
<div class="heading">Title goes here</div>
Then you would add to your current .heading styling with this rule (making sure to keep relative:positioning on your .heading but removing any z-index from it):
.heading:before{
content:" "; display:block; position:absolute;
border-color: transparent #dfb704 transparent transparent; border-style: solid; border-width: 15px;
height: 0px; width: 0px;
left: -15px; bottom: -15px;
z-index: -1;
}
This would set your triangle directly below your heading in the z-index stack.
Here's a quick example:
http://codepen.io/chrisboon27/pen/Fprxk
frame is a descendant of heading, and so the z-index property for frame affects it.
If you wish to provide them with a different z depth, you will need to place them on different branches of the DOM tree. For example: both can be child elements of block.
It seems that when you have an element with different sized/colored borders, you can see a very strange jagged line happening. I never noticed this before, but was looking at Vimeo's super hot new design when I noticed this (don't really want to say "glitch") weird occurrence.
So if you had a div hanging out, styled as in below, you'll notice a pixel stepping (almost like it's set to inset, rather than solid...)
div {
height : 25px;
width : 50px;
background : #eee;
border-style : solid;
border-color : green;
border-left-color : black;
border-width : 3px 3px 3px 15px;
}
Anyone notice this/ know why it happens?
The reason this happens is because it's creating a 'frame' around the box.
Think of a wooden picture frame, you don't use four rectangular pieces of wood to create a frame, you use 4 trapezoidal pieces and put them together. When you set a larger width on one side, its diagonally rendering it inward towards the corner of the box.
The reason it looks bad is because the antialiasing between borders has never been good.
Alternative
You could just do div:before{border-left: 15px solid #000;} if you didn't want the borders cropped like that.
That's not a "glitch" - it's how borders work. They connect diagonally.
If you take it one step further and create a <div> with no height and width, but a large border you can see the result - http://jsfiddle.net/mFzrA/
BTW - this is the technique being used to create pure CSS triangles and speech bubbles. You just make 3 of the borders transparent and the 4th gives you a nice triangle.
I just wanted to suggest using box-shadow on the border with bigger border-width to avoid "jagged line".
Works for me, hope it helps :)
div {
height : 25px;
width : 50px;
background : #eee;
border-style : solid;
border-color : green;
border-width : 3px 3px 3px 0px;
box-shadow:-15px 0px black;
}
I'm using GWT's StackLayoutPanel and trying to round the corners of its headers by applying border-radius attribute in the following CSS rule:
.mm-StackPanelHeader {
padding-left: 7px;
font-weight: bold;
font-size: 1.4em;
width: 200px;
border-radius: 5px 5px 0px 0px;
background: #d3def6;
border: 0.5px solid #bbbbdd;
}
When collapsing the header items, the borders don't cover over each other completely, showing ugly white cornered ends.
How to fix this?
Here's the output's snapshot, for a reference.
Assuming you're going for the old widgets' look n' feel, achieving the exact same result will inevitably involve replacing images and messing with the widgets' layout properties (e.g applying negative margins, altering offsets).
Having said that, I managed to get a quick CSS-based solution that seem to target your needs, and is free of further manipulations. I'm sure a more accurate solution is available, as this attempt is far from perfect, but it should provide you with a good starting point.
Abstract
To simulate the old widgets' looks:
Round up the top corners for the item headers.
Apply a background color to the underling container, to avoid those ugly white corners.
Use top round corners on that container as well, to avoid ugly blue corners on it as a result of the background color applied.
Reset the bottom padding of the header items to re-center their content.
Implementation
Add the following rules to your stylesheet:
.gwt-StackLayoutPanel,
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
background-color: #D3DEF6;
border-radius: 5px 5px 0 0;
}
.gwt-StackLayoutPanel .gwt-StackLayoutPanelHeader {
padding-bottom: 0;
}
Illustration
Here's an snapshot of the final result, as created by manipulating the CSS properties on the GWT showcase live example:
Well, StackLayoutPanel was a definitely a newer version than StackPanel.
But I used the latter in this case because there was no other way, and it worked like a charm!
Thanks to all!
What is the difference between border and outline properties in CSS?
If there is no difference, then why are there two properties for the same thing?
From: http://webdesign.about.com/od/advancedcss/a/outline_style.htm
The CSS outline property is a confusing property. When you first learn about it, it's hard to understand how it is even remotely different from the border property. The W3C explains it as having the following differences:
Outlines do not take up space.
Outlines may be non-rectangular.
In addition to some other answers... here are a few more differences I can think of:
1) Rounded corners
border supports rounded corners with the border-radius property. outline doesn't.
div {
width: 150px;
height: 150px;
margin: 20px;
display: inline-block;
position: relative;
}
.border {
border-radius: 75px;
border: 2px solid green;
}
.outline {
outline: 2px solid red;
border-radius: 75px;
-moz-outline-radius: 75px;
outline-radius: 75px;
}
.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}
<div class="border"></div>
<div class="outline"></div>
FIDDLE
(NB: Although firefox has the -moz-outline-radius property which allows rounded corners on outline... this property it is not defined in any CSS standard, and is not supported by other browsers (source))
2) Styling one side only
border has properties to style each side with border-top:, border-left: etc.
outline can't do this. There's no outline-top: etc. It's all or nothing. (see this SO post)
3) offset
outline supports offset with the property outline-offset. border doesn't.
.outline {
margin: 100px;
width: 150px;
height: 150px;
outline-offset: 20px;
outline: 2px solid red;
border: 2px solid green;
background: pink;
}
<div class="outline"></div>
FIDDLE
Note: All major browsers support outline-offset except Internet Explorer
Further to other answers, outlines are usually used for debugging. Opera has some nice user CSS styles that use the outline property to show you where all the elements are in a document.
If you're trying to find out why an element isn't appearing where you expected or at the size you expected, add a few outlines and see where the elements are.
As already mentioned, outlines do not take up space. When you add a border, the element's total width/height in the document increases, but that doesn't happen with outline. Also you can't set outlines on specific sides like borders; it's all or nothing.
tldr;
The W3C explains it as having the following differences:
Outlines do not take up space.
Outlines may be non-rectangular.
Source
Outline should be used for accessibility
It should also be noted that outline's primary purpose is accessibility. Setting it to outline: none should be avoided.
If you must remove it it maybe a better idea to provide alternative styling:
I’ve seen quite a few tips on how to remove the focus indicator by using outline:none or outline:0. Please do not do this, unless you replace the outline with something else that makes it easy to see which element has keyboard focus. Removing the visual indicator of keyboard focus will give people who rely on keyboard navigation a really hard time navigating and using your site.
Source: "Do Not Remove the Outline from Link and Form Controls", 365 Berea Street
More Resources
http://outlinenone.com/
A practical use of outline deals with transparency. If you have a parent element with a background, but want a child element's border to be transparent so that the parent's background will show through, you must use "outline" rather than "border." While a border can be transparent, it will show the child's background, not the parent's.
In other words, this setting created the following effect:
outline: 7px solid rgba(255, 255, 255, 0.2);
From W3 School Site
The CSS border properties allow you to specify the style and color of an element's border.
An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
The outline shorthand property sets all the outline properties in one declaration.
The properties that can be set, are (in order): outline-color, outline-style, outline-width.
If one of the values above are missing, e.g. "outline:solid #ff0000;", the default value for the missing property will be inserted, if any.
Check here for more information :
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
Border is created inside the element, where as outline is created outside the element. So border is computed along with the width and height of the element, while outline draws outside the element.
A little bit of an old question, but worth mentioning a Firefox rendering bug (still present as of Jan '13) where the outline will render on the outside of all child elements even if they overflow their parent (through negative margins, box-shadows, etc.)
You can fix this with:
.container {
position: relative;
}
.container:before {
content: '';
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: 1px solid #ff0000;
}
Super unfortunate that it's still not fixed. I much prefer outlines in many cases since they do not add to the dimensions of an element, saving you from always having to consider border widths when setting dimensions of an element.
After all, which is simpler?
.container {
width: 960px;
height: 300px;
outline: 3px solid black;
}
Or:
.container {
width: 954px;
height: 294px;
border: 3px solid black;
}
It is also worth noting, that W3C's outline is IE's border, since IE does not implement W3C box model.
In w3c box model, the border is exclusive of element's width and height. In IE it is inclusive.
Differences between border and outline:
Border is part of the box model so it counts against the element's size.
Outline is not part of the box model so it doesn't affect nearby elements.
Demo:
#border {
border: 10px solid black;
}
#outline {
outline: 10px solid black;
}
<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>
Other differences:
The outline is displayed outside the border.
Outlines cannot have rounded corners; borders can.
I've made a little piece of css/html code just to see the difference between both.
outline is better to inclose potential overflowing child elements, especially into an inline container.
border is much more adapted for block-behaving elements.
Fiddle for you sir!
The outline property in CSS draws a line around the outside of an element. It's similar to border except that:
It always goes around all the sides, you can't specify particular
sides It's not a part of the box model, so it won't effect the
position of the element or adjacent elements
Source: https://css-tricks.com/almanac/properties/o/outline/
As a practical example of using "outline", the faint dotted border that follows the system focus on a webpage (eg. if you tab through the the links) can be controlled using the outline property (at least, I know it can in Firefox, not tried other browsers).
A common "image replacement" technique is to use, for example:
<div id="logo">Foo Widgets Ltd.</div>
with the following in the CSS:
#logo
{
background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
display: block;
text-indent: -1000em;
}
The problem being that when the focus reaches the tag, the outline heads off 1000em to the left. Outline can allow you to turn off the focus outline on such elements.
I believe that the IE Developer Toolbar is also using something like outline "under the hood" when highlighting elements for inspection in "select" mode. That shows well the fact that "outline" takes up no space.
think about outline as a border that a projector draw outside something as a border is an actual object around that thing.
a projection can easily overlap but border don't let you pass.
some times when i use grid+%width, border will change the scaling on view port,for example a div with width:100% in a parent with width:100px fills the parent completely, but when i add border:solid 5px to div it make the div smaller to make space for border(although it's rare and work-aroundable!) but with outline it doesn't have this problem as outline is more virtual :D it's just a line outside the element
but the problem is if you don't do spacing properly it would overlap with other contents.
to make it short:
outline pros:
it doesn't mess with spacing and positions
cons:
high chance of overlapping
Google web.dev has a good explaintion for Box Model.
The border box surrounds the padding box and its space is occupied by the border value. The border box is the bounds of your box and the border edge is the limit of what you can visually see. The border property is used to visually frame an element.
The margin box, is the space around your box, defined by the margin rule on your box. Properties such as outline and box-shadow occupy this space too because they are painted on top, so they don't affect the size of our box. You could have an outline-width of 200px on our box and everything inside and including the border box would be exactly the same size.
Copied from W3Schools:
Definition and Usage
An outline is a line that is drawn
around elements (outside the borders)
to make the element "stand out".