When pages have fixed background scrolling (not parallax), is there a way to implement a triangle in the second row but have it transparent so that it shows the fixed background?
i.e.
-------------------------
this is fixed background
----------- -----------
\ /
second row solid colour
-------------------------
The second row would have a solid colour except the triangle where the background is the fixed image background. is there a way to do this?
DEMO: http://jsbin.com/tidir/1/
http://jsbin.com/tidir/1/edit
HTML
<section class="featurette"></section>
CSS:
body,html {background:#222;height:100%;padding:0;margin:0;}
.featurette {
background: url(http://lorempixel.com/700/400/cats/);
background-size: cover;
background-attachment: fixed;
background-position: center center;
width: 100%;
height:400px;
position: relative;
overflow:hidden;
}
.featurette:before,
.featurette:after {
content: '';
display: block;
position: absolute;
bottom: 0;
height: 70px;
margin: 0 0 0 -40px;
transform: skew(40deg);
background: #222;
}
.featurette:after {
left: 50%;
right: 0;
margin: 0 -40px 0 0;
transform: skew(-40deg);
}
.featurette:before {
left: 0;
right: 50%;
}
/* demo only */
body {height:2000px;}
Related
I'm trying to replicate a design using CSS, a simplified example of this is below:
The pink background should be 50% opacity, however the blue offset shadow/border should be 100% opacity.
I can do the general shapes but not in a way to achieve the desired transparency.
Here is an attempt I made:
.container {
position: relative;
margin: 0 auto;
width: 600px;
height: 200px;
}
.content-wrap {
position: relative;
z-index: 1;
filter: drop-shadow(13px 15px 0 rgb(0,255,255));
width: 60%;
height: 100%;
}
.content {
clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
background: rgba(255,0,255, 0.5);
height: 200px;
}
.background {
z-index: 0;
position: absolute;
top: 20px;
left: 0;
background: black;
width: 500px;
height: 90px;
margin-top: 50px;
}
<div class="container">
<div class="content-wrap">
<!-- Blue -->
<div class="content">
<!-- Pink -->
</div>
</div>
<div class="background">
<!-- Black -->
</div>
</div>
A couple of aspects are not quite right:
The drop-shadow is visible through the pink, it should just be outside of the element.
The blue should extend to the left-hand edge.
The blue is transparent when I have not assigned it to be, it seems to be related to the child element's background being transparent.
Are there any CSS masters who can figure out a way to do this? The HTML can change if needed.
a box-shadow with skew transformation can do the job here. I am using pseudo-element for the sake of the demo but you can replace them with real elements
.box {
margin: 10px 0;
display: flex;
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: 30% 0;
background: black;
}
.box::after {
content: "";
height: 200px;
width: 50%;
transform-origin: top;
transform: skew(-20deg);
background: rgb(255 0 255/80%);
box-shadow: 25px 25px 0 blue;
}
body {
margin: 0
}
<div class="box">
</div>
Expected Behavior, Problem, and Screenshots
At 1920x1080 (100% scale) and in 3840x2160 at 200% scale, the end of the grid lines up nicely with the horizon of the sky.
The screenshot above is what I consider to be an expected behavior. The screenshot below is not.
Now here's a screenshot but this time it's in full screen. Notice the end of the grid does not line up with the sky's horizon.
Note
To make it look like a web page, I've added some line of text from the movie, TRON: Legacy but modified the text to make it my own. The images captured in 3840x2160 have been reduced to 1920x1080 in order to save some bandwidth.
Code
html,
body,
.container {
height: 100%;
margin: 0;
box-sizing: content-box;
}
body {
background: #87CEEB linear-gradient(to bottom, #408aa5, #7cc3e0 43.75%, #bce9ff 50%, #327e99 62.5%, #01617b);
color: white;
}
.grid {
position: fixed;
z-index: 0;
left: 0;
right: 0;
bottom: 0;
height: 900px;
opacity: 0.75;
transform-origin: bottom center;
/*
* Specifying a percentage for perspective() won't work because the
* grid will be in 2D instead of 3D.
*/
transform: perspective(1000px) rotateX(60.5deg) scale(8) translateZ(0);
backface-visibility: hidden;
/*
* Clip the extended "after" pseudo element in order to give it an illusion of a moving
* grid.
*/
overflow: hidden;
}
/* Add a gradient that fades to the horizon. */
.grid:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to top, transparent, transparent 75%, rgba(240, 248, 255, 0.875));
z-index: -1;
}
/* The grid. */
.grid:after {
content: "";
position: absolute;
top: -900px;
left: 0;
right: 0;
z-index: -2;
background: rgba(0, 0, 0, 0.75) url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='180' height='180' rx='20' stroke='white' stroke-width='5' fill='none' /%3E%3C/svg%3E") repeat;
background-size: 3.125%;
transform: translateZ(0);
width: 100%;
height: 1800px;
animation: slidegrid 12s forwards linear infinite;
}
#keyframes slidegrid {
0% {
transform: translateY(0);
}
100% {
transform: translateY(50%);
}
}
.container {
margin: auto;
width: 75%;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
z-index: 1;
position: relative;
}
.maintitle {
margin-top: 0;
}
#media screen and (max-width: 960px) {
.container {
margin: 0;
width: 100%;
}
}
<div class="grid"></div>
<div class="container">
<h1 class="maintitle">The Grid</h1>
<p>A digital frontier.</p>
<p>I tried to picture clusters of information as they moved through the computer.</p>
<p>What do they look like?</p>
<p>Trains? Bicycles?</p>
<p>Were the circuits like lightrails?</p>
<p>I kept dreaming of a world I thought I'd never seen.</p>
<p>And then, one day...</p>
<p style="font-size: 2em; text-align: center;"><strong>I got in!</strong></p>
</div>
Try the code above and resize the height of the browser window. Notice that the grid stays the same and does not line up with the horizon.
An element with the "grid" class is setup to be in 3D space. I faked the grid background to make it look like it is reflecting from the sky. An element with the "container" class is what I consider the container to be a "see-through screen" or perhaps a "holographic web page" unless the viewport becomes narrow. Also, notice that the "container" class has a position of relative and z-index set to 1. The grid (SVG) along with the gradient that fades to the horizon shows through in front of the container instead of behind.
(And yes, I made a slight typo in HTML for "I've never seen" but I decided to leave the screenshots alone for now.)
Summary
I want to create an illusion of the background that makes it look like it's in 3D and line up the end of the grid by 50% of the height of the viewport. How can I accomplish so that the end of the grid touches the horizon?
if the sliding bg is suppossed to be layed on the bottom half, you can set it there and set transform-origin from its own top
example :
html,
body,
.container {
height: 100%;
margin: 0;
box-sizing: content-box;
}
body {
background: #87ceeb
linear-gradient(
to bottom,
#408aa5,
#7cc3e0 43.75%,
#bce9ff 50%,
#327e99 62.5%,
#01617b
) fixed;
color: white;
}
.grid {
position: fixed;
z-index: 0;
left: 0;
right: 0;
top: 50vh;
height: 100vh;
opacity: 0.75;
transform-origin: center top;
/*
* Specifying a percentage for perspective() won't work because the
* grid will be in 2D instead of 3D.
*/
transform: perspective(200px) rotateX(60.5deg) scale(1.5, 0.5) translateZ(0);
backface-visibility: hidden;
/*
* Clip the extended "after" pseudo element in order to give it an illusion of a moving
* grid.
*/
overflow: hidden;
}
/* Add a gradient that fades to the horizon. */
.grid:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(
to top,
transparent,
transparent 75%,
rgba(240, 248, 255, 0.875)
);
z-index: -1;
}
/* The grid. */
.grid:after {
content: "";
position: absolute;
top: -900px;
left: 0;
right: 0;
z-index: -2;
background: rgba(0, 0, 0, 0.75)
url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='180' height='180' rx='20' stroke='white' stroke-width='5' fill='none' /%3E%3C/svg%3E")
repeat;
background-size: 3.125%;
transform: translateZ(0);
width: 100%;
height: 1800px;
animation: slidegrid 12s forwards linear infinite;
}
#keyframes slidegrid {
0% {
transform: translateY(0);
}
100% {
transform: translateY(50%);
}
}
.container {
margin: auto;
width: 75%;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
z-index: 1;
position: relative;
}
.maintitle {
margin-top: 0;
}
#media screen and (max-width: 960px) {
.container {
margin: 0;
width: 100%;
}
}
<div class="grid"></div>
<div class="container">
<h1 class="maintitle">The Grid</h1>
<p>A digital frontier.</p>
<p>I tried to picture clusters of information as they moved through the computer.</p>
<p>What do they look like?</p>
<p>Trains? Bicycles?</p>
<p>Were the circuits like lightrails?</p>
<p>I kept dreaming of a world I thought I'd never seen.</p>
<p>And then, one day...</p>
<p style="font-size: 2em; text-align: center;"><strong>I got in!</strong></p>
</div>
This question already has answers here:
Shape with a slanted side (responsive)
(3 answers)
Closed 3 years ago.
I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.
Here is some code I have tried but doesn't look how I want.
.block {
background-color: black;
left: -50;
height: 150px;
width: 100%;
transform: rotate(-40deg);
}
<body>
<div class="block">
</div>
</body>
You can use pseudo element with skew transformation :
body {
height: 100vh;
margin: 0;
background: yellow;
}
body:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 300px;
background: #000;
transform: skew(-30deg);
transform-origin:top;
}
To keep the same visual on resize, set a big fixed height for the pseudo element and center it:
html {
background: yellow;
}
html:before {
content: "";
position: fixed;
top: calc(50% - 1000px);
left: 0;
width: 500px;
height:2000px;
background: #000;
transform: skew(-15deg);
transform-origin:top;
}
Use a linear gradient at an angle
body {
margin:0;
}
div {
height: 100vh;
background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
.left-sidebar {
position: absolute;
width: 20%;
background: #000;
transform: skewY(5px);
}
.content {
background: #fff;
}
The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.
But I suggest that you create 2 div side-by-side in order to get the desired effect.
I'm implementing an on-boarding similar to Medium's which has text in the center of the box over an black-overlay with the background-image behind it.
However, I'm struggling with making the text INSIDE the div with the background-image NOT having opacity effect.
<div class="blackBackground">
<div class="topicImage opacityFilter" style="background-image: url(https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3);">
<p class="text-inside-image">Fashion</p>
</div>
</div>
Here's my CSS:
.blackBackground {
background-color: black;
z-index: -1;
}
.opacityFilter {
opacity: 0.8;
position: relative;
}
.margin-bottom-negsix {
margin-bottom: -6px !important;
}
.topicImage {
padding-bottom: 75%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative !important;
height:150px;
background-color: rgba(0, 0, 0, 0.8) !important;
}
.text-inside-image {
position: absolute;
top: 20%;
left: 35%;
color: white;
font-size: 24px;
font-weight: 500;
z-index: 1;
}
I've tried several solutions such as CSS - Opaque text on low opacity div?
and How to keep text opacity 100 when its parent container is having opacity of 50
and a couple more, but no luck.
My progress with my JSFiddle is here: https://jsfiddle.net/RohitTigga/akz5zng7/1/
Why is this occurring and how to fix it?
Hi change your HTML like this
HTML
<div class="my-container">
<h1 class="text-inside-image">Fashion</h1>
<img src="https://images.unsplash.com/photo-1444401045234-4a2ab1f645c0?ixlib=rb-0.3.5&q=80&fm=jp&crop=entropy&s=4372cb6539c799269e343dd9456b7eb3">
</div>
CSS
.my-container {
position: relative;
background: #5C97FF;
overflow: hidden;
}
.my-container h1 {
padding: 50px;
text-align: center;
z-index: 2;
position: relative;
color: #fff;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
z-index: 1;
opacity: 0.6;
}
for reference https://plnkr.co/edit/YugyLd8H5mQExzF61rA9?p=preview
You have set a translucent background colour on the element and then covered it up with a background image.
If you want the background image to be translucent, use an image that is intrinsically translucent. The PNG image format supports this.
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>