Hi guys i'm stuck at this.
I have a div but when i creating that same div class it will displayed in the next line. But i wanted to appear the second div next to first div. Can any one suggest one best answer.The code is:
<html>
<head>
<style>
.box3{
margin: 20px auto;
width: 300px;
min-height: 310px;
padding: 10px;
position:relative;
background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#fff), color-stop(.1,#fff));
border: 1px solid #ccc;
-webkit-border-radius: 60px 5px;
-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.box3:before{
content: '';
width: 50px;
height: 50px;
top:0; right:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(-14px,20px)
skew(-20deg);
}
.box3:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
z-index:-1;
display: inline-block;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(20px,25px)
skew(20deg);
}
.box3 img {
width: 100%;
margin-top: 15px;
}
p{
margin-top: 15px;
text-align: justify;
}
h1{
font-size: 20px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
a{
text-decoration: none;
color: #4A4A4A !important;
}
a:hover{
text-decoration: underline;
color: #6B6B6B !important ;
}
</style>
</head>
<body>
<div>
<div class="box3">
<h1>Sample Box</h1>
<img src="http://www.wpthemegenerator.com/wp- content/uploads/2012/06/Image.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.
</p>
<br />
DesignShock.com
</div>
<div class="box3">
<h1>Sample Box</h1>
<img src="http://www.wpthemegenerator.com/wp-content/uploads/2012/06/Image.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus consectetur dolor a porttitor. Curabitur id sem sed ante fringilla pulvinar et id lectus. Nullam justo ipsum, hendrerit ut commodo nec, pellentesque nec erat. Pellentesque pharetra.
</p>
<br />
DesignShock.com
</div>
</div>
</body>
</html>
There a two different solutions using float or flexbox.
Solution #1 (float)
Add float:left; to the class .box3 - see this fiddle: https://jsfiddle.net/sebastianbrosch/xa27czzL/
Solution #2 (flexbox)
Add a new class to the surrounding div of the boxes like .container and add a new stylesheet for this container with the property display:flex;
.container {
display:flex;
}
See an example on the following fiddle: https://jsfiddle.net/sebastianbrosch/xa27czzL/1/
More information about using flexbox you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I'm trying to make Iphone 6/7/8 version for my site.
Unfortuantely I do not know how to move my main menu to right corner so it would look like this in web site:
Right now the site looks like this:
Could you tell me how to move this menu?
What is more, I do not know how to move this 6 squares down to the text. I'm trying to usse marigin-bottom etc on SquaresDOWN div or UP but nothing is happening.
I'd really appreciate if you could help me with these two things.
css
*
{
margin: 0;
padding: 0;
}
header
{
width: 1920;
height: 1080px;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
height: 1080px;
width: auto;
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
text-align: center;
}
footer img{
margin-top: 5px;
height: 30px;
display: inline-block;
padding: 0px 10px 0px 0px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 25px/15px Arial;
padding: 5px;
}
#logo
{
margin-top: 10px;
float: left;
}
#sign a
{
background-color: #DCDFDE;
padding: 30px 15px 17px 15px;
border-top: 3px solid black;
border-bottom: 3px solid black;
border-left: 3px solid black;
border-right: 3px solid black;
}
.left h1{
font-size: 20px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
}
.left {
float: left;
width: 50%;
margin-right: 500px;
}
#ourteam
{
margin-top: 300px;
margin-left: 100px;
font-size: 60px;
font-weight: bold;
color:rgb(24, 188, 253);
}
#squaresUP div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#squaresDOWN div {
display: inline-block;
width: 200px;
height: 200px;
margin-right: 30px;
}
#tytul
{
font: Bold 20px/23px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 33px;
margin-top: 60px;
}
#tytul1
{
font: Regular 14px/30px Arial;
letter-spacing: 0;
color: #2699FB;
margin-left: 28px;
margin-top: 100px;
}
.square1 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 { background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 { background: #7FC4FD 0% 0% no-repeat padding-box;}
#media only screen and (max-device-width: 500px){
body {
background-image: linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
background-size:100% 3000px;
}
#ourteam
{
margin-top: 300px;
margin-left: 700px;
font-size: 80px;
font-weight: bold;
width: 400px;
color:rgb(24, 188, 253);
}
.left h1{
font-size: 27px;
width: 1500px;
color:rgb(0, 1, 253);
text-align: justify;
margin-left: 100px;
margin-top: 50px;
}
.left {
float: left;
margin-right: 500px;
}
.main-nav
{
float: right;
color: #000000;
margin-top: 40px;
width: 1150px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color: #000000;
text-decoration: none;
font: Bold 35px/15px Arial;
padding: 5px;
width: 50px;
}
}
html
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>DingDog</title>
<link rel="stylesheet" href="css-images/style-authors.css" >
</head>
<body>
<header>
<div class="row">
<ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
<section>
<article>
<p id="ourteam">Our Team.</p>
<div class="left">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>
</div>
<div class="row2">
<div id="squaresUP">
<div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
<div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
<h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
<h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
</div>
<div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
</div>
<div id="squaresDOWN">
<div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
<div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
<div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
</div>
</div>
</article>
</section>
</header>
<footer>
<img src="social/instagram.png" />
<img src="social/twitter-white-logo.png" />
<img src="social/facebook.png" />
</footer>
</body>
</html>
//edit
the squares should be right there. They should be centered under the text.
I have cleaned up your code a little bit and here you can find an example for how to create a header menu inside a css grid looks decent for iphone 7/8 view.
you can change the percentage based on your request to get it a bit bigger if you don't want to create more buttons,
if it doesn't helped you totally at least it could be a reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.row{
display: grid;
grid-template-columns: 20% 80%;
}
.main-nav{
float: right;
display: inline-flex;
list-style: none;
font-size: 50%;
}
.main-nav li{
font-size: 50%;
}
</style>
</head>
<body>
<div class="row">
<div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
<ul class="main-nav">
<li style="padding-left:10px">NEWS FEED</li>
<li style="padding-left:10px">ABOUT DINGDOG</li>
<li style="padding-left:10px">AUTHORS</li>
<li style="padding-left:10px">CONTACT</li>
<li style="padding-left:10px" id ="sign">SIGN IN</li>
</ul>
</div>
</div>
<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->
</body>
</html>
I have a div with some text and an image that should appear to the right of the text.
The problem is that the image is appearing on the right, but it is not beside the text. I have used float:right and clear option but it still doesn't work properly.
My code is:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
</div>
</div>
THIS is what I want to do.
Just put the floated element first:
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
It'll float off to the left and then your text will fill the space on the right.
By putting the text first, the image doesn't displayed until after the text element ends, so the image will be floated under the text. (Just like if you didn't float it, it would appear under the text).
Expand for a working snippet to see it in action:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px );
top:20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content{
border: 4px solid red;
width: 600px;
word-wrap:break-word;
}
.img{
margin-left: 15px;
float: right;
display:inline-block;
clear:both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
To achieve the expected result, the <img> should go before <p> tag in your HTML. Here is an example:
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
word-wrap: break-word;
}
.img {
margin-left: 15px;
float: right;
display: inline-block;
clear: both;
}
<div class="box">
<div class="content">
<img src="http://placehold.it/150x250/000000/ffffff" class="img">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
Either put the image before the p tag, or put it inside the p tag (see my snippet).
By the way: When you apply float to an element, inline-block will have no effect at all, and also the clearing does nothing in this particular case.
.box {
width: 600px;
height: 1000px;
left: calc( 45% - 200px);
top: 20%;
position: absolute;
border-radius: 5px;
border: 2px solid rgba(255, 255, 255, 0.3);
padding: 0px;
text-align: center;
box-sizing: border-box;
display: flex;
}
.content {
border: 4px solid red;
width: 600px;
text-align: left;
}
.img {
margin-left: 15px;
float: right;
}
<div class="box">
<div class="content">
<p><img src="http://placehold.it/150x250/000000/ffffff" class="img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, urna ut eleifend blandit, orci nisi vehicula nisi, sit amet commodo nisl ligula ac nunc.</p>
</div>
</div>
I'm trying to replicate this mock up design.
Design:
Current:
Is there a way to make sure the "Shop All" ignores the overflow:hidden, but the before and after obey the overflow:hidden?
Or is there another method I can try to implement this?
Html
<div id="outer">
<div id="opaq">
<div id="inner">
<h1>Performance Parts</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet. Nunc gravida urna urna. Vestibulum vitae lectus leo. Etiam fermentum nunc vel nulla tincidunt, sit amet molestie lectus pulvinar.</p>
<div id="shop">Shop all</div>
</div>
</div>
</div>
Css
#outer{
max-width:500px;
text-align:center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
}
#opaq{
background-color: rgba(48, 44, 44, 0.7);
padding:5px;
}
#inner{
border:1px solid red;
margin:10px;
color:white;
border-bottom:none;
overflow:hidden;
}
#shop{
position:relative;
top:8px;
display: inline-block;
}
#shop:after{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 600px;
left: 100%;
margin-left: 15px;
}
#shop:before{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 600px;
right: 100%;
margin-right: 15px;
}
* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.wrapper {
background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(http://beerhold.it/400/300);
background-repeat: no-repeat;
background-size: cover;
width: 400px;
height: 200px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
fieldset {
width: 90%;
height: 90%;
margin-top: .7em;
transform: rotate3d(0, 0, 1, 180deg);
border: 3px solid rgba(255, 255, 255, .4);
}
legend {
font-size: 1.4em;
font-weight: 700;
}
legend span,
fieldset .text {
display: block;
transform: rotate3d(0, 0, 1, 180deg);
color: white;
text-shadow: 0 0 4px black;
padding: 0 1em;
}
legend span {
color: yellow;
}
fieldset .text {
height: 100%;
}
fieldset .text h1 {
padding: .3em 0;
text-align: center;
}
fieldset .text p {
line-height: 1;
}
<div class="wrapper">
<fieldset>
<legend align="center"><span>SHOP ALL</span>
</legend>
<div class="text">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a justo nisl. Phasellus consequat tincidunt elit, sed interdum nibh blandit ut. Nunc augue erat, rutrum ac vehicula nec, pulvinar in eros.
</p>
</div>
</fieldset>
</div>
Use this css; notice i have added comments to the code i change or added
#outer{
max-width:500px;
text-align:center;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
}
#opaq{
background-color: rgba(48, 44, 44, 0.7);
padding:5px;
}
#inner{
border:1px solid red;
margin:10px;
color:white;
border-bottom:none;
}
#shop{
position:relative;
top:8px;
display: inline-block;
z-index:200; /*added*/
}
#shop:after{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 364%; /* changed */
left: 100%;
margin-left: 15px;
}
#shop:before{
content: "";
position: absolute;
border-bottom: 1px solid white;
top: 9px;
width: 364%; /* changed */
right: 100%;
margin-right: 15px;
}
border split into table cells:
body
{
font-family:arial;
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNyPOuKMHtvXNa5dnlc8xGXvW-nVfguLdlj9sj4-K6cTA0Zbf7");
background-size:cover;
margin:0px;
}
.box div
{
border:0px solid RGBa(255,255,255,0.5);
}
.shade
{
background-color:RGBa(50,50,50,0.7);
padding:20px;
position:fixed;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
h1
{
text-align:center;
text-transform:uppercase;
}
.bottomborder
{
display:table;
table-layout:fixed;
}
.box .left
{
width:50%;
border-width:0px 0px 2px 2px;
}
.box .right
{
width:50%;
border-width:0px 2px 2px 0px;
}
.box .col
{
display:table-cell;
}
.shopall
{
padding: 0px 15px;
white-space: nowrap;
position: relative;
top: 10px;
color:RGB(200,150,0);
font-weight:bold;
font-size:20px;
text-transform:uppercase;
}
.box
{
margin-left:auto;
margin-right:auto;
width:1100px;
margin-top:15px;
max-width: 100%;
}
.box .content
{
padding:5px 55px 10px 55px;
border-width:2px 2px 0px 2px;
border-top-left-radius:0px;
border-top-right-radius:0px;
color:white;
}
<body>
<div class="shade">
<div class="box">
<div class="content">
<h1>Performance & Parts </h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur in arcu at placerat. Aenean sed lorem tincidunt, maximus purus eget, ornare metus. Nam interdum lobortis imperdiet.
</div>
<div class="bottomborder">
<div class="left col">
</div>
<div class="col">
<div class="shopall">
shop all
</div>
</div>
<div class="right col">
</div>
</div>
</div>
</div>
</body>
You may try a negative margin and some flex to draw side borders, and it will keep a coherent HTML with title coming first in the code :
div {
margin:2em;
display:flex;
flex-flow:column;
text-align:center;
border:solid;
border-bottom-color:transparent;
background:rgba(0,0,0,0.2);
box-shadow: 0 0 0 2em rgba(0,0,0,0.2);
}
div h2 {
order:1;
display:flex;
margin:0 0 -0.6em 0;
font-variant:small-caps;
}
h2:before,
h2:after {
content:'';
flex:1;
border-bottom:solid;
margin:auto 1em auto -3px ;
}
h2:after {
margin: auto -3px auto 1em;
}
p {padding:0.25em 0.5em;}
html {background:url(http://lorempixel.com/800/600/city/6);
background-size:cover;
color:white;
text-shadow:0 0 1px black;
}
<div>
<h1>HTML Ipsum Presents</h1>
<h2>shop all</h2>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
Mauris placerat eleifend leo.</p>
</div>
Not sure how else to title this (if someone else has a better title feel free to edit the post) but essentially the clients wants responsive aarced lines along the top one pink and one purple as shown here in the screenshot:
Im currently accomplishing this (since an image is not responsive enough) using the element (pink) a ::before (the purple area) and an ::after (the pink line) Now i need an image slider to peek in below it but currently its being covered by the layers before it:
it needs to look like this mockup:
Is there any way i can acomplish this?
html:
<div class="topbar">
<div class="container">
<div class="logo"></div>
</div>
</div>
<div class="container firstbelow"></div>
css:
.topbar {
position: relative;
width: 100%;
height: 200px;
background: pink;
overflow: hidden;
z-index: 5;
}
.topbar:after {
position: absolute;
content: "";
left: -20%;
top: 50%;
width: 140%;
height: 300px;
background: rgb(250, 244, 255);
background-repeat: no-repeat;
background-position: center top;
border-radius: 100% 0 0 0 / 90%;
border-top: 5px solid #ff88bb;
z-index: 5;
}
.topbar:before {
position: absolute;
content: "";
left: -20%;
top: 42%;
width: 140%;
height: 150%;
background: #8855bb;
box-shadow: inset 10px -10px 5px -10px #000;
border-radius: 80% 0 0 0 / 60%;
-ms-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
transform: rotate(-1deg);
z-index: 5;
}
.firstbelow {
margin-top: -95px;
height: 300px;
background-image: url(../images/slider/Commercial.png);
z-index: 4
}
(Note: Yes, i am aware that the ::after element has a white background. if it does not then the pink and putple layers show through and i still cannot see the slider image)
you may also use a container in a fixed position and set a padding-top or margin top to the content that it may also slide underneath.
You can also play with gradient , shadow and radius to draw your shape:
snippet below or codepen
header {
position: fixed;
left: 0;
width: 100%;
}
header div {
background: linear-gradient(165deg, #FFC0CB 31%, transparent 31.5%), linear-gradient(175deg, #FFC0CB 41%, transparent 41.5%), linear-gradient(179.5deg, #FFC0CB 32.5%, transparent 33%);
padding-top: 30px;
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1;
height: 220px;
}
header:after {
z-index: -1;
content: '';
display: block;
height: 200px;
pointer-events: none;
left: 0px;
width: 100%;
top: 120px;
margin: -55px 0 0 0;
border-radius: 1500px 0 0 0 / 150px 0 0 0;
box-shadow: inset 50px 80px 0 -70px #FFC0CB, inset 20px 90px 0 -70px #8855BB, inset 30px 80px 0 -50px #FF88BB;
position: absolute;
box-sizing: border-box;
border-top: solid #FFC0CB 0;
}
body {
margin: 0 auto;
width: 800px;
max-width:100%;
}
nav {
width: 800px;
max-width:100%;
margin: auto;
display: flex;
justify-content: space-between;
}
nav img {
border-radius: 50% / 3em;
box-shadow: 0 0 5px;
height: 80px;
width: 80px;
}
nav a {
vertical-align: top;
margin: 0 1em;
color: gray
}
main {
padding-top: 160px;
color: #FF88BB;
text-shadow: 1px 1px gray;
text-align: justify
}
h1,
h2,
h3,
pre {
color: gray;
display: table;
border-bottom: solid #FFC0CB;
padding: 0 0.25em;
line-height: 0.8em;
}
pre {
background: lightgray;
}
li {
color: #8855BB
}
<header>
<div>
<nav>
<a href="#">
<img src="http://lorempixel.com/90/100/food/8" />
</a>
<span> link
link
link
link
link
link
</span>
</nav>
</div>
</header>
<main>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis
elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</main>
Put the topbar as an absolute element at the top of the page
.topbar {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 200px;
background: pink;
z-index: 5;
height: <static_dimension>;
}
I have a header which has a background which is set to background-attachment: fixed;, but this is making a white strip appear at the top of the page at certain scroll positions (The background is blurred, so the strip is also blurred, but it is still visible).
This is how it currently looks; there is that white glow sort of thing at the top, which is that strip that I am talking about
The code I have right now is this (If you run the snippet, please view it full screen, since I haven't made it mobile-compatible yet): Edit on Codepen
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 1.02em;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5em;
line-height: 2em;
}
.container {
margin: 0 auto;
width: 80vw;
}
blockquote {
box-sizing: content-box;
position: relative;
margin: 0 auto;
display: block;
padding-left: 30px;
font-size: 1.5em;
font-style: italic;
color: #4a413c;
border-left: 7px solid rgba(74, 65, 60, 0.5);
quotes: "“" "”" "‘" "’";
padding-bottom: 1.75em;
}
blockquote::before {
position: absolute;
top: 0.55em;
left: -0.5em;
content: open-quote;
line-height: 0.2em;
font-style: normal;
font-size: 5em;
font-family: 'Adobe Caslon Pro', serif;
color: #4a413c;
}
blockquote::after {
position: absolute;
right: 0;
bottom: 0;
content: attr(data-author);
font-style: italic;
font-size: 0.75em;
color: 4a413c;
}
/* Header */
header {
position: relative;
width: 100%;
height: 60%;
padding: 50px 100px;
text-align: center;
overflow: hidden;
color: white;
font-size: 1.5em;
margin-bottom: 50px;
}
header.no-margin {
margin-bottom: 0;
}
header .container {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
header .container h1 {
position: relative;
display: inline-block;
font-weight: 300;
}
header .container h1::after {
position: absolute;
bottom: 1px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
content: '';
width: 80%;
height: 2px;
border-bottom: 2px solid white;
}
header .container a {
color: inherit;
font-size: inherit;
text-decoration: inherit;
-webkit-transition: all 0.75s 0s;
transition: all 0.75s 0s;
border-bottom: 2px solid transparent;
}
header .container nav ul {
list-style: none;
}
header nav ul li {
display: inline-block;
padding: 5px 30px;
}
header nav ul li a:hover {
border-bottom: 2px solid white;
}
header .container p {
width: 40%;
margin: 0 auto;
}
/* Header Background */
.header::before {
position: absolute;
top: 0;
left: 0;
z-index: -100;
content: '';
display: block;
min-height: 100vh;
width: 100%;
background-image: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
section.quote {
position: relative;
min-height: 40vh;
}
section.quote blockquote {
position: absolute;
width: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.section.latest {
display: block;
margin: 0 auto;
clear: both;
}
div.latest {
padding: 10px;
position: relative;
width: 25vw;
height: 25vw;
overflow: hidden;
float: left;
background-size: cover;
background-position: center center;
background-attachment: scroll;
margin: 5px;
}
div.latest::after {
content: '';
clear: both;
}
<header class="header no-margin">
<div class="container">
<nav>
<ul>
<li>Artwork</li>
<li>Blog</li>
<li>Social</li>
<li>Comission</li>
<li>Contact</li>
</ul>
</nav>
<h1>Blog Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</header>
<div class="container">
<section class="quote">
<blockquote data-author="Pablo Picasso">
The meaning of life is to find your gift. The purpose of life is to give it away.
</blockquote>
</section>
<main>
<section class="section latest">
<h2>Latest Artwork</h2>
<div class="latest" style="background-image: url(https://placeimg.com/640/480/any);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
</div>
<div class="latest" style="background-image: url(https://placeimg.com/641/450/any);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
</div>
<div class="latest" style="background-image: url(https://placeimg.com/653/470/any);">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
</div>
</section>
<section class="section">
<h2>Latest Posts</h2>
</section>
</main>
</div>
To see the strip, scroll down until there is only a small but of the header on the screen.
The strip goes when you change background-attachment: fixed; to background-attachment: scroll;, but I want to keep it fixed.
I feel like I'm overlooking something, but I cannot think of anything that might be causing this, so what is causing this issue, and how can I fix it?
I am new to parallax CSS (it is on my list-o-things-to-grok), but I think the problem is that you are translating the header (and therefore its background) down as the user scrolls the content up (this is what gives the parallax effect). Perhaps if you size the header so its top is above the viewport, as it scrolls down you won't see the white.