This is my layouts menu:
http://gyazo.com/da1f1954a34694facaaab8ce6c92b267
Can you see the Black and white low opacity lines between each menu item?
How do I make them exactly in that size? also you can see theres a space amount of space in each menu item, how do I do so?
Thanks
1) For borders use rgba:
your_li_element_selector {
border-right: 1px solid rgba(255, 255, 255, 0.5); /* white border with opacity 50% */
border-left: 1px solid rgba(0, 0, 0, 0.5); /* black border with opacity 50% */
}
Hide left border for the first menu item:
your_li_element_selector:first-child {
border-left: 0;
}
Hide right border for the last menu item:
your_li_element_selector:last-child {
border-right: 0;
}
2) For space use margin and padding properties of li element and a inside it.
You can do border left and border right using RGBA and change the opacity down. First-child and last-child to remove the extra borders. Downside is the above things will not work in some older browers. As #dev said the best fit might be using images.
Example using RGBA, first-child and last-child: http://jsfiddle.net/Ra9NT/
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
I would like to have full height left and right borders in my element, but I would like to bottom border to be transparent.
I currently use this:
.graph {
border: 1px solid #ddd;
border-bottom-color: transparent;
}
but the consequence of this is that the left and right borders are missing the bottom pixel:
I would ideally like my graph label element to have full height borders so I don't have that ugly half pixel missing at the bottom.
Is there anything I can do?
Try border-bottom-width: 0; to remove the bottom border entirely.
try border-bottom: none; after the general bordersetting
Try border-bottom-style: hidden; to hide the bottom border entirely.
By default, the bootstrap nav tabs have a solid background over the active tab so that the bottom border does not appear.
Unfortunately, we're displaying the tabs over a subtle gradient background, so we need a transparent background for active and inactive tabs (we just want a white border: http://cl.ly/image/0x2u132k2F3k).
If we remove the background color from the active tab, we see the bottom border: http://cl.ly/image/0x2H1V1W2t3a.
If we remove the bottom-border from the .nav-tabs class and simply include the bottom border and inactive tabs the border doesn't extend to the full width of the space: http://cl.ly/image/0d361q2A1F3S
Is there any way that we can achieve the line extending all the way to the right, underneath the inactive tabs and not under the active tab without using a background color on the active tab?
Update: Here is a fiddle demonstrating the issue: http://jsfiddle.net/E7ehj/
.container {
background: -webkit-radial-gradient(center, ellipse cover, #276a75 0, #00455b 100%);
padding: 30px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
color: white;
background-color: transparent;
}
a {
color: white;
}
I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
The shadow setting I want to apply is:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.
P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:
Updated
Edit:
See the link below for another approach using css content and :after
http://css-tricks.com/triangle-with-shadow/
I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Caveat
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadow property. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform property is the key.
Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapes
Enjoy
I have a bunch of linked images in a table, with some padding. When I try to add an img:hover or a:hover border attribute, when the border appears, everything moves over by the amount of pixels that the border is thick. Is there a way to stop this behavior?
img {
border: solid 10px transparent;
}
img:hover {
border-color: green;
}
img:hover {
border: solid 2px red;
margin: -2px;
}
Seems to work for me (Safari 6.0.5). No added space since the border is drawn on the 'inside' of the img.
The problem is that you're adding a border to the element that takes up space - the other elements on the page have to move to make room for it.
The solution is to add a border that matches the background, and then just change the color or styling on hover. Another possibility is to make the box larger than you originally intended, and then resize it to fit the border you're adding.