I know this may be a dupe, but I'm willing to take the hit as I feel confident I have researched multiple solutions.
I have tried many methods to get This box-shadow transition to work, including:
Switching between hex, rgb, and rgba colors in the box-shadow declaration.
Using selectors with more specificity.
Changing the the transition property to include ease-in-out at the end of the declaration.
I cleansed the CSS file of any transition properties that could possibly effect the element.
All the while, triple checking my spelling mistakes.
The inspector says my styles are not being overridden. Here is my code:
.site-header .genesis-nav-menu .menu-item a {
-webkit-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-moz-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-o-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
box-shadow: 3px 3px 14px rgb(0,0,0) inset;
-webkit-transition: box-shadow 3s;
-moz-transition: box-shadow 3s;
-o-transition: box-shadow 3s;
transition: box-shadow 3s;
}
.site-header .genesis-nav-menu .menu-item a:hover{
-webkit-box-shadow: 3px 3px 14px rgb(0,0,0);
-moz-box-shadow: 3px 3px 14px rgb(0,0,0);
-o-box-shadow: 3px 3px 14px rgb(0,0,0);
box-shadow: 3px 3px 14px rgb(0,0,0);
}
What could be happening here to cause this to do nothing?
Here is a link to my site for an in context experience. It's the header menu in the top right corner of the page.
Try:
.site-header .genesis-nav-menu .menu-item a {
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0), 3px 3px 14px rgb(0,0,0) inset;
transition: box-shadow 3s;
}
.site-header .genesis-nav-menu .menu-item a:hover {
box-shadow: 3px 3px 14px rgb(0,0,0), 0 0 0 rgba(0,0,0, 0) inset;
}
Use transition: all; instead of box-shadow, should fix your issue
Related
please take a look at this example:
https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman
Note that when you hover over link, the background animated to fill the anchor text from bottom to top, and clears is from top to bottom when you hover away from it.
I've done something similar with my own website. The relevant CSS for it:
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
color: black;
}
a:hover {
box-shadow: inset 0 -3px 0 40px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
}
This gives me a similar effect, but instead of filling from top to bottom like in the example link: The background starts to fill from all sides of the rectangle toward to center.
How do I force it to fill from top to bottom, like in the example link I shared? what am I missing?
You're changing wrong parameter:
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!
Another solution that uses a 50%/50% linear gradient resized to 200%. To animate the background change the background position:
a {
background-image: linear-gradient(to top, yellow 50%, transparent 50%);
background-size: 100% 200%;
background-position: top;
transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
color: black;
}
a:hover {
background-position: bottom;
}
I'm a link
I'm another link
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!
This question already has answers here:
CSS Font Border?
(12 answers)
Closed 6 years ago.
I know in all cases that the border attribute in CSS covers, of course the borders of the HTML attributes. But my main question is:
For a border like this:
.blah-border {
border: #333 outset 5px;
}
be turned into embossed lettering?
Is there a way to make embossed lettering instead of the use of text-shadow? Or if it is by use of tex-t shadow, how can it be wrapped on all sides of the letter?
shade and shine bordering
{edited: What I meant was, instead of web-kit (after testing) didn't show the accurate result. When trying the Web-kit shadow tool, was a bit disapointed that it completely doesnt cover the letters like it normally do with cornered "outset" and "inset" bordering styles from CSS. What kind of CSS scripting that allows the border to cover all the parameter of the letter (like an offset) with shadows and shined areas as described by the picture.}
It sounds like you want text-shadow:
text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
color: [background color of the container]
Basically you set a 1px shadow offset up and left one pixel, and then another offset down and right one pixel, with a colors that give you an inset or outset effect. This doesn't work so well on a textured background as the text itself needs to be the same color as the background (transaprent lets the shadows show through).
CodePen demo
you need understand this I recommend this page web for you can study more about it and I leave 1 example of this:
web page
here is the example:
.back {
background-color: black;
}
.enjoy-css {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
cursor: pointer;
border: none;
font: normal 72px/normal "Passero One", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: -3px -5px 0 rgb(170,170,170) , -3px -4px 0 rgb(185,185,185) , -3px -3px 0 rgb(187,187,187) , -3px -2px 0 rgb(201,201,201) , -3px -1px 0 rgb(204,204,204) , 3px 1px 0 rgb(204,204,204) , 3px 2px 0 rgb(201,201,201) , 3px 3px 0 rgb(187,187,187) , 3px 4px 0 rgb(185,185,185) , 3px 5px 0 rgb(170,170,170) ;
-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}
.enjoy-css:hover {
color: rgba(169,214,169,1);
text-shadow: -3px -5px 0 rgba(255,255,255,1) , -1px -3px 0 rgba(255,255,255,1) , -2px -3px 0 rgba(255,255,255,1) , -3px -2px 0 rgba(255,255,255,1) , -3px -1px 0 rgba(255,255,255,1) , 3px 1px 0 rgba(255,255,255,1) , 3px 2px 0 rgba(255,255,255,1) , 3px 3px 0 rgba(255,255,255,1) , 3px 4px 0 rgba(255,255,255,1) , 3px 5px 0 rgba(255,255,255,1) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
<body class="back">
<div class="enjoy-css">3D effect</div>
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/>
</body>
/
For some reason, all of my buttons are receiving a grey outline and I'm completely unsure of the source of it. It is not a hover or active thing, it is an always kind of thing. I can also note that it is not the on-click border that a browser adds to buttons, as I've removed that with a :focus value.
This is in Google Chrome. I'm not sure if the issue is present in other browsers.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
Remove the default border from the buttons: border: none.
.button_default {
display: inline-block;
background: #1188f0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#1188f0));
background: -moz-linear-gradient(center top, #2e8cff 0%, #1188f0 100%);
-webkit-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-moz-box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
box-shadow: 0px 5px 0px 0px #006391, 0px -1px 0px 0px #1c95ff inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
text-shadow: 0px 1px 0px #006ac7;
padding: 5px 15px;
text-transform: uppercase;
text-align: center;
color: #ffffff;
font-weight: bold;
}
.button_default:hover {
background: #1995fa;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e8cff), color-stop(100%,#2e8cff));
background: -moz-linear-gradient(center top, #2e8cff 0%, #2e8cff 100%);
}
.button_default:active {
cursor: wait;
-webkit-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-moz-box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
box-shadow: 0px 2px 0px 0px #006391, 0px -1px 0px 0px #1491ff inset;
-webkit-transition: background-position 0.3s linear;
-moz-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
.button_default:focus {
outline:0;
}
input[type="submit"].button_default { border: none;}
<form method="link" action="create/create.php">
<input class="button_default" type="submit" value="CREATE NEW">
</form>
The button has a default border, add border: 0 to your CSS
.button_default {
display: inline-block;
background: #1188f0;
...
...
color: #ffffff;
font-weight: bold;
border: 0;
}
You could simply remove the border:
.button_default {
border:none;
}
This question was previously posed here: Button border & background
I'm trying to add image to my text box
here is the code
<form id="findPromo">
<input type="text" name="find" placeholder="I'm Looking For...">
<input type="button" value="Search">
</form>
css
#findPromo input[type="text"] {
background: url(image/find.png) no-repeat 10px 6px #444;
background: #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-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;
}
#findPromo input[type="text"]:focus {
background: url(image/find.png) no-repeat 10px 6px #444;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
but the image does not come out
anyone know how to do it?
thanks
It is because you are overriding the background prorepty with background: #444; if you remove that line, the image is displayed :
DEMO
In the first CSS ruleset, you first set the background to your image but then overwrite it with the background: #444 rule. You don’t just overwrite the background color, but the whole background statement.
Since you already have the #444 in the first statement, you can safely remove the second one.
The forms in bootstrap have a box shadow that leaves a very light shadow on the right side of the form. I need to remove that shadow on the right only so that the icon looks apart of the form.
JSFiddle: http://jsfiddle.net/MgcDU/6296/
Here's the CSS:
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
background-color: #ffffff;
border: 1px solid #cccccc;
-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;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
HTML:
<a href="#">
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search..." style="border-right:0;">
<span class="add-on" style="background:white;border-left:0;"><i class="icon-search" style="color:#a3a3a3"></i></span>
</div>
</a>
Please help!
Here's how I fixed it: http://jsfiddle.net/MgcDU/6305/
CSS:
.input-append {
position: relative;
}
.input-append .add-on {
padding: 4px 8px;
background: white;
border-left: 0;
position: absolute;
right: -32px;
}
You can relatively position .add-on and give it a positive z-index value so that it appears over the right-edge of the <input> - it's not 100% seamless but with some minor changes you can probably make it work for you.
.input-append .add-on:last-child {
position: relative;
z-index: 5;
}
http://jsfiddle.net/MgcDU/6302/
Assign a spread-radius value of -1px to the box shadow and add an extra pixel to the y-offset.
<spread-radius>
This is a fourth <length> value. Positive values will
cause the shadow to expand and grow bigger, negative values will cause
the shadow to shrink. If not specified, it will be 0 (the shadow will
be the same size as the element).
MDN: box-shadow (source)
http://jsfiddle.net/MgcDU/6307/
CSS
input[type="text"] {
-webkit-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 2px 1px -1px rgba(0, 0, 0, 0.075);
}
Try border-left:0px; becouse now yu dont have a px in element style
The best way is using box-shadow for "DIV.input-append" and make transparent background to input[type=text], example of using:
CSS:
.input-append{
position: relative;
padding: 2px;
width: 200px;
background-color: #ffffff;
border: 1px solid #cccccc;
-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;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}
.input-append:before {
content: '';
position: absolute;
right: 8px;
width: 16px;
height: 16px;
background: url('https://cdn3.iconfinder.com/data/icons/eightyshades/512/11_Search-16.png') no-repeat;
}
.input-append input[type=text]{
background: none;
border:none;
}
HTML:
<div class="input-append">
<input class="span4" id="appendedInput" type="text" placeholder="Search...">
</div>
Demo: http://jsfiddle.net/EDLs7/