There are four lines over the background. They are visible in overall sections but not over images.
How to make this?
It is as easy as this
body{
background: linear-gradient(90deg, #eee 1%, transparent 1%) 1px 0, #fff;
background-size: 200px 1px;
}
DEMO: https://codepen.io/anon/pen/VMzwNw
These and many other backgrounds can be generated using this site -> http://lea.verou.me/css3patterns/#stairs
You can use CSS linear gradients and multiple backgrounds to achieve this. Here's an example:
div {
height: 100px;
background-color: transparent;
background-size: 25% 100%;
background-repeat: repeat-x;
background-image: linear-gradient(to right, black 1px, transparent 1px);
background-position: 12.5%;
}
<div>
</div>
The gradient draws a vertical line, whereas background-size, background-position and background-repeat combined make the vertical line repeat.
Here's an example with a background image and the vertical lines:
div {
height: 100px;
background-color: transparent;
background-size: 25% 100%, cover;
background-repeat: repeat-x, no-repeat;
background-image: linear-gradient(to right, black 1px, transparent 1px), url(http://lorempixel.com/400/200/);
background-position: 12.5%, center;
}
<div>
</div>
Related
I've created the following background pattern:
https://codepen.io/anon/pen/JJvbjz
CSS:
body {
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
I'd like to be able to alternate the colours of the triangles e.g. red, blue, green, red, blue, green, red, blue green etc. etc.
Is this possible?
I have kept your original design as a reference.
In the edited design, I have:
set the background size to twice the original size
changed the way to generate the triangles, this way you only need 2 elements instead of 3.
And added a non-0 position to the 3rd and 4th background images, to make them appear interleaved with the first 2
.test {
width: 100%;
height: 100px;
background:
linear-gradient(-120deg, transparent 63%, #fff 63%),
linear-gradient(120deg, transparent 63%, #fff 63%),
linear-gradient(to bottom, blue, blue);
background-size: 90px 50px;
background-repeat: repeat-x;
}
.test2 {
width: 100%;
height: 60px;
background-size: 180px 60px;
background-repeat: repeat-x;
background-image: linear-gradient(120deg, blue 26px, transparent 28px),
linear-gradient(-120deg, blue 26px, transparent 28px),
linear-gradient(120deg, red 26px, transparent 28px),
linear-gradient(-120deg, red 26px, transparent 28px);
background-position: 0px 0px, 0px 0px, 90px 0px, 90px 0px;
}
<div class="test"></div>
<div class="test2"></div>
I want to create the background image of the attached div element with CSS (or SVG).
div.target {
background-image: linear-gradient(
to right bottom,
transparent 50%,
#00BCD4 50%
);
Background image of the div element I want to create with CSS (or SVG)
We can do this using multiple background image gradients like in the below snippet. The darker shade is assigned as the background color to the element. Then two background image layers created using gradients are placed in such a way that they produce the desired effect. Adding a partially transparent layer of white color above the darker shade will produce a lighter shade.
The background-size of the second layer should be smaller and its background-position should be at the left-bottom side of the element.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 50%);
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
Angled CSS gradients are known to produce slightly jagged (or uneven or rough) edges and that can be avoided by offsetting the color stop point a bit like in the below demo.
div {
height: 200px;
background-color: rgb(20,203,194);
background-image: linear-gradient(to top left, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px)), linear-gradient(to top right, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) calc(50% + 1px));
background-size: 100% 100%, 50px 50px;
background-position: left top, left bottom;
background-repeat: no-repeat;
}
<div></div>
You can do this with :before and :after pseudo elements.
div {
position: relative;
width: 500px;
height: 100px;
background: #0BC7BE;
}
div:after {
position: absolute;
border-style: solid;
border-width: 0 0 100px 500px;
border-color: transparent transparent rgba(255, 255, 255, 0.3) transparent;
right: 0;
top: 0;
content: "";
}
div:before {
position: absolute;
border-style: solid;
border-width: 50px 0 0 70px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
left: 0;
bottom: 0;
content: "";
}
<div></div>
I know I can make a linear gradients as a background of a div element. But is it possible to make intersecting line gradients? See image below:
Yes, it is very much possible to create such patterns by using two linear-gradient images. When multiple background images are assigned to an element, the UA would by default set them as layers where the first one from the right is the lowermost layer and last one from right becomes uppermost.
Below is a sample snippet for both the patterns.
(Note: In the angled lines pattern, I've set the color stop points differently to avoid jagged lines. The angled linear gradients always tend to produce them.)
div {
height: 200px;
width: 200px;
margin: 10px;
border: 1px solid;
}
.checkered {
background: linear-gradient(to right, black 1px, transparent 1px), linear-gradient(to bottom, black 1px, transparent 1px);
background-size: 10px 10px;
background-position: 5px 0px, 0px 5px;
}
.angled {
background: linear-gradient(45deg, transparent 7px, black 7px, transparent 8px), linear-gradient(315deg, transparent 7px, black 7px, transparent 8px);
background-size: 10px 10px;
}
<div class='checkered'></div>
<div class='angled'></div>
Not sure if this is what you are after:
HTML
<div id="red2blue"></div>
<div id="blue2red"></div>
CSS
div{
width:100px;
height:100px;
opacity: 0.5;
position:absolute;
top:0;
left:0;
}
#red2blue{
background: linear-gradient( 45deg, red, blue );
}
#blue2red{
background: linear-gradient( -45deg, blue, red );
}
https://jsfiddle.net/9na275fn/
I have been seeing a lot of new websites that have a zigzagged border in between an image and a div. When you open the image in a new tab the zigzag is not there, so it was created either with CSS3 or HTML5. Does anyone know how it is done?
Here are some examples:
http://themeforest.net/item/hungry-a-onepage-html-restaurant-template/full_screen_preview/9855248ref=freshdesignweb
http://designwp.com/yummie/brown/index.html
Wait for them to load.
zig zag borders are made using linear-gradient
50% is the blur
315deg is the rotation of right side
45deg is the rotation of left side
background size is the width and placement of the triangle
div {
width: 100%;
height: 50px;
background-size: 25px 120%;
background-image: linear-gradient(315deg, red 50%, rgba(0, 0, 0, 0) 50%),
linear-gradient(45deg, red 50%, black 50%);
}
<div></div>
you can also change the angle of rotation by changing the deg values
div {
width: 100%;
height: 50px;
background-size: 25px 150%;
background-image: linear-gradient(297deg, red 50%, rgba(0, 0, 0, 0) 50%),
linear-gradient(63deg, red 50%, black 50%);
}
<div></div>
First one is built with repeatable background image, and secound one with :before pseudo element:
.ss-style-top::before {
position: absolute;
content: '';
left: 0;
width: 100%;
height: 30px;
background-size: 25px 100%;
top: 0;
background-image: linear-gradient(315deg, #FFF 50%, transparent 50%),
linear-gradient(45deg, #FFF 50%, transparent 50%);
margin-top: -30px;
z-index: 100;
}
Here is the link of background image from first example: http://www.cssvillain.com/hungry/images/assets/parallax-bottom-alt.png
I'm working on a HTML/CSS/JS project where the app is a fixed size and elements must be positioned precisely, based on the designs. Because the window size is fixed, I can easily work with pixel dimensions in CSS and not worry about resizing the browser. I also have the luxury of not worrying about IE or Opera: the app must work in webkit and firefox only.
In a few places, I need to have a gradient background going over specific number of pixels. This would be easily accomplished with something like
background-image: linear-gradient(to top, #666666, #000000 60px);
(and its -webkit- and -moz- counterparts.) This does the trick for most elements. However there are a couple where I need to have the top and bottom pixel positions for colour stops. If these were percentage points, then it could be done with something like:
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);
(from grey to black over 60px, then transparent and then black to grey over the last 10%). However I need to accomplish the same with pixels, as the element in question is sized differently at different times. I'd like to avoid having to use JS to re-apply the gradient at different dynamically calculated percentage points if needed.
So, my question: is there a way to specify a colour stop x pixels (not percentage) from the end?
I just came over this via search engine, i think the best solution was already given by vals with using multiple background images - but instead of using background-size and background-position i think it's a lot more flexible and stable to use alpha colors here (with rgba()), like in the example below:
background-image:
/* top gradient - pixels fixed */
linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px),
/* bottom gradient - pixels fixed */
linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),
/* background gradient - relative */
linear-gradient(to bottom, #eee 0%, #ccc 100%) ;
This gives me exactly the behaviour I was initially searching for. :)
Demo: http://codepen.io/Grilly86/pen/LVBxgQ
It works with calc(), but unfortunately not in MS browsers:
First row of each pairs has the solution with 2 background stacked, 2nd row has calc in use. Does not work with Internet Explorer and Edge browsers.
div {
margin-left: auto;
margin-right: 0;
width: 200px;
height: 20px;
animation: sweep 5s ease-in-out alternate infinite;
text-align: center;
color: white;
font-family: sans-serif;
font-weight: bold;
line-height: 20px;
will-change: width;
}
div:nth-child(odd) {
background-image: linear-gradient(to right, red, green 100px, transparent 101px), linear-gradient(to left, red, green 100px);
border-bottom: 1px solid gray;
}
div:nth-child(even) {
background-image: linear-gradient(to right, red, green 100px, green calc(100% - 100px), red);
margin-bottom: 10px;
}
div:nth-child(n+3) {
width: 300px;
}
div:nth-child(n+5) {
width: 400px;
}
div:nth-child(n+7) {
width: 500px;
}
div:nth-child(n+9) {
width: 600px;
}
#keyframes sweep {
100% {
width: 600px;
}
}
<div> 200 </div>
<div></div>
<div> 300 </div>
<div></div>
<div> 400 </div>
<div></div>
<div> 500 </div>
<div></div>
<div> 600 </div>
<div></div>
I don't think this is possible, but overlaying 2 objects, one with opaque pixels from bottom and the other with pixels from top, would still avoid using JS
.background {
position: absolute;
background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
position: relative;
background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}
In the line of the previous answer from po228, but in the same element background.
Set 2 different gradients, one starting from top and the other from bottom
.test {
background: linear-gradient(to top, red 10px, white 10px),
linear-gradient(to bottom, blue 10px, white 10px);
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: bottom center, top center;
height: 150px;
width: 300px;
}
<div class="test"></div>