As you can see, in the title block, only the upper half has background, I want the whole title block to have the same background. Of course, I can set background for the title block itself, but this way the background won't look continuous, as you can see in the fiddle.
Is there a way to achieve this with pure css?
.header {
width: 100%;
padding-top: 30%;
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size: cover;
position: relative;
}
.title {
position: absolute;
transform: translateY(-50%);
padding: 8px 24px;
font-size: 24px;
background: none;
border-radius: 50px;
border: 4px solid white;
left: 10%
}
body {
background-color: #eee
}
.title.b {
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size: contain
}
<div class="header">
<div class="title"> Title Title </div>
</div>
<div class="header" style="margin-top:60px">
<div class="title b">
Title Title
</div>
</div>
Fiddle: https://jsfiddle.net/s7pkr2w8/1/
Here is an idea using clipping and masking
.header {
padding-top: 30%;
position: relative; /* relative here !! **/
display:flex;
z-index:0;
}
.title {
font-size: 24px;
color:#fff;
border-radius: 50px;
margin:auto auto 0 10%; /* position the element using flexbox instead of absolute */
-webkit-mask:linear-gradient(#fff 0 0); /* clip the pseudo element to only the title shape*/
}
/* extra div needed for the white border*/
.title > div {
padding: 8px 24px;
border:4px solid #fff;
position:relative;
border-radius: inherit;
}
/**/
/* two pseudo element relative to the container having the same background
to have the continuous effect
*/
.title::before,
.header::before{
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%/cover;
}
.header::before {
clip-path:inset(0 0 20px 0); /* cut 20px from the bottom to be around the middle of the title */
}
body{
background-color:#eee
}
<div class="header">
<div class="title">
<div>Title Title</div>
</div>
</div>
you can try to set the background on a parent element or just event to the whole body:
body{
background:url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size:cover;
}
Related
This question already has answers here:
two divs split with diagonal line - CSS
(1 answer)
Responsively Align Slanted Divs
(1 answer)
Closed 1 year ago.
I have created one HTML page which is diagonally split.I have put image in right side and some content and button in left.But i am facing 2 issue with my code
1- right side is not fixed and image is not coming properly.
2- The split is not happen for full page
code is here:-
HTML:-
body {
margin: 0;
font-size: 2em;
}
#landing-area {
width: 100vw;
height: 100vh;
display: flex;
}
#box-left {
width: 50%;
clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 0, calc(100% - 10vh) 0, 100% 100%, 0 100%);
margin-right: -4.2vh;
padding: 5px 11vh 5px 5px;
background-color: #F4FCFF;
text-align: center;
}
#box-right {
width: 50%;
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, calc(0% + 10vh) 100%);
margin-left: -4.2vh;
padding: 5px 5px 5px 11vh;
text-align: center;
}
#middle-text {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 25%;
margin-top: -100px;
margin-left: -200px;
}
<body>
<div id="landing-area">
<div id="box-left">
<div id="middle-text">
<img src="images/logo.png">
<h>Header goes here</h>
<p>4 line paragraph goes here</p>
<button>Button name</button></div>
</div>
<div id="box-right">
<img src="images/landingPage.png">
</div>
</div>
</body>
Image:-
I want the page should be look like below
I suggest a slightly different approach because you want to be sure that your text etc within the left block will fit whatever the viewport width. One way of ensuring this is to have the left hand block at width 50% less 10vh. i.e. not try the complicaed business of getting text to fit within a sloping side.
This snippet gives the whole page the pale background color, the left block sized as above and the right block it gives width 50% plus 10vh and clips it (polygon is slightly altered to make it correct for this width).
body {
margin: 0;
font-size: 2em;
}
#landing-area {
width: 100vw;
height: 100vh;
background-color: #F4FCFF;
position: relative;
}
#box-left {
width: calc(50% - 10vh);
padding: 5px 11vh 5px 5px;
text-align: center;
display: inline-block;
height: 100%;
box-sizing: border-box;
}
#box-right {
width: calc(50% + 10vh);
clip-path: polygon(10vh 0, 100% 0, 100% 100%, 0 100%);
padding: 5px 5px 5px 11vh;
text-align: center;
background-image: url(https://picsum.photos/id/131/1024/768?blur=2);
background-size: cover;
background-position: center center;
display: inline-block;
height: 100%;
position: absolute;
box-sizing: border-box;
}
#middle-text {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 25%;
margin-top: -100px;
margin-left: -200px;
}
<div id="landing-area">
<div id="box-left">
<div id="middle-text">
<img src="images/logo.png">
<h>Header goes here</h>
<p>4 line paragraph goes here</p>
<button>Button name</button></div>
</div>
<div id="box-right">
</div>
</div>
Note: you'd need to make your px dimensions currently used for the text into relative ones so that the whole thing is responsive (this is true whether you use the method here or some other method).
You can see the code from codepen. Visit https://codepen.io/chris22smith/pen/vvYBGY
HTML:-
<body>
<div class="view">
<div class="left">
<div class="sun"></div>
</div>
<div class="divider"></div>
<div class="right">
<div class="moon"></div>
</div>
</div>
</body>
CSS:-
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
transform:skew(-10deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.divider {
background-color:#fc0;
border-left:solid 2px #000;
border-right:solid 2px #000;
bottom:-5%;
left:50%;
position:absolute;
right:50%;
top:-5%;
z-index:1;
}
.right {
left:50%;
right:-5%;
}
.sun,
.moon {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
transform:skew(5deg);
}
.sun {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.moon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
Here is the effect I am trying to achieve:
Example
I know how to make the triangle, my issue is that is is being created INSIDE of the box. If I set "left" to 100%, the box will disappear behind the right side of the box instead of going outside of the box over the next one.
Here is the Pen I am working on to try and get this to work:
My Code
HTML:
<div class="square title">
<div class="content">
<div class="table">
<div class="table-cell ">
<ul>This demo shows you can center multiple types of content :
<li>Text</li>
<li>Images</li>
<li>Lists</li>
<li>... (you can also do it with forms)</li>
</ul>
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell ">
<p>Hello World!</p>
</div>
</div>
</div>
</div>
CSS:
body {
font-family: sans-serif;
color: #fff;
font-size: 20px;
text-align: center;
}
.square {
float:left;
position: relative;
width: 33%;
padding-bottom : 33%; /* = width for a 1:1 aspect ratio */
/* margin:1.66%; */
background-color:#1E1E1E;
overflow:hidden;
/* border: solid 1px red; */
margin: 5px;
}
.content {
position:absolute;
height:90%; /* = 100% - 2*5% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table{
display:table;
width:100%;
height:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
}
/* For list */
ul{
text-align:left;
margin:5% 0 0;
padding:0;
list-style-position:inside;
}
li{
margin: 0 0 0 5%;
padding:0;
}
.title::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
left: 95%;
/* top: 45%; */
/* z-index: 999; */
}
I tried making a whole new div around the square and setting that to have the triangle, but it made the triangle go all the way to the right of the screen, even without setting anything for the left or right.
I also tried z-index but that didn't do anything either.
You can easily achieve this with only background:
.box {
display: inline-block;
width: 150px;
height: 150px;
background: grey;
}
.box:last-child {
background:
linear-gradient(to top right,grey 49.8%,transparent 50%) 0 calc(50% - 15px),
linear-gradient(to bottom right,grey 49.8%,transparent 50%) 0 calc(50% + 15px),
#000;
background-size:30px 30px;
background-repeat:no-repeat;
}
<div>
<div class="box">
</div>
<div class="box">
</div>
</div>
I need help with this custom layout. Can someone tell me how to create css code for those 3 div's and get this results ?
Considering you don't have any code to start with, here is a beginning spot. Note that a lot of these have vendor prefixes and may of these have shorthand ways of writing them (padding, margin etc..). I just wrote everything out for visual purposes.
div{
display:flex;
flex-direction:column;
align-items:center;
padding-top: 50px;
padding-bottom: 50px;
}
h1{
text-align: center;
}
.black{
position: relative;
background: black;
width: 100%;
height: 100%;
}
h1.black{
color:white;
}
.white{
position:relative;
background: white;
width: 100%;
height: 100%;
border: 3px solid black;
}
div.overlay{
margin-top:140px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
float: center;
border: 3px solid silver;
background: linear-gradient(silver,#A9A9A9);
position: absolute;
border-radius: 20px;
}
<div class="wrapper">
<div class="black">
<h1 class="black">Div 1</h1>
</div>
<div class="white">
<h1> Div 2</h1>
</div>
<div class="overlay">
<h1>Div 3</h1>
</div>
</div>
as a starting point:
the three div should be contained in the same container,
the container takes 100% of the availible height and is positioned relative.
each background div take 50% of the height and are also positioned relative.
using the .v-centered CSS class we can center elements vertically and horizontally inside of relative containers using : top:50% and transform: translateY(-50%) and horizontally margin: 0 auto.
the foreground has a higher z-index then other .v-centered content to appear on top
the issue you can see is that the content of the background divs is centered inside the divs and does not take into account the height of the foreground div, this is because it is positionned in absolute, if your central div has always the same height, you could add padding to the content of the background to adress that issue.
html,
body {
height:100%;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
}
.container {
text-align:center;
height:100%;
position:relative;
}
.color--dark {
background: black;
color:white;
}
.color--light {
background: white;
}
.background {
position:relative;
height :50%;
}
.v-centered {
position: absolute;
top:50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
}
.foreground {
width:60%;
background:grey;
padding:10px;
border-radius: 20px;
z-index:2;
}
<div class="container">
<div class="background color--dark">
<span class="v-centered"> DIV 1 </span>
</div>
<div class="foreground v-centered"> DIV 2 </div>
<div class="background color--light">
<span class="v-centered"> DIV 3 </span>
</div>
</div>
Here's something that can work.
The trick is to set the middle div .button.-absolute to absolute positioning and make sure its placed within the upper black div .top-black. This element needs position: absolute for this to work. Because of its absolute positioning use bottom and left to align it on the fold of the two colours meeting. No z-index is needed yet, but if you see other items overlapping them, add a higher value e.g. z-index: 10 to the element that needs to be on top. The gradient background can be achieved by using background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
I hope this helps and here's it in action.
body {
font-size: 2rem;
}
.top-black {
text-align: center;
position: relative;
background-color: #333333;
width: 100% min-height: 225px;
content: ' ';
}
.bottom-white {
text-align: center;
background-color: #ffffff;
width: 100% min-height: 200px;
border: 1px solid #ccc;
}
.button {
padding: 3rem 1rem;
margin: 0 auto;
}
.button.-absolute {
padding: 1rem 5rem;
position: absolute;
bottom: -2rem;
left: calc(50% - 7.5rem);
background-color: red;
}
.button.-filled {
border-radius: 10px;
background: #ffffff;
/* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%, #cccccc 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%, #cccccc 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc', GradientType=0);
/* IE6-9 */
}
.button.-white {
color: #ffffff;
}
<div class="top-black">
<div class="button -white">DIV I</div>
<div class="button -absolute -filled">DIV I</div>
</div>
<div class="bottom-white">
<div class="button">DIV I</div>
</div>
This question already has answers here:
CSS3 curved cutout from div?
(2 answers)
Closed 6 years ago.
I'm trying to create the following layout in CSS.
This would usually be easy to do, however because the background is an image (illustrated in my image as a gradient), I can't simply add a absolute positioned div at the top and color the 'cut away'. I've been struggling to work out how to do this for the last few hours.
I've looked up some examples using the ::before and ::after pseudo selectors, however can't work out how do it while keeping the border radius on the main content div (blue).
<div class="content">
<div class="header">
<a class="left" href="#">LINK 1</a>
<!--
Stuck with how to position this so it clips
<img class="logo" src="https://placehold.it/100x100">
-->
<a class="right" href="#">LINK 2</a>
</div>
<p>Some text content</p>
.content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: blue;
height: 300px;
width: 400px;
padding: 20px;
}
.header {
position: relative;
top: -50px;
padding: 0 20px;
}
.header .right {
float: right;
}
Demo: http://jsbin.com/saxunecidu/1/edit?html,css,output
Radial gradient for rescue!
#test{
padding:10px;
background:rgb(100,100,240);
color:white;
font-size:25px;
-webkit-mask-image: radial-gradient(circle at top, transparent 30px, black 31px);
border-radius:15px;
width:600px;
height:150px;
margin:10px;
}
body{
background: radial-gradient(lightgrey,black);//just an example gradient
}
<div id="test">Something there</div>
You may use a pseudo and a hudge box shadow to paint background-color and cut off a curve.
For the nav on top, flex can easily do it.
.cut {
margin: 1em auto 1em;
padding :40px 1em 1em;
color:white;
height: 75vh;
/* demo purpose */
width: 70vw;
/*demo purpose */
border-radius: 1em;
overflow: hidden;
position:relative;
}
.cut:before {
content:'';
width:80px;
border-radius:50%;
height:80px;
display:block;
margin:-80px auto 0;
box-shadow:0 0 0 3000px #2D3E50
}
.rd {
display: flex;
/* demo purpose */
width: 70vw;
margin: 1em auto -45px;;
border-radius: 50%;
}
.rd img {
margin :0 auto ;
flex-shrink:0;
border-radius:50%;
}
.rd a {
margin: 0 auto auto; /* put links at top */
}
body {
background:linear-gradient(to top, #ccc,#999);
<nav class="rd"><a href >link</a> <img src="http://dummyimage.com/60x60/464646/&text=image" /><a href >link</a>
</nav>
<div class="cut">
content in here to set away from curve
</div>
This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.
AIM
What technique is used to produce this result, where the top content is transparent and slides over a background image.
http://jsfiddle.net/spadez/2uUEL/9/embedded/result/
MY ATTEMPT
What I have tried to do is apply a background and then make the top section transparent on top of it.
http://jsfiddle.net/spadez/N9sCD/3/
body {
background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
height: 160px;
opacity:0.4;
filter:alpha(opacity=40);
}
#section {
height: 600px; background-color: blue;
}
QUESTION
How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.
Here's a FIDDLE
<div id="top">
<span class="mask">
<img src="https://app.h2ometrics.com/build/v0.1.1a/styles/img/chrome_logo.png" class="logo" alt="Chrome">
Link 3
Link 2
Link 1
</span>
</div>
<div class="section l">
</div>
<div class="section d">
</div>
#top {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed;
background-size: cover;
position: relative;
height: 400px;
}
#top a {
background: rgba(200,200,200,0.5);
display: block;
float: right;
margin: 10px 15px;
padding: 2px 5px;
text-decoration: none;
color: #111;
cursor: pointer;
border: 2px solid #ddd;
border-radius: 8px;
transition: color 0.2s ease-in;
}
#top a:hover {
color: #fff;
}
.mask {
background: rgba(0,187,255,0.5); /* or hex combined with opacity */
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */
}
.logo {
position: relative;
width: 60px;
height: 60px;
margin: 10px;
}
.section {
height: 600px;
}
.l {
background: #ddd;
}
.d {
background: #333;
}
Update #top content placed inside .mask which removes need for z-index.
You were essentially correct in building but your CSS has some errors.
body {
background: url('http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg') fixed; /* fixed stops background from scrolling */
background-size: cover cover; /* expands bg image to cover body */
}
#top {
height: 160px;
color: #fff; /* this just makes the text visible on your dark bg */
}
You don't need to set the opacity of #top because without a background set it will already be transparent.
Try this:
HTML - pushed the menu into its own div
<div id="top">
<div id="menu">
logo
link 1
link 2
</div>
</div>
<div id="section">
</div>
CSS - removed margin from body, set the background to a fixed position and to always cover the whole body, added background color to menu. Note that #top does not need a transparency as it is 100% transparent by default. If you want to get a 'colour washed' looking image it would be better to adjust the image itself rather than trying to re-create a colour overlay.
body {
margin: 0;
background: url("http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg") fixed;
background-size: cover;
}
#top {
height: 500px;
}
#menu {
padding: 10px;
background-color: #fff;
}
#section {
height: 600px; background-color: blue;
}