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.
Related
I want to add transition animations to a border
I am using SCSS :
display: flex;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
This code didn't work , I need a way to add the transitions but I don't know how !
The browser doesn't know how to change from a colour that isn't set, so you simply need a colour to transition from. In this case I've used transparent:
div {
border: transparent;
&:hover{
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
transition: border 1s ease;
}
}
This question already has answers here:
Use CSS3 transitions with gradient backgrounds
(19 answers)
Closed 1 year ago.
I'm trying to add a transition to a button I have that's background is made with css linear-gradient but it's not working.
This is the css for my button.
a.button
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#green), color-stop(100%,#a5c956));
-webkit-transition: background 5s linear;
}
a.button:hover
{
-webkit-gradient(linear, left top, left bottom, color-stop(0%,#greenhover), color-stop(100%,#89af37))
}
If you're wondering about #green and #greenhover, I'm using .less to make my css.
Anything wrong with this? Any ideas?
Sadly, you really can't transition gradients for now.
So, the only workable workaround is using an extra element with needed gradient and transition it's opacity:
a.button {
position: relative;
z-index: 9;
display: inline-block;
padding: 0 10px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(green), to(#a5c956));
background: -webkit-linear-gradient(top, green, #a5c956);
background: -moz-linear-gradient(top, green, #a5c956);
background: -o-linear-gradient(top, green, #a5c956);
background: linear-gradient(top, green, #a5c956);
}
.button-helper {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-gradient(linear, 0 0, 0 100%, from(lime), to(#89af37));
background: -webkit-linear-gradient(top, lime, #89af37);
background: -moz-linear-gradient(top, lime, #89af37);
background: -o-linear-gradient(top, lime, #89af37);
background: linear-gradient(top, lime, #89af37);
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
a.button:hover .button-helper {
opacity: 1;
}
<span class="button-helper"></span>button
it's tricky.. and of course tricky is cool ;)
okay.. i got a solution. and it's basically done via amazing :before selector
#cool-hover{
width: 120px;
height: 120px;
display: block;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
margin: 0px auto 24px auto;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
#cool-hover:before{
border-radius: inherit;
display: block;
width: 200%;
height: 200%;
content: '';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(135deg, #21d4fd 25%, #b721ff 75%);
transition: all 0.5s;
transform: translate(-25%, -25%);
z-index: 0;
}
#cool-hover:after{
border-radius: 9px;
display: block;
width: 108px;
height: 108px;
margin: 6px;
background: url('https://i.imgur.com/w0BjFgr.png');
background-size: cover;
content: '';
position: absolute;
top: 0; left: 0;
z-index: 1;
}
#cool-hover:hover:before{
transform: translate(-25%, -25%) rotate(-180deg);
}
#cool-hover:hover{
box-shadow: 0 0 35px rgba(0,0,0,0.3);
}
<div id="cool-hover"></div>
NOTE : i just added the :after sudo class just for the small on top image placeholder purpose..
have a nice awesome styling ;)
I know this pretty old but I could not find any good solution yet. So here is my solution
First Make gradient on ":before and hide it with opacity then transition opacity 1 on hover.
https://jsfiddle.net/sumon380/osqLpboc/3/
.button {
text-decoration: none;
padding: 10px 25px;
font-size: 20px;
color: #333;
display: inline-block;
background: #d6e9eb;
position: relative;
z-index: 1;
transition: color 0.3s ease-out;
}
.button:before {
background: #91a5f4;
background: linear-gradient(135deg, #91a5f4 0%, #b08cf9 86%);
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease-out;
}
.button:hover:before {
opacity: 1;
}
.button:hover {
color: #fff;
}
<a class="button" href="#">Button</a>
You can fake gradient transitions using drop shadows!
For instance, from one of my pages:
c {
color: #FFF;
background: #000;
border-style:solid;
border-color:#CCC;
border-width: 0 0 0 1px;
box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-o-box-shadow: 2px 2px 2px #555, inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 2px 2px 2px #555,
inset 0 25px 20px -10px rgba(255, 255, 255, 0.3),
inset 0 -15px 20px -10px rgba(0, 0, 0, 0.15);
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
-webkit-transition: background-color .5s ease-in-out;
transition: background-color .5s ease;
}
Followed by:
c:hover {
color:#FFF;
background: #505;
position:relative;
top:1px;
box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-moz-box-shadow: -1px -1px -1px #555,inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-o-box-shadow: -1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: 1px -1px -1px #555, inset 0 20px 20px -10px rgba(0, 0, 0, 0.15),
inset 0 -15px 20px -10px rgba(255, 255, 255, 0.3);
}
Here, you are essentially using an inset shadow as a Photoshop-like mask, causing a gradient effect on the underlying element. On hover, you invert the effect.
If you're doing the slight highlight when hovering the button there is a much simpler solution. You can just nudge the gradient down a bit and have the background-color be the same as the top color of your gradient: http://cdpn.io/oaByI
It's pretty limited I know, but if works well for that use case.
I know this question is pretty old, but I found a good way to animate basic gradients that will work in some cases.
This method will let you animate a change in color of the gradient but not a change in the position of the color stops.
https://jsfiddle.net/62vzydeh/
HTML:
<div class="button">
Click Me!
</div>
CSS:
.button {
width: 200px;
height: 30px;
margin: 50px;
padding-top: 10px;
color: #C0C0C0;
background: linear-gradient(to left, #F8F8F8, transparent 30%);
background-color: #808080;
text-align: center;
font-family: sans-serif;
cursor: pointer;
transition: background-color 500ms;
}
.button:hover {
background-color: #A0A0A0;
}
a hacky way i tried was putting lots of <spans> to replicate "position", CSS only hack here: https://codepen.io/philipphilip/pen/OvXEaV
9 years, but this time, hope my styled-components can help someone:
import React, { ReactNode } from 'react'
import { Button as ButtonUI } from "#your-library-ui"
import styled from 'styled-components'
type Props = {
onClick?: () => void;
children?: ReactNode;
};
const Button = ({onClick, children}: Props) => (
<StyledButton onClick={onClick} >
{children}
<ButtonHelper />
</StyledButton>
)
export default Button
const ButtonHelper = styled.span`
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
background: linear-gradient(to right, #5ab0f4, #1273ea)!important;
transition: opacity 0.2s linear;
`;
const StyledButton = styled(ButtonUI)`
position: relative;
z-index: 1;
background: linear-gradient(to right, #1273ea, #1c94f4)!important;
color: #fff;
&:hover ${ButtonHelper} {
opacity: 1;
}
`;
And start using your new designed component with extra effect! Thanks to #kizu for the suggestion.
you must have same style in source and changed style in target.
like
a {
background: transparent;
background: linear-gradient(transparent,transparent);
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a:hover
{
background: #abc07c;
background: linear-gradient(#c5db95,#88a743);
}
Currently working on MAC Yosemite and trying to test out a website I'm developing on XAMPP (newest version) and Sublime Text. Just downloaded an image from the internet and saved into my htdocs file. When I submit index.html into my url for testing, that image is not displayed. However, when I open the same file like:
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
the image is shown perfectly? Here's the code:
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Browse" />
</form>
#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: #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;
}
Would it look different from testing it out in
file:///Applications/XAMPP/xamppfiles/htdocs/index.html
than localhost/index.html
What is causing this?
set permissions so image is readable by webserver.
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
Here is the form HTML:
<form method="post" action="/cgi-bin/Contact.pl" id="contact-form">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="name" id="name" placeholder="Name..." autocomplete="off" tabindex="1" class="txtinput" data-validate="validate(required)">
<input type="email" name="email" id="email" placeholder="Email..." autocomplete="off" tabindex="2" class="txtinput" data-validate="validate(required, email)">
<textarea name="message" type="text" id="message" placeholder="Message..." tabindex="3" class="txtblock" data-validate="validate(minlength(20))"></textarea>
<div id="buttons">
<input type="reset" name="reset" class="button" tabindex="4" value="Clear">
<input type="submit" name="submit" class="button" tabindex="5" value="Send">
<br style="clear:both;">
</div>
</section>
Here is the corresponding css:
#contact-form {
-moz-box-sizing: border-box; /*Firefox 1-3*/
-webkit-box-sizing: border-box; /* Safari */
box-sizing: border-box;
}
#contact-form .txtinput {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;
margin-bottom: 20px;
font-size: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
color: #777;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#contact-form .txtinput:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 0.6);
outline: 0 none;
}
#contact-form #name {
background: #FFF url('../images/contact/user.png') 5px 4px no-repeat;
}
#contact-form #email {
background: #FFF url('../images/contact/email.png') 5px 4px no-repeat;
}
#contact-form textarea {
display: block;
font-family: "Helvetica Neue", Arial, sans-serif;
border-style: solid;
border-width: 1px;
border-color: #DEDEDE;;
margin-bottom: 15px;
font-size: 1em;
padding: 11px 25px;
padding-left: 55px;
width: 90%;
height: 180px;
color: #777;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#contact-form textarea:focus {
color: #999;
border-color: rgb(255, 102, 0);
border-color: rgba(255, 102, 0, 0.2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px rgba(153, 153, 153, 1);
outline: 0 none;
}
#contact-form .txtblock {
background: #FFF url('../images/contact/speech.png') 5px 4px no-repeat;
}
#contact-form #slider { width: 60%; }
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 450px;
}
#wrapping { width: 100%; box-sizing: border-box; }
Everything works fine until I display on a smaller device/screen then the fields don't act responsively and kind of overflow out of the box and onto the background as can be seen in the image provided in the link. Any help would be much appreciated. Thanks.
Link to example: http://www.livepurposely.net/image.png
In your css you are restricting width of #aligned to 450px and using px in padding, its better to use % in padding for responsive design
Info: px constraints the width to specified unit and is not good for responsive design, use % instead
Update CSS
#contact-form .txtinput {
padding: 3% 5%; // earlier 11px 25px
padding-left: 2%;
}
#contact-form textarea {
padding: 3% 5%;
padding-left: 2%;
}
#contact-form #aligned {
box-sizing: border-box;
float: left;
width: 90%; // earlier it was 450px update % as per your need
}
http://jsfiddle.net/raunakkathuria/nh5aZ/2/