I am trying to move the left position of the gradient. But it is not working.
Even after adding background-position property, it does not works.
header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position-x: 50px;
}
<header></header>
Turn off background-repeat.
header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position-x: 50px;
background-repeat: no-repeat;
}
<header></header>
You should add background-repeat: no-repeat; property.
Check out the similar question which is answered already.
CSS Background Gradient with offset
header{
height:100px;
border:1px solid blue;
background: linear-gradient(to top, #e20e0e 50px, #0000 50px);
background-position: 50px;
background-repeat: no-repeat;
}
<header></header>
Related
I need to create button with gradient border and highlights at corners.
Im try do this with pseudoelements, but i have only 2/4 border sides. Thanks in advance!
.fly--btn {
background: rgba(0, 0, 0, 0.5);
color: #A9A9A9;
margin-top: 12%;
position: relative;
border: none;
padding: 5px 20px;
}
.fly--btn:before,
.fly--btn:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
}
.fly--btn:before {
top: -1px;
width: 1px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
background-image: -webkit-linear-gradient(#101f2d, #3263a3);
background-image: -o-linear-gradient(#101f2d, #3263a3);
background-image: linear-gradient(#101f2d, #3263a3);
}
.fly--btn:after {
right: -1px;
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
background-image: -o-linear-gradient(left, #3263a3, #101f2d);
background-image: linear-gradient(left, #3263a3, #101f2d);
}
<button type="button" class="fly--btn">
Начать путешествие
</button>
Here is and idea with gradient and multiple background:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(#fff,#fff) top right/10px 2px,
linear-gradient(#fff,#fff) top right/2px 10px,
linear-gradient(#fff,#fff) bottom left/10px 2px,
linear-gradient(#fff,#fff) bottom left/2px 10px,
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
}
body {
background:#222;
}
<div class="box"> some text here </div>
And if you want the shadow in the corner you can try pseudo element and drop-shadow like this:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
width:10px;
height:10px;
border:2px solid #fff;
filter:drop-shadow(0 0 3px);
}
.box:before {
top:0;
right:0;
border-left:none;
border-bottom:none;
}
.box:after {
bottom:0;
left:0;
border-right:none;
border-top:none;
}
body {
background:#222;
}
<div class="box"> some text here </div>
Hello I am having trouble trying to come up with a way of adding a border of 1px to a container with a jagged border such as:
https://codepen.io/swizenfeld/pen/ZyBybW
body {
background: #f4f4f4;
}
.edge {
width: 100%;
height: 400px;
background: #fff;
margin-top: 30px;
}
.edge:before {
content: " ";
display: block;
position: relative;
width: 100%;
top:-30px;
height:30px;
background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%,
linear-gradient(-135deg, transparent 75%, white 76%) 0 50%;
background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;
}
<div class="edge"></div>
Any ideas?
You need to add more linear-gradient() to show jagged border
body {
background: #f4f4f4;
}
.edge {
width: 100%;
height: 400px;
background: #fff;
margin-top: 30px;
}
.edge:before {
content: " ";
display: block;
position: relative;
width: 100%;
top:-30px;
height:30px;
background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);
background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;
}
<div class="edge"></div>
For border-left, -bottom, -right, try to play with below snippet and see the comment also given for css properties.
body {
background: #ccc;
}
.edge {
width: 100%;
height: 400px;
background: white;
margin-top: 30px;
border-left:2px solid red;
border-bottom:2px solid red;
border-right:2px solid red;
position:relative; /*make it relative*/
}
.edge:after {
content: " ";
display: block;
position:absolute; /*make it absolute*/
width: 100%;
top:-6px; /* play with top and height too*/
height:23px;
/*background: linear-gradient(135deg, transparent 75%, white 76%) 0 50%, linear-gradient(-135deg, transparent 75%, white 76%) 0 50%, linear-gradient(45deg, red 30%, transparent 0%), linear-gradient(-45deg, red 30%, transparent 0%);*/
background: linear-gradient(45deg,white 14px, red 16px, transparent 17px), linear-gradient(-45deg, white 14px, red 16px, #ccc 17px);
background-repeat: repeat-x;
background-size: 30px 30px, 30px 30px;
}
<div class="edge"></div>
I am trying to draw a decent diagonal with linear-gradient but I can't figure out how to do it when the container is small> I am trying to get a diagonal that fits inside a 10x10px container and looks like this:
This is my best attempt.
div {
background: linear-gradient(50deg, transparent 4px, red 4px, red 5px, transparent 5px) no-repeat 0px 25px / 10px 10px;
display:block;
width:100px;
height:100px;
}
<div></div>
What I am doing wrong?
You can use a to [side] [side] linear gradient which is transparent except for the thickness of the diagonal like in the below snippet.
(Border is added only for demo and is not actually required for the gradient to work.)
div {
display: block;
width: 100px;
height: 100px;
border: 1px solid;
margin: 10px;
}
.border-2px {
background: linear-gradient(to bottom left, transparent calc(50% - 2px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 2px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px {
background: linear-gradient(to bottom left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)) no-repeat 0px 0px / 100px 100px;
}
.border-1px.small {
height: 10px;
width: 10px;
background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-2 {
height: 10px;
width: 10px;
background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-3 {
background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;
}
.border-1px.small-4 {
background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;
}
<div class='border-2px'></div>
<div class='border-1px'></div>
<div class='border-1px small'></div>
<div class='border-1px small-2'></div>
<div class='border-1px small-3'></div>
<div class='border-1px small-4'></div>
Your approach was not wrong but it is better to avoid angular linear gradients when creating diagonals because angular linear gradients don't always produce diagonals. Depending on the dimensions of the container, the line that is produced can be a diagonal line (or) a line anywhere within the box. You can find more information about that in my answer here. Another advantage of using the to [side][side] gradients is that it is responsive.
If gradients don't work for you then you can have a look at using SVG but I don't think you can create lines with exact thickness as you need when it comes to diagonal lines. Diagonals are not as simple as straight lines to create.
div {
position: relative;
height: 100px;
width: 100px;
}
svg {
position: absolute;
height: 10px;
width: 10px;
top: 0px;
left: 0px;
}
path {
stroke-width: 1.05;
stroke: red;
fill: none;
}
<div>
<svg viewBox='0 0 10 10'>
<path d='M0,0 10,10' />
</svg>
</div>
A demo of how to use the SVG diagonal line as a background image is available here. SVG images can be layered on top of other background images also.
You can use ::after pseudo class to do this.
div{
width:28px;
height:28px;
position:relative;}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
<div>
</div>
White line
direction: top,left => bottom,right
.line {
background: linear-gradient(
45deg,
transparent,
transparent 45%,
#fff 45%,
#fff 55%,
transparent 55%,
transparent 100%
);
}
Is there a way to set the size of the image independent from the general size of the background with css?
With following code I set the size of the of the background, so the gradient and the image have the width of 30px.
background(url("../images/icons/double_arrow_37px.svg"), linear-gradient(to top bottom, rgb(171, 129, 85), rgb(148, 112, 74)));
background-size: 30px 37px;
What I need is to set the width of the image to 30px and the gradient to a width of 100% of the button.
I already know the workaround to create a extra image with the correct dimensions, but maybe there is a smarter way with css?
Full Example:
body {
background-color: #000;
}
.button-custom {
color: #fff;
font-family: $font-centennial;
background-image: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg");
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
margin-top: 70px;
padding: 15px 45px;
border-radius: 0;
border: 0;
text-transform: uppercase;
overflow: hidden;
}
.button-custom.bronze {
background-color: #ab8155;
}
.button-custom.bronze:hover {
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), linear-gradient(to top bottom, #ab8155, #94704a);
background-position: center left;
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
color: #fff;
}
Contact
In CSS3, you can use multiple images background. linear-background is interpreted as an image not a color. Known that, you can write something like that :
body {
height: 600px; /* not relevant for your problem */
width: 600px;
}
div {
height: 500px; /* not relevant for your problem */
width: 500px; /* not relevant for your problem */
border: 3px dashed green; /* not relevant for your problem */
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -moz-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, blue));
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -o-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -ms-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), linear-gradient(to bottom, red 0%, blue 100%);
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat, no-repeat;
background-size: 150px, 300px;
}
<div>Yo!</div>
Is it possible to create this shape in CSS3? How?
I am stuck: http://dabblet.com/gist/2962169
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
transform: skew(-20deg);
}
<h1>TEST</h1>
You mean somthing like this
h1 {
background-color: #434b82;
border-radius: 20px 0 0 20px;
width:500px;
height:40px;
border-right: 40px solid transparent;
}
h1:after{
position:absolute;
width: 80px;
border-top: 40px solid #434b82;
margin-left:500px;
border-right: 20px solid transparent;
content:"";
}
<h1></h1>
We can use linear-gradient() to draw this shape on rectangular element.
This trick uses the idea of dividing whole shape in two parts and then draws each part on the background independently.
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
}
div {
background-image: linear-gradient(to left, #434b82, #434b82),
linear-gradient(to left top, transparent 50%, #434b82 50%);
background-position: top right 20px, 100% 100%;
background-size: 100% 100%, 20px 100%;
background-repeat: no-repeat;
border-radius: 30px 0 0 30px;
line-height: 50px;
padding: 0 25px;
height: 50px;
width: 200px;
color: #fff;
}
<div>
Some Text Here...
</div>