I want to achieve something like this -
it has a background image. I only able to make a slanted div like this-
.shape {
position: relative;
width: 100%;
height: 290px;
background: rgba(6, 180, 248, 1);
}
.shape:after {
position: absolute;
width: 100%;
height: 100%;
content: "";
background: inherit;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: top left;
transform: skewY(-4deg);
}
<br><br><br>
<section class="container">
<div class="shape">
</div>
</section>
but how can I make it transparent with a background image? can anyone please help me
here i tried the example, i hope this will help you ,just copy the entire code in an html page and see the output..., or see snippet below
.hero img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
.promo {
-webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
}
.hero {
color: #fff;
font-family: 'Fira Sans', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.hero img {
width: 100%;
}
.hero figcaption {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.promo {
background: url(https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg) no-repeat;
background-size: cover;
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
overflow: hidden;
padding: 150px 20px;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.promo h1 {
font-size: 32px;
}
.promo p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.quote {
background: #41ade5;
position: relative;
z-index: 1;
}
.quote:before, .quote:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.quote:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.quote:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.quote {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
.edge--bottom {
position: relative;
z-index: 1;
}
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--bottom--reverse {
position: relative;
z-index: 1;
}
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.edge--top {
position: relative;
z-index: 1;
}
.edge--top:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--top--reverse {
position: relative;
z-index: 1;
}
.edge--top--reverse:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both {
position: relative;
z-index: 1;
}
.edge--both:before, .edge--both:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--both:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--both--reverse {
position: relative;
z-index: 1;
}
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.-berry {
background: #b52b4a;
}
.-blue {
background: #41ade5;
}
.-orange {
background: #de6628;
}
.-green {
background: #5e9b42;
}
.block {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 0 0 200px;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
<div class="hero">
<figure>
<img src="https://tractionnext.com/wp-content/uploads/2019/01/book-demo-hero-background.jpg" /><figcaption>
<h1>
Angled Edge
</h1>
<p>
Image with CSS clip-path
</p>
</figcaption>
</figure>
</div>
<div class="promo">
<h1>
Angled Edge
</h1>
<p>
CSS background with CSS clip-path
</p>
</div>
<div class="quote">
<h1>
Angled Edges
</h1>
<p>
With 2 Pseudo Elements
</p>
</div>
<div class="block -berry edge--bottom">
<h1>
Bottom Angled Edge
</h1>
</div>
<div class="block -blue edge--bottom--reverse">
<h1>
Bottom Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -berry edge--top">
<h1>
Top Angled Edge
</h1>
</div>
<div class="block -blue edge--top--reverse">
<h1>
Top Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -orange edge--both">
<h1>
Top & Bottom Angled Edges
</h1>
</div>
<div class="block -green edge--both--reverse">
<h1>
Top & Bottom Angled Edges
</h1>
<p>
Reversed
</p>
</div>
i have tried a new one just look into it , ignore me if you not agree
.hero img {
-webkit-clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
.promo {
-webkit-clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
clip-path: polygon(0 0, 1600px 0, 1600px 87%, 0 100%);
}
.hero {
color: #fff;
font-family: 'Fira Sans', sans-serif;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.hero img {
width: 100%;
}
.hero figcaption {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.hero h1 {
font-size: 32px;
}
.hero p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.promo {
/*background: url(https://unsplash.it/1600/900?image=830) no-repeat;*/
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-size: cover;
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
overflow: hidden;
padding: 150px 20px;
position: relative;
text-align: center;
text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}
.promo h1 {
font-size: 32px;
}
.promo p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
.quote {
background: #41ade5;
position: relative;
z-index: 1;
}
.quote:before, .quote:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.quote:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.quote:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.quote {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 50px 0;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
.edge--bottom {
position: relative;
z-index: 1;
}
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--bottom--reverse {
position: relative;
z-index: 1;
}
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--bottom--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.edge--top {
position: relative;
z-index: 1;
}
.edge--top:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--top--reverse {
position: relative;
z-index: 1;
}
.edge--top--reverse:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--top--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both {
position: relative;
z-index: 1;
}
.edge--both:before, .edge--both:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both:before {
top: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.edge--both:after {
bottom: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.edge--both--reverse {
position: relative;
z-index: 1;
}
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.edge--both--reverse:before {
top: 0;
-webkit-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.edge--both--reverse:after {
bottom: 0;
-webkit-transform: skewY(1.5deg);
transform: skewY(1.5deg);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.-berry {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
}
.-blue {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
}
.-orange {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
}
.-green {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("https://unsplash.it/1600/900?image=830");
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("https://unsplash.it/1600/900?image=830");
}
.block {
color: #fff;
font-family: 'Fira Sans', sans-serif;
margin: 0 0 200px;
padding: 20% 20px;
text-align: center;
}
h1 {
font-size: 32px;
font-weight: 500;
}
p {
font-size: 14px;
font-weight: 300;
margin-top: 0.5em;
}
<div class="hero">
<figure>
<img src="https://unsplash.it/1600/900?image=830" /><figcaption>
<h1>
Angled Edge
</h1>
<p>
Image with CSS clip-path
</p>
</figcaption>
</figure>
</div>
<div class="promo">
<h1>
Angled Edge
</h1>
<p>
CSS background with CSS clip-path
</p>
</div>
<div class="quote">
<h1>
Angled Edges
</h1>
<p>
With 2 Pseudo Elements
</p>
</div>
<div class="block -berry edge--bottom">
<h1>
Bottom Angled Edge
</h1>
</div>
<div class="block -blue edge--bottom--reverse">
<h1>
Bottom Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -berry edge--top">
<h1>
Top Angled Edge
</h1>
</div>
<div class="block -blue edge--top--reverse">
<h1>
Top Angled Edge
</h1>
<p>
Reversed
</p>
</div>
<div class="block -orange edge--both">
<h1>
Top & Bottom Angled Edges
</h1>
</div>
<div class="block -green edge--both--reverse">
<h1>
Top & Bottom Angled Edges
</h1>
<p>
Reversed
</p>
</div>
I hope this helps, I gave linear-gradient in :before of .shape
.shape {
position: relative;
width: 100%;
height: 290px;
background-image: url(https://unsplash.it/1600/900?image=830);
background-size: 100% 290px;
color: #fff;
}
.content {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.shape:before {
position: absolute;
width: 100%;
height: 20%;
content: "";
background: linear-gradient(to right bottom, rgba(255, 255, 255, 1) 50%, transparent 50%);
}
<section class="container">
<div class="shape">
<div class="content">
Some text here
</div>
</div>
</section>
This is my revised version (simplified)
<!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>SLANTED</title>
<style>
body
{
margin:0;
padding:0;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
background: url(https://unsplash.it/1600/900?image=830) no-repeat 0 0;
background-size: 100% auto;
}
*
{
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
h1
{
max-width:80%;
margin:auto;
font-size: 46px;
text-align:center;
padding: 10% 0;
color: #FFF;
}
.container
{
width:100%;
min-height:450px;
}
.container::after {
content: '';
display: block;
width: 100%;
height: 80px;
position: absolute;
transform: skewY(-2deg);
background-color: #fff;
bottom: -45px;
}
</style>
</head>
<body>
<section class="container">
<div class="shape">
<h1>We always do something with pure CSS…</h1>
</div>
</section>
<h2>Sub sections</h2>
<h2>Sub sections</h2>
<h2>Sub sections</h2>
<h2>Sub sections</h2>
<h2>Sub sections</h2>
<h2>Sub sections</h2>
</body>
</html>
Related
I'm relatively new to html and css in general, but am trying to get the header and paragraph text above the gradient background, so it's more legible. I'm sure there is something simple i'm missing, and any help is appreciated :)
Codepen: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
You just need to give your .container element a non-static positioning, and it will naturally come to the front.
Right now, your .jumbotron::before is set to position: absolute, and because the .container (its sibling) has no non-static positioning defined, it's showing up behind it.
I've added this to the end of your CSS:
.container {
position: relative;
}
Working demo:
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.container {}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
.container {
position: relative;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,500" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="jumbotron">
<div class="container">
<h2>hello!</h2>
<p>welcome to inside sales</p>
</div>
</section>
you can give z-index value to before pesudo element
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:-1;
}
I used transform: translate3d(0px, 0px, 0px);
I have an structure like this:
.blog-header {
position: relative;
...
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
&__breadcrumb {
transform: translate3d(0px, 0px, 0px);
...
}
}
Or
.blog-header {
position: relative;
...
}
.blog-header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
.blog-header__breadcrumb {
...
transform: translate3d(0px, 0px, 0px);
}
Use can use z-index property in css to change the layer an element is displayed on.
z-index
.jumbotron container {
z-index: 2000;
}
I use mutiple Background. I use a before Element in the back of an multibackground with Css3 code and a background-image.
and i have also an other Background called (apc-container)behind this Background.
My problem is that the before Element is also behind the #acp-container.
in the pseudo element before i use the z-index.
i try to use this also in the #acp-container but it does not work.
So how i bring the before pseudo Element in front of the #apc-container and in the back of the #subfilter a BG?
you can check it out with this code and you see the problem easy.
#streams-container,
#acp-container {
border-radius: 10px;
background-color: #f8f8f8;
min-height: 500px;
}
.subfilter {
margin-top: 160px;
}
.subfilter a {
margin-right: 130px;
margin-left: 130px;
width: 145px;
height: 145px;
display: inline-block;
position: relative;
line-height: 145px;
background-size: auto auto, auto auto;
background-color: #eaeaea;
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), -o-linear-gradient(top, #f6f6f6, #eaeaea);
background-image: url(images/Eye.png), linear-gradient(top, #f6f6f6, #eaeaea);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}
.subfilter a.finiwatch {
background-position: 0px -172px, 0 0;
}
.subfilter a:active {
top: 1px;
}
.subfilter a::before {
content: '';
position: absolute;
z-index: -1;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}
.subfilter a:active::before {
top: -9px;
}
.subfilter a:hover::before {
opacity: 1;
}
.subfilter a.finiwatch:hover::before {
background-color: #B3F390;
}
.subfilter a:hover {
top: 0px, 1px;
}
.subfilter a.finiwatch:hover {
background-position: -160px -158px, 0 0;
}
.subfilter a:active {
background: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
background-image: url(images/Eye.png), -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -moz-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -ms-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), -o-linear-gradient(top, #eaeaea, #f6f6f6);
background-image: url(images/Eye.png), linear-gradient(top, #eaeaea, #f6f6f6);
}
.subfilter a.finiwatch:active {
background-position: -318px -158px, 0 0;
}
.subfilter a.finiwatch:selected {
background-position: -318px -158px, 0 0;
}
<div id="streams-container">
<div class="subfilter">
<a class="finiwatch" href=""></a>
</div>
For everyone stumbling accross this...
#streams-container {
border-radius: 10px;
background-color: #f8f8f8;
min-height: 500px;
position: relative;
z-index: 1;
}
.subfilter {
margin-top: 160px;
}
.subfilter a {
margin-right: 130px;
margin-left: 130px;
width: 145px;
height: 145px;
display: inline-block;
position: relative;
line-height: 145px;
background-size: auto auto, auto auto;
background-color: blue;
}
.subfilter a.finiwatch {
background-position: 0px -172px, 0 0;
}
.subfilter a::before {
content: '';
position: absolute;
z-index: 10;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: pink;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}
.subfilter a:active::before {
top: -9px;
}
.subfilter a:hover::before {
opacity: 1;
}
.subfilter a.finiwatch:hover::before {
background-color: #B3F390;
}
.subfilter a:hover {
top: 0px, 1px;
}
.subfilter a.finiwatch:hover {
background-position: -160px -158px, 0 0;
}
<div id="streams-container">
<div class="subfilter">
<a class="finiwatch" href=""></a>
</div>
</div>
Found a way
give apc-container a relative position and a z-index of 1 and teh before element a z-index of -10.
#streams-container,
#acp-container {
border-radius: 10px;
background-color: #f8f8f8;
min-height: 500px;
position: relative;
z-index: 1;
}
.subfilter a::before {
content: '';
position: absolute;
z-index: -10;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
background-color: #eaeaea;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.5;
}
I was looking for a multi component date picker like the one in the image under, but didn't find anything on Github, or elsewhere.
So I decided to make one. I'm having problems implementing the CSS where it fades out on top and bottom.
I thought about using :before and :after in the container, but no success. Can I apply gradients in :before and :after
For example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
<ol>
<li>2010</li>
<li>2011</li>
<li>2012</li>
<li>2013</li>
<li>2014</li>
<li>2015</li>
<li>2016</li>
<li>2017</li>
<li>2018</li>
<li>2019</li>
<li>2020</li>
</ol>
How to make the shadow on top and bottom?
Yes, you can apply gradients in :before and :after elements.
Example:
ol {
overflow: hidden;
width: 8em;
height: 6em;
position: relative;
text-align: center;
border: 0.5em solid black;
border-radius: 0.5em;
padding: 0px;
}
ol:before {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom : 80%;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
ol:after {
position: absolute;
left: 0;
right: 0;
top: 20%;
bottom : 0;
content: "";
background-image: linear-gradient(to bottom, rgba(0,0,0.1) 0%, rgba(0,0,0) 100%);
z-index: -1;
pointer-events: none;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
Ok, got it by using gradients not on :before / :after but in a new div which floats with position: absolute; like:
.fader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 9em;
background: linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.7) 100%);
pointer-events: none;
}
and the HTML:
<div class="date-picker">
<ol>
<li>2010</li>
<li>2011</li>
...
</ol>
<div class="fader"></div>
</div>
jsFiddle: https://jsfiddle.net/bo7dyx83/
Try something like this:
<div class="date-picker">
<ol>
<li>2010</li>
...
</ol>
<div class="shadow"></div>
</div>
With the date-picker styled however you like (setting width and height), and the following CSS:
.date-picker {
position: relative;
width: 8em;
height: 6em;
border: 0.5em solid black;
border-radius: 0.5em;
}
ol {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
text-align: center;
margin: 0;
padding: 0;
}
li {
margin: 0px;
list-style: none;
padding: 0.5em 0;
line-height: 1em;
border: 1px solid #ccf;
}
.shadow {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.2), transparent, transparent, rgba(0, 0, 0, 0.2));
}
This creates a gradient image overlay positioned in front of the ol which is the image's sibling. Keep in mind that the z-index of .shadow needs to be larger than that of the ol.
EDIT: Looking more closely at the image you posted, the gradient seems closer to quadratic than linear. If you want the list to look more rounded, making a non-linear gradient in photoshop or something would make it look much more three dimensional.
So next to the main content (outside of the browser width) if you scroll to the left of the page there is extra space occupied by only the background of the Body CSS background. Here's the site in action http://test.crows-perch.com/.
#charset "utf-8";
/* CSS Document */
body {
z-index: 0;
background: url(../images/background-texture%20d.jpg);
width: 100%;
}
#page {
z-index: 1;
width: 1000px;
height: 1000px;
margin-left: auto;
margin-right: auto;
}
#Footer {
width: 100%;
height: 230px;
position: absolute;
left: 0px;
}
#TopLinks {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0;
height: 37px;
border-style: solid;
border-width: 1px;
border-color: #000000;
background: url(../images/background-texture-b.jpg);
}
#Links {
position: relative;
top: 5px;
left: 329px;
text-align: center;
}
#Links a {
text-decoration: none;
color: #7F7F7F;
font-family: Verdana, Tahoma, Geneva, sans-serif;
font-size: 13px;
}
#Links a:hover {
text-decoration: none;
color: #FFFFFF;
}
#HeaderContainer {
z-index: 3;
position: absolute;
top: 28px;
left: 0px;
width: 100%;
height: 65px;
margin: 0;
background: url(../images/tri-button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
}
#title {
z-index: 4;
position: relative;
width: 252px;
height: 70px;
margin: 0 auto;
top: -10px;
right: 383px;
}
#Home {
z-index: 4;
position: relative;
width: 96px;
height: 65px;
margin: 0 auto;
right: 204px;
top: -70px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Home:hover {
width: 96px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#HomeT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Home {
text-decoration: none;
height: 65px;
}
#Guides {
z-index: 4;
position: relative;
margin: 0 auto;
top: -135px;
right: 89px;
width: 133px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guides:hover {
width: 133px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuidesT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Guides {
text-decoration: none;
}
#Forum {
z-index: 4;
position: relative;
margin: 0 auto;
top: -200px;
left: 33px;
width: 114px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Forum:hover {
width: 114px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#ForumT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Forum {
text-decoration: none;
}
#Blog {
z-index: 4;
position: relative;
margin: 0 auto;
top: -265px;
left: 141px;
width: 102px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Blog:hover {
width: 102px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#BlogT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Blog {
text-decoration: none;
}
#Guilds {
z-index: 4;
position: relative;
margin: 0 auto;
top: -330px;
left: 262px;
width: 138px;
height: 65px;
background: url(../images/button%20texture%20b.jpg);
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Guilds:hover {
width: 138px;
background: url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
background-size: cover;
}
#GuildsT {
text-decoration: none;
font-family: "Cinzel Regular";
font-size: 18px;
letter-spacing: 1px;
color: #D2C300;
line-height: 65px;
vertical-align: middle;
}
a.Guilds {
text-decoration: none;
}
#Play {
z-index: 4;
position: relative;
margin: 0 auto;
width: 168px;
height: 65px;
top: -395px;
left: 415px;
background: url(../images/button%20texture%20bright.jpg);
background-size: cover;
border-style: solid;
border-width: 1px;
border-color: #7F7F7F;
border-top: none;
border-bottom: none;
text-align: center;
}
#Play:hover {
width: 168px;
background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
background-size: cover;
}
#PlayT {
text-decoration: none;
font-family: "Cinzel Bold";
font-size: 18px;
font-weight: bold;
color: #000000;
line-height: 64px;
vertical-align: middle;
}
a.Play {
text-decoration: none;
}
#Top-Gradient {
z-index: 6;
position: absolute;
top: 95px;
left: 0px;
width: 100%;
height: 25px;
margin: 0;
background: url(../images/gradient.png) repeat-x;
}
#PictureContainer-top {
z-index: 5;
position: absolute;
top: 95px;
left: -2px;
width: 100%;
height: 423px;
margin: 0;
background: url(../images/fire%20bg%20art.jpg) center no-repeat;
background-size: 100%;
}
#G1 {
z-index: 6;
width: 1037px;
height: 19px;
left: -19px;
top: 194px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
position: relative;
}
#ContentTop {
z-index: 6;
position: relative;
margin: 0 auto;
background: url(../images/tri-button%20texture.jpg) repeat-x center top;
width: 1037px;
height: 49px;
left: -19px;
top: 173px;
-webkit-box-shadow: 0px 0px 17px -1px #000000;
box-shadow: 0px 0px 17px #000000;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
#SwordL {
margin-bottom: 17px;
margin-left: 9px;
}
#TeamUp {
z-index: 6;
position: relative;
margin: 0 auto;
top: -23px;
left: 96px
}
#SwordR {
margin-bottom: 15px;
margin-left: -9px;
}
#G2 {
z-index: 6;
width: 1039px;
height: 19px;
top: -60px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
position: relative;
margin: 0 auto;
}
#ContentAfterTop {
z-index: 9;
width: 1011px;
height: 35px;
top: -60px;
position: relative;
margin: 0 auto;
webkit-box-shadow: 6px 6px 43px -1px #000000;
box-shadow: 6px 6px 43px #000000;
border-width: 1px;
border-style: solid;
border-color: #000000;
position: relative;
background: url(../images/tri-button%20texture.jpg) repeat left top;
}
#G3 {
z-index: 5;
width: 267px;
height: 19px;
position: relative;
margin: 0 auto;
left: -633px;
top: 120px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
-webkit-transform: matrix(0, -1, 1, 0, 124, 143);
-ms-transform: matrix(0, -1, 1, 0, 124, 143);
-o-transform: matrix(0, -1, 1, 0, 124, 143);
transform: matrix(0, -1, 1, 0, 124, 143);
}
#G3-2 {
z-index: 5;
width: 269px;
height: 19px;
margin-top: 400px;
left: 730px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
opacity: 0.5;
-webkit-transform: matrix(0, 1, -1, 0, 144, -125);
-ms-transform: matrix(0, 1, -1, 0, 144, -125);
-o-transform: matrix(0, 1, -1, 0, 144, -125);
transform: matrix(0, 1, -1, 0, 144, -125);
position: relative;
}
#AfterPicBreak {
z-index: 6;
height: 240px;
border-color: #000000;
background: url(../images/bg%20texture%20top.jpg) repeat-x left top;
position: absolute;
margin: 0 auto;
top: 485px;
left: 0px;
width: 100%;
}
#G4 {
z-index: 5;
height: 92px;
width: 100%;
position: absolute;
left: 0px;
top: 430px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
}
#G5 {
z-index: 6;
width: 999px;
height: 19px;
position: relative;
margin: 0 auto;
right: 999px;
top: -247px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
-webkit-transform: matrix(-1, 0, 0, -1, 999, 19);
-ms-transform: matrix(-1, 0, 0, -1, 999, 19);
-o-transform: matrix(-1, 0, 0, -1, 999, 19);
transform: matrix(-1, 0, 0, -1, 999, 19);
}
#ContentBreak {
z-index: 5;
background: url(../images/break%20-%20large.jpg) repeat-x left top;
position: relative;
left: 0px;
top: -260px;
width: 999px;
height: 61px;
}
#Content {
z-index: 7;
background: url(../images/content%20bg.jpg) repeat left top;
position: relative;
top: -268px;
left: 0px;
width: 999px;
height: 88px;
padding-bottom: 700px;
}
#G6 {
z-index: 8;
position: relative;
margin: 0 auto;
top: -1078px;
left: -997px;
width: 996px;
height: 19px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
-webkit-transform: matrix(-1, 0, 0, -1, 996, 19);
-ms-transform: matrix(-1, 0, 0, -1, 996, 19);
-o-transform: matrix(-1, 0, 0, -1, 996, 19);
transform: matrix(-1, 0, 0, -1, 996, 19);
}
#LinkText {
z-index: 7;
position: relative;
top: -1040px;
text-align: center;
width: 100%;
}
#LinkText a {
font-size: 23px;
color: #D2C300;
font-family: "Cinzel Regular";
font-weight: 700;
font-size: 23px;
text-decoration: none;
}
#ContentSmallBreak {
z-index: 7;
background: url(../images/small%20break.jpg) repeat-x left top;
width: 999px;
height: 34px;
position: relative;
margin: 0 auto;
top: -1010px;
}
#BottomG {
z-index: 6;
background: url(../images/bg%20texture%20bottom.jpg) repeat-x center bottom;
width: 100%;
height: 247px;
position: relative;
top: -140px;
left: 0px;
}
#G7 {
z-index: 10;
height: 19px;
width: 100%;
position: relative;
left: 0px;
top: -156px;
background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
border-color: #000000;
}
#FooterBreak {
z-index: 8;
background: url(../images/break%20-%20large.jpg) repeat-x left top;
height: 54px;
position: relative;
left: 0px;
top: -158px;
width: 100%;
}
#FooterBG {
z-index: 6;
background: url(../images/parchment.jpg) repeat-x;
width: 100%;
height: 149px;
position: relative;
left: 0px;
top: -158px;
}
#FooterBreak2 {
z-index: 12;
background: url(../images/FooterBreak.jpg);
width: 100%;
height: 11px;
position: relative;
left: 0px;
top: -158px;
}
#font-face {
font-family: 'Cinzel Regular';
src: url('../fonts/cinzel-regular-webfont.eot');
src: url('../fonts/cinzel-regular-webfont.woff') format('woff'), url('../fonts/cinzel-regular-webfont.svg') format('svg');
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'Cinzel Bold';
src: url('../fonts/cinzel-regular-bold.eot');
src: url('../fonts/cinzel-regular-bold.woff') format('woff'), url('../fonts/cinzel-regular-bold.svg') format('svg');
font-weight: 400;
font-style: normal;
}
The main reason for this is the div with the ID Links. By default, is has a 100% width. Then you push it to the right by 329px (using left: 329px). These 329px are the amount of unwanted space you get.
Instead, you’ll probably want to do something like this:
#Links {
position: relative;
top: 5px;
text-align: right;
width: 1011px;
margin: 0 auto;
}
You’ll then still have two additional pixels. These are caused by the borders of #TopLinks and #HeaderContainer. You can fix this by either setting box-sizing: border-box or by getting rid of the 100% width and setting right: 0 instead.
I don't see any space to the left of the content, the space to the right is caused by the way you position elements: if you shift block elements to the right setting left property, they keep their width and need some space outside of the screen. You need to either set the width manually or change their display property toinline-block (start with #Links, you'll see what I'm talking about).
I am trying to create a page curl effect using CSS3. That effect should be something similar to this -
I tried to get it to work but couldn't figure it out.
This is my code sofar
.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;
}
.curl {
width:70px;
height:50px;
position: absolute;
top:0;
right:0;
background: linear-gradient(
25deg,
#4c4c4c 0%,
#474747 39%,
#2c2c2c 50%,
#000000 51%,
#111111 60%,
#2b2b2b 76%,
#1c1c1c 91%,
#131313 100%);
box-shadow : 0 0 10px rgba(0,0,0,0.5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-25deg) rotate(-84deg);
}
.curl:hover {
width: 120px;
height: 50px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3);
}
This is JS BIN
Can anybody tell me how I figure this out?
Any ideas would be greatly appreciated.
Thank you.
check this out.
.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;
}
.curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background :
linear-gradient(
135deg,
#fff,
#f3f3f3 45%,
#ddd 50%,
#aaa 50%,
#bbb 56%,
#ccc 62%,
#f3f3f3 80%,
#fff 100%
);
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}
.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}