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>
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>
I'd like to have div with color filled background:
linear gradient from left to right
filling only 20% from the bottom of the div.
.my-div {
background-image: linear-gradient(to right, transparent, #FFEBEE);
}
How to define second condition?
https://jsfiddle.net/tf4nn5p6/
Is this what you want?
.my-div{
text-align: center;
height: 50px;
background-image: linear-gradient(to right, transparent, #FFEBEE);
background-size: 100% 20%;
background-position: left bottom;
background-repeat: no-repeat;
border: 1px solid red;
}
<div class='my-div'>
text
</div>
Use below css for the same and here you can control by background-size: 100% 20%; and background-position: left bottom; with no-repeat
.my-div{
height: 50px;
background: linear-gradient(to right, transparent, #FFEBEE);
background-size: 100% 20%;
background-position: left bottom;
background-repeat: no-repeat;
border: 1px solid red;
text-align: center;
}
I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are
See the following fiddle: http://jsfiddle.net/ovb597yq/
<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-
gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>
.
body{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
Where its white I am trying to make it transparent but its not currently happening
Any ideas?
You need to apply it on :after :pseudo-element and change #fff to transparent.
body {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
position: relative;
background-color: #ec173a;
width: 200px;
height: 200px;
}
div:after {
content: '';
position: absolute;
background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
height: 100%;
right: -10px;
}
<div>test</div>
Writing an app that uses CSS to define icons, avoiding dependency on external image files. This works fine for circles, squares, triangles, diamonds, which is almost enough.
I wonder if it's possible to create slightly more complex icons like the two grid shaped ones on the right using CSS? It need not support IE8.
.icon {
height: 20px;
width: 20px;
background-color: steelblue;
display: inline-block;
}
.icon-circle {
border-radius: 10px;
}
.icon-square {
border-radius: 0
}
<div class="icon icon-circle"></div>
If you use pseudo elements :before and :after, you can make those icons without images. And you can even make them responsive (see my fiddle).
I used the pseudo elements to create the "white lines" so you will be able to make both last icons like this:
div {
width: 20%;
padding-bottom: 20%;
margin: 5% 10%;
background-color: #6095C9;
position: relative;
float: left;
}
div:after,
div:before {
content: "";
position: absolute;
background-color: #fff;
}
.one:before,
.two:before {
margin: 0 48%;
width: 4%;
height: 100%;
}
.one:after,
.two:after {
margin: 48% 0;
height: 4%;
width: 100%;
}
.two:before {
height: 50%;
bottom: 0;
}
<div class="one"></div>
<div class="two"></div>
FIDDLE
Here is another method to achieve the shapes using gradients instead of pseudo-elements. You can play around with the background sizes to produce different effects (like in shape3).
The advantage of this over the pseudo-element method is that it doesn't require any extra real/pseudo-elements but the drawback is that the browser support for linear-gradients is still poor compared to pseudo-elements.
div {
margin: 10px;
height: 50px;
width: 50px;
background-color: steelblue;
transition: all 1s;
}
.shape1 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 100%;
}
.shape2 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-repeat: repeat-y, repeat-x;
}
.shape3{
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 50%, 50% 50%, 100%, 100%;
background-position: 0% 0%, 0% 100%, 0% 0%;
background-repeat: repeat-y, repeat-x;
}
.shape4 {
background-image: linear-gradient(to top, white 2px, transparent 2px), linear-gradient(to left, white 2px, transparent 2px);
background-size: 100% 25%, 25% 100%;
background-position: 0% 100%, 100% 100%;
background-repeat: repeat-y, repeat-x;
}
.large {
height: 150px;
width: 150px;
}
/* Just for demo */
div {
float: left;
}
.small{
clear:both;
}
div:hover {
background-color: crimson;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape1 small"></div>
<div class="shape1 large"></div>
<div class="shape2 small"></div>
<div class="shape2 large"></div>
<div class="shape3 small"></div>
<div class="shape3 large"></div>
<div class="shape4 small"></div>
<div class="shape4 large"></div>
You may be able to use a single element here without actually using pseudo elements at all with the help of box-shadow's.
So, say you have a square div element:
div {
height: 20vw;
width: 20vw;
background: tomato;
}
<div></div>
You could then add a box shadow, without a spread, by using:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato;
}
<div></div>
you can even use multiple box shadows by seperating them with a ,:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0 21vw tomato, 21vw 21vw tomato;
}
<div></div>
You would even be able to overlap them:
div {
height: 20vw;
width: 20vw;
background: tomato;
box-shadow: 21vw 0 tomato, 0vw 21vw tomato, 16vw 21vw tomato, 21vw 21vw tomato;
}
<div></div>
So creating such wouldn't be overly taxing on browser compatibility nor pseudo elements (which could be used for other purposes).
div {
height:20vw;
width:20vw;
background:tomato;
box-shadow:0 0 0 tomato;
-webkit-animation: boxshadowmult 8s infinite;
animation: boxshadowmult 8s infinite;
}
#-webkit-keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
#keyframes boxshadowmult {
0%, 24% {
box-shadow:0 0 0 tomato;
}
25%, 49% {
height:20vw;
width:10vw;
box-shadow:11vw 0 0 tomato;
}
50%, 74% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 6vw 11vw 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
75%, 100% {
height:10vw;
width:10vw;
box-shadow:11vw 0 0 tomato, 0 11vw 0 tomato, 11vw 11vw 0 tomato;
}
}
/*demo only*/
html{height:100%;
background: rgb(79,79,79); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(79,79,79,1) 0%,rgba(34,34,34,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#222222',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
<div></div>
Using :before and :after, you can create two more "boxes" to play with.
JSFiddle Demo
.icon {
width: 200px;
height: 95px;
background: blue;
}
.triple-square {
position: relative;
margin: 0 0 105px 0;
border-radius: 5px;
}
.triple-square:before {
content: " ";
position: absolute;
bottom: -105px;
left: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
.triple-square:after {
content: " ";
position: absolute;
bottom: -105px;
right: 0;
height: 95px;
width: 95px;
background: blue;
border-radius: 5px;
}
Here's another example to create 3 circles in a triangle shape...
http://jsfiddle.net/RrhxN/1/