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.
Related
I am trying to make the background color of a row change on hover with only the area of the cursor changing color/being highlighted.
I have a white background color set, and would like to have the area of the cursor highlighted with a yellow feathered circle when hovering over the background.
I can't seem to find the proper code for it, but only finding codes to change the complete background on hover.
Is this something that's possible to do in CSS?
.vc_row {
-webkit-transition:all 1s;
transition:all 1s;
}
.vc_row:hover {
background: -webkit-gradient(
radial, 500 25%, 20, 500 25%, 40, from(#faf9f4), to(#cef230)
);
}
Even through my predisposition to using JavaScript (it is where my skills lie), I believe you can't just do this in CSS, but also need JavaScript to do this. There might be a way, but I don't know it, and I am curious for someone else to answer with a magical full CSS solution and blow our minds. :D
For one approach of doing this, you need to use ::after to create the hover-element inside the row. You can then use CSS variables to pass your mouse position (gathered through JavaScript) into the hover-element, making it track the mouse position. Here is an example:
<!-- HTML -->
<div class="row">
</div>
/* CSS */
.row {
width: 300px;
height: 300px;
margin: 30px 30px;
position: relative;
overflow: hidden;
background: white;
}
.row::after {
content: "";
position: absolute;
top: calc(var(--y, 0) * 1px - 50px);
left: calc(var(--x, 0) * 1px - 50px);
width: 100px;
height: 100px;
opacity: 0;
background: radial-gradient(#cef230, #ffffff00 80%);
transition: opacity 1s;
}
.row:hover::after {
opacity: 1;
}
// JavaScript
const element = document.querySelector(".row");
element.addEventListener("mousemove", (e) => {
const { x, y } = element.getBoundingClientRect();
element.style.setProperty("--x", e.clientX - x);
element.style.setProperty("--y", e.clientY - y);
});
Key elements are the ::after to create the hover-element, the use of position: absolute; to allow for "top" and "left" attributes to position the hover-element, and applying overflow: hidden; to the row: in my testing the hover-element kept the mouse-move event firing even outside the row, unless overflow was hidden.
The following is my HTML markup where I add the title as a prop for Bootstrap card. I've tried z-index as well, but I wasn't able to achieve the desired result.
<b-col>
<div class="card-container">
<b-card
overlay
img-src="/images/ajm.jpg"
img-alt="Card Image"
class="product-card"
title="Linear Motors"
title-tag="h5"
align="center"
></b-card>
</div>
</b-col>
CSS ----->
.product-card {
height: 353px;
border-radius: 0px;
border: 0;
color: #0c1c35;
}
.card-container {
width: 100%;
height: 100%;
:hover {
background: -webkit-linear-gradient(
90deg,
hsla(217, 100%, 50%, 1) 0%,
hsla(186, 100%, 69%, 1) 100%
);
opacity: 0.8;
color: white;
}
}
Another thought I had was that the opacity field actually effects child elements as explained in w3 schools:
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text:
From seeing your CSS I see you're using opacity, so this might work if you use the RGBA - CSS.
.card-container {
background-color: rgba(255, 255, 255, 0.5);
}
Hope this helps
I have a bunch of <div>s serving as tiles of overview windows for the users to choose from. They need to be aligned and remain certain gap in between each other.
I've tried the following methods to achieve this purpose:
1) set a perspective value on their common parent, and then use transform: translateZ to make them look smaller and send them backwards. Only selected div will be translated back to 0 and looks in normal size, with the rest staying transformed.
problem: can't automatically align after transforming.
2) set the display value of their common parent to flex, thus align all the divs. The selected div will scale to bigger size.
problem: doesn't look 3d. visually ugly and doesn't help with cognitive load.
I still prefer the 1) method, but how can I align those divs after transforming them?
div#container {
perspective: 200px;
position: relative;
}
div.window {
transform: translateZ(-150px);
position: absolute;
}
div#window-1 {
left: 10px;
}
div#window-2 {
left: 110px;
}
<div id="container">
<div id="window-1" class="window">test</div>
<div id="window-2" class="window">test2</div>
<div id="window-3" class="window">test3</div>
<div id="window-4" class="window">test4</div>
<div id="window-5" class="window">test5</div>
</div>
You don't really need to go 3D to get some nice effect. Using flexbox layout for easy layout and positioning of child elements and a simple transform: scale(...) will make a lot of difference already, without any JS. Add some eye-candy and you will get something like the snippet (really need to go full page).
UPDATE
My motivation to go 'flexbox' anyway is the fact that you actually gave little code to start with. Also, while I personally have a speedy PC, fast GPU and a fiber-glass 200-500Mbit connection, this is not true for a lot of other people. Creating a CPU/GPU intensive webpage may eventually bite you in the tail as they tend to get sluggish, jitter or downright slow (not to mention, overly complicated).
I tend to prefer the shortest route from A to B, compact code and only the minimally required (and IE11 compatible. If it runs on IE11, it runs anywhere).
So, look at this answer as a starting point and adjust the base mechanism to meet your needs and modify the eye-candy likewise. You can always resort to JS when you need to.
UPDATE 2
Modified the code, now incorporates 3D layout with some 3D hover effect. Both parent and kids are Flexbox containers, so you can do anything FBL inside. The 3D layout remains.
REMARK: missed your first comment: added transform: scale(0.5) to child elements...
Pro TIPS
1) As a result of the 3D effect it may occur that the child elements get jagged (non-aliased) edges. If so, try adding a transparent outline to the child elements, like .container>* { ... outline: 1px solid transparent ... }. This somehow forces anti-aliassing of the edges. Beware: the regular outline will not be visible, the 'visually impaired' may not be amused...
2) Added a few buttons calling a simple one-liner JS to toggle 'custom attributes' for testing purposes.
Also added a generic, responsive page margin using 'linear equation y=mx+b'
for points p1(320,64) p2(1920,144) (top/bottom spacing) and
for points p1(320,8) p2(1920,320) (left/right spacing).
3) To top it off: responsive html fontsize varying from 14px to 20px, also 'y=mx+b' for points p1(320,14) p2(1280,20).
var body = document.body;
function toggleBodyAttrib(a) { if (body.getAttribute(a)=='1') body.setAttribute(a,'0'); else body.setAttribute(a,'1'); }
html,body { box-sizing: border-box } /* size calculations up to and including border */
*::before,*::after, * { box-sizing: inherit } /* use parental calculation preference */
html,body { width: 100%; max-width: 100%; margin: 0 } /* personal prefs */
body { min-height: 100% } /* fill screen */
/* responsive main fontsize, y=mx+b: for p1(320,14) p2(1280,20) */
html { font-size: calc(0.625vmin + 0.75rem) } /* 14px to 20px */
/*
responsive <body> padding
y=mx+b for points:
T/B: p1(320,64) p2(1920,144) => y = 0.5x + 48 (64px on a 320 display, 144px on 1920)
L/R: p3(320, 8) p4(1920,320) => y = 0.195x - 54.4 ( 8px on a 320 display, 320px on 1920)
*/
[padded="1"] { padding: calc(5vh + 48px) calc(19.5vw - 54.4px) }
[debug="1"] * { outline: 1px dashed purple }
[debug] #buttonList *,
[debug] #buttonList { outline: none } /* exceptions to the rule above */
#buttonList { position: fixed; top: 1rem; left: 1rem } /* keep them in place */
.container {
/* UPDATE: 3D definitions */
position: relative; /* create stacking context */
transform: perspective(400px) rotateX(20deg); /* Starwars */
perspective-origin: center center; /* center looks most straight */
transform-style: preserve-3d; /* Kids must maintain 3D look */
display: flex; /* default Flexbox layout: row of columns */
flex-wrap: wrap; /* wrap to next line when no more space */
justify-content: space-between; /* evenly distribute inside given space */
width : 50%; /* some preferred with */
/* padding: 1rem; /* inner spacing (obsolete: now using <body padded="1">) */
margin : 0 auto; /* center container horizontally */
cursor : default;
}
/* UPDATE 3D hover preps */
.container:hover>* {
perspective: 500px; /* higher value means a `more straight view` */
/* try 200px and 2000px */
transition: all 100ms ease-in-out; /* some delay prevents element jitter/flicker */
/* too slow for IE11 (can see swap from z-index 1 to z-index 2) */
}
.container>* { /* or .container>.window, but this is more generic */
/* UPDATE needs z positioning */
z-index: 1;
display: flex; /* ditto */
justify-content: center; /* fbl center content in window */
align-items: center;
min-width : 5rem; /* preferred size, square */
min-height: 5rem;
margin : -0.75rem; /* some negative margin to compensate 50% scale */
transform: scale(0.5); /* scale down 50% */
/* eye-candy */
background-color: white;
border: 1px solid rgba(0,0,0,.1);
border-radius: 3px;
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12); /* GMC elevation 1dp */
}
.container>:hover {
/* UPDATE added 3D transitions */
z-index: 2;
transform: scale(1.2) rotateX(-20deg) translateZ(50px);
/* eye-candy */
background-color: CornflowerBlue;
box-shadow: 0px 3px 5px -1px rgba(0,0,0,.2),
0px 5px 8px 0px rgba(0,0,0,.14),
0px 1px 14px 0px rgba(0,0,0,.12); /* GMC elevation 5dp */
}
/* back to normal size when 'click and hold' */
.container>:active { transform: scale(1) }
<body padded="1">
<div id="buttonList">
toggles:
<button onclick="toggleBodyAttrib('padded')">padding</button>
<button onclick="toggleBodyAttrib('debug')" >debug </button>
<!-- add your own custom debugging [attribute] toggles -->
</div>
<div class="container">
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
<div>test5</div>
<div>test6</div>
<div>test7</div>
<div>test8</div>
<div>test9</div>
<div>test10</div>
<div>test11</div>
<div>test12</div>
<div>test13</div>
<div>test14</div>
<div>test15</div>
<div>test16</div>
<div>test17</div>
<div>test18</div>
<div>test19</div>
<div>test20</div>
<div>test21</div>
<div>test22</div>
<div>test23</div>
<div>test24</div>
<div>test25</div>
<div>test26</div>
<div>test27</div>
<div>test28</div>
<div>test29</div>
<div>test30</div>
<div>test31</div>
<div>test32</div>
<div>test33</div>
</div>
</body>
Let's say I want to make a skewed-edge div like this one,
As this JS Bin or this question demonstrate, it shouldn't be difficult. However, those two use CSS transform to do the trick. Is it possible to skew the edge without CSS transform? It would be useful to support IE8 without using polyfills, for example.
IE8 is suppose to be able to use matrix filter , so transform with a fallback for IE should do :
.skew {
display:table;
margin:auto;
transform:skew(0,5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0.08748866352592415, M22=1, SizingMethod='auto expand')";
overflow:hidden;
}
.skew div {
margin-bottom:-40px;
margin-top:30px;
transform:skew(0,-5deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.08748866352592455, M22=1, SizingMethod='auto expand')";
}
img {
display:block;
}
<div class="skew">
<div>
<img src="http://lorempixel.com/600/400" />
</div>
</div>
Note, -ms-filter is to be tested in a real IE8 to make test efficient. Load this page into a genuine IE8 to test and run snippet or dowload the zip file from : http://codepen.io/gc-nomade/share/zip/LZpwwy/
a generator that can be helpfull : http://www.useragentman.com/IETransformsTranslator/
You can achieve this by creating a triangle using borders if you create an element with a very wide bottom border:
HTML
<div id="container">
<div id="mask">
</div>
</div>
CSS
#container {
position: relative;
width: 100%;
height: 25em;
overflow: hidden;
...
}
#mask {
/* position the element on top */
position: absolute;
width: 0;
height: 0;
bottom: 0;
left: 0;
z-index: 1;
/* create a triangle using borders */
border-style: solid;
border-color: YOUR_BACKGROUND_COLOUR transparent;
/* A fallback for browsers that don't support vw */
border-width: 0 2560px 5em 0;
/* make the border take the full width of the screen: http://caniuse.com/#feat=viewport-units */
border-width: 0 100vw 10em 0;
}
DEMO
http://codepen.io/Godwin/pen/PzPMBQ?editors=1100
However, like #kthornbloom said, unless you absolutely need to show a skew, it would be best practice to just let IE8 show a rectangle instead. You'll have more success making the page dependably responsive if you use transforms.
<style>
* {
background: red;
}
.blackbalk{
background:black;
ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
filter:alpha(opacity=85);
-khtml-opacity:.85;
-moz-opacity:.85;
opacity:.85;
width: 985px;
margin: 0 auto;
height:255px;
color: white;
}
</style>
<div class="blackbalk">Text </div>
Now my text gets pink, why?
How can i get it white again?
Greetings
Edit: JS Fiddle to make it clear: http://jsfiddle.net/WFxbH/
You can do it by instead using an rgba background on your element:
Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.
.blackbalk {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.85);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}
Thew, opacity affects the entire element and its contents, not just the background color. If you just want the background color to be 85% black, you should specifiy it with an RGBA color, like so:
.blackbalk {
background: rgba(0, 0, 0, 0.85);
width: 985px;
margin: 0 auto;
height: 255px;
color: white;
}
EDIT: cant over ride the cascading of opacity. Best alternative in my pinion is to use a single pixel 85% opacity black png as the background image. option 2 would be to make the inner content actually outside of the div then position it over but that's a lot finickier. You can even get the transparent png to work in IE without much trouble.
IGNORE:Not positive, as I can't test it right now but I assume the text is becoming translucent with the opacity change. Perhaps if you put your text inside a span with background-color:none and color:white; it might work it out. May have to set the spans opacity to 100% to override.