Strange stutter/choppy transition on box-shadow using Chrome browser. Haven't noticed this before. Firefox, IE, Opera execute transition as expected. Any one have the same experience and possibly a solution?
html {
text-align: center;
font: 13px Open Sans;
color: #5c5c5c
}
a,
input,
button {
display:inline-block;
margin: 30px auto 0;
border: 4px solid #dedede;
background: #f3f3f3;
padding: 10px 25px;
text-decoration: none;
color: inherit;
line-height:1;
-webkit-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
-moz-transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
transition: box-shadow .5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
a:hover,
input:hover,
button:hover {
-webkit-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
-moz-box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
box-shadow: 0px 5px 4px -3px rgba(0, 0, 0, 0.70);
}
<h1>I AM AN INPUT</h1>
<p>For some reason unknown to myself, a box-shadow transition<br>on HOVER, executes choppy (stutters). Only experiencing in Chrome so far.</p>
<input type="submit" value="Input">
Fine on Link
<button name="button">
Fine on Button
</button>
Related
Am building a CSS menu and for some reason the margin of the sub menu shows different in IOS and IE 11.
Bellow is some pictures & css code
Thats how it should look like and how it show in chrome.
This is how IE & IOS safari shows, the margin should be higher from up and should be less to the left.
Here is the code
header .left li .mega-menu {
background-color: #31342a;
position: absolute;
border-radius: 0px 0px 3px 3px;
margin:-50px 0px 0px 0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
-o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
opacity: 0;
transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
z-index: -1;
}
header .left li:hover > .mega-menu {
visibility: visible;
opacity: 1;
margin: 15px 0px 0px 0px;
transition-delay:0s;
}
Can you try this.
I think you have missed display:block;
header .left li .mega-menu {
background-color: #31342a;
position: absolute;
border-radius: 0px 0px 3px 3px;
margin:-50px 0px 0px 0px;
visibility: hidden;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** Firefox */
-o-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4); /** For Opera */
opacity: 0;
transition: visibility 0.1s linear 0.1s,opacity 0.5s linear, margin 0.5s;
z-index: -1;
display:block;
}
header .left li:hover > .mega-menu {
visibility: visible;
opacity: 1;
margin: 15px 0px 0px 0px;
transition-delay:0s;
}
I have a website. I have used a search bar on the top next to the logo. Whenever we type something the search works and is redirected to the appropriate page but in a video playback page or you can say on any other page the search does not works.
First, try it on main page and it works.
http://www.trueflick.com
On any other page or video playback page like this it will not work.
trueflick.com/videos/277/6-dreamcast-facts-which-makes-it-awesome-factsurgery/
Although the code is same. Here is the CSS code which is used in CSS file.
#search {
}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #000;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 300px;
}
You have more than one form with matching IDs (search) as well as inputs with matching names of q. Get rid of the second one further down the page (or rename the form and input elements)
I tested this in Chrome and was able to search once I deleted the conflicting node.
Don't forget your closing </form> each time.
I disabled the search box on IE, because IE kept centering it over the navigation.
It works in Chrome, I'm not sure about opera (and I'm not sure if I care) but it won't work in Firefox. The ease-out timing works in Firefox, but nothing else really works.
I've tried other things to work around the issue, but every time I try something different, the search box's positioning gets thrown off.
If you look at it in Firefox, it looks fine-- until you click on it to search. http://kissoff.weebly.com/ You can see what the search box is supposed to do if you look at it and click on it in Chrome.
I'm sure the positioning is off, I'm not sure (I'm new to css). Any help is appreciated.
#search {}
#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search input[type="text"]:focus {
width: 200px;
}
you were forgetting to edit margin-left.
http://jsfiddle.net/xeemez/nZBNm/
#search{
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
position: fixed;
margin-left: 350px;
margin-right: 0px;
margin-top: 0px;
color: #bebebe;
width: 15px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
float: right;
}
#search:focus {
width: 200px;
margin-left: 200px;
}
http://jsfiddle.net/xeemez/nZBNm/
So I want my submit button to be a different width than my other input fields. I am trying to do this but the submit button still has the same width. Please Help!
Here is my CSS:
#logon {
position: absolute;
margin-left: 60%;
top: 10px;
}
#logon input {
display: inline;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
}
#logon input.button {
display: inline;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 50px;
padding: 6px 15px 6px 35px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
}
And my HTML:
<div id="logon"><form action="login_r.php" method="POST"> <input name="myusername" type="text" size="40" placeholder="Username..." /> <input name="mypassword" type="password" size="40" placeholder="Password..." /><input type="button" value="Log In"></form></div>
The correct attribute selector is:
#logon input[type='button']
However, if you're submitting a form, it should be <input type="submit" />, in which case you want
#logon input[type='submit']
The .button selector is for the class "button". Your <input> element doesn't have a class on it. You can try this:
input[type=button] { whatever }
Personally I like <button type=submit> better than <input type=submit> because it's a lot more flexible in terms of content (things like little icons etc).
I have a form with a textarea where users can write some code. I'm replacing that textarea with a CodeMirror code editor box, so I want to apply Bootstrap stylings to it.
This is what the form looks like right now, where all the form elements except the code editor have Bootstrap stylings:
So in particular, I think I need to give the code editor rounded corners, a border, the correct width (input-xxlarge), and blue highlights when mousing over.
How do I do this? Is there a way of doing this besides manually copying over the necessary CSS?
UPDATE
I tried copying over the textarea CSS from Bootstrap, and all looks good except the focus CSS when I click inside the code editor. This is what I get:
The highlight is on the inside, instead of the outside. Any ideas how I fix this?
This is the CSS I added by copying from Bootstrap:
.CodeMirror {
line-height: 1.3em;
font-family: monospace;
/* Necessary so the scrollbar can be absolutely positioned within the wrapper on Lion. */
position: relative;
/* This prevents unwanted scrollbars from showing up on the body and wrapper in IE. */
overflow: hidden;
background-color: white;
width: 530px;
/* Copied from Bootstrap's textarea */
display: inline-block;
padding: 4px 6px;
margin-bottom: 9px;
color: #555555;
border: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.CodeMirror-focused {
/* Copied from Bootstrap's textarea */
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
Code Mirror and Bootstrap (v3 and v4):
Styling does not yet support validation states (has-error, has-warning, has-success)
.CodeMirror {
/* Bootstrap Settings */
box-sizing: border-box;
margin: 0;
font: inherit;
overflow: auto;
font-family: inherit;
display: block;
width: 100%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); /* Bootstrap 3 */
box-shadow: none; /* Bootstrap 4 */
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
/* Code Mirror Settings */
font-family: monospace;
position: relative;
overflow: hidden;
}
.CodeMirror-focused {
/* Bootstrap Settings */
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); /* Bootstrap 3 */
box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); /* Bootstrap 4 */
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
CodeMirror hides the original textarea and creates a (fairly complex) structure of div and pre elements. You can style the outermost div which has a class of .CodeMirror to achieve the same effect.
This will require customizing the CodeMirror stylesheet or adding your own style for the class/element. If you are building Bootstrap using LESS, there may be a way to apply a mixin to avoid duplicating the textarea style, though the amount of duplication is probably minimal.