I noticed some browsers make some fields glow when you select a form, Chrome makes them have a yellow glow for example. How do you make a field glow? I believe it's something you specify loosely on the code since different browsers do different colors. How does that work? Is there a simple way I could do it?
Check out the demo
CSS Used:
input:focus,textarea:focus,select:focus{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
You can also check out this page i had created similar effect
Note:
The box-shadow is CSS3 property meaning it won't work in IE<8, however you can use something like CSS3PIE to get the support even in IE :)
Related
Let's say someone is working on a web site that allows users to create a profile. This designer really likes the way input fields look with rounded corners, but Chrome's autofill feature is doing something odd to them. Of course, they could take the easy way out and remove the border-radius definition, therefore avoiding the weird corners, but then the site wouldn't have the look they were hoping for.
Here are before-and-after images of what the fields would look like when autofill is used.
And here's a JSFiddle for anyone that would like to play around with it.
If helpful, here is the relevant code being used to modify the fields:
.field {
background-color: #202020;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 0 5px #000;
color: #d8d8d8;
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
Several attempts were made to find the culprit behind this problem, including removing the outer shadow from both definitions, as well as changing the inner shadow's position and blur radius. The greyish corners were still there. The only real "solution" was to revert to square corners, but that option is being reserved as a last resort.
After numerous searches for a solution to this issue, all that could be found were ways to circumvent the default pale yellow background. And that's great news, but the designer is still left with those ugly corners. Is there a way to get rid of them entirely and maintain the field's original style? or is it a glitch that has no work-around?
Thank you for any insight or help you can provide.
Kreven's solution, while not the most elegant line of code, will definitely get the job done for most people I reckon. However, I'd like to modify it a bit and explain why it even works in the first place. Let's take a look at this line of code:
transition: background-color 2147483647s;
Here is a transition that would take 68.24 years to complete. Looks silly, right? If you're wondering where that magic number came from (2147483647), this is the maximum size of an integer, and thus the maximum duration for a CSS transition. What this transition is doing is making it take 64 years for your browser's autofill implementation to change the background color of your input.
It's also worth noting that this cheap trick will negate the need for you to use the "-webkit-box-shadow" CSS command (unless, of course, you need the autofill background-color to be different than the non-autofill background-color).
Hope this helps somebody! Cheers.
I found that increasing the border width and making it the same colour as the input background seems to help. Then reduce the padding to achieve the same height:
https://jsfiddle.net/Lguucatv/1/
border: 4px solid #202020;
padding: 1px;
Also modified the box-shadow to match original design:
box-shadow: 0 0 0 1px #000, 0 0 5px 1px #000;
Is there a way to get rid of them entirely and maintain the field's original style?
Here is the css
body {
background-color: #282828;
}
.field {
background-color: #202020;
border: 1px solid #000;
color: #d8d8d8;
margin: 100px; /* adding space around it to */
padding: 5px; /* make it easier to see */
}
input:-webkit-autofill {
box-shadow: 0 0 0 100px #202020 inset, 0 0 5px #000;
-webkit-text-fill-color: #d8d8d8;
}
DEMO
add transition to background-color with high animation time to the .field element
.field {
...
transition: background-color 5000s;
}
solutuion found here
demo on codepen
I fixed the problem by adding this to my css:
#media (prefers-color-scheme: dark) {
[data-theme*=dark] {
color-scheme: dark;
}
}
As the title suggests, I'm trying to add font borders to the text I have in a page I'm making. The background has a lot of reds, greens, yellows and blacks so a single colour really wouldn't suffice. Here is the code.
I know I can do something with webkit like this:
h1 { -webkit-text-stroke: 1px black; }
But since it's not supported on browsers I'm stuck on square one.
Can anyone help me?
For a 1 pixel stroke, text-shadow would do:
text-shadow: 0 0 1px black;
Using
You can only use text-stroke on webkit browsers (Chrome, safari, etc)
Source: caniuse.com
But like other poeple answered, you can use text-shadow instead
p {
text-shadow: 0 0 1px black;
}
FIDDLE
http://www.w3.org/Style/Examples/007/text-shadow.en.html
see this link may help
it adds text shadow to letters if you dont want feather then keep value to 0px will give you border around text
Is there a way to add a text-shadow in CSS that is similar to the text-shadow created in Photoshop? I have tried, but the resulting shadow is still different than in Photoshop.
Hey no you can do this
.div{
box-shadow:0 0 0 0 rgba(0,0,0,1); // outer shadow of box
box-shadow:0 0 0 0 rgba(0,0,0,1) inset; // inner shadow of box
text-shadow:0 0 0 rgba(0,0,0,1); // for text shadow
}
more info click here http://css-tricks.com/snippets/css/css-text-shadow/
The short answer is no.
Adobe Photoshop and all the different browsers interpret shadows differently from one another. You'll have to judge with your eyes.
try like this
yourDiv
{
box-shadow: 8px 8px 5px #000000;
}
try different pixels according to the design, and as well as color, use color picker to check exact color code.
As mentioned above its not at all possible. As browser renders the shadow differently than photoshop.
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.
I am not sure how to call this kind of feature but my question is, is there a way to set the color of the following effect:
Using just border doesn't make it.
Use the outline property:
input:focus { outline: 2px orange solid }
outline works in all modern browsers except for IE < 8.
The :focus pseudo-class works in all modern browsers except IE - you would have to use a JavaScript workaround for that as shown here.
However, you will not be able to duplicate the desired effect (which seems to be Chrome's default behaviour when focusing on a field?) entirely because outline doesn't have a radius property. Maybe #Sarfraz' suggestion is a suitable workaround for that.
You can use this css:
input:focus,textarea:focus,select:focus{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
Check out the demo
off course you can change the color as you like.