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>
Related
I've got 2 <div>s that each gather their text from some JS that I've written.
But I want the end-result to look like in the following image. And I can't figure out how to do that.
I can consolidate them into a single but then I have the issue of needing to apply two different weights to a single <div>, which also wracks my brain.
So basically I want text with 2 different font-weights to be underlined with no interruption.
I've tried the following, and a lot of googling:
div.parentDiv {
text-decoration-line : underline;
}
Is this what you are after?
div {
font-weight: 700;
text-decoration: underline;
}
div span {
font-weight: 400;
}
<div>
Good Reviews
<span>(30)</span>
</div>
Its hard to know with your current question, could you add your HTML and JS so we can see the whole example.
I guess you wanted to both the div text to be underlined.
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.parent {
display: flex;
flex-direction: row;
text-decoration: underline;
font-weight: 600;
}
.child1 {
color: red;
}
.child2 {
color: green;
}
<div class="parent">
<div class="child1">Good Reviews</div>
<div class="child2">(30)</div>
</div>
However to achieve the result you want you can use .
body {
font-family: sans-serif;
background: #dedede;
padding: 48px;
}
.child1 {
text-decoration: underline;
}
<div>
<span class="child1">Good Reviews (30)</span>
</div>
It can be done by making the underline apply to both the .parentDiv and to its child <div>s, as in this example:
div.parentDiv,
div.parentDiv>div {
text-decoration-line: underline;
}
div.div1 {
display: inline-block;
font-weight: bold;
}
div.div2 {
display: inline-block;
}
<div class="parentDiv">
<div class="div1">
Good reviews
</div>
<div class="div2">
(30)
</div>
</div>
Note that in some browsers the underline may not cross through the bottom of the parenthesis the way it does in your example image. If you absolutely need that, then that can't easily be achieved using regular text formatting CSS; you'd need to add extra elements (or pseudo-elements) with custom border formatting.
To style the two parts individually you need to have at least one of them in its own element.
This snippet wraps the parts in spans and puts the underline under the whole containing element.
Note that to get a continuous underline like in the image given in the question you need to set underline position as well, otherwise, in some browsers, there will be a break in the line when it comes across a descender (in this case the brackets).
If you need the line to cut across the descenders in all browsers you will need to abandon underline and paint in the line using linear-gradient background on the containing div.
div {
text-decoration: underline;
text-underline-position: under;
}
span:nth-child(1) {
font-weight: bold;
}
<div><span>Good Reviews</span><span>(30)</span></div>
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;
}
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 have some CSS that looks like this:
#content h2 {
background: url(../images/tContent.jpg) no-repeat 0 6px;
}
I would like to replace the image with an icon from Font Awesome.
I do not see anyway to use the icon in CSS as a background image. Is this possible to do assuming the Font Awesome stylesheets/fonts are loaded before my CSS?
You can't use text as a background image, but you can use the :before or :after pseudo classes to place a text character where you want it, without having to add all kinds of messy extra mark-up.
Be sure to set position:relative on your actual text wrapper for the positioning to work.
.mytextwithicon {
position:relative;
}
.mytextwithicon:before {
content: "\25AE"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
}
EDIT:
Font Awesome v5 uses other font names than older versions:
For FontAwesome v5, Free Version, use: font-family: "Font Awesome 5 Free"
For FontAwesome v5, Pro Version, use: font-family: "Font Awesome 5 Pro"
Note that you should set the same font-weight property, too (seems to be 900).
Another way to find the font name is to right click on a sample font awesome icon on your page and get the font name (same way the utf-8 icon code can be found, but note that you can find it out on :before).
Actually even font-awesome CSS has a similar strategy for setting their icon styles. If you want to get a quick hold of the icon code, check the non-minified font-awesome.css file and there they are....each font in its purity.
Consolidating everything above, the following is the final class which works well
.faArrowIcon {
position:relative;
}
.faArrowIcon:before {
font-family: FontAwesome;
top:0;
left:-5px;
padding-right:10px;
content: "\f0a9";
}
To use font awesome using css follow below steps -
step 1 - Add Fonts of FontAwesome in CSS
/*Font Awesome Fonts*/
#font-face {
font-family: 'FontAwesome';
//in url add your folder path of FontAwsome Fonts
src: url('font-awesome/fontawesome-webfont.ttf') format('truetype');
}
Step - 2 Use below css to apply font on class element of HTML
.sorting_asc:after {
content: "\f0de"; /* this is your text. You can also use UTF-8 character codes as I do here */
font-family: FontAwesome;
padding-left: 10px !important;
vertical-align: middle;
}
And finally, use "sorting_asc" class to apply the css on desired HTML tag/element.
You can try this example class. and find icon content here: http://astronautweb.co/snippet/font-awesome/
#content h2:before {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
content: "\f007";
}
I am bit late to the party. Just like to suggest another way.
button.calendar::before {
content: '\f073';
font-family: 'Font Awesome 5 Free';
left: -4px;
bottom: 4px;
position: relative;
}
position, left and bottom are used to align the icon.
Sometimes adding font-weight: 600 or above also helps.
No need to embed content into the CSS. You can put the badge content inside the fa element, then adjust the badge css. http://jsfiddle.net/vmjwayrk/2/
<i class="fa fa-envelope fa-5x" style="position:relative;color:grey;">
<span style="
background-color: navy;
border-radius: 50%;
font-size: .25em;
display:block;
position:absolute;
text-align: center;
line-height: 2em;
top: -.5em;
right: -.5em;
width: 2em;
height: 2em;
border:solid 4px #fff;
box-shadow:0px 0px 1px #000;
color: #fff;
">17</span>
</i>
#content h2:before {
content: "\f055";
font-family: FontAwesome;
left:0;
position:absolute;
top:0;
}
Example Link:
https://codepen.io/bungeedesign/pen/XqeLQg
Get Icon code from:
https://fontawesome.com/cheatsheet?from=io
Alternatively, if using Sass, one can "extend" FA icons to display them:
.mytextwithicon:before {
#extend .fas, .fa-angle-double-right;
#extend .mr-2; // using bootstrap to add a small gap
// between the icon and the text.
}
It seems that the given answers don't give a real background as the fontawesome is rendered outside the bloc you want the background in.
Here is my solution to have a "real" background effect :
html :
<div id="bloc" class="bg_ico_outer" style="">
<i class="fa fa-bookmark-o bg_ico"></i>
<div class='bloc_inner'>
<h2>test fontawesome as background</h2>
</div>
</div>
css :
.bg_ico {
position: absolute;
top: 0px;
right: -10px;
font-size: 17em;
color: green;
transform: rotate(25deg);
}
.bg_ico_outer{position: relative; overflow: hidden;}
#bloc{
height: 200px;
width:200px;
background: blue;
margin:50px auto;
}
.bloc_inner{
position: absolute;
}
h2{color: white;}
For this you just need to add content attribute and font-family attribute to the required element via :before or :after wherever applicable.
For example: I wanted to attach an attachment icon after all the a element inside my post. So, first I need to search if such icon exists in fontawesome. Like in the case I found it here, i.e. fa fa-paperclip. Then I would right click the icon there, and go the ::before pseudo property to fetch out the content tag it is using, which in my case I found to be \f0c6. Then I would use that in my css like this:
.post a:after {
font-family: FontAwesome,
content: " \f0c6" /* I added a space before \ for better UI */
}
This seems to be the simplest solution :-)
#content h2:before {
font-family: FontAwesome;
content: "\f055";
position:absolute;
left:0;
top:0;
}
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...