- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I wonder if it is possibility to do something like on this image but with css only?
http://swidnik.demo14.pl/images/border-thicker.jpg
i prepare something like this but …
background: -moz-linear-gradient(
left,
rgba(0,0,0,0.001) 0%,
rgba(255, 0, 0, 0.74) 50%,
rgba(0,0,0,0.001) 100%
);
padding: 0 0 1px;
You don’t really need the -moz-
prefix but it does not a default value and a rule with a -webkit-
prefix for Safari. Other than that, I think it was just a minor typo – ‘to left’ instead of just ‘left’.
box-shadow and radius could help too
http://codepen.io/gc-nomade/pen/rVoKbJ
thx, the second answer is nice but when it is duplicate after few article the first line look bigger then the rest :\
border-image
might help here. You can use a linear gradient as the border image.
See the Pen ec9ed4afdd10d4ca2c45734c6648bb06 by Marie Mosley (@mariemosley) on CodePen.
Another route you can go is a div with a radial background. You can adjust the height/width and gradient very easily this way. And it’s a bit more backwards compatible.
http://codepen.io/noahgelman/pen/mJagew
Here is a good website for generating background gradients: http://www.colorzilla.com/gradient-editor/