I'm having a curious problem with Less (bootstrap), in the property border-botom-color (CSS side).
I have this example where the bottom line of the active tab (Section 1) appears:
fiddle 1
And I have this exemple where the bottom line of the active tab (Section 1) do not appears:
fiddle 2
The unique diference is on CSS, at line 5365, in the fisrt example is border-bottom-color: transparent;, and in second example is border-bottom-color: #FFF;
I would like know why "transparent" do not works but putting a color (like #FFF) it works?
it's because ul.nav-tabs tag (parent of a tag) have colored border, the long grey horizontal border (see jsfiddle1 line 5328). you need to set a border bottom color as white to override it's parent border, so it will be look transparent.
transparent just adds a completely transparent border over the top of the one defined by the border property hence the color is shown. #fff is shown over the top of the border and blocks out the other color hence white is shown. You could get around the problem by specifying a color for each border individually.
the reason is because that line is being generated somewhere else. So when you put border-bottom-color:transparent; you are just seeing the other line right through it. But when you make it white, you are drawing a new white line over it.
fiddle displaying issue
Related
I'm working to adjust some components so that they all function and look good in high-contrast mode. Edge seems to be adding a black background under all text that IE11 does not add. I can't seem to find a way to target this background in CSS, or any other way to normalize the behavior between the two browsers.
For example, let's say I have the following:
<div class="SelectedText">
Text!
</div>
And let's say I assigned background-color: cyan; and color: black; to the .SelectedText div.
In this scenario, IE11 renders it as expected with the div and text having the assigned colors. However, in Edge the div background and text are given the right colors, but the text itself gets a black background drawn behind it, making it unreadable black on black text.
The following image illustrates this problem occurring in the context of menu items with with basically the same markup described above.
Is there any way to disable or target this extra background that Edge adds?
Found the answer to this eventually. Setting -ms-high-contrast-adjust: none; on the parent can disable the backgrounds that Edge puts behind text.
I am searching for a pure CSS method for creating transparent text within a box(div,p,etc) where the box is filled with a color surrounding the text, but not the text itself (which would be transparent a la rgba/hsla).
Imagine a div styled in such a way that the text color within is rgba .2 alpha lvl, and the background color is solid, where the background solid color cannot be seen in the text. Of course, a solution using multiple stacked divs/blocks would be greatly acceptable, but should allow for a hover state, so the effect can be switched on/off. In using this, one could apply this div on top of an image or another div that can be seen through the letters.
SO! CSS/html works in such a way that text is always applied on top of a background (called a background for a reason), so, using transparent colors on text color does nothing but show the color of the background. I have tried creating a background with a big box shadow, in order to see if it's ever calculated differently, and it is not (and couldn't think of another method).
Instead of blabbering on with my limited CSS knowledge, I think you get the point, so give me your best! I want this to work in Chrome and Firefox at least.
Stacked Overflow doesn't allow me to put a jsfiddle without accompanied code, and I don't want to put pointless code here just to link to a 'starting point' code.
Instead, here's an image explaining the obvious idea:
Demo Fiddle
You CAN accomplish this in CSS only, but with limited support.
You can set the -webkit-background-clip property, and -webkit-text-fill-color to transparent.
This will only work in webkit browsers however.
e.g.:
div {
color: white; /* Fallback */
background: url(yourimage.png) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
See here for more on background-clip
The background-clip CSS property specifies whether an element's
background, either the color or image, extends underneath its border.
If there is no background image, this property has only visual effect
when the border has transparent regions (because of border-style) or
partially opaque regions; otherwise the border covers up the
difference.
Alternatively- you can use SVG, per this question
Let me start by saying, I like the border that chrome is using for my inputs, my issue arrises for the textarea. The textarea is using the color attribute as a border as well as the intended function of coloring the inputed text. Here is my css:
select, textarea, input{ font-size:25px; font-weight:bold; color: #FF4500;}
As i said I want the border that chrome makes, I just dont want the colored border it puts around ONLY the textarea for some reason. There any way i can apply the color to just the text or maybe prevent the color attribute from changed the border color?
Remove the setting (in code other than the part you posted) that sets border properties on textarea, such as border-width or border-radius.
The reason is such settings may make Chrome (or other browsers) use a normal border around an element, as determined by CSS properties on it, instead of the default border it draws with special routines that are immune to CSS. The effects vary by browser and by property. For example, with your example code, on Chrome, if you add border-style: solid, then an input element gets orange red border, but select and textarea keep their default gray borders. But if you add border-radius: 8px instead, then input keeps its default border color (though with rounded corners) whereas both select and textarea get orange red borders.
Right now I have this CSS for a button:
background: #19558D url(../images/gradient.gif) repeat-x top left;
The gradient appears, but the background color doesn't. When I reload the page, the color appears for a split second, but then disappears to the gradient. How can I get both of them to work?
Ok, so you have several options:
1. Use Only Images:
You can do the job by editing the gradient so that it looks exactly how you like it to be, without any new CSS. (This would be the one you used to solve the problem).
2. Use Image on the top and the rest in solid color:
element{ background:#000 (url) top left repeat-x; }
This will place the image in url at the top, and make the rest of the element of a certain solid color. Be aware that if the image covers all of the element and isn't transparent, then the solid color will not be visible.
3. Make the gradient transparent/alpha:
If the gradient covers all of the element, you can make it transparent, or semi transparent, so that the CSS background-color is visible behind it. For example, if you make a gradient that goes from black to transparent, and then add a white CSS bg, then you will get a black to white gradient. Be aware that the only images that will work with this method are .png ones because they are the only ones that support alpha levels (partial transparencies).
is the GIF transparent? I use PNG format as PNG-24 allows alphablending masks, where as GIF only supports transparent or not (1/0)
But I think you need to post a link to it or a image of what it looks like, including the GIF.
We need some pixels specs, such as width and height to fully understand the problem.
Top border is 6px and green. Left, right and bottom 1px #ccc. The 1px border is bleeding into the 6px, see fiddle for an example.
http://jsfiddle.net/AzHUt/34/
Any solution other than div soup?
for me, this looks like it works exactly like it shoud - set your border-width to 10px for all sides and 30px for the top-border to see this more clearly: http://jsfiddle.net/AzHUt/21/
if you want this to look like a "window" with an bold bar on the top, you'll need another markup ("div soup" like you said).
EDIT: i think this is what you've expected: http://jsfiddle.net/AzHUt/28/ - it's just a little change in the markup, adding another div to it (ugly, but it does the job)
No; you'll need to include at least one other block: if you increase the width of the borders by a factor 10; you'll see why: all colors and widths are part of the same border; there's no way the browser can know which is "more imortant".
You don't actually need any markup changes, however; a CSS2 generated box will do too (though it's pretty hacky IMHO): http://jsfiddle.net/AzHUt/33/