I have a button that transitions color when I hover over it and when I click it. I would like to have a longer transition duration for the change when I click than when I hover? Is this possible?
This is my code:
.form__submit {
background-color: #f06449;
border: 2px solid #f06449;
color: white;
font-weight: bold;
width: 100%;
max-width: 240px;
padding: 12px 24px;
font-size: 20px;
transition: all 300ms ease;
}
.form__submit:hover {
border-color: white;
background-color:transparent;
}
.form__submit:active {
border-color: #f06449;
color: #f06449;
}
I couldn't find the answer anywhere online.
In your code you used transition: all 300ms ease. This means that all properties, pseudo-classes (since it is the parent), etc... will have the same transition. To do what you want to do you need to use transition in specific states, specifying the properties you want to transition (You can also use transition: all, as long as you don't use it in the parent class).
.form__submit {
background-color: #f06449;
border: 2px solid #f06449;
color: white;
font-weight: bold;
width: 100%;
max-width: 240px;
padding: 12px 24px;
font-size: 20px;
}
.form__submit:hover {
border-color: white;
background-color:transparent;
transition: border-color 300ms ease, background-color 300ms ease;
}
.form__submit:active {
border-color: #f06449;
color: #f06449;
transition: border-color 5000ms ease, background-color 5000ms ease;
}
<html>
<body>
<div class="form__submit">
</div>
</body>
</html>
Related
i got a problem in css . So when i remove the color from input , outline works as it has to , but when i add color:white at first it shows default outline with color white , and only then the written outline works
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
<input type="text" name="" id="" placeholder="Nickname..." />
check this out http://test-znaniya.ga
This happens because of this line:
transition: outline-color 0.5s ease-out;
It will transition the outline-color from the current color to the new colour (#ff5500), but you have not defined a current color, so the question is "what is the default value of outline-color ?
According to MDN in the formal definition, the initial value is
"invert, for browsers supporting it, currentColor for the other"
currentColor will be lime in the example you gave.
So to recap what is happening when you focus:
the outline is set to solid with 2px width
it's color is transitioned from lime to some kind of red
This can be easily fixed by simply adding a default value for the current-color to for example the same as the border color:
input {
padding: 14px;
margin-right: 20px;
background-color: #282828;
font-size: 100%;
color: lime;
outline: none;
outline-color: #282828;
transition: outline-color 0.5s ease-out;
border: 1px solid #282828;
}
input:focus {
outline: solid;
outline-width: 2px;
outline-color: #ff5500;
}
I've got a search box which transitions and gets bigger when clicked on, and there is a button beside it. My problem is that the input box moves softly but the button stays in place and then teleports to its position once the transition is over. How can I trigger a transition on the button once the input box is clicked?
.searchbox {
width: 150px;
height: 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-position: 2px 2px;
background-repeat: no-repeat;
padding: 12px 20px 12px 45px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-top:10px;
}
.searchbox:focus {
width: 100%;
}
.searchbt {
float: left;
width: 15px;
height: 4px;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
cursor: pointer;
border:none;
margin-top:10px;
border-radius: 4px;
position:absolute;
z-index:1;
border: 2px solid #ccc;
border-right:none;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
.searchbt:focus {
width=100%;
}
Thanks for your help in advance.
Edit: I temporarily fixed it by moving the button to the other side (The one which doesn't move)
http://codepen.io/leongaban/pen/NqzxPR?editors=110
I have a form which 2 inputs, once the user highlights (:focus) an input and starts typing, the text turns white.
body {
font-family: Arial, sans-serif;
background: #3D3D3D;
}
.login-form {
margin-top: 20px;
}
.login-form input {
margin-bottom: 20px;
width: 416px;
height: 40px;
font-size: em(20);
text-indent: 15px;
color: #656565;
background: #3D3D3D;
border: 1px solid #656565;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.login-form input[value], .login-form input:focus, .login-form input:active {
color: #fff;
border: 1px solid #fff;
}
input .login-form[value] {
color: #fff;
border: 1px solid #fff;
}
.login-btn {
padding: 12px 0;
width: 420px;
color: #00D88C;
background: #3D3D3D;
border: 2px solid #00D88C;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.login-btn:hover {
color: #fff;
background: #00D88C;
}
However after finishing typing and then tabbing to the next input, the first input loses it's style. What is the pseudo selector I need to insure that the first input keeps it's :focus style?
Is there a way to style the "unfocused but filled out state" of an input?
You are doing this the wrong way.
You want the placeholders to be gray and text to be white.
So, style your placeholder with gray and let white be the main one. Like this:
input {
color: white;
}
input[type=text]:-moz-placeholder {
color: gray;
}
input[type=text]::-moz-placeholder {
color: gray;
}
input[type=text]:-ms-input-placeholder {
color: gray;
}
input[type=text]::-webkit-input-placeholder {
color: gray;
}
I am trying to do a image caption with slide. I have done everything, but the text inside the slide does not wrapped within the slide box. Someone please help in this.
use the JSfiddle link to view the code:
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
Simple Caption
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
cursor: text;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.7);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 150px;
width: 300px;
display: block;
bottom: -70px;
cursor: text; /*line-height: 100pt;*/
text-align: left;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-40%);
opacity: 1;
transform: translateY(-40%);
}
.blogp{
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #FF8000;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:100%;
}
.blogp a{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
color: #0080C0;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:400px;
}
Look at the numbers i had used in the html. I have enter 1-50 but it displays only to 23 and the text is not getting wrapped to the next line.
Simply add to your css:
.blogp p{
word-wrap: break-word;
}
UPDATE of your : JSFiddle
I'd like to have a nice hover effect where I scale the width of list items slightly.
I also want to do this with an animation delay of 250ms. The problem is that the text gets stretched and shimmers.
How can one offset that effect?
I have a jsFiddle that shows the problem. It is the most noticeable in Chrome.
http://jsfiddle.net/LxywP/
Example CSS:
span {
display: inline-block;
background: #eee;
border: solid 1px #ddd;
padding: 8px 10px;
font-size: 1.2em;
font-weight: bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transition: all 250ms;
-webkit-transition: all 250ms;
-o-transition: all 250ms;
transition: all 250ms;
}
span:hover {
background: darken(#E2F3E2, 8%);
text-decoration: none;
-ms-transform: scale(1.05, 1);
-mozilla-transform: scale(1.05, 1);
-webkit-transform: scale(1.05, 1);
transform: scale(1.05, 1);
}
As #Spudley mentioned in the comment, you shouldn't use scale since that stretches the element by definition. Instead you can add more left/right paddings to make the element wider. A problem with that is the element will be pushed to the right, you can solve that by adding "text-align: center" to its wrapper.
HTML:
<div>
<span>This text gets stretched</span>
</div>
CSS:
div {
text-align: center;
}
span {
display: inline-block;
background: #eee;
border: solid 1px #ddd;
padding: 8px 10px;
font-size: 1.2em;
font-weight: bold;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-transition: padding 250ms;
-webkit-transition: padding 250ms;
-o-transition: padding 250ms;
transition: padding 250ms;
}
span:hover {
background: darken(#E2F3E2, 8%);
text-decoration: none;
padding: 8px 20px;
}
Paste those into your jsfiddle and see the effect.
Another pro tip is to restrain from using "transition: all", specifying specific attributes to apply transition improves performance a lot. In this case you would use "transition: padding".