I have used CSS border-image to attain certain effect in the menu bar. Its working good in Firefox. But doesn't work in Chrome.
See www.imptools.com. Is there any workaround for chrome?
CSS
nav.mainMenu{
width:#16cols; height: 50px;
margin:0 auto; position: relative;
top:-25px;
ul{
width:100%; height:50px; overflow: visible;
background: url('../imgs/gun_metal.png');
border-radius: 15px; box-shadow: 0px 3px 3px #dark;
li{
float:left; width: auto;
margin: 0 20px; overflow: visible;
height: 80px; position:relative; top:-15px;
a{
width: auto; height: auto;
float:left; padding: 0 15px;
font-family: #sansSec;
color:#light;
line-height: 80px;
font-size: 24px;
font-weight: bold;
text-shadow: 3px 3px 3px #dark;
}
}
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
}
}
Try setting the border before setting the image like so
border: 50px solid transparent;
I have noticed that in Safari this statement doesn't matter but it does matter in chrome
According to chrome platform status,
Blink will begin to require a border style in order to paint border images. This has always been required by the spec, but has not been enforced. In order to not be affected by this change, add e.g. 'border-style: solid' where border-image is used.
so adding
border-style: solid;
should fix your issue.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
-webkit-border-radius: 15px 0 15px 15px;
-moz-border-radius: 15px 0 15px 15px;
-khtml-border-radius: 15px 0 15px 15px;
border-image:url(../imgs/menu_active_bg.png);
-webkit-border-image:url(../imgs/menu_active_bg.png);
-moz-border-image:url(../imgs/menu_active_bg.png);
-khtml-border-image:url(../imgs/menu_active_bg.png);
border-image-width:15px 15px 0px 0px;
-webkit-border-image-width:15px 15px 0px 0px;
-moz-border-image-width:15px 15px 0px 0px;
-khtml-border-image-width:15px 15px 0px 0px;
border-image-outset: 0px 15px;
-webkit-border-image-outset: 0px 15px;
-moz-border-image-outset: 0px 15px;
-khtml-border-image-outset: 0px 15px;
}
Try it like below.
li.active, li:hover{
background: #primary;
border-radius: 15px 0 15px 15px;
border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
-webkit-border-image:url('../imgs/menu_active_bg.png') 100% 100% 0% 0% / 15px 15px 0px 0px / 0 15px 0 0px;
}
Related
I have a gridview in asp.net. When I zoom out the page a blank space seems in the gridview as in this image. How to fix it?
The css code:
.module {
border: 1px solid #9BA0AF;
margin: 0;
margin-top: 0px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 15px;
background: #ffffff;
position:static;
height: 100%;
width:100px;
background-size: contain;
}
.moduleheader {
height: 38px;
width: 100%;
background: #F1F1F4 url(../images/secondary_bar.png) repeat-x;
background-position: left top;
background-repeat: repeat-x;
background-size: 100% 100%;
}
I also have css code above the gridview inside a div element.
<div style="border: 1px solid #9BA0AF; width:30%; margin: 20px 3% 0 3%; background-color:white;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow: hidden !important; position:static; background-size: 100% 100%;">
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" GridLines="None" RowStyle-Wrap="false">
Thanks in advance.
I have found the solution! I added the max-width property to the div as below:
<div style="border: 1px solid #9BA0AF; width:30%; margin: 20px 3% 0 3%; background-color:white;
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
overflow: hidden !important; position:static; background-size: 100% 100%; max-width: 500px;">
I have a square div with rounded corners. Inside this div, I need to make this shape:
I want to do it with pure css, but there are two problems:
Little 1px green artifacts I can't get rid off (you can see them on the bottom and right sides)
I need a 1px red border around #login_form to also appear on top of my oval shapes.
Maybe there is a better way to cut the ovals.
Here is a jsfiddle of the below:
#login_form {
margin-left: auto;
margin-right: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border: 1px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
#white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
#green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div id="login_form">
<div id="white_ovale"></div>
<div id="green_ovale"></div>
</div>
you need overflow: hidden
you need a 3rd inner div which adds the border (Just think of an independent border that stacks i top of the others)
BTW: Don't id everthing. Use classes. Use id only if you need to. And try not the nest ids.
As a rule of thumb I use only class for CSS and idfor JS only
http://jsfiddle.net/Lt4x3ufg/1/
.login_form {
margin-left:auto;
margin-right:auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border:1px solid red;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
}
.login_form .border {
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 1px solid red;
border-radius: 10px;
}
.login_form .white_ovale {
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
-webkit-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
-moz-border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
border-radius:
225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form .green_ovale {
position: absolute;
right: -21px;
bottom: -21px;
width: 139px;
height: 75px;
border: 0px;
background: #72B038;
-webkit-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-moz-border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
-webkit-box-shadow: inset -10px -10px 0px 10px white;
-moz-box-shadow: inset -10px -10px 0px 10px white;
box-shadow: inset -10px -10px 0px 10px white;
}
<div class="login_form">
<div class="white_ovale"></div>
<div class="green_ovale"></div>
<div class="border"></div>
</div>
Single element solution
There is no need for extra markup. We can create:
the two shapes inside the div with ::before and ::after
the red border with the containing div itself
The excess background is cut off with overflow: hidden
Nice Advantage: Because IE 8 does not support the border-radius property, and will render an ugly square, we can use the double colon (::) for the pseudo elements. IE 8 does not recognise this syntax and will render just the red box. This is the modern syntax and valid CSS.
Note: For child elements to overlap the green shape, they should be given position: relative and z-index: 1
Browser Compatibility: Due to the border-radius property, IE 9 +. It is unlikely that you need the browser prefixes for the border-radius property.
Complete Example
I have condensed the CSS as much as possible.
.login_form {
margin: auto;
position: relative;
width: 200px;
height: 200px;
background: red;
border-radius: 10px;
overflow: hidden;
border: 1px solid red;
}
.login_form::before,
.login_form::after {
content: '';
display: block;
position: absolute;
right: -10px;
bottom: -10px;
width: 125px;
height: 80px;
background: white;
border-radius: 225px 0px 7px 0px / 150px 0px 7px 0px;
}
.login_form::after {
right: -31px;
bottom: -21px;
width: 149px;
height: 75px;
background: #72B038;
border-radius: 225px 20px 7px 0px / 130px 0px 7px 0px;
}
<div class="login_form"></div>
I've tried to create a button like this in CSS and the pointy part of the button not as pointy?
Here is CSS:
.home_icon { width: 40px; height: 25px; margin-left:10px; margin-top:8px; background: #FFCC05 url(../images/home_icon.svg) no-repeat 12px 4px; -webkit-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; -moz-border-radius: 11px 5px 5px 11px/17px 5px 5px 17px; border-radius: 11px 5px 5px 11px/17px 5px 5px 17px;}
Can anyone have a solution? I'm prepared to change the css code as long I've 'Equilateral' triangle of the pointy (on left) of a button?
(source: kerrydeaf.com)
UPDATE:
Here is my jsfiddle: http://jsfiddle.net/alma/eBtY4/1/
Can you try something like this
.home_icon
{
width: 120px;
height: 80px;
background:red;
position: relative;
-moz-border-radius:0 10px 10px 0;
-webkit-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
}
.home_icon:before
{
content:"";
position:absolute;
right: 100%;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-right: 26px solid red;
border-bottom: 40px solid transparent;
}
Is there a way to make my #inner_div stop appearing behind the #main_div if it exceeds a certain width? I tried removing the overflow:hidden from #main_div in css but that causes the background of the #main_div to load very slowly, so I would like to find another solution if possible. Thanks
Main div css:
#main_div {
-moz-border-radius:5px;
-moz-box-shadow: 0 3px 3px rgba(255, 255, 255, 0.1), 0 3px 0 #BBBBBB, 0 4px 0 #AAAAAA, 0 5px 3px #444444;
background: none repeat scroll 0 0 #F6F6F6;
border: 1px solid #FFFFFF;
margin: 20px auto;
overflow: hidden;
padding: 10px;
width: 970px;
}
Inner div css:
.inner_div{
font-size:12px;
font-weight:normal;
font-style:normal;
margin: 5px 0px 0px 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
z-index: 0;
visibility: hidden;
position: absolute;
/* white-space: nowrap;*/
text-align: left;
padding: 5px 5px 5px 5px;
width:200px;
}
Instead of using overflow:hidden, you should use the new "micro clearfix".
Go here: http://nicolasgallagher.com/micro-clearfix-hack/
In your markup, you simply just add the class "cf" on #main_div
I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.
The code I have now is:
#bulb-top {
position: relative;
width: 280px;
height: 280px;
background-color: #E5F7A3;
-webkit-border-radius: 280px;
-moz-border-radius: 280px;
border-radius: 280px;
border: 8px solid #FFF40C;
top: -430px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 4;
}
#bulb-bottom {
position: relative;
width: 140px;
height: 120px;
background-color: #E5F7A3;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-radius: 0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px;
border-left: 8px solid #FFF40C;
border-right: 8px solid #FFF40C;
border-bottom: 8px solid #FFF40C;
top: -455px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 5;
}
http://jsfiddle.net/minitech/g42vq/3/
You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.
#bulb-bottom:before {
background-color: #E5F7A3;
content: '';
display: block;
height: 30px;
margin: 0 auto;
position: relative;
top: -10px;
width: 140px;
}