IE crossing out pseudo element CSS? - css

I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.
It crosses out the CSS and acts like it's not there, which kinda aggrevates me.
Would anyone know what I'm doing wrong?
.newbutton {
border-radius: 50%;
width: 74px;
height: 74px;
position: relative;
background-color: black;
margin: 60px 0px 25px 17px;
overflow: visible;
}
.newbutton:before {
content: "f";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -1;
top: 37px;
left: 37px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation-name: fadecolor;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-name: fadecolor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.newbutton:after {
content: "";
width: 80px;
height: 80px;
position: absolute;
border-radius: 50%;
z-index: -2;
top: -3px;
left: -3px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
}
<div class="starttour">
<div class="newbutton headerbutton">
<span class="iconhead icon-02-arrow-icon"></span>
</div>
<p>START TOUR</p>
</div>
Screenshot of what happens:

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:
Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:
(function () {
var el = document.querySelector( ".newbutton" );
[ "", "::before", "::after" ].forEach(function ( e ) {
// Output: 74px, 80px, 80px
console.log( window.getComputedStyle( el, e ).height );
});
}());
I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

I had this exact same issue! You must give your :before and :after pseudo elements a display property.
Add the following to the :before and :after.
display: block;
This should fix your issue. :)

To add onto the answer above. I tried display: block but my issue was that the background image was coming out warped. Instead I used below:
display: inline-block;
This fixed my issue with warped images within my :before :after

As I had the same problem with Material Font and IE11 and could not solve it with the above solutions, I looked further:
The documentation of the material design icons mentions to use
<i class="material-icons"></i>
for browsers not supporting ligatures. The codepoints for each item are listed here: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints
The problem with :after elements is that HTML in the content-Tag is rendered as plain text showing the &#x.. so you have to use the \ escape as following:
content: "\e5c5";

I had this exact same issue! You must give your pseudo element's parent a overflow : visible property.

Check out this link "http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field", as quoted from this link
:after and :before are not supported in Internet Explorer 7 and under, on any elements.
It's also not meant to be used on replaced elements such as form elements (inputs) and image elements.
In other words it's impossible with pure CSS.
/*
* The trick is here:
* this selector says "take the first dom element after
* the input text (+) and set its before content to the
* value (:before).
*/
input#myTextField + *:before {
content: "👍";
}

Related

CSS transform not working in IE11

Hi i am doing an image gallery where hover the thumbnails, text will appear.
It is correct in firefox and chrome but seems to have issues in IE11.
Also the fonts and its colours are different too.
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
}
.text {
background-color: rgba(183, 191, 183, 0.65);
color: white;
font-size: 16px;
width:100%;
height:100%;
padding-top:45%;
padding-left:2%;
}
This is the correct one in chrome and firefox
IE 11 - wrong
for those who come to this question. The OP shared his website in a previous question and there, all the above styles are inside a #media not all, (-webkit-transform-3d) . so.
as i said in a previous answer to one of your questions .
#media(-webkit-transform-3d) indicates whether 3d transforms are supported or not and this is a NON STANDARD as MDN states
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
-webkit-transform-3d is a non-standard boolean CSS media feature whose value indicates whether vendor-prefixed CSS 3D transforms are supported or not. This media feature is only supported by WebKit and Blink. The standards-based alternative is to use a #supports feature query instead.
and, as stated in MDN, it is NOT supported in IE at all . you should use #supports . so the problem is not with the styles but with the media condition
#supports {
<group-rule-body>
}
See DOCs here > #media MDN -webkit-transform3d
Add transform as an attribute like this
var element = querySelector(".middle")
element.setAttribute("transform","translate("-50, -50")"

Issue with text opacity when hover on a div with css [duplicate]

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque?
I'd like to accomplish this without having the text and the background as two separate elements.
When trying:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}
<p>
<span>Hello world</span>
</p>
It looks like child elements are subjected to the opacity of their parents, so opacity:1 is relative to the opacity:0.6 of the parent.
Either use a semi-transparent PNG or SVG image or use CSS:
background-color: rgba(255, 0, 0, 0.5);
Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).
Beware that the text still needs sufficient contrast with the background, once the underlying background shines through.
<p style="background-color: rgba(255, 0, 0, 0.5);">
<span>Hello, World!</span>
</p>
In Firefox 3 and Safari 3, you can use RGBA like Georg Schölly mentioned.
A little known trick is that you can use it in Internet Explorer as well using the gradient filter.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
The first hex number defines the alpha value of the color.
Full solution all browsers:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
This is from CSS background transparency without affecting child elements, through RGBa and filters.
Screenshots proof of results:
This is when using the following code:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome, and Internet Explorer as far as I can see.
Put a container div and two children divs at the same level, one for content, one for the background.
And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>
For a simple semi-transparent background color, the above solutions (CSS3 or bg images) are the best options. However, if you want to do something fancier (e.g. animation, multiple backgrounds, etc.), or if you don't want to rely on CSS3, you can try the “pane technique”:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
The technique works by using two “layers” inside of the outer pane element:
one (the “back”) that fits the size of the pane element without affecting the flow of content,
and one (the “cont”) that contains the content and helps determine the size of the pane.
The position: relative on pane is important; it tells back layer to fit to the pane's size. (If you need the <p> tag to be absolute, change the pane from a <p> to a <span> and wrap all that in a absolutely-position <p> tag.)
The main advantage this technique has over similar ones listed above is that the pane doesn't have to be a specified size; as coded above, it will fit full-width (normal block-element layout) and only as high as the content. The outer pane element can be sized any way you please, as long as it's rectangular (i.e. inline-block will work; plain-old inline will not).
Also, it gives you a lot of freedom for the background; you're free to put really anything in the back element and have it not affect the flow of content (if you want multiple full-size sub-layers, just make sure they also have position: absolute, width/height: 100%, and top/bottom/left/right: auto).
One variation to allow background inset adjustment (via top/bottom/left/right) and/or background pinning (via removing one of the left/right or top/bottom pairs) is to use the following CSS instead:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
As written, this works in Firefox, Safari, Chrome, IE8+, and Opera, although IE7 and IE6 require extra CSS and expressions, IIRC, and last time I checked, the second CSS variation does not work in Opera.
Things to watch out for:
Floating elements inside of the cont layer will not be contained. You'll need to make sure they are cleared or otherwise contained, or they'll slip out of the bottom.
Margins go on the pane element and padding goes on the cont element. Don't do use the opposite (margins on the cont or padding on the pane) or you'll discover oddities such as the page always being slightly wider than the browser window.
As mentioned, the whole thing needs to be block or inline-block. Feel free to use <div>s instead of <span>s to simplify your CSS.
A fuller demo, showing off the flexibility of this technique by using it in tandem with display: inline-block, and with both auto & specific widths/min-heights:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
And here's a live demo of the technique being used extensively:
There is a trick to minimize the markup: Use a pseudo element as the background and you can set the opacity to it without affecting the main element and its children:
DEMO
Output:
Relevant code:
p {
position: relative;
}
p:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>
Browser support is Internet Explorer 8 and later.
pseudo elements
opacity
It's better to use a semi-transparent .png.
Just open Photoshop, create a 2x2 pixel image (picking 1x1 can cause an Internet Explorer bug!), fill it with a green color and set the opacity in "Layers tab" to 60%. Then save it and make it a background image:
<p style="background: url(green.png);">any text</p>
It works cool, of course, except in lovely Internet Explorer 6. There are better fixes available, but here's a quick hack:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
This method allows you to have an image in the background and not only a solid color, and can be used to have transparency on other attributes such as borders. No transparent PNG images are required.
Use :before (or :after) in CSS and give them the opacity value to leave the element at its original opacity. Thus you can use :before to make a faux element and give it the transparent background (or borders) you want and move it behind the content you want to keep opaque with z-index.
An example (fiddle) (note that the DIV with class dad is just to provide some context and contrast to the colors, this extra element is actually not needed, and the red rectangle is moved a bit down and to the right to leave visible the background behind the fancyBg element):
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
with this CSS:
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
In this case .fancyBg:before has the CSS properties you want to have with transparency (red background in this example, but can be an image or borders). It's positioned as absolute to move it behind .fancyBg (use values of zero or whatever is more appropriate for your needs).
The easiest method would be to use a semi-transparent background PNG image.
You can use JavaScript to make it work in Internet Explorer 6 if you need to.
I use the method outlined in Transparent PNGs in Internet Explorer 6.
Other than that, you could fake it using two side-by-side sibling elements - make one semi-transparent, then absolutely position the other over the top.
Almost all these answers assume the designer wants a solid color background. If the designer actually wants a photo as the background the only real solution at the moment is JavaScript like the jQuery Transify plugin mentioned elsewhere.
What we need to do is join the CSS working group discussion and make them give us a background-opacity attribute! It should work hand in hand with the multiple-backgrounds feature.
The problem is, that the text actually has full opacity in your example. It has full opacity inside the p tag, but the p tag is just semi-transparent.
You could add an semi-transparent PNG background image instead of realizing it in CSS, or separate text and div into two elements and move the text over the box (for example, negative margin).
Otherwise it won't be possible.
Just like Chris mentioned: if you use a PNG file with transparency, you have to use a JavaScript workaround to make it work in the pesky Internet Explorer...
Here's how I do this (it might not be optimal, but it works):
Create the div that you want to be semi-transparent. Give it a class/id. Leave it empty, and close it. Give it a set height and width (say, 300 pixels by 300 pixels). Give it an opacity of 0.5 or whatever you like, and a background color.
Then, directly below that div, create another div with a different class/id. Create a paragraph inside it, where you'll place your text. Give the div position: relative, and top: -295px (that's negative 295 pixels). Give it a z-index of 2 for good measure, and make sure its opacity is 1. Style your paragraph as you like, but make sure the dimensions are less than that of the first div so it doesn't overflow.
That's it. Here's the code:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}
<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>
This works in Safari 2.x, but I don't know about Internet Explorer.
If you are a Photoshop guy, you can also use:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Or:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Here is a jQuery plugin that will handle everything for you, Transify (Transify - a jQuery plugin to easily apply transparency / opacity to an element’s background).
I was running into this problem every now and then, so I decided to write something that would make life a lot easier. The script is less than 2 KB and it only requires one line of code to get it to work, and it will also handle animating the opacity of the background if you like.
A while back, I wrote about this in Cross Browser Background Transparency With CSS.
Bizarrely Internet Explorer 6 will allow you to make the background transparent and keep the text on top fully opaque. For the other browsers I then suggest using a transparent PNG file.
Opacity of background, but not the text has some ideas. Either use a semi-transparent image, or overlay an additional element.
CSS 3 has an easy solution of your problem. Use:
background-color:rgba(0, 255, 0, 0.5);
Here, rgba stands for red, green, blue, and alpha value. The green value is obtained because of 255 and half transparency is obtained by a 0.5 alpha value.
In order to make the background of an element semi-transparent, but have the content (text & images) of the element opaque, you need to write CSS code for that image, and you have to add one attribute called opacity with minimum value.
For example,
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
// The smaller the value, the more it will be transparent, ore the value less will be transparency.
If you're using Less, you can use fade(color, 30%).
background-color: rgba(255, 0, 0, 0.5); as mentioned above is the best answer simply put. To say use CSS 3, even in 2013, is not simple because the level of support from various browsers changes with every iteration.
While background-color is supported by all major browsers (not new to CSS 3) [1] the alpha transparency can be tricky, especially with Internet Explorer prior to version 9 and with border color on Safari prior to version 5.1. [2]
Using something like Compass or SASS can really help production and cross platform compatibility.
[1] W3Schools: CSS background-color Property
[2] Norman's Blog: Browser Support Checklist CSS3 (October 2012)
You can solve this for Internet Explorer 8 by (ab)using the gradient syntax. The color format is ARGB. If you are using the Sass preprocessor you can convert colors using the built-in function "ie-hex-str()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
http://jsfiddle.net/x2ukko7u/?
You can use the opacity value appended to the hexadecimal value:
background-color: #11ffeeaa;
In this example aa is the opacity. An opacity of 00 means transparent and ff means solid color.
The opacity is optional, so you can use the hexadecimal value as always:
background-color: #11ffee;
You can also use the old way with rgba():
background-color: rgba(117, 190, 218, 0.5);
And the background shorthand if you want to make sure that the background has no other styles, like images or gradients:
background: #11ffeeaa;
From the Mozilla's specification (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
/* HSL value */
background-color: hsl(50, 33%, 25%); /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
There's an easier solution to put an overlay over an image on the same div. It's not the right use of this tool. But works like a charm to make that overlay using CSS.
Use an inset shadow like this:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
That's all :)
I normally use this class for my work. It's pretty good.
.transparent {
filter: alpha(opacity=50); /* Internet Explorer */
-khtml-opacity: 0.5; /* KHTML and old Safari */
-moz-opacity: 0.5; /* Firefox and Netscape */
opacity: 0.5; /* Firefox, Safari, and Opera */
}
It worked for me when using the format #AARRGGBB so the one working for me was #1C00ff00. Give it a try, because I have seen it working for some and not working for someone else. I am using it in CSS.
Since a lot of people will arrive here wanting to know how to adjust the opacity of any element (not just backgrounds), it's as simple as adding opacity: 0.2 (or whatever number between 0 and 1 you desire) to that element's CSS.
Example
.myclass {
color: #eb4746;
opacity: 0.2;
}
This can be used in backgrounds and in headers, paragraphs etc.
I agree with all above answers and rgba is the way to go. In my case, I was provided with a hex background programmatically, so I will have to generate my own rgba based on the hex code. I created a modified version of Mr. Down's answer to convert hex to rgba
function hexToRgba(hex,alpha) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if(result!=null){
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
//
return `rgba(${r},${g},${b},${alpha})`;
}
return null;
}
I think this gives you desired output:
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
This gives the desired result -
body {
background-image: url("\images\dark-cloud.jpg");
background-size: 100% 100%;
background-attachment: fixed;
opacity: .8;
}
Setting the opacity of the background.

Changing :before content with animation

I'm trying to change a CSS pseudo :before element content with animation similar to jsfiddle here.
#thing:before
{
content:"TEST00";
background-color:rgba(200,200,200,0.8);
animation:sideText 30s ease-in-out infinite;
}
#keyframes sideText
{
0% {content:"TEST1A";background-color:rgba(180,90,200,0.8)}
30%{content:"TEST1B"}
32%{content:"TEST2A";background-color:rgba(80,190,200,0.8)}
60%{content:"TEST2B"}
62%{content:"TEST3A";background-color:rgba(80,90,20,0.8)}
98%{content:"TEST3B"}
100%{content:"TEST1C"}
}
Works great in Chrome, only background changes in Firefox & Safari.
Is this something i should just accept as not working in these 2 browsers or is there another way to do this?
I've tried different vendor prefixs without sucess either.
The content property is not animatable per the CSS spec (CSS Spec) (MDN Reference) but, for whatever reason, Chrome allows this.
CSS-Tricks Article by Chris Coyier
In my own testing animating content has only worked in stable desktop Chrome (v46 at time of writing). No support anywhere else. No Safari on desktop or iOS. No Firefox. No IE. Each of these browsers will ignore the animation, showing only the original content in the pseudo element.
It might be a handy trick in some distant future or it might never be supported by anything. Non-standard features are always at least at some risk of being deprecated, so this Chrome support may not last forever.
A workaround can be achieved using a content with several lines, and clipping it
(I am using the now obsolete clip property, but it can be easily adapted to clip-path)
#thing {
position: absolute;
width: 100px;
height: 30px;
background-color: rgba(80, 90, 200, 0.8)
}
#thing:before {
content: "TEST1A\aTEST1B\aTEST2A";
background-color: rgba(200, 200, 200, 0.8);
animation: sideText 5s infinite;
position: absolute;
white-space: pre;
line-height: 20px;
}
#keyframes sideText {
0%, 33% {
clip: rect(0px 120px 20px 0px);
top: 0px;
}
33.01%,
66% {
clip: rect(20px 120px 40px 0px);
top: -20px;
}
66.01%,
100% {
clip: rect(40px 120px 60px 0px);
top: -40px;
}
}
<div id="thing">
</div>

Approaching the limit of CSS transform scale

For my project areallybigpage.com (*), I'm trying to see how far we can with CSS' transform: scale(...).
This works and displays the text at normal size:
#id1 { position: absolute; transform-origin: 0 0; transform: scale(10000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.0001);}
<div id="id2"><div id="id1">Bonjour</div></div>
But this seems to be too much and doesn't display anything anymore (tested Firefox 32.0/Win7, laptop computer/few hardware acceleration):
#id1 { position: absolute; transform-origin: 0 0; transform: scale(100000); }
#id2 { position: absolute; transform-origin: 0 0; transform: scale(0.00001);}
<div id="id2"><div id="id1">Bonjour</div></div>
Is there a limit of scale with CSS3 transform: scale(...) ?
How can we push this limit further?
(*) : I currently don't use transform: scale(...) on this page, because of the limitation described in this question, but I would like to use it in a future version of this website.
Off-topic: if you zoom far enough with PgUp, you easily get to the 1.79e+308 float limit problem. (but this is another problem)
Actually it seems that in your test, at least for firefox* the maximum height in CSS px is an issue.
*(In chrome the maximum scale() multiplier/divider seems to be 10000)
If you add a third div with a fixed position, and you set your divs to this maximum CSSpx you can see that the higher the multiplier/divider is, the smaller the inner divs are :
s=150000;
document.getElementById('p').addEventListener('click', function(){
s*=1.1; doit();}, false);
document.getElementById('m').addEventListener('click', function(){
s/=1.1; doit();}, false);
function doit(){
document.getElementById('id2').style.transform = 'scale('+1/s+')';
document.getElementById('id1').style.transform = 'scale('+s+')';
document.getElementById('r').innerHTML = s;
}
#id1 { transform-origin: 0 0; transform: scale(1); width:17895697px; height: 17895697px; background:#AA00AA;}
#id2 {transform-origin: 0 0; transform: scale(1); width: 17895697px; height: 17895697px; background:#00AA00; }
#id3 { position: absolute; height: 100%; width: 100%;background:#AFAFAF;}
#p {position: fixed; top: 3em;}
#m {position: fixed; top: 3em; left: 3em;}
#r {position: fixed; top: 4em;}
<div id="id3"><div id="id2"><div id="id1">Bonjour</div></div></div>
<button id="p">+</button><button id="m">-</button><p id="r"></p>
Check this answer for more details : https://stackoverflow.com/a/24748165/3702797.
If we take the test case in the other way (container multiplies then contained divides), I can go to a multiplier of 10000 in chrome and 64424503296.0000038... in FF :
Chrome
#id1 { transform: scale(10000); width: 33554428px; height: 33554428px; background: #AA00AA; }
#id2 { transform: scale(0.0001); width: 33554428px; height: 33554428px; background: #00AA00; }
Firefox
#id1 { transform: scale(10000); width: 17895697px; height: 17895697px; background:#AA00AA; }
#id2 { transform: scale(0.0001); width: 17895697px; height: 17895697px; background:#00AA00; }
Chrome Fiddle Firefox fiddle
Edit
This does mean that for firefox, the maximum scale() multiplier is equal to the maximum browser CSS height/width / element height/width. If your calculated element's height/width exceeds this limit, then your element won't be scaled anymore.
r.textContent = document.getElementById('id2').getBoundingClientRect().width +" instead of 1px*20.000.000";
#id2 {
transform: scale(2e+7);
width: 1px;
height: 1px;
background: #00AA00;
}
#id3 {
height: 100%;
width: 100%;
background: #AFAFAF;
}
#r {
position: fixed;
}
<div id="id3"> <div id="id2"></div> </div>
<p id="r"></p>
Chrome doesn't seem to be limited in such a way however…
I don't believe it to be an issue with browsers, but more to do with the PC you're running it on.
Hardware acceleration/graphics acceleration would play a big part in how your page is displayed, and so you may need to factor this into your 'page'.
Many of you probably already know about this but for the rest, here's a quick tip that you might find useful.
Quick tip: If you use Chrome or Chromium browsers and hardware acceleration is disabled for your graphics card, you can try to
force it to get better video playback performance (for instance on
YouTube) as well as support for features such as the 3D Earth view in
the new Google Maps.
To check if your Chrome / Chromium browser uses hardware acceleration,
open a new tab, type: "chrome://gpu" (without the quotes) and look
under "Graphics Feature status" - all (or at least most of) the
features should say "hardware accelerated". see more...
You graphics card also plays a huge role in speed of rendering/etc, and so I wouldn't completely steer clear of use of the transform: scale(...), but would mention to any visitors that 'for best results, allow hardware acceleration and ensure your graphics drivers are up-to-date...'
But realistically, do you need this ability? Could you not use a different approach? (i.e. if you were using this idea to 'generate a background effect', for example, could you not use svg/pseudo effects/etc?).
In conclusion, I don't believe this is a bug, but I think it would be a way of seeing 'who's got the better hardware acceleration'/'graphics ability' with their browser/pc combination.
Further Reading
unleash the power of Hardware-Accelerated HTML5 Canvas
How to enable or disable software rendering in Internet Explorer
GPU Accelerated Compositing in Chrome
I don't think that there is any limit for transform:scale(...). On the latest version of Chrome, I got up to 10 000 000 with no problem. But your problem might not be transform:scale(...) if you have a very small text that you make bigger with it. There is a limit for how small font-size:..., it can't be smaller than 0.01px. If you don't have such a small text, I don't see why you would like to have such a high value for transform:scale(...), the text would be too big for anybody to be able to read it.

After Css:Hover [duplicate]

This question already has answers here:
Make CSS Hover state remain after "unhovering"
(11 answers)
Closed 8 years ago.
Out of curiosity I want to know, If I hover over a div and change its size is there a way to keep it like that after its already been hovered?
here is a useful jsfiddle
#div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
}
#div:hover {
width: 300px;
height: 300px;
enter code here
Fiddle
There may be several solutions.
If you wish to use only CSS (and no JavaScript), you could do something like
#div {
...
transition:width 3600s,height 3600s;
}
#div:hover {
...
transition:width 1s,height 1s;
}
It may be a cheap solution, but it's CSS-only and it works well. The transition to set width/height back to the starting values is set to a high amount of time. So the transition happens, but it's not visible to the eye. Example via jsfiddle
With JavaScript I'd prefer giving a class to the element instead of setting the values via JS. I believe things like width/height should be set in CSS-files not in JS.
CSS:
.hovered {
width:300px;
height:300px;
}
JS:
document.querySelector("#div").addEventListener("hover",function() {
this.classList.add("hovered");
});
JS/jQuery:
$("#div").hover(function() {
$(this).addClass("hovered");
});
You could read this to use variables in css3, i think it would do the trick!
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
After that you could set a variable --var = 100px; and use it, after hover you reset it to --var = 300px; so it would keep it.
With jQuery:
$("#div").hover(function() {
$( this ).width("300px");
$( this ).height("300px");
});
Is easy made, we can complicate it if you want! ;)
Here goes the example in Fiddle: http://jsfiddle.net/UzM7U/24/
I think you can't create variables in CSS right now.
If you want this store your value onhover, you will need to use a CSS preprocessor like SASS or LESS. which are CSS Dynamic languages. In these language written on top of CSS which make use of variables like you asked
$var_width:100px;
$var_height:100px;
#div {
width: $var_width;
height: $var_height;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s, height 1s;
}
#div:hover {
width: 300px;
height: 300px;
$var_width:300px;
$var_height:300px;
}
SASS
http://sass-lang.com/#variables
or Less
http://lesscss.org/
Note: I don't have a great knowledge about these language. But i think it's helpful to achieve the aim of OP. So if i am wrong at some where please correct me.
#div:hover:after {
width: 300px;
height: 300px;
content:"";
position:absolute;
border:1px solid red;
}

Resources