I am implementing a website which have a layout like below
I am a bit confuse about the HTML structure for this layout blue section is almost half divide my background and content will be centered and blue section will always be exactly divided in this ratio can anyone assist me how to make it possible. One more thing I need to use blue section as background color may be in RGBA.
A pseudo-element could work here
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-image: url(http://lorempixel.com/output/abstract-q-c-100-100-9.jpg);
}
body::before {
content: '';
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 50%;
background: rgba(0, 0, 255, 0.5);
z-index: -1;
}
.navbar {
margin-top: 25px;
height: 50px;
background: green;
border: 1px solid black;
}
<div class="navbar"></div>
Place this DIV after body tag:
<body>
<div id="blue"></div>
content
</body>
body {
background:url('img');
height:100%;
width:100%;
}
#blue {
position: fixed;
top: 0;
left: 50%;
background: rgba(0, 0, 255, 0.35);
height: 100%;
width: 1000px;
}
JSFiddle
Related
Is there any way of adding a filter (CSS or other type) to an element so this filter then effectively applies to the element below it.
I have an element with reduced opacity, that sits on top of a background image. I would like the element with reduced opacity to basically apply a black and white filter to the part of the element directly below it (effectively working as a mask). In the example below this means that the part of the image below the white box has the filter applied to it.
https://codepen.io/emilychews/pen/zWjWxo
Two things to note:
1) Because I'm using vh and vw units and the layout changes dependent on device / window size, I can't slice the image in photoshop or similar and then add or align it separately.
2) The image placeholder service I'm using serves up random images, and sometimes the image in the example is black and white - please don't let this confuse the issue.
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
}
<div id="row-1">
<div id="inner">
<p id="text">Some Text</p>
</div>
</div>
Short answer - no. But there is a non-standard -webkit-back-drop filter that works in iOS, but it's only available in other browsers behind an experimental flag.
https://webdesign.tutsplus.com/tutorials/css-backdrop-filters--cms-27314
(SVG 1.1 had a mechanism to do this, but the spec was poorly written and only IE10+ ever implemented it (and they may have backed it out))
You can try mix-blend-mode
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}
#row-1 {
position: relative;
width: 80vw;
height: 70vh;
background: red;
border: 1px solid black;
background-image: url("https://loremflickr.com/320/240");
background-size: cover;
}
#inner {
background: rgba(255, 255, 255, .8);
position: absolute;
width: 50%;
height: 40%;
right: 0;
top: 0;
padding: 1rem;
mix-blend-mode: exclusion;
}
<div id="row-1">
<div id="inner">
<p id="text"></p>
</div>
</div>
Please, try this solution I have made on Codepen. You can play around with the Z-index & opacity in background-color.
It uses the :after pseudo element to make some sort of filter. Being stretched all over the div with an absolute position, everything underneath it will be affected.
I hope it can help you!
HTML:
<div class="box">
<p>Hello world!</p>
</div>
CSS:
.box {
position: relative;
width: 400px;
height: 300px;
background: url(http://farm2.staticflickr.com/1486/23990047223_5b7a0c82e8_b.jpg);
background-size: cover;
margin: 0 auto 100px;
z-index: 1;
}
.box:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
// change color opacity here!
background-color: rgba(0, 0, 0, 0.5);
}
// styling
.box p {
margin: 0;
font-size: 26px;
text-align: center;
color: white;
padding-top: 50px;
position: relative;
z-index: 0;
}
I want to create an overlay with css over one image like this:
but I only do a square overlay like this:
how I can make the first shape with css ??
here is my code:
.card-img-overlay {
position: absolute;
top: 0px;
right: 0px;
bottom: 0;
left: 150px;
padding: 1.25rem;
}
thank you for your answers :)
Check this out
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #9020d1bb;
border-left: 100px solid transparent;
position: absolute;
}
#container {
position: relative;
}
#container #triangle-topleft,
#overlay {
position: absolute;
color: white;
right: 0;
}
<div id="container">
<div id="triangle-topleft"></div>
<div id="overlay">Microsoft</div>
</div>
I will go with a simple gradient and no need for any extra markup or the use of pseudo element:
body {
height: 100vh;
margin: 0;
background:
linear-gradient(to top right, transparent 50%, rgba(255, 0, 0, 0.5) 51%) 0 0/100% 200px no-repeat,
url(https://lorempixel.com/1000/1000/) center/cover;
}
div {
height:200px;
text-align:right;
color:#fff;
padding:10px;
font-size:25px;
}
<div>
<p>Some content</p>
</div>
it's been a while!
I am currently trying to solve a problem and I was hoping somebody could help me out.
I have a fixed sidebar and a header. Both cast dropshadow. However, I don't want the header to cast shadow on the sidebar (I want them to be on the same level). At the same time, header contains drop-downs and these need to hover over everything.
Since it's rather complex, I've created a jsfiddle.
Simple example
I've been forced to paste the code here as well for some reason (SO input validation).
<div class="layout">
<div class="header z-depth-2">
<div class="dropdown-toogle">
<div class="dropdown-menu">
</div>
</div>
</div>
<div class="page-wrapper">
<div class="sidebar z-depth-2">
</div>
<div class="content">
</div>
</div>
</div>
And css
.layout {
width: 100%;
height: 100%;
position: relative;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: blue;
z-index: 101;
}
.sidebar {
position: fixed;
top: 70px;
left: 0;
width: 200px;
background-color: green;
bottom: 0;
z-index:101;
}
.content {
padding-left: 200px;
width: 100%;
height: 100%;
}
.page-wrapper {
padding-top: 70px;
height: 100%;
}
.dropdown-toogle {
margin-right: 100px;
float: right;
position: relative;
height: 100%;
width: 50px;
background-color: yellow;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
width: 400px;
height: 200px;
background-color: grey;
z-index:1000;
}
.z-depth-2 {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
Notice how when you change view-port width, drop-down slides behind sidebar even when it's z-index is greater.
If I increase z-index of header, it starts casting shadow on the sidebar (drop-down starts working) which I want to avoid. I've been playing with different combination but was unable to sort it out properly.
Hope I managed to make it clear, help much appreciated!
With your current layout this isn't possible. Since the header is set to a z-index behind the sidebar essentially any child of the header will also be behind the sidebar. (Read more on stacking contexts)
In order to solve this issue what you can do is use an inset box-shadow on the content pane. This will make it so there is a shadow as if it's being cast by the header and sidebar but it's really the container casting it on itself. This way you don't need to worry about the header casting onto the sidebar and the sidebar can safely sit "behind" the header. With this you don't need to fiddle with z-index at all (though I didn't remove them in case it's needed for other things on the page).
In order to get this to work properly I had to change the padding you were using to position the content element with margin but honestly this is a better property to use for adding space around an element. I recommend you also read up a bit on when to use padding vs margin.
https://jsfiddle.net/79gykeu3/6/
HTML
<div class="layout">
<div class="header z-depth-2">
<div class="dropdown-toogle">
<div class="dropdown-menu">
</div>
</div>
</div>
<div class="page-wrapper">
<div class="sidebar z-depth-2">
</div>
<div class="content">
</div>
</div>
</div>
CSS
The thing to note is the .content class now has the box-shadow
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.layout {
width: 100%;
height: 100%;
position: relative;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background-color: blue;
z-index: 103;
}
.sidebar {
position: fixed;
top: 70px;
left: 0;
width: 200px;
background-color: green;
bottom: 0;
z-index:101;
}
.content {
margin-left: 200px;
width: 100%;
height: 100%;
box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.page-wrapper {
margin-top: 70px;
height: 100%;
}
.dropdown-toogle {
margin-right: 100px;
float: right;
position: relative;
height: 100%;
width: 50px;
background-color: yellow;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
width: 70%;
height: 200px;
background-color: grey;
z-index:1000;
}
.z-depth-2 {
}
First of all, big thanks goes to Don, his approach is totally valid, clever and possibly even better than what I used.
However I figured I'll post my final solution as well as somebody might value having 2 approaches. All I did is I've added a "fake" gradient absolutely positioned bellow the header and to the right of sidebar.
The reason why I've done so is basically I used technologies that I know and can rely on. I didn't like the overflow auto on the content as well. Anyways, this is it:
https://jsfiddle.net/79gykeu3/11/
<div class="layout">
<div class="header">
<div class="header__shadow">
</div>
<div class="dropdown-toogle">
<div class="dropdown-menu">
</div>
</div>
</div>
<div class="page-wrapper">
<div class="sidebar">
<div class="sidebar__shadow">
</div>
</div>
<div class="content">
</div>
</div>
</div>
Css
.layout {
width: 100 %;
height: 100 %;
position: relative;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 70px;
background - color: blue;
z - index: 103;
}
.sidebar {
position: fixed;
top: 70px;
left: 0;
width: 200px;
background - color: green;
bottom: 0;
z - index:101;
}
.content {
padding - left: 200px;
height: 8000px;
}
.page - wrapper {
padding - top: 70px;
height: 100 %;
}
.dropdown - toogle {
margin - right: 100px;
float: right;
position: relative;
height: 100 %;
width: 50px;
background - color: yellow;
}
.dropdown - menu {
position: absolute;
top: 100 %;
right: 0;
width: 400px;
height: 200px;
background - color: grey;
z - index:1000;
}
.header__shadow {
position: absolute;
height: 7px;
left: 200px;
right: 0;
top: 100 %;
background: linear - gradient(to bottom, rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0) 100%);
}
.sidebar__shadow {
position: absolute;
left: 100 %;
top: 0;
bottom: 0;
width: 7px;
background: linear - gradient(to right, rgba(0, 0, 0, 0.35) 0%,rgba(0, 0, 0, 0) 100%);
}
I want a parent div to fill the screen with a transparent background but I can't seem to get this to work with the following code.
The parent div only appears as a solid colour.
Any ideas what I'm doing wrong:
.outer {
position: relative;
z-index: 1;
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>
Your are using 50% opaque white on 100% opaque white. How exactly do you expect that to become visible?
Also, your body has a computed height of 0. That makes .outer have 100% of 0 - guess what that is...
html, body { height: 100%; }
body { background-color: #f0f0f0; }
.outer {
position: relative;
z-index: 1;
background-color: rgba(200, 0, 0, 0.5);
height: 100%;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>
Use the vh (viewport height) instead of the 100% height. When you use the 100% height, it takes the 100% of parent and the parent is body which height is 0px.
.outer {
position: relative;
z-index: 1;
background-color: rgb(255, 255, 255, 0.5);
height: 100vh;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>
parent div's opacity wont achieved when there is a solid background on the child and the .outer as no height so its not possible to show it. (because of position:absolute)
May be reverse these backgrounds and give position relative will make u understandable about how it works like below.
Note:Even position:absolute; in both places makes some sense
.outer {
position: relative;
background-color: red;
z-index: 1;
height: 100%;
}
.inner {
position: relative;
width: 100%;
top: 50px;
background-color: rgba(255, 255, 255, 0.5);
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>
As others have pointed out, a div with a white background won't work when overlapping another white element.
However, even if you were to change the colour of .outer to grey (as I've done in my example), it still won't fill the full height of the screen.
Instead of using height: 100%, you can view height: 100vh to fill the screen. You can learn more about vh (Viewport-percentage) from this article.
Here's a work example:
.outer {
position: relative;
z-index: 1;
background: rgba(0, 0, 0, .5);
height: 100vh;
}
.inner {
position: absolute;
width: 100%;
top: 50px;
background-color: white;
padding: 20px;
}
<div class="outer">
<div class="inner">
<h5>Search</h5>
</div>
</div>
So I have an image that needs a hover effect;
HTML
<div class="data">
<img src="http://scontent-a-dfw.cdninstagram.com/hphotos-xpa1/t51.2885-15/e15/10809512_341410899374744_4010362_n.jpg"/>
<div class="overlay"></div>
</div>
CSS
.data {
width: 100px;
margin: auto;
padding: 5px;
height: auto;
}
img {
width: 100%;
}
.overlay {
width: 100%;
height: ___?;
background-color: blue;
}
As you can see, the height of .data is the same as the image. How can I make .overlay the same height of .data?
Since the element is an overlay (as the name implies), i'd suggest relatively positioning the parent and then absolutely positioning the overlay relative to it:
Example Here
.data {
width: 95%;
margin: auto;
position: relative;
}
.data .overlay {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
}
.data:hover .overlay {
background: rgba(0, 0, 0, .5);
}