I'm using Twitter Bootstrap and some custom css (found here) to have dropdown menus open up on mouseover.
I am using the "caret" on a on the root menu items to show the user there is more options available, I would like to use a sideways version of this for the sub menus, in that example they use a -> image however I don't think it really fits in with the rest of the UI.
I've also tried the play icon twitter has but it doesn't quite match either.
Just switch up the borders (see fiddle):
HTML
<b class="caret-right"></b>
CSS
.caret-right {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
border-left: 4px solid;
display: inline-block;
height: 0;
opacity: 0.3;
vertical-align: top;
width: 0;
}
I do it by adding a class that simply modifies the border styles to point the caret to the right. That way you can toggle a caret right/down by adding/removing the modifying class.
HTML:
<span class='caret caret-right'></span>
CSS:
.caret-right {
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
Use the bootstrap (3.0) Glyphicons
<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP -->
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN-->
As user2661940 said you can use glyphicons for Bootstrap 3 or you can also make your own class for every side.
For example
.caret-right {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-left: 4px solid;
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
}
I use these styles to do that (it works without bootstrap as well)
HTML:
<span class="caret up"></span>
<span class="caret right"></span>
<span class="caret down"></span>
<span class="caret left"></span>
CSS:
.caret {
border: 5px solid transparent;
display: inline-block;
width: 0;
height: 0;
opacity: 0.5;
vertical-align: top;
}
.caret.up {
border-bottom: 5px solid;
}
.caret.right {
border-left: 5px solid;
}
.caret.down {
border-top: 5px solid;
}
.caret.left {
border-right: 5px solid;
}
Another option for anyone using font awesome:
<i class="fa fa-caret-right" aria-hidden="true"></i>
I added a rotation class to the span
HTML:
<span class="rotate270 caret"></span>
CSS:
.rotate270 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
You can obviously create other angle classes as desired.
you can use simple code:
HTML
<span class="caret"></span>
CSS:
.caret{
border-color:#ffffff transparent transparent transparent;
border-width:4px;
border-style:solid;
content: ""
display:inline-block;
}
Just add the css to rotate the caret on mouse hover
.navbar-nav>li>.dropdown-menu{
display:block;
visibility:hidden;
}
.navbar-nav>li:hover>.dropdown-menu{
visibility:visible;
}
.navbar-default .navbar-nav>li:hover>a .caret{
transform:rotate(-90deg);
transition:all 0.3s ease-in-out;
}
Related
I want to fix the classic bootstrap style hamburger button on my navbar, like the one that appears as a toggle button when the screen size gets sufficiently small.
Anyways, how can I display the button as is, without having to implement it through the navbar-toggle class?
EDIT: Here is the button I have:
<div>
<div class="center">
<button type="button" class="btn">☰</button>
</div>
</div>
body {
background: #222;
}
.center {
width: 100px;
margin: 50px auto;
}
.btn {
background-color: #222;
border: 1px solid #3A3A3A;
color: #D3D3D3;
width: 42px;
margin-left: 42px;
font-size: 23px;
height: 34px;
transition: color 0.45s;
transition: border 0.45s;
}
button.btn:hover {
color: #2978E0;
border: 1px solid #61A5FF;
}
https://jsfiddle.net/rstty1ye/
Using a UTF-8 character was mentioned on tutsplus.com
It's not my original finding or idea.
Nevermind, I figured it out.
Created a custom button and used an UTF-8 character: Trigram for Heaven for the bars.
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 using this code to generate a css only speech bubble :-
li.selected{
background-color: blue;
a{
color: white;
}
}
li.selected:after{
content: "";
position: absolute;
top: 33%;
left: 390px;
border-top: 10px solid transparent;
// border-top-color: inherit;
border-left: 10px solid blue;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
}
While this works fine, the triangle gets left when I move to the next li item as it has got a fixed position, how do I move the triangle as well?
here is my html code :-
<ul>
<li class='selected'>
Credits
</li>
<div class='line-separator'></div>
<li>
Change Password
</li>
<div class='line-separator'></div>
<li>
Investor Status
</li>
</ul>
Instead of using position:absolute to the arrow, you need to change it to relative position so that the arrow would position itself relatively to the .selected menu item.
See the demo here.
Note: Replace the :hover selector with the .selected class.
you have useful this css
/* Bubble with an isoceles triangle
------------------------------------------ */
.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
/* css3 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}
/* creates triangle */
.triangle-isosceles:after {
content:"";
display:block; /* reduce the damage in FF3.0 */
position:absolute;
bottom:-15px;
left:50px;
width:0;
border-width:15px 15px 0;
border-style:solid;
border-color:#f3961c transparent;
}
Please find this css class to create simple uparrow downarrow left arrow and right arrow.
<html>
<style>
.left {border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.right {border-bottom: 10px solid transparent;
border-left: 10px solid red;
border-top: 9px solid transparent;
float: left;}
.top{ border-color: black transparent transparent;
border-style: solid;
border-width: 11px 7px 10px;
float: left;}
.bottom {border-color: transparent transparent black !important;
border-style: solid;
border-width: 0 27px 19px 25px;
float: right;}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>
Class left means Leftward arrow.,
Any one please suggest me the better way of creating arrows using simple css
The solution you have presented in your question is the best one if you care about IE7 compatibility.
Yes, there are other ways to achieve the same thing.
For example, if you drop IE7 support, then you could apply these same styles to :before/ :after pseudo-elements and avoid cluttering your HTML.
You also have the option of using gradients to create triangles - example. However, this is one solution that won't even work in IE9, which is the current IE version.
css tricks may be browser/version limited.
You can also get icon images here:
http://www.iconarchive.com/search?q=arrow+up
Small ones here:
http://p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow
A css arrow can be created using this style. you need to set the width and height of the arrow.
div.left {
z-index: 2000;
width: 80px;
height: 80px;
border-top: 2px solid #ddd;
border-left: 2px solid rgba(150,150,150,0.4);
text-indent: -90000px;
cursor: pointer;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
also if you need a easier way then you can always switch to use images
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