I'm trying to get the header of my website to show a scrolling gradient (imagine the sun rising when scrolling down). Getting the gradient up is no problem;
#header {
height: 200px;
width: 100%;
left: 0;
right: 0;
top: 0;
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
}
<div id="header"></div>
Getting it scrolling on moving the page however is a problem. I found several guides telling to add;
background-size: 400px;
background-attachment: fixed;
as;
#header {
height: 200px;
width: 100%;
left: 0;
right: 0;
top: 0;
background: linear-gradient(to bottom, #020107 0%, #311B46 50%, #592C67 60%, #803E7E 75%, #CA759C 90%, #EC9D9D 95%, #C35E4D 100%);
background-size: 400px;
background-attachment: fixed;
}
This however gets the header to turn totally dark. What am I missing?
You can simulate this by applying a background coloration on the body and keep the header transparent:
#header {
height: 100px;
position:fixed;
left:0;
right:0;
top: 0;
border:3px solid green;
box-sizing:border-box;
}
body {
min-height:200vh;
background:
linear-gradient(to bottom, transparent 100px,#fff 100px) fixed,
linear-gradient(to bottom, red, blue);
}
<div id="header"></div>
Related
How I can create custom background shape with css something like this: https://imgur.com/a/1RQ70xr
<div class="cover">
</div>
Found this solution that is close to shape I want
.cover-ugodnosti {
margin: 0;
height: 100vh;
background-image: linear-gradient(#202020, #202020), linear-gradient(to top left, transparent 49.8%, #202020 50%);
background-repeat: no-repeat;
background-size: 50.1% 100%;
background-position: left, right;
}
With gradient:
.cover {
margin: 0;
height: 100vh;
width: 100vw;
background: linear-gradient(120deg, rgba(32,32,32,1) 0%, rgba(32,32,32,1) 51%, rgba(255,255,255,1) 51.05%, rgba(255,255,255,1) 100%);
}
<div class="cover"></div>
Or just use the image
.cover {
margin: 0;
height: 100vh;
background-image: url('https://i.imgur.com/E4sU3IS.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
skew transformation can help to get the small squares:
body {
margin:0;
height:100vh;
position:relative;
overflow:hidden;
}
body:before {
content:"";
position:absolute;
top:0;
left:0;
bottom:0;
width:200%;
transform-origin:top;
transform:skew(-15deg);
background:
linear-gradient(#000,#000) left/25% 100%,
repeating-linear-gradient(to right, #000 0 20px,transparent 21px 30px) bottom/100% 20px;
background-repeat:no-repeat;
}
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>
Hei i have this code in CSS:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
}
<div class="gradient-four"></div>
And it´s applied to a div. How can i repeat that div, without repeating the code over and over? I tried the background repeat but that would´t do the trick.Is it possible?
Thank you
To repeat a linear/radial-background you simply need de specify a size then you may adjust the background-repeat to choose how to repeat it:
.gradient-four {
height: 100px;
width: 100px;
margin: 5px auto;
border-radius: 50%;
float: left;
background-image: radial-gradient( circle closest-side, red, purple);
background-size:50px 50px;
}
<div class="gradient-four"></div>
<div class="gradient-four" style="background-repeat:repeat-x"></div>
<div class="gradient-four" style="background-repeat:repeat-y"></div>
And if you want to repeat the result of the whole div you have, you may adjust the gradient like this:
.gradient-four {
height: 500px;
width: 500px;
margin: 5px auto;
float: left;
background-image: radial-gradient( circle closest-side, red, purple 98%, transparent 100%);
background-size:100px 100px;
}
<div class="gradient-four"></div>
Use the repeating-radial-gradient function. It takes the same parameters as radial-gradient and functions the same, just repeating.
Use repeating-radial-gradient like so:
.gradient-four {
height: 100px;
width: 100%;
margin: 5px auto;
float: left;
background-image: -webkit-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -moz-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: -ms-repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-image: repeating-radial-gradient(center center, red, purple 49px, rgba(0,0,0,0) 50px, rgba(0,0,0,0) 100%);
background-size: 100px 100px;
}
JSFiddle
I'm looking to make a bootstrap btn look a little differently with there being a 5 point at the bottom of its base. I know its possible to do shapes this way using the :before and :after tools and transform but I want to put text inside of them which is why I'm having so much trouble. Is it possible to deal directly with the btn class to make this effect happen?
You can use SkewY as shown in the demo below:
div {
height: 100px;
width: 500px;
display: inline-block;
border: 10px solid green;
border-bottom: none;
text-align: center;
line-height: 100px;
position: relative;
color: green;
font-size: 20px;
}
div:before,
div:after {
content: "";
border-bottom: 10px solid green;
position: absolute;
width: calc(50% + 10px);
height: 100%;
top: 0;
}
div:before {
transform: skewY(5deg);
left: -10px;
}
div:after {
transform: skewY(-5deg);
left: 50%;
}
<div>Request a Quote</div>
gradient can be a first chip approach ...
example in situation: http://codepen.io/gc-nomade/pen/wGEyvd
button {
color:green;
display:block;
width:50%;
margin:1em auto;
padding:1.5em 0 2.5em;
border:none;
background:linear-gradient(to left, green, green) top,
linear-gradient(to bottom, green,green) top left,
linear-gradient(to bottom, green,green) top right,
linear-gradient(to bottom left, transparent 45%, green 47%, green 51%, transparent 52%) bottom left,
linear-gradient(to bottom right, transparent 45%, green 47%, green 51%, transparent 52%) bottom right;
background-repeat:no-repeat;
background-size:100% 3px, 3px 70%, 3px 70%,50% 30%, 50% 30%;
}
<button>REQUEST A CODE</button>
So I have a div, content of which should always be crossed out diagonally.
I've tried few solutions with few elements that had absolute positions but it wasn't good enough, because content and size of the div that should be crossed out can vary, so crossing out should be adaptive as well.
Basically I need to make something like this: http://www.awesomescreenshot.com/0515d31j22
This should work for you.
.strike {
position: relative;
display: inline-block;
}
.strike:before {
content: "";
position: absolute;
height: 1px;
width: 120%;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(25deg);
}
<div class="strike">$55.55</div>
<br><br>
<div class="strike">$555.55</div>
<br><br>
<div class="strike">$5555.55</div>
A couple of linear gradients can do this and it will auto-size to the dimensions of the element and no degree notation is required.
div {
width: 25%;
height: 250px;
margin: 1em auto;
border:1px solid grey;
position: relative;
}
div:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background:
linear-gradient(to bottom left, transparent 0%, transparent 50%, red 51%, transparent 51%, transparent 100%),
linear-gradient(to bottom right, transparent 0%, transparent 50%, red 51%, transparent 51%, transparent 100%);
}
<div></div>