I was looking for how to generate the new glass morphism effect with CSS3. Afortunatelly I found This article that make it happens. In the first method the article makes something like this (I wrote this code with the same structure and properties):
body {
min-height: 100vh;
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
background-attachment: fixed; /*<------ This is the most important part*/
}
.contenedor {
width: 500px;
border-radius: 10px;
height: 400px;
border: 1px solid #eee;
position: relative;
overflow: hidden;
background: inherit; /*<------- Here the ".contenedor" element inherits its parent's background*/
z-index: 2;
}
.contenedor::before {
z-index: -1;
content: "";
background: inherit;
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 2000px rgba(255, 255, 255, 0.5); /*<------- Here the magic happens making a blur inside */
filter: blur(10px);
}
With this HTML:
<body>
<div class="contenedor">
TEXT INSIDE
</div>
</body>
Now, I don't understand how the background-attachment works to mantain the background in the .contenedor element with inherit background.
I know that the background:inherit is to inherit all background properties from its parent, but what happen if I put
{
...
background: url(./bg.jpg) no-repeat; /*<------ check that I'm using a background image*/
background-size: cover;
background-attachment: fixed; /*<------ This is the most important part*/
...
}
instead inherit, It doesn't work.
PDT: Of course I understand the ::before pseudoclass to achieve the background and I'm using the first methos instead the second because is not compatible with Mozilla Firefox
Thank you all and sorry about my poor English
Related
See the attached image for what I am trying to acheive.
Basically I need the background image to come through the text, except where the text overlaps off the faded panel. This needs the text to become the same colour/opactity as the panel itself.
This is giving me a headache but would like to see how far/what solutions could achieve my goal.
Thanks, Harry.
EDIT 1: Here's a codepen if you'd like to test anything https://codepen.io/itsharryfrancis/pen/XVagep
I've tried using this with it but it does
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
EDIT 2: I am going to leave a codepen here that is the latest version of what I have so far for anyone that may want to see it in the future.
https://codepen.io/itsharryfrancis/pen/goxVQP?editors=0100
Here is working example that implements required look, but it uses relatively new clip-path property that is not supported in IE and Edge. This issue can be resolved by using SVG clipping instead (or as fallback), but I hope that this is enough for the start.
.example {
width: 600px;
}
.example {
background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
background-position: center center;
background-size: cover;
position: relative;
}
.text {
width: 100%;
font-family: Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 100px;
line-height: 1.0;
text-transform: uppercase;
}
.part1, .part2 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
.part1:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 400px;
background-color: rgba(255, 255, 255, 0.5);
z-index: 1;
}
.part1 .text {
position: relative;
z-index: 2;
background: url('http://dummy-images.com/nature/dummy-1024x576-Waterfalls.jpg');
background-position: center center;
background-size: 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.part2 {
color: rgba(255, 255, 255, 0.5);
z-index: 3;
clip-path: polygon(400px 0px, 100% 0px, 100% 100%, 400px 100%);
}
<div class="example">
<div class="part1"><span class="text">Stack<br>Overflow</span></div>
<div class="part2"><span class="text">Stack<br>Overflow</span></div>
</div>
UPDATE: I've realized that initial version have misaligned background under text. Updated version fixes this issue, but at a small price: .text elements are required to have width: 100% as it allows to align backgrounds. It will cause a need to add some padding in a case if text should be additionally aligned.
I found this Post CSS-only Acrylic Material from Fluent Design System which is great but it has a big problem.
When I try to use more then one background image it doesn´t work anymore, because the following piece of code is needed:
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
But I want to use different background-images for page sections:
body {
background: #FFF;
}
.hero {
background-image: url(img1.jpg);
}
.about {
background-image: url(img2.jpg);
}
I need to be able to use Acrylic material effect anywhere on the page, like this:
<body>
<div class="hero">
<h1>I´m a hero</h1>
Scroll down link
</div>
<div id=section class="about"><p>Section has different background image <span class="acrylic">but this content is on the Acrylic Fluent Design surface<span/></p><div/>
</body>
So I need Acrylic surface as a universal design component without the limitations of the original post. If somebody knows how to do it I will really appreciate any help.
Thank you (And sorry for my bad writing - I´m not a native speaker so I hope you understand everything I wrote :))
The original answer to the question you link to states that:
Since we use same background for parent and children, we can club them together ;)
However this is not the case for your scenario, you actually want each element to have its own background, right? If I'm understanding you correctly, then you can remove this part of you css:
body, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
Then to set the background for each section, plus the section's .acrylic background separately, see below:
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 50%;
float: left;
}
.acrylic {
padding: 4em 6em;
position: relative;
overflow: hidden;
}
.acrylic::before {
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
}
.acrylic::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.35;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,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);
}
.shadow {
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}
/* From here down are the changes to the original answer */
.hero,
.about {
position: relative;
z-index: -1;
}
.hero,
.hero .acrylic::before {
background: url("https://images.unsplash.com/photo-1427434991195-f42379e2139d?auto=format&fit=crop&w=1189&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D") center/cover;
}
.about,
.about .acrylic::before {
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
}
<main class="hero">
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main class="about">
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
Could you try this, maybe it works:
hero, .acrylic::before {
background: url("img1.jpg") center/cover;
background-attachment: fixed;
}
about, .acrylic::before {
background: url("img2.jpg") center/cover;
background-attachment: fixed;
}
is it maybe possible that you provide a Screenshot how you wanna have it? :)
Okay, my problem is, I have a semi-transparent background-color on top of an image background. But when the computer screen is to big and page becomes longer vertically then horizontal the background-color stops after the content ends.
Example: background-color end before the end of the page.
I have looked everywhere and tried it all (height: 100%; height:100vh; bottom:0; margin:0; etc.). 100% does nothing, when using 100vh the background-color stops when I scroll down, bottom/margin:0; nothing.
The code my using is this.
html {
background: url(../images/back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background-color: rgba(0, 34, 62, 0.7);
margin: -0.5px;
font-family: verdana, sans-serif;
color: #b9c8d4;
text-align: center;
}
To see the website and the whole code go to: http://bienivitesse.com/juluwarlu/
If anyone knows any way to solve this, please let me know.
You have applied your main background to the html tag directly. While possible, it is not such a good idea to be styling it directly, always use the body or direct-descendants for the sake of good practice.
I think you can't stack a color on top of an image using the background property, but what you can do is - you can set the blue background using css pseudo-elements.
You will have to fiddle with the z-index property to get the divs to appear in the right order, so they won't be stuck under the color as well.
e.g.
html {
font-family: Arial, sans-serif;
}
.container {
background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center/cover;
padding-bottom: 20rem;
position: relative;
z-index: 1;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 34, 62, 0.7);
}
.wrapper {
width: 70%;
margin: 0 auto;
z-index: 2;
position: relative;
}
.content {
padding: 4rem;
color: #fff;
background: purple;
z-index: 3;
}
<div class="container">
<div class="wrapper">
<div class="content">CONTENT</div>
</div>
</div>
I'm trying to center a element (which display an icon via background-image) inside an anchor tag. FF and Chrome are making their job perfect, but all IE versions are making me sick. Would be cool if someone of you has a trick for me.
You can find the correct centered firefox version here: http://i.stack.imgur.com/o3i62.png
And the incorrect IE version here: http://i.stack.imgur.com/nDPno.png
And here is my HTML code:
<span class="show-more-arrrow"></span>
And my SCSS code:
.show-more{
height: 15px;
width: 100%;
background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
text-align: center;
padding-top: 2px;
position: absolute;
bottom: -12px;
}
.show-more-arrrow {
background-image: url(../images/arrow-submenu-large-hover.png);
background-repeat: no-repeat;
background-size: contain;
height: 10px;
position: absolute;
width: 16px;
}
The anchor tag has a computed with of 863px and the span a width of 16px.
because you use position: absolute; the span will be regarded as a block element, position: absolute; is useless, you can replace it with display: inline-block;, hope it can help
In my experience I have fount this hack to pass the css rules that IE and Chrome ignore.
Here is the code.
.show-more:not(*:root){
height: 15px;
width: 100%;
background: none repeat scroll 0 0 rgba(239, 239, 239, 1.0);
text-align: center;
padding-top: 2px;
position: absolute;
bottom: -12px;
}
.show-more-arrrow:not(*:root){
background-image: url(../images/arrow-submenu-large-hover.png);
background-repeat: no-repeat;
background-size: contain;
height: 10px;
position: absolute;
width: 16px;
}
Please let me know if that helped your case too.
I'm trying to use 'bakground-position' in the background of my div, but not working.
When background an image, the 'background-position' works, but with 'background-color' is not working.
What can I do?
This is my CSS:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-color: #000000;
background-position: right 50px;
}
You can provide an background-image as a solid color, creating a monochrome gradient:
#defaultContent {
width: 983px;
min-height: 382px;
margin: 0 auto;
background-image: linear-gradient(#000, #000);
background-position: right 50px;
background-repeat: no-repeat;
}
The gradient is fully compatible with an image, and if you set both colors to the same, it is fully equivalent to a solid color
demo
You can workaround with a div only for background, simulating it by mixing position: absolute offsets and negative z-index.. (Though I've tested only in chrome)
See fiddle
HTML
<div id="defaultContentParent">
<div id="defaultContent"></div>
<div id="defaultContentContent"><div>
</div>
CSS
#defaultContentParent {
border: 1px solid #00f;
background-color: #aaa;
color: #fff;
position: relative;
width: 200px;
min-height: 140px;
margin: 0 auto;
z-index: 0;
}
#defaultContent {
background-color: #000000;
height: 50px;
position: absolute;
top: 50px;
right: 0;
width: 80px;
z-index: -1;
}
#defaultContentContent {
z-index: 9999;
}
You can't position a background-color property, since that property fills the entire space. Likewise, you can't use background-color with a background image, because that would, basically, replace your background image with the filled background-color, at which point there is no reason to use a background image at all!
Are you perhaps thinking of using a gradient, or giving a background image a filter of a certain filter? That would be a different question.