I can't seem to get my button to change colour with CSS3 transitions. I've been successful using the roundabout same code on and tags, but no such luck with the button.
Here's the code:
.button {
position:absolute;
width: 135px;
height: 46px;
background-color: #ef6529;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
box-shadow: 0px 4px 0px #af5a5a;
-moz-box-shadow: 0px 4px 0px #af5a5a;
-webkit-box-shadow: 0px 4px 0px #af5a5a;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
.button:hover {
width: 135px;
height: 46px;
background-color: #ff6726;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
text-decoration: none;
}
and the HTML:
<a href="#" class="button">
<!--<h2>PUSH ME!</h2>-->
</a>
Cheers!
You haven't specified colors for the button. I presume you want to transition the background color insted. Just change transition:color 1s ease-in; to transition: background-color 1s ease-in;.
Related
I want to remove the white color totally.
Before selecting the suggestions
After choosing one of the suggestions
input[type="search"] {
-webkit-appearance: none !important;
background-clip: padding-box;
background-color: black;
vertical-align: middle;
border-radius: 2rem;
border: 2px solid #1de9b6;
font-size: 1rem;
width: 100%;
line-height: 2;
padding: 0.375rem 1.25rem;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
transition: border-color 0.2s;
color: white;
}
input[type="search"]:focus {
transition: all 0.5s;
box-shadow: 0 0 20px #00a2ff;
/* border-color: #f9d342; */
outline: none;
}
I wrote a user login page, but I can not change inputted fields backgound color.
.form-signin-row {
display: block;
width: 100%;
height: 51px;
padding: 6px 12px;
font-size: 14px;
margin-bottom: 19px;
line-height: 1.42857143;
background-color: #F0EEF0;
border: 1px solid #DCDCDC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
Like this:
I found "user agent stylesheet":
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
Just chrome cached my username and password, NOT work. If I clear cached, work well.
I try to override:
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff;
}
still not work:
Use the same class to override the default styles of the chrome browser (that behaviour is a big crap to designers)
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: #fff !important;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
I would like a series of divs with no margin and both top and bottom box shadows such that the box shadows of each div do not overlap any other divs. I've constructed a jsfiddle to show what I'm trying to achieve and what I have now. This seems like something that z-index could be used for, but I'm not sure how.
Put all of your DIVs in one outer wrapper DIV. Apply a box shadow to that, and to the hover state of each internal DIV. Now each can be controlled independentaly.
<div class="outer">
<div class="inner">The box shadow from each div...</div>
<div class="inner">...should go under each other div.</div>
<div class="inner">The whole thing should look...</div>
<div class="inner">...like one big div with a shadow...</div>
<div class="inner">...unless you hover over one.</div>
</div>
div.outer {
background: #fff;
margin: 0px auto;
padding: 0px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.outer:hover {
box-shadow: none;
}
div.inner {
padding: 20px;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
div.inner:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin-left: -20px
width: 350px;
}
I've styled this such that the box shadow on the outer DIV disappears when you hover over it, so only the hovered innerDIV shows a shadow. Adjust to taste :)
Fiddle:
https://jsfiddle.net/ehxsdjr8/7/
Are you looking for something like this?
Fiddle
$( 'div' ).hover(
function() {
$(this).addClass( "hey" );
$('div').not(this).addClass( "heyho" );
}, function() {
$(this).removeClass( "hey" );
$('div').not(this).removeClass( "heyho" );
}
);
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 0px 3px #999;
transition: padding .1s ease-in-out, width .1s ease-in-out, box-shadow .1s ease-in-out;
}
.hey{
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
.heyho {
box-shadow: 0px 0px 5px #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The box shadow from each div...</div>
<div>...should go under each other div.</div>
<div>The whole thing should look...</div>
<div>...like one big div with a shadow...</div>
<div>...unless you hover over one.</div>
https://jsfiddle.net/ehxsdjr8/13
The trick here is to add multiple shadows to each div and turn them on/off as needed. In this case, add the top shadow for the first element and the first element after a hover only and modify the existing shadow to not go above the element.
div {
background: #fff;
margin: 0px auto;
padding: 15px;
width: 300px;
cursor: pointer;
box-shadow: 0px 3px 3px #999;
transition:
padding .1s ease-in-out,
width .1s ease-in-out,
box-shadow .1s ease-in-out;
}
div:hover {
padding: 20px;
box-shadow: 0px 0px 5px #666;
margin: 15px auto;
width: 350px;
}
div:hover + div {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type {
box-shadow: 0px 3px 3px #999, 0px -3px 3px #999;
}
div:first-of-type:hover {
box-shadow: 0px 0px 5px #666;
}
It'll take a lot of playing around to get this to look right.
On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!
Here is my jsfiddle http://jsfiddle.net/7LUV4/
As you can see,
.text {
width: auto;
height: 20px;
outline: none;
-webkit-box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
-moz-box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
box-shadow: 7px 7px 0px rgba(50, 50, 50, 0);
transition: box-shadow 0.2s ease;
-moz-transition: box-shadow 0.2s ease;
-webkit-transition: box-shadow 0.1s ease;
-ms-transition: box-shadow 0.2s ease;
-o-transition: box-shadow 0.2s ease;
border: 1px solid #CFCACC;
border-radius: 9px 9px 9px 9px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
margin: 5px 20px;
word-wrap: break-word;
}
That is the code i'm using, It uses :focus for it's transition but the thing is, it's not staying at the same position. it's just floating from right to left, How do I fix this?
If possible, please?
You can give the proper styles to label:
label {
display: inline-block;
width: 120px;
text-align: right;
}
Here you make label display as a inline block element, give it exact width, and make text align to right. Hence, you get the inputs nicely aligned under each other.
Btw, it's not good to style all labels like this. You'd better give some id to the form and use #myForm label as the selector.
See in fiddle
Add this to your css
input.text, label.alt{
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: baseline;
width: 150px;
}
label.alt{
text-align: left;
}
FIDDLE