I did look for some tutorials about parallax. I want to add navigation bar on it but the results are different from what I'm expecting. I need your help.
This is the CSS code of the navigation Bar:
body{
margin: 0;
}
.navigation{
width: 100%;
background: #313131;
height: 50px;
margin-top: 0px;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
margin-top: 5px;
}
li {
float: left;
margin-top: 5px;
padding-left: 25px;
padding-right: 25px;
}
a{
width: 150px;
color: white;
display: block;
text-decoration: none;
font-size: 20px;
text-align: center;
padding: 2px;
border-radius: 4px;
font-family: Century Gothic;
font-weight: bold;
}
a:hover{
background: #669900;
transition: 0.6s;
}
CSS Code of Parallax Page
#import "bourbon";
//Edit these
$farColor: #ffe4c7;
$nearColor: darken(cyan,30%);
$layer: 7; //make sure it is +1 the ammount of layer divs in the html
$perspective: 1;
.bg {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
z-index: 0;
background-color: #ffe4c7;
}
.layer {
position: fixed;
top: 0px;
margin: auto;
width: 100%;
z-index: 100;
min-height: 400px;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-position: top center;
background-repeat: no-repeat;
}
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax-group {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax-group div:nth-child(1) {
background-color: #ffe4c7;
margin-top: 600px;
background-color: #d9d1b8;
-webkit-transform: translateZ(-12px) scale(13);
transform: translateZ(-12px) scale(13);
}
.parallax-group div:nth-child(1):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #d9d1b8 66.01%), -webkit-linear-gradient(45deg, #d9d1b8 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #d9d1b8 66.01%), linear-gradient(45deg, #d9d1b8 34%, transparent 34.01%);
background-position: 222px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.parallax-group div:nth-child(2) {
background-color: #ffe4c7;
margin-top: 900px;
background-color: #b3beaa;
-webkit-transform: translateZ(-10px) scale(11);
transform: translateZ(-10px) scale(11);
}
.parallax-group div:nth-child(2):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #b3beaa 66.01%), -webkit-linear-gradient(45deg, #b3beaa 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #b3beaa 66.01%), linear-gradient(45deg, #b3beaa 34%, transparent 34.01%);
background-position: 77px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.parallax-group div:nth-child(3) {
background-color: #ffe4c7;
margin-top: 1200px;
background-color: #8cab9b;
-webkit-transform: translateZ(-8px) scale(9);
transform: translateZ(-8px) scale(9);
}
.parallax-group div:nth-child(3):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #8cab9b 66.01%), -webkit-linear-gradient(45deg, #8cab9b 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #8cab9b 66.01%), linear-gradient(45deg, #8cab9b 34%, transparent 34.01%);
background-position: 117px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.parallax-group div:nth-child(4) {
background-color: #ffe4c7;
margin-top: 1500px;
background-color: #66988d;
-webkit-transform: translateZ(-6px) scale(7);
transform: translateZ(-6px) scale(7);
}
.parallax-group div:nth-child(4):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #66988d 66.01%), -webkit-linear-gradient(45deg, #66988d 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #66988d 66.01%), linear-gradient(45deg, #66988d 34%, transparent 34.01%);
background-position: 183px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.parallax-group div:nth-child(5) {
background-color: #ffe4c7;
margin-top: 1800px;
background-color: #40867e;
-webkit-transform: translateZ(-4px) scale(5);
transform: translateZ(-4px) scale(5);
}
.parallax-group div:nth-child(5):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #40867e 66.01%), -webkit-linear-gradient(45deg, #40867e 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #40867e 66.01%), linear-gradient(45deg, #40867e 34%, transparent 34.01%);
background-position: 71px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.parallax-group div:nth-child(6) {
background-color: #ffe4c7;
margin-top: 2100px;
background-color: #1a7370;
-webkit-transform: translateZ(-2px) scale(3);
transform: translateZ(-2px) scale(3);
}
.parallax-group div:nth-child(6):before {
content: "";
width: 100%;
height: 200px;
position: absolute;
bottom: 100%;
left: 0;
background-image: -webkit-linear-gradient(315deg, transparent 66%, #1a7370 66.01%), -webkit-linear-gradient(45deg, #1a7370 34%, transparent 34.01%);
background-image: linear-gradient(135deg, transparent 66%, #1a7370 66.01%), linear-gradient(45deg, #1a7370 34%, transparent 34.01%);
background-position: 13px 0px;
background-size: 200px 100%;
background-repeat: repeat-x;
}
.content {
position: relative;
background-color: transparent;
font-family: "Arial";
letter-spacing: 10px;
text-transform: uppercase;
line-height: 40px;
z-index: 10;
width: 100%;
font-size: 15px;
text-align: center;
color: white;
margin-top: 1000px;
-webkit-transform: translateZ(-2px) scale(3);
transform: translateZ(-2px) scale(3);
}
.fill {
height: 80%;
}
HTML Code
</style>
</head>
<body>
<div class="bg"></div>
<div class="parallax">
<div class="parallax-group">
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer"></div>
<div class="layer fill"></div>
</div>
<div class="content">
<h1>Parallax Scrolling</h1>
<p>Using only CSS</p>
</div>
</div>
<div class="navigation">
<ul>
<li><span>Home</span></li>
<li><span>Beach Houses</span></li>
<li><span>Gallery</span></li>
<li><span>Contact</span></li>
</ul>
</div>
</body>
</html>
I want a floating navigation bar within the parallax page
Here is the result that I get:
https://jsfiddle.net/christiands97/s5Ltf6pj/
Put these in the css of your navigation class.
top: 10px;
position: absolute;
change the top value according to your requirement. Also make the 'position' fixed if you want the navigation bar to be fixed at the top.
Related
I want background gradient to cover under border image as well. but sounds like It doesn't work at all!
I have realized if I remove Border, It starts working in Mozilla but I want it to work in Google Chrome.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.cont {
height: 200px;
position: relative;
background-image: linear-gradient(
45deg,
#f09433 0%,
#e6683c 25%,
#dc2743 50%,
#cc2366 75%,
#bc1888 100%
);
background-clip: border-box;
background-repeat: no-repeat;
border: 20px solid orange;
border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
border-image-slice: 25;
border-image-repeat: round;
border-image-width: 18px;
}
.cont > .insta {
text-align: center;
color: white;
font-size: var(--default-font-size);
margin: 0;
padding: 0;
position: absolute;
width: 80%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
<div class="cont">
<p class="insta">
Follow us on Instagram
</p> </div>
You could put the linear gradient as background to the before pseudo element, making that bigger than the actual element by the width of the border and positioning it respectively. It will then go under the border image of the main element.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.cont {
height: 200px;
position: relative;
background-clip: border-box;
background-repeat: no-repeat;
border: 20px solid orange;
border-image-source: url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png");
border-image-slice: 25;
border-image-repeat: round;
border-image-width: 18px;
position: relative;
}
.cont::before {
content: '';
position: absolute;
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
z-index: -1;
background-image: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.cont>.insta {
text-align: center;
color: white;
font-size: var(--default-font-size);
margin: 0;
padding: 0;
position: absolute;
width: 80%;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}
<div class="cont">
<p class="insta">
Follow us on Instagram
</p>
</div>
In the mockup I have, the stripes have a gradient opacity effect from transparent to semi-transparent.
Currently, I have this:
How do I make it so that the white stripes have the transparency gradient?
Here is my current code.
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
<div class="bar"></div>
You can add a mask layer on the pseudo-element:
body {
background: gray;
}
.bar {
height: 50px;
width: 100%;
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
border-radius: 100rem;
position: relative;
}
/** Stripes. */
.bar::before {
content: "";
position: absolute;
border-radius: 100rem;
height: 100%;
width: 100%;
background-size: 90px 100%;
background-image: linear-gradient( 120deg, transparent 40%, white 41% 60%, transparent 61%);
-webkit-mask:linear-gradient(white,transparent);
mask:linear-gradient(white,transparent);
}
<div class="bar"></div>
In case you need better browser support than masks provide, I'd do something with an additional container, but overall it's a funny looking progress bar, hope it's for a kids game or something.
body {
background: gray;
padding-top: 5rem;
}
.bar-container {
border-radius: 100rem;
overflow: hidden;
border: darkgray 2px solid;
box-shadow: 0 2px 8px rgba(0,0,0,.5);
background-image: linear-gradient(90deg, #FC0252 0%, #01Fdd9 100%);
}
.bar {
height: 50px;
width: 100%;
position: relative;
background-size: 90px 100%;
background-image: linear-gradient(
120deg,
transparent,
transparent 40%,
white 40%,
white 60%,
transparent 60%
);
}
.bar::before, .bar::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.bar::before {
left: 0;
background: linear-gradient(45deg, rgba(252,2,82,1) 0%, rgba(0,0,0,0) 50%);
}
.bar::after {
right: 0;
background: linear-gradient(-45deg, rgba(1,253,217,1) 0%, rgba(0,0,0,0) 50%);
}
<div class="bar-container">
<div class="bar"></div>
</div>
Need to align the css generated border vertically...how do i use background-repeat: repeat-y here :
.container::after {
position:absolute;
bottom: -50px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #535353 26%, gray 40%);
background-color: gray;
background-size:50px 100px;
height:50px;
background-repeat: repeat-x;
}
Thanks
You need to convert the vertical values to horizontal values, and vice versa:
.container {
position: relative;
width: 50%;
height: 100vh;
}
.container::after {
position: absolute;
right: -50px; /* bottom: -50px; */
top: 0; /* left: 0 */
width: 50px; /* width: 100% */
height: 100%; /* height: 50px; */
content: "";
background: radial-gradient(circle at 0% 50%, white 45%, #535353 46%, gray 60%);
background-color: gray;
background-size: 50px 50px; /* background-size: 50px 100px; */
background-repeat: repeat-y; /* background-repeat: repeat-x; */
}
<div class="container"></div>
As you can see in the image below, I am trying to warp or triangle my div from bottom and top, but I have no idea how to do it. I just tried a couple of times to do it, but I couldn't achieve the result. So how can I make it using after,before psuedo? It doesn't matter make with psuedo, but I wonder that how to do it?
Here is my code:
body{
background:lightblue;;
}
.block{
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
}
<div class="block"></div>
An idea using transformation and perspective where you will have the border, border-radius also the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can also add the shadow and easily change the gradient:
body {
background: lightblue;
}
.block {
overflow: hidden;
width: 300px;
height: 200px;
margin: 20px;
position: relative;
z-index:0;
filter:drop-shadow(0 0 5px #000);
}
.block::before,
.block::after {
content: "";
position: absolute;
z-index:-1;
border: 1px solid #fff;
top: 0;
bottom: 0;
width: 50%;
background-image: linear-gradient(35deg, blue, red);
background-size: 200% 100%;
}
.block::before {
left: 0;
border-right: 0;
border-radius: 15px 0 0 15px;
transform-origin: right;
transform: perspective(100px) rotateY(-5deg);
}
.block::after {
right: 0;
border-left: 0;
border-radius: 0 15px 15px 0;
transform-origin: left;
transform: perspective(100px) rotateY(5deg);
background-position: right;
}
<div class="block"></div>
You can do it with clip-path. There is a really simple tool that could help you: https://bennettfeely.com/clippy/.
I've made an example for you with your content:
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
-webkit-clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
clip-path: polygon(100% 80%, 50% 100%, 0 80%, 0 20%, 51% 0, 100% 20%);
}
<div class="block"></div>
This can be done using CSS triangles on the ::before and ::after pseudo-elements! I've colored them brightly so you can tell what's happening, but it should be somewhat easy to get these to look they way you want.
body {
background: lightblue;
}
.block {
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);
border: 1px solid #fff;
width: 300px;
height: 150px;
margin: 30px;
position: relative;
}
.block::before,
.block::after{
display: block;
content: '';
position: absolute;
border: 150px solid transparent;
}
.block::before {
border-top-width: 0;
border-bottom-width: 25px;
border-bottom-color: red;
top: -25px;
}
.block::after {
border-bottom-width: 0;
border-top-width: 25px;
border-top-color: green;
bottom: -25px;
}
<div class="block"></div>
Adjust the measurements to fit your exact shape requirements. This gives something close to what you are looking for.
body{
background:lightblue;;
}
.block{ position:
relative; width:200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
background-image: linear-gradient(to right, #314b56, #283b44, #1f2c32, #161e21, #0a0f11);:
}
}
.block:before
{ content: '';
position: absolute;
top: 20%;
bottom: 20%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
<div class="block"></div>
I'm trying to use CSS to make a scalloped border for an image using radial-gradients. Here is what I have so far: JS FIDDLE.
As you can see, the top edge of the image has pointy tips, while the bottom edge is rounded. How can I get the pointy tips at the bottom as well? (Like the bottom edge flipped upside down.)
I would appreciate your help!
HTML:
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
CSS:
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://placekitten.com/1280/120");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: -20px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
Use the same radial-gradient you have on the top, but here you just rotate it 180 degrees
body {
text-align:center;
background: white;
}
.top-container {
background: white;
}
.container {
position:relative;
background-image: url("http://www.rhapsodazzle.com/flowers.jpg");
height: 100px;
padding-top:40px;
width: 100%;
left: -10px;
}
.container::before {
position:absolute;
bottom: 0;/*-20px;*/
transform: rotate(180deg); /* added */
left: 0px;
width: 100%;
content:" ";
background: radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
/*
radial-gradient(circle at 50% 0%, transparent 25%, #000 26%, white 0%);*/
background-color: transparent ;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -20px 0px;
}
.container::after {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
content:" ";
background:
radial-gradient(circle at 50% 0%, white 25%, #000 26%, transparent 0%);
background-color: transparent;
background-size:20px 40px;
height:50px;
background-repeat: repeat-x;
background-position: -25px 0px;
}
.next-container {
background: white;
}
<body>
<div class="top-container">
<p>Top section.</p>
</div>
<div class="container">
<p>Image Section</p>
</div>
<div class="next-container">
<p>Bottom Section</p>
</div>
</body>
JSfiddle link: jsfiddle.net/oq2ja51g/3/