I have the following CSS working on an element:
.box {
width: 400px;
height: 60px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
box-shadow: 0 1px 3px rgba(0,0,0,.3);
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDQwMCA2MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZGZkZmRmIiBzdG9wLW9wYWNpdHk9IjEiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTllOWU5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MDAiIGhlaWdodD0iNjAiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==);
background-image: -moz-linear-gradient(90deg, #dfdfdf 0%, #e9e9e9 100%);
background-image: -o-linear-gradient(90deg, #dfdfdf 0%, #e9e9e9 100%);
background-image: -webkit-linear-gradient(90deg, #dfdfdf 0%, #e9e9e9 100%);
background-image: linear-gradient(90deg, #dfdfdf 0%, #e9e9e9 100%);
position: relative;
top: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
For whatever reason, this is hiding an element behind it. The element behind it should have a high z-index. I can not identify what CSS property might becuase this element to have a high z=index.
And ideas?
Incase anyone is wondering, the element that is getting hidden is a Primeface's Dock.
Related
It's hard to see but on the INSIDE of the Border, left and right side only of the skewed rectangle, there is whitespace which is only there if I have a gradient background
https://imgur.com/a/fDcD8bi
my css:
padding: 50px 0;
margin: 0;
border-radius: 15px;
border-radius: 0;
border: 4px solid #717171;
transform: skewX(352deg);
box-shadow: -5px 10px 10px 0px #0b0b0b2b;
cursor: pointer;
background: rgb(41,41,41);
background: -moz-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: -webkit-linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
background: linear-gradient(15deg, rgba(41,41,41,1) 0%, rgba(59,59,59,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#292929",endColorstr="#3b3b3b",GradientType=1);
Any CSS magicians could help me with the whitespace on the inside? as I'd like to have the rectangle skewed with a gradient. But they don't work together so well. Thanks
Just started with styling buttons and my desire was to have a background to the left of the button while the text search was to the right of the image.
Heres the code I have so far. And here is how the button is so far
How can I add a small icon to the left of the text? I tried running this code but no luck.
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:76px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:66px;
line-height:66px;
width:152px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.button:active {
position:relative;
top:1px;
}
<div class="button">Search!</div>
Adding your exact code to the example code output works, so there's something wrong with the way you incorporated the line into your css definitions.
Unfortunately, your example code doesn't include the actual line, but my guess is that you might have put it above the linear-gradient background definitions, which would then override your image. To test if this is the error, put it all the way at the bottom of the .button declaration and see if it's being displayed.
To use multiple background images, you can comma-seperate the individual values, like so:
background-image: url('one.png'), url('two.jpg');
background-position: center center, left top;
Try to add your background image after background linear gradient
To add multiple backgrounds to an element, you need to declare them all in a comma-separated list, like this:
.button {
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}
Backgrounds are painted from last to first, so your icon should show up just fine.
If you declare a property multiple times, the browser will really overwrite the previous value, unless the new one is invalid. Also, keep in mind that gradients are considered "images".
Try to give background-size property like this
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color: #f9f9f9;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 76px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 66px;
line-height: 66px;
width: 152px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
background-size: contain;
}
<html>
<body>
<div class="button">Search!</div>
</body>
</html>
Here is the code in action:
http://jsfiddle.net/uop7dz7L/5/
This is menu. I used gradient background. When I remove gradients then the a:hover works. But somehow background:gradient is overriding it and disables it.
Any ideas?
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0 );
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
transition: color 0.4s ease 0s;
-webkit-transition: color 0.4s ease 0s;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-color: fuchsia;
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SONIC TOOTHBRUSH</li>
<li>SONIC TRAVEL</li>
<li>SONIC PLUS</li>
<li>ACCESSORIES</li>
<li><a id="contactus" href="#">CONTACT US</a></li>
</ul>
</div><!--nesmenu4-->
</div><!--nesmenu3-->
</div><!--nesmenu2-->
</div><!--nesmenu1-->
</div><!--inheader-->
</div><!--header-->
</div><!--headwrap-->
How about using background instead of background-color;
div#inheader a:hover {
background: fuchsia;
}
Even better - if you want to keep the gradients, set new gradients in this div/id with the fuchsia colour like;
background: linear-gradient(to bottom, fuchsia 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
Change it depending on how you want to shade it..
http://jsfiddle.net/u5nt9h18/
The reason why background-color isn't working on :hover is because it's behind your gradient. From the W3C spec on background-image:
When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).
The background-color is like z-index: 0. The background-image always lays on top of the background color. Since you have specified a color for every color stop in your gradient, none of your :hover color is coming through.
Instead you will have to declare a new background gradient on hover. If you want the background color to be a full color, simply state the same color for 0% and 100%.
Also, as a side-note: when using background gradients, use background-image instead of background. The background element is a shorthand property for all other background properties. You're not declaring any of the other properties, so declare only the one you're using.
I've cleaned up your example with the correct CSS below.
#headwrap {
border-top: 2px solid #F5FBFD;
border-radius: 4px;
}
#inheader {
padding-top: 30px;
width: 973px;
margin: 0px auto;
}
#inheader ul {
font-size: 0;
padding: 0 0 0 0px;
list-style-type: none;
}
#inheader a {
text-decoration: none;
text-align: center;
background-color: #ffffff;
background-image: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
background-image: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0);
background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
display: inline-block;
font-family: 'open sans', sans-serif;
font-size: 14px;
height: 38px;
line-height: 38px;
color: #0088CB;
-webkit-transition: color 0.4s ease 0s, background 0.1s ease-in;
transition: color 0.4s ease, background 0.1s ease-in;
padding: 0px 23px 0px 22px;
border-right: 1px solid #0088CB;
}
a#contactus {
padding: 0px 23px 0px 22px;
border-right: 0px;
}
div#inheader a:hover {
background-image: -moz-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, fuchsia), color-stop(100%, fuchsia));
background-image: -webkit-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -o-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: -ms-linear-gradient(top, fuchsia 0%, fuchsia 100%);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='fuchsia', endColorstr='fuchsia', GradientType=0);
background-image: linear-gradient(to bottom, fuchsia 0%, fuchsia 100%);
}
#inheader li {
display: inline;
}
#nesmenu1 {
/*width: 972px;*/
border-bottom: 1px solid #E3E8EB;
border-left: 1px solid #E3E8EB;
border-radius: 4px;
}
#nesmenu2 {
border-top: 1px solid #ECF2F4;
border-right: 1px solid #ECF2F4;
border-bottom: 1px solid #CDD1D4;
border-left: 1px solid #CDD1D4;
border-radius: 4px;
}
#nesmenu3 {
border-top: 1px solid #DCE0E3;
border-right: 1px solid #DCE0E3;
border-bottom: 1px solid #B1B4B6;
border-left: 1px solid #B1B4B6;
border-radius: 4px;
}
#nesmenu4 {
border-bottom: 1px solid #F8F8F8;
border-radius: 4px;
}
<div id="headwrap">
<div id="header">
<div id="inheader">
<div id="nesmenu1">
<div id="nesmenu2">
<div id="nesmenu3">
<div id="nesmenu4">
<ul>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>SONIC TOOTHBRUSH
</li>
<li>SONIC TRAVEL
</li>
<li>SONIC PLUS
</li>
<li>ACCESSORIES
</li>
<li><a id="contactus" href="#">CONTACT US</a>
</li>
</ul>
</div>
<!--nesmenu4-->
</div>
<!--nesmenu3-->
</div>
<!--nesmenu2-->
</div>
<!--nesmenu1-->
</div>
<!--inheader-->
</div>
<!--header-->
</div>
<!--headwrap-->
When you use background-color, you only change that property of the background property. Because gradients don't use the color and just show the gradient over the background-color, changing the background-color doesn't affect them.
To fix it, simply change the entire background instead of just background-color :
div#inheader a:hover {
background: fuchsia;
}
http://jsfiddle.net/zswr71Lc/
I know there are a lot of examples for customizing the tooltip of an html element but I can't make it working.
I have a simple anchor that looks like the following:
?
And then I created the following css style (I copied from an example):
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 4px #222;
-webkit-box-shadow: 0px 0px 4px #222;
box-shadow: 0px 0px 4px #222;
background-image: -moz-linear-gradient(top, #1111ee, #cccccc);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
background-image: -webkit-linear-gradient(top, #11eeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}
As you can see in the fiddle I created, the result is not what I expect.
So, what do I have to change?
https://jsfiddle.net/Bonomi/36kp45e2/1/
Just make the positioning of the a tag relative
a[title] {
position: relative;
}
That way your tooltip will now be absolute to the anchor tag, not to the document.
Updated fiddle:
https://jsfiddle.net/36kp45e2/2/
Hi guys i'm trying to create this(image) css border around a div, but having trouble.
I have created the border but cannot get the border to be smooth.
here is my code
border-left: 5px solid #036;
border-right: 5px solid #036;
border-top: 10px solid #036;
border-bottom: 5px solid #036;
Fiddle Up, You can see it here.
Hope it help.
EDIT:
Html:
<div class="a">
<span class="abs">Title here?</span>
<div class="b">
Hello.
</div>
</div>
Css:
div.a {
border-top: 10px solid #333;
border-left: 5px solid #333;
border-bottom: 5px solid #333;
border-right: 5px solid #333;
border-radius: 10px;
background-color: #333;
width: 200px;
height: 400px;
}
div.b {
border-radius: 5px;
background-color: #FFF;
width: 180px;
height: 350px;
padding: 10px;
}
.abs {
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 10px;
}
You can attain such a setup using new CSS3 facilities, namely border-radius and gradient form of background image. You can find information about those all around the internet, for example background gradient and border radius.
Below is example, it will not work in all browsers, and is not exactly what you want, but it should be enough to give you the basic idea:
The html structure could look like this:
<div id="big_div">
Search for a hotel
<div id="small_white_div">
Some other content
</div>
</div>
And the corresponding css would be:
#big_div {height:450px;width:250px;border-radius: 5px;background-color:red;
background-image: linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -o-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -moz-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209)
51%, rgb(33,51,140) 100%);
background-image: -ms-linear-gradient(bottom, rgb(33,51,140) 5%, rgb(125,187,209) 51%,
rgb(33,51,140) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.05, rgb(33,51,140)),
color-stop(0.51, rgb(125,187,209)),
color-stop(1, rgb(33,51,140))
);}
#small_white_div {height:400px;width:220px;margin:auto;border-radius:5px;
background-color:white;margin-top:20px;}
Good luck.
It's done with background image.
You are looking for border-radius to get the rounded corners. Try out something like this:
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
Note this is CSS3 and will not work in older versions of IE