I am currently using 2 CSS bars one appears over the other on mouse over of the bar. I would like a better solution using just 1 CSS bar and changing the text on mouse over of the bar not the text.
How can this be done?
Here is my Code.
index.shtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style.css" rel="stylesheet" type="text/css">
<!--#include virtual="../navigation.shtml"-->
</head><body>
<br>
<ant class="globalmenu">
Title</ant>
<can class="globalmenu">Menu</can>
<div style="text-align: center;" class="content"><big><big><span style="font-weight: bold;"><big>Test Page<br><br>
<br>
<br>
<br>
<br>
<br>
</big><br>
</span></big></big>
</div>
<br>
<br>
</body></html>
style.css
body {
background: -moz-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -webkit-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, #06fffd), color-stop(0.17, #1cbec0), color-stop(0.71, #00ffee), color-stop(1, #1d7781));
background: -o-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -ms-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
/*background-color: rgb(102, 255, 255);*/
color: rgb(0, 0, 0);
}
.middle {
text-align: center;
}
.socialbar {
position: fixed;
bottom: 0;
left:20%;
height: 48px;
width: 60%;
background: #282828;
color: white;
text-align: center;
}
p{
white-space:normal;
}
.content {
margin-top: 22px;
margin-left: 64px;
margin-bottom: 48px;
padding: 10px;
}
.globalmenu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 22px;
width: 100%;
/*background: #282828;*/
background: -moz-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -webkit-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9d9d9d), color-stop(0.17, #4b4c4c), color-stop(0.71, #2f3232), color-stop(1, #000000));
background: -o-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -ms-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
color: white;
opacity:0.9;
}
can {
display:none ;
}
ant:hover + can {
display: inline;
float: left;
}
.globalmenu a:link { color : white; }
.globalmenu a:visited{color:yellow}
.globalmenu a:hover{color:red}
.globalmenu a:active{color:lime}
body a:link {color:black}
body a:visited { color : purple;}
body a:hover {color:red}
body a:active {color:green}
I'm not really sure what' you're trying to do with the <can> and <ant> tags, but I have the slightest suspicion that you're doing it wrong.
In any case, try something like: http://jsfiddle.net/uJ7j4/
HTML
<div class="globalmenu">
<ant>Title</ant>
<can>Menu</can>
</div>
CSS
.globalmenu can {
display: none;
}
.globalmenu:hover can {
display: inline;
}
.globalmenu:hover ant {
display: none;
}
Related
I am trying to style a button that is disabled, but the styling doesn't take effect, and go back to the old styling. I have cleared my cache, to no avail. I have a button that gets disabled using JavaScript with document.getElementById("updateAccountButton").disabled = true;. This aforementioned button also has the class of btn-signature-green. Inside my stylesheet, I am trying to set the styling of this button when disabled using:
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
/* styles go here */
}
This is because I have other buttons that may have disabled attributes that I want to account for.
Code snippet:
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = true;
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background-color: #afafaf;
color: white;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
The disabled style is overlapped by the parent style.
Instead of background-color, use background on :disabled style.
And the parent button has got color style with !important so it is needed to set the color with important on :disabled selector style.
And to disable hover effect when disabled, it is needed to set pointer-events: none;.
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = "disabled";
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background: red;
color: blue !important;
pointer-events: none;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
You are using two different properties, you are setting a background on your button but a background-color on the disabled, background takes priority so it looks like it doesn't work as you'd expect.
To fix this you just need to use the same properties between disabled and active buttons.
I'm trying to make 2 gradients overlap each other at the same time with this code...
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
But it doesn't overlap each other like I want it to.
How can I make #grad1 overlap #grad2 so they're both visible at the same time?
Use this way:
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
This way it just overlaps both the stuff, keeping the #grad2 on top of #grad1. Make sure, you have another <div>, which is the parent of both having a position: relative to it.
Snippet
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
.parent {position: relative; width: 50px; height: 50px;}
.parent > div {width: 50px;}
<div class="parent">
<div id="grad1"></div>
<div id="grad2"></div>
</div>
i am having the following code to style the select box, it works perfectly in chrome but not in mozilla fire fox 27.0
.select-box {
line-height: inherit;
width: 150px;
height:150px;
font-size: 14px;
padding: 1px 30px 0px 7px;
height: 30px;
margin-left:20px;
margin-top: 2px;
background: #fdfffc;
background: -moz-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfffc), color-stop(85%, #f4f4f4), color-stop(95%, #f4f4f4));
background: -webkit-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -o-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -ms-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: linear-gradient(to bottom, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfffc', endColorstr='#f4f4f4', GradientType=0);
color: #dddddd;
text-shadow: 1px 1px 1px #fafafa;
}
JSfiddle: http://jsfiddle.net/mSL87/2/
Try it this css - mozilla fire fox 28.0
.select-box {
line-height: inherit;
width: 150px;
height:150px;
font-size: 14px;
padding: 3px 2px 2px 7px; /*i have editing in right pading*/
border:1px solid #999; /*i have edit border */
height: 30px;
margin-left:20px;
margin-top: 2px;
background: #fdfffc;
background: -moz-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfffc), color-stop(85%, #f4f4f4), color-stop(95%, #f4f4f4));
background: -webkit-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -o-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: -ms-linear-gradient(top, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
background: linear-gradient(to bottom, #fdfffc 0%, #f4f4f4 85%, #f4f4f4 95%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfffc', endColorstr='#f4f4f4', GradientType=0);
color: #dddddd;
text-shadow: 1px 1px 1px #fafafa;
}
Is it real to make such border through css?
I thought about
border: 3px solid white;
border-top: none;
and pseudo-element with gradient, but its not exactly the same.
You can do this by adding a pseudo-element with a gradient. transparent -> white -> transparent.
FIDDLE
CSS
div
{
width: 600px;
height: 200px;
border: 5px solid black;
border-radius: 20px;
position: relative;
margin: 50px;
}
div:before
{
content: '';
position: absolute;
top:-5px;
left:0;right:0;
margin:auto;
height: 5px;
width: 80%;
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,1) 17%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0)), color-stop(17%,rgba(255,255,255,1)), color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,1) 17%,rgba(255,255,255,1) 85%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
[Update: this can be done with a radial gradient, but Im no longer in front of my computer.]
I'm not sure that there's a border gradient (yet anyway), but I built something with nested s for you. Just an idea. It's just missing the solid white across the bottom. Hope it's helpful.
jsfiddle: http://jsfiddle.net/itsmikem/HfCT3/
css:
div {
position:relative;
}
#outer {
background: #cccc00;
width:200px;
padding:10px;
}
#mid {
border-radius:10px;
background: #ffffff;
background: -webkit-linear-gradient(left, #ffffff 0%,#cccc00 50%,#ffffff 100%);
background: linear-gradient(to right, #ffffff 0%,#cccc00 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
padding:3px;
}
#inner {
/*width:100%;
height:100%;*/
background:#cccc00;
border-radius:10px;
padding:10px;
}
html:
<div id="outer">
<div id="mid">
<div id="inner">stuff
</div>
</div>
</div>
I'm trying to get the background image to lay on top of the gradient background, do I have to create another div to do this?
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(../simg/inner_bg.gif) no-repeat 20px 140px;
background: #031f34;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
Yes you will need another element to work with (maybe a pseudo element like ::before), the backgrounds are replacing each other (when they are valid).
http://jsfiddle.net/fTpaz/2/
#inner_bg {
width: 846px;
height: 646px;
margin: -1px 0 0 0;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iIzAzMWYzNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzAzNjY4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzA1YjdkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(left, #031f34 9%, #03668f 40%, #05b7d1 70%);
background: -webkit-gradient(linear, left top, right top, color-stop(9%,#031f34), color-stop(40%,#03668f), color-stop(70%,#05b7d1));
background: -webkit-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -o-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: -ms-linear-gradient(left, #031f34 9%,#03668f 40%,#05b7d1 70%);
background: linear-gradient(to right, #031f34 9%,#03668f 40%,#05b7d1 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031f34', endColorstr='#05b7d1',GradientType=1 );
float: left;
position: relative;
}
#inner_bg::before{
content: ' ';
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: red;
opacity:0.5;
}
Create another divide. Position on top of the div with the gradient background. Add a z-index higher than that of the div with the gradient background.