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.
Related
I want to fade an article's content to white to signify that further content can be unlocked. I can achieve this by adding an :after element with a white gradient.
But this techniques makes the text under the area under the gradient awkwardly unselectable and unresponsive to hover effects.
How can I produce a similar effect, and still let the user interact properly with the content underneath the gradient?
You can set pointer-events: none on :after
More info and an example: https://css-tricks.com/almanac/properties/p/pointer-events/
Here's the codepen: http://codepen.io/zakkain/pen/dseHt used in aforementioned example.
I have also added a fiddle as an example: https://jsfiddle.net/quzoqone/4/
Use this library: AnimateCSS
There's a lot of cool effects including fadeIn
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
I am using the carousel component from the new Bootstrap 3 RC2. However, I noticed that in practice the caption is often not readable because my pictures very a lot in color. The previous Bootstrap 2.3 used a black gradient for captions but that seems to have been removed.
What would be a way to style my caption with CSS to make them readable against arbitrary images? I have tried to play with shadow and background-color, but that just gets incredibly ugly.
Here some example code: http://bit.ly/1eX8Tz9
In order to get the content displayed on the gray semi-transparent background
Just Add the following code to your css
.carousel-caption{
background: rgba(0,0,0,0.5);
}
See the Demo Here
Hey guys I am having a small issue with an assignment. I have to create this page and it looks great in Chrome but every div cell renders one pixel smaller in Firefox, I believe it has something to do with border width. Is there a work around or something I am doing wrong?
I am using a CSS reset, and I have declared my doc type.
Should I have just built this page using tables instead? Sorry no link to published code, also when I place the code in the code block it still displays the HTML.
https://docs.google.com/file/d/0B8uifJLGRXapcHF1VzRNNGo1b2M/edit?pli=1
Thanks in advance.
Try using CSS outline that will also work. An outline is a line that is drawn around elements (outside the borders) to make the element "stand out".
However, the outline property is different from the border property.
The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.
ie.
.example {outline: 1px solid pink;}
Try using the box-sizing property in CSS to fix this problem. box-sizing:border-box; will render the border and padding inside the actual width and height of the element. For a better description check this http://css-tricks.com/box-sizing/
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.