I'm using a background image with linear gradient to create a highlight text effect but it's causing an unwanted bottom border:
.fancy-underline {
text-decoration: none;
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.7)),to(rgba(255,255,255,.7))),-webkit-gradient(linear,left top, left bottom,from(#91c678),to(#91c678));
background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 50%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>
I can't see anything under the computed styles in the debugger that might cause this so I'm thinking it must be an issue with my linear gradient. Can anyone point me in the right direction?
You can cover more area like below. You make the gradient big enough and you shift it to uncover the top 50% and you will have the same result as you did
.fancy-underline {
text-decoration: none;
background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
background-position: 0 -50%;
background-repeat: no-repeat;
background-size: 100% 200%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>
Related question to understand how it works: Using percentage values with background-position on a linear-gradient
A zoomed version to better see:
.fancy-underline {
text-decoration: none;
font-size:100px;
background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(#91c678, #91c678);
}
.new {
background-position: 0 -50%;
background-size: 100% 200%;
background-repeat:no-repeat
}
.old {
background-position: 0 100%;
background-size: 100% 50%;
background-repeat:no-repeat
}
<span class="fancy-underline new">new</span>
<span class="fancy-underline old">old</span>
Related
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>
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 have tried applying a color overlay with transparency to a background image, the background image is displaying and hopefully the code is okay for this, but if someone has a more efficient way of doing this please share.
When I try and apply the background-color with rgba values and transparency, nothing shows...
Any suggestions?
.call-to-action {
color: #fff;
background: url(images/cta-bg.jpg) no-repeat center center fixed;
background-color: rgba(255, 255, 255, 0.5) !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
font-size: 18px;
padding: 48px 12px;
text-align: center;
}
http://i.stack.imgur.com/8iNun.png
Use a non-changing gradient as a second background image
JSfiddle Demo
CSS
div {
width 200px;
height:200px;
margin: 25px;
border:1px solid grey;
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg);
}
U also need to blend it :
background-blend-mode: multiply;
I'm trying to create a flickr icon using font-awesome, and would like to represent the colors accurately (which means a purple and blue dot on each side of the icon). I'm trying to do this with LESS using gradients. But I've been unable to figure out how to vertically align the gradients (I can only figure out horizontal).
What I have so far:
.fa-flickr:before {
color: #fff;
background-image: linear-gradient(to left, #0062da 100%, #0062da 100%),
linear-gradient(to right, #ff0084 100%, #ff0084 100%);
background-size: 100% 50%, 100% 50%;
background-position: 0 0, 0 100%;
transform: rotate(90%);
background-repeat: no-repeat;
}
http://jsfiddle.net/FQJhE/2/
This leaves the gradients stacked in the wrong direction, and shows extra color outside the icons. I'd appreciate any pointers on how to get the gradients rotated, and any help on the excess colors would be great as well.
Looks like this is what you want:
.fa-flickr {
color: #fff;
background-image: linear-gradient(to right, #0062da 50%, #ff0084 50%);
background-size: 80% 80%;
background-position:center;
background-repeat: no-repeat;
}
Demo.
Reference JS Fiddle
Instead of using two different gradients, why not use a single gradient with stops that start and end at the same point.
.fa-flickr:before {
color: #fff;
background-size: 100% 50%;
background-repeat: no-repeat;
background-position: 0% 50%;
background-image: linear-gradient(
to right,
#0062da 50%,
#ff0084 50%
);
}
As for the overflow I've simply made it smaller and given it a vertical offset to fit inside the icon.
I have a shape with an edge like this in Photoshop:
Is it possible to make the repeated triangles as a border with CSS?
You can use gradients to create a zig-zag patterned background, use the ::after pseud-element to apply it like a border.
.header{
color: white;
background-color: #2B3A48;
text-align: center;
}
.header::after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>
Source: CSS Zigzag Border with a Textured Background
JSFiddle: http://jsfiddle.net/kA4zK/
For future viewers, I found this adaptation of #extramaster's answer to be a little simpler.
It's essentially the same, but it uses one fewer background gradients and allows the backing object (.navbar in my markup) to show through instead of hard-coding the second color into the zig-zag.
JsFiddle: http://jsfiddle.net/861gjx0b/2/
.header {
position: relative;
color: white;
background-color: #2B3A48;
text-align: center;
}
.navbar {
background: #272220;
height: 20px;
}
.header:after {
content: "";
position: absolute;
display: block;
height: 10px;
bottom: -10px;
/* -height */
left: 0;
right: 0;
/* TODO Add browser prefixes */
background: linear-gradient( 45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%), linear-gradient( -45deg, transparent 33.333%, #2B3A48 33.333%, #2B3A48 66.667%, transparent 66.667%);
background-size: 8px 20px;
/* toothSize doubleHeight */
background-position: 0 -10px;
/* horizontalOffset -height */
}
<div class="header">
<h1>This is a header</h1>
</div>
<nav class="navbar"></nav>
Personally, I think clip-path is easier to work with/understand than complex background gradients.
body {
font-family:Roboto,'Open Sans',Helvetica,sans-serif;
}
.container {
background:#ddd;
margin:0 auto;
max-width:800px;
padding:30px;
}
h1:first-child {margin:0;}
.jagged-bottom {
position:relative;
}
.jagged-bottom:after {
background:#ddd;
content:"";
height:2vw;
position:absolute;
top:100%;
left:0;
right:0;
clip-path:polygon(
0 0, 2.5% 100%, 5% 0, 7.5% 100%,
10% 0,12.5% 100%,15% 0, 17.5% 100%,
20% 0,22.5% 100%,25% 0, 27.5% 100%,
30% 0,32.5% 100%,35% 0, 37.5% 100%,
40% 0,42.5% 100%,45% 0, 47.5% 100%,
50% 0,52.5% 100%,55% 0, 57.5% 100%,
60% 0,62.5% 100%,65% 0, 67.5% 100%,
70% 0,72.5% 100%,75% 0, 77.5% 100%,
80% 0,82.5% 100%,85% 0, 87.5% 100%,
90% 0,92.5% 100%,95% 0, 97.5% 100%, 100% 0);
}
<div class="container jagged-bottom">
<h1>Looks Like A Receipt</h1>
<p>Simply adjust the clip path on the pseudo-element if you want more or fewer spikes, and the height if you want them to be taller or shorter.</p>
</div>
There is a border-image property in CSS3.
Maybe you can work it out in a way you want. More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image
Or here
https://www.w3schools.com/cssref/css3_pr_border-image.asp
You can create an individual triangle using CSS quite easily (just tweak border properties). In order for this to work you will need to generate quite a bit of markup yourself. I would recommend against this approach.
Instead you are likely better off using an individual image containing a single triangle (preferably a transparent .png) and then use background-image and background-repeat (repeat-x) properties to bind that to a div (your "border").
Unfortunately there is no yet a straight-forward way to achieve this using pure CSS.