Anyone know why CSS provides color for text, but does not have font-color or text-color?
Seems very counter-intuitive, kind of like text-decoration: underline rather than font-style or something related to fonts.
Does anyone know why/how the W3C came up with such a wide array of CSS names like this?
The same way Boston came up with its street plan. They followed the cow paths already there, and built houses where the streets weren't, and after a while it was too much trouble to change.
I would think that one reason could be that the color is applied to things other than font. For example:
div {
border: 1px solid;
color: red;
}
Yields both a red font color and a red border.
Alternatively, it could just be that the W3C's CSS standards are completely backwards and nonsensical as evidenced elsewhere.
I know this is an old post but as MisterZimbu stated, the color property is defining the values of other properties, as the border-color and, with CSS3, of currentColor.
currentColor is very handy if you want to use the font color for other elements (as the background or custom checkboxes and radios of inner elements for example).
Example:
.element {
color: green;
background: red;
display: block;
width: 200px;
height: 200px;
padding: 0;
margin: 0;
}
.innerElement1 {
border: solid 10px;
display: inline-block;
width: 60px;
height: 100px;
margin: 10px;
}
.innerElement2 {
background: currentColor;
display: inline-block;
width: 60px;
height: 100px;
margin: 10px;
}
<div class="element">
<div class="innerElement1"></div>
<div class="innerElement2"></div>
</div>
Related
Here's my CSS:
div {
border: 1px solid
font-size: 30px
color: red
width: fit-content
height: fit-content
}
Here's my HTML:
<div>⮝</div>
Here's how it shows up in the browser:
Here it is on JS Fiddle:
https://jsfiddle.net/f9wkb4qp/
I'd like to remove the gap between the div border and the font. eg. I'd like to make the result look more like this:
Any ideas as to how I might achieve this effect? Or is this even possible? Like if the white space is actually part of the character then I guess it might not be possible?
Try to use line-height.
div {
border: 1px solid;
font-size: 30px;
color: red;
width: fit-content;
line-height: 0.9;
}
<div>⮝</div>
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I'm fighting with (yet-another) IE8 bug.
Basically, I have a small square container, with an arrow inside built with the :before and :after pseudoelements. The HTML goes something like this:
<div class="container">
<div class="arrow" />
</div>
And the CSS for that is
.container {
height: 58px;
width: 58px;
background-color: #2a5a2a;
}
.arrow {
padding-top: 7px;
}
.arrow:before {
margin: 0 auto;
content: '';
width: 0;
border-left: 12px transparent solid;
border-right: 12px transparent solid;
border-bottom: 13px gray solid;
display: block;
}
.arrow:after {
margin: 0 auto;
content: '';
width: 12px;
background-color: gray;
height: 14px;
display: block;
}
Now, I want the arrow inside it to change color when I hover over the container. I added this CSS:
.container:hover .arrow:after {
background-color: white;
}
.container:hover .arrow:before {
border-bottom-color: white;
}
And that's where the problem begins. That works on most browsers, but on IE8 the background-color property is not overridden. So I get only the tip of the arrow with the new color, but not the square that makes the "body" of it.
To make things more interesting, if I add the following to also change the container background-color to something slightly different, then everything starts to work and the background-color for the arrow changes!
.container:hover {
background-color: #2a5a2b;
}
If I only set the :hover status for the container, and I set THE SAME background color that it already had, then IT DOESN'T WORK. I have to change it if I want the background-color to change.
Here's a jsfiddle if you want to try it: http://jsfiddle.net/Ke2S6/ Right now it has the same background color for the container on hover, so it won't work on IE8. Change one single digit and it'll start working.
So... any ideas?