I am trying to achieve a color of red on a button that only seems possible to get by using filter: brightness(x). The problem I have with this is, most importantly, that utilizing this style slightly but unmistakably pixelates the font of the button, but also it brightens text color along with the background.
I have tried adding the text after the styling, but it is all the same. This JSFiddle demonstrates the problems described.
How can I counter or avoid this effect? Or achieve a brighter color without using brightness filter?
First you may notice that the brightness filter has no effect on your background color (remove the text and see that there is no effect) simply because your color is red = rgb(255,0,0) and this filter apply a linear transformation which is a simple multiplication of the RGB values having the max value 255. In you case you have a value bigger than 100% so the color will remain the same!
button {
color: white;
display:block;
font-size: 1.8em;
font-weight: bold;
position:relative;
background:red;
border:none;
width:200px;
height:20px;
}
button:hover{
filter: brightness(180%);
}
<button></button>
By the way an idea is to use a pseudo-element to create the background on where you apply your filter and avoid changing the text:
button {
color: white;
display:block;
font-size: 1.8em;
font-weight: bold;
position:relative;
background:none;
border:none;
}
button:before {
content:"";
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:rgb(180,20,20);
z-index:-1;
}
button:hover::before {
filter: brightness(180%);
}
<button>The quick brown fox (hover me)</button>
I am pretty sure you can just pick a color you like in a hexadecimal format. You can find plenty of websites that offer pallets to pick from. Then you can just delete the filter like so JSFiddle
button {
color: white;
display:block;
font-size: 1.8em;
background: #ff0022;
font-weight: bold;
}
Related
Suppose I have an element where the text color is inherited:
element { color: inherited}
I'd also like to darken this on hover:
element:hover { color:darker(10%) }
Is there a pure css (No javascript) trick/hack for this that has fairly good browser support?
you can use filter to get near to what you want to achieve.
see the attached demo
.p{
color: blue;
font-size: 2em;
text-transform: uppercase;
font-weight:bold;
font-family:arial, sans-serif;
}
.c:hover{
filter: brightness(0.2)
}
<div class="p">
<div class="c">hello</div>
in site we have like below text as in link1 :
But instead of text - Black & Green , i want to display images as below or css icons as here....
i uploaded Black & Green images to below path :
http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png
http://sbdev2.kidsdial.com:81/media/catalog/custom/black.png
i am trying below css to display icons instead of text, but its not displaying any icons in site. I want to hide text with icons.
label[for=options_455_2]
{
width:50px; height:50px; background:#000; border-radius:50%;
}
You have to use display:block on label. So that empty label does not have zero width and height.
Secondly link you took the idea from is setting the background-color. but you are not. Either use different background-colors (like that link) or use background-image property.
Here's a working snippet.
label{
width:50px;
height:50px;
border-radius:50%;
background-image:url("http://sbdev2.kidsdial.com:81/media/catalog/custom/green.png");
background-size:cover;
display:block;
color:transparent;
}
<label>jdjshjkdhd</label>
if you have no influence on html I can give you a hack :))
label {
color: #fff;
width: 0px;
}
label::before {
display: block;
width: 50px;
height: 50px;
background: green;
border-radius: 50%;
}
here is codepen http://codepen.io/kejt/pen/EZZGeE
This workaround could help you with your requirements. Change the color of background based on for value.
label[for=options_453_2]{position:relative;border-radius:50% !important;max-width: 20px !important;}
label[for=options_453_2]:before{background: #000 !important;display:block;content: "";position: absolute;left: 0;top: 0;z-index: 9999;width: 100%;height: 100%;}
How to remove spacing from top and bottom on Ion Icons?
I use it in my html like :
<div><i className="close ion-ios-close-empty" /></div>
and this is default style for all ionicons:
display:inline-block;
font-family:"Ionicons";
speak:none;
font-style:normal;
font-weight:normal;
font-variant:normal;
text-transform:none;
text-rendering:auto;
line-height:1;
font-size: inherit;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
And close class is as follows :
.close{
color: #ffffff;
font-size: 50px;
}
I didn't add any style to it, I only increased font-size, but the icon is shown like on the photo.
Is there any way to remove the spacing on top and bottom?
It's a little bit later, but my solution is to set the line-height to 0.6 em:
.close{
color: #ffffff;
font-size: 50px;
line-height: 0.6em;
}
It's more like a work around, but if you play a liite bit with the line-height property, you can get good results.
Hint: If you want to choose shadow, use text-shadow and not box-shadow.
Use line height property if you want 20px height.
Example:
[selector] {
line-height: 20px;
}
I found a somewhat annoying glitch in Firefox. See this jsfiddle: http://jsfiddle.net/zMX75/2/.
The blue part is supposed to be hoverable. But, in Firefox with a button tag, it simply does not work.
Here is the code:
button, .button {
position:relative;
overflow:visible;display:inline-block;
height:23px;padding:0 5px;border:0;margin-left:20px;
font-size: 12px;line-height:23px;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
color: #000;
background: #ff0;
&::before, &::after {
position:absolute;top:0;
display:inline-block;width:20px;height:23px;
content: "";
background: #00f;
}
&::before {left:-20px;}
&::after {right:-20px;}}
I use this code to make an arrow like button using a sprite.
So, I'd like to know if there is a workaround other than changing the tag, because it is used to submit a form.
One solution is to give the button some left and right padding, and to position its ::before and ::after over the padding; so that they are inside the button's clickable area.
In other words, adding this to the CSS works:
button {padding:0 25px; margin-left:0;
&::before {left:0}
&::after {right:0}
}
See updated fiddle.
That said, I'm not sure why it does work with the <a>. If the button needs to be solved like this, why doesn't the <a> need to be treated the same way? Oh well.
Give
display:block;
Not
display:inline-block;
UPDATE
In my style sheet I have a conflict with these snippets. If I keep this one
<style type="text/css">
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
then, the gradient effect of the one below works, but the header banner is displaced towards the right. If I remove that, the header banner positions itself correctly, but the gradient effect of the code below does not work :/
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
a {
UPDATE II
These 3 lines
::selection{ background-color: #E13300; color: white; }
::moz-selection{ background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
have a huge impact on the rest of the page
They make this code:
body {
background-image:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
be effective. If I remove those 3 lines, the gradient effect will not take effect and the font letters will not be of that family but the standard times roman. However, the negative effect is, like I said, that it displaces to the right a banner that I have as header
I have one header page, one controller and one view and the style sheet to which I have a link in the View
Like the others have said the code doesn't affect the positioning of the elements. Only way that it can affect the header would be if that piece of code is not treated as css at all. Check if the code is in the correct style tags.
The moz is for Firefox and as stated already its for styling. Are you using IE? as if so Id suggest trying alternate browser as well as IE has issues with the double colon which is for css3(no suprise there). have a look here
as I used this when I first came across these and it described them well.
That code shouldn't affect what you're doing. It is code that will change the background colour and text colour of text when it is selected by the user using their mouse.
Could you give us an example link of this happening with it commented out, please?
EDIT
What is the center: attribute supposed to be doing? It isn't valid CSS...