Make a divs top and bottom border have a jagged edge
Based on the answer of #ᴀʀᴜn BᴇrtiL I was able to create something.
The problem is it doensn't look good, I can't get rid of the background color. Using no shadow is an option, but using a static single-color background is not.
So how do I make it transparent?
Or is there another way? I know CSS3 can use images in the border, but I prefer CSS-code without images.
There are several ways to achieve this (including JS and SVG solutions). However I think the easiest solution using pure CSS is using some pseudo-elements (to render the jagged edges) in combination with linear-gradient and multi-backgrounds feature. Here is the demo code:
div {
width:200px;
height:250px;
background:white;
position:relative;
margin-top:25px;
}
div:before, div:after {
content:'';
width:100%;
height:5px;
position:absolute;
bottom:100%;
left:0;
background-image: linear-gradient(135deg, transparent 66%, white 67%),
linear-gradient(45deg, white 33%, gray 34%, transparent 44%);
background-position: -5px 0;
background-size: 10px 100%;
background-repeat:repeat-x;
}
div:after {
top:100%;
bottom:auto;
background-image: linear-gradient(135deg, white 33%, gray 34%, transparent 44%),
linear-gradient(45deg, transparent 66%, white 67%);
}
body {
background:url(http://placekitten.com/800/600);
}
Demo.
Related
How can I create a CSS background consisting of an image covering the top x pixels of the body and a solid color or gradient below (also spanning behind the top bg picture if it is transparent)?
A gradient can be stacked placed on top of a solid color, so that the gradient fills the entire height of the screen. How can I change the gradient to a picture and only make it x pixels high?
background: linear-gradient(0deg, rgba(239,237,224,1) 30%, rgba(255,255,255,1) 100%) top/100% 100vh no-repeat rgba(239,237,224,1);
Use a pseudo element for the image:
body {
min-height:100vh;
margin:0;
position:relative;
background:linear-gradient(red,blue);
}
body::before {
content:"";
position:absolute;
height:100px; /* update this */
inset: 0 0 auto;
background:url(https://picsum.photos/id/1069/800/600) center/cover;
}
You can have multiple background images - with a mixture of actual images and gradient images.
The first image in the list is rendered on top of the others and so on down the list. You can set the size and positioning and repetition of each separately or together.
In this snippet the individual settings are separated out to make it clearer what is going on:
.bg {
width: 100vw;
height: 100vh;
background-image: url(https://i.stack.imgur.com/ew6J2.png), linear-gradient(to bottom, red,blue);
background-size: 30vw auto, 100% 100%;
background-position: center top, 0 0;
background-repeat: no-repeat;
}
<div class="bg"></div>
I have 2 div's and the upper div is transparent with a border radius on every corner, there is a div which is using solid background gradient underneath this and has been pushed up under the transparent div using a negative margin and z-index to put it behind the upper div.
Is there a way with CSS to hide the part of the div which is up underneath the div above it?
I did it this way because I need to maintain the corners which are highlighted in the second image.
Problem using color stops illustrated here:
jsfiddle.net/PKy8B/3/
As someone asked this would be the desired result:
Thanks everyone for the help but it looks like this is not possible to do this with a transparent div above and one behind, I have changed the top div to no longer be transparent just as a "best fix" option.
Unfortunately, the div is transparent and there's not much you can do about it. What you could do is not start the background-gradient until after the div has cleared the 'overhang' using a color-stop.
JSFiddle Demo
HTML
<div class="top"></div>
<div class="bottom"></div>
CSS
.top {
height:75px;
background-color: rgba(0, 0, 0, 0.25);
}
.bottom {
height:75px;
margin-top: -10px;
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
border:1px solid black; /* added for visual reference */
z-index:-1
}
NOTE: The color stop must be the same as the amount you have moved the bottom div
Can you do the same to the top just like you do to top-
I mean -
if you have added linear-gradient(to bottom in bottom div
background: linear-gradient(to bottom,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(255,0 ,0 ,0.25) 10px, /* start visible section */
rgba(255,0,0,.25) 100%);
then you can also also do the same for Top:
i mean do something like that with top
add this - linear-gradient(to top
background: linear-gradient(to top,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 10px, /* end transparent section*/
rgba(0,0 ,0 ,0.25) 10px, /* start visible section */
rgba(0,0,0,.25) 100%);
CHECK it here - DEMO
And i think your See More blue button will be an image. so there will be no issue with it.
I'm trying to create a grid in pure CSS using background-image and -webkit-linear-gradient. I have the spacing and the tiling working fine, but for a reason I can't figure out, the vertical lines are coming out as #B8B8B9 instead of #E3E4E5 like I specify. Any ideas?
JSFiddle: http://jsfiddle.net/2faSt/
CSS:
.grid {
position: absolute;
width: 100%;
height: 500px;
background-image: -webkit-linear-gradient(0deg, #e3e4e5 0px, transparent 1px, transparent 15px, #e3e4e5 16px, transparent 16px, transparent 99px, #e3e4e5 100px, #ffffff 100px), -webkit-linear-gradient(90deg, transparent 20px, #e3e4e5 20px);
background-size: 111px 21px;
}
If you want to get really the color that you specify, you should set 2 color stops with the same color, separated by at least 1 px.
Otherwise, you set only the point of gradient change, but it is already changing to transparent, even in the same pixel
And, even it is non intuitive, transparent if black transparent (rgba (0,0,0,1))
See this fiddle
There, you have this CSS:
#one {
background: linear-gradient(90deg, #e3e4e5, transparent);
}
#two {
background: linear-gradient(90deg, #e3e4e5, rgba(255, 255, 255, 1));
}
In the first div (The same color stops that in your question), you can see that in the middle of the transition the color is darker than at the beginning.
As a comparison, in the second you can see what probably you intended, make the transition to white transparent.
I know how to create arrows outside the div by using the psedo class but I need to create a arrow inside the div as shown below
How can I get this?
No need to use extra elements, this can be done entirely using CSS3:
background-color: gray;
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;
Demo (with vendor-prefixes: http://jsfiddle.net/rLZkf/1/).
Explanation of a this triangle technique
As seen in the image below source, CSS supports linear colour gradients using a simple syntax.
With some imagination, you can see a triangle in the previous image. The colour blends at the diagonal though. So, we set explicit colour stop locations. When these locations are equal, there's no visual blending any more, and you get a solid triangle.
It's time to introduce a triangle:
background-image: linear-gradient(45deg, transparent 50%, black 50%);
The gradient starts at the bottom-left corner, and ends at the upper-right corner due to the angle of 45°. The colour stop location is defined to be 50%, so the bottom-left part of the triangle is transparent, and the other half is black. To get a different triangle, use an angle of 135°. Here's an image with both angles:
At this point, we know how to create a rectangular triangle. To get further, we need to be able to create a triangle where the hypotenuse is placed vertically or horizontally. To achieve this, we join two triangles. CSS3 introduces support for multiple backgrounds. This feature is used to construct the triangle.
/* Create triangles */
background-image:
linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
linear-gradient(45deg, transparent 75%, #000 75%) /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;
In the previous CSS code, one can see that I'm using 75% as a colour stop location (instead of 50%). This choice does not matter, the final shape of the triangle is determined by the values of the gradient's colour stop location, background-position and background-size.
**Note: I left out the vendor prefixes in the explanation. To use this technique, you have to add the vendor-prefixes (as seen in the demo).
Relevant documentation
Multiple CSS backgrounds
linear-gradient
background-position
background-size
background-repeat
Have a look there I think :
http://css-tricks.com/examples/ShapesOfCSS/
..........................
Now used to
after: pseudo-class
as like this
.some{
width:100px;
height:100px;
background:red;
position:relative;
overflow:hidden;
}
.some:after{
content:'';
position:absolute;
left:10px;
top:-11px;
z-index:0;
width:25px;
height:25px;
background:green;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* IE 9 */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-o-transform:rotate(45deg); /* Opera */
}
live demo
Shortest and most browser-compatible solution:
css:
div{
position:relative;
height: 200px;
width: 200px;
background-color: gray;
}
div::after{
content: '';
border: solid 15px transparent;
border-top-color:black;
position:absolute;
top:0;
left: 30px;
}
Demo:
http://jsfiddle.net/7bP9q/
-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;
I have this code above and i just realized that this gradient goes from top to bottom. Is there any way to make it stop the whole gradient after 30px. I can make adjustments as necessary, but how do you get the gradients to complete itself after 30px?
You can use the background-size property together.
like this:
div {
height: 100px;
width: 100px;
border: 1px solid black;
background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
background-size: auto 30px;
background-position: top;
}
<div></div>
In CSS3:
radial-gradient(ellipse at center center,
rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px,
rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)
You can have multiple stops in the gradient. You can also specify length in pixels rather than percentages. You can also use rgba to make transparent colours.
You start with your first colour at 0%, the center.
Then you have the second colour at x pixels (I'm using x=100 pixels here).
Then you go to transparent white at x+1 pixels.
And stay transparent all the way until 100%.
this should work in browsers that support CSS3.
css3 gradients are background images so they will fill the entire height and width of the block element, just as if it were a solid color.
In order to limit the height of the gradient, limit the height of the element. A "clean" way to do this might be to use a pseudo element. Something like...
div {height: 500px; width: 500px; position: relative}
div:before {
content: " ";
width: 100%;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
background-image: [your-gradient-here]
}
Well, as long as the rest of the gradient (after your set number of pixels) can be a fixed color, just use three color stops as follows (this e.g. stops at 30px - notice the last entry is identical to the second):
background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);