I have a solid background color on a button, and I'm looking for some CSS(3?) that would overlay a semi-transparent white on top of the color, but only on the top 50% of it. I'm looking for a non-gradient, non-image-based shine effect.
How can this be accomplished without using an image? It's ok if the solution doesn't support older browsers.
EDIT: bookcasey's answer below seems to work except the font is also made transparent...
<!DOCTYPE html>
<html>
<head>
<style>
a
{
display: inline-block;
padding:30px;
background: salmon;
position: relative;
text-align: center;
text-decoration:none;
color:#000;
font-size:20pt;
font-weight:bold;
}
a:before
{
content: '';
width: 100%;
height: 50%;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0;
left:0;
}
</style>
</html>
<body>
<div>
Test Link
</div>
</body>
</html>
Thanks,
Andy
Use an absolutely positioned pseudo element on a relative parent.
Demo
a {display: block; width: 100px; height: 50px; background: salmon; position: relative;}
a:before {
content: '';
width: 100%;
height: 50%;
background: rgba(255,255,255,.5);
position: absolute;
top: 0;
left:0;
}
Another, completely different technique (mentioned, but not explained in the comments) is the use of CSS3 gradients with a hard color stop.
a {display: block; width: 100px; height: 50px; position: relative;
background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.5))), salmon;
background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: -moz-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: -o-linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;
background: linear-gradient(bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 50%), salmon;}
Demo
Related
I am trying to make a progress bar which is my requirement like the following image:
My code is:
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(0 0 0 / 26%);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
</style>
</head>
<body>
<div class="bar animate"><span style="width: 100%"></span></div>
</body>
</html>
And I get this through my code:
Can anyone help me getting the exact progress bar or similar as shown in the expected like where am I going wrong ?
Thanks in advance
I am not saying this is the only way of fixing this. But you could just go ahead and invert the colors you have.
background-image: linear-gradient(
-45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
And invert the colors for this one as well:
background-color: rgb(255 255 255 / 26%);
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(255 255 255 / 26%);
position: relative;
}
.bar span:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg,
rgb(0 0 0 / 20%) 25%,
transparent 25%,
transparent 50%,
rgb(0 0 0 / 20%) 50%,
rgb(0 0 0 / 20%) 75%,
transparent 75%,
transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
<body>
<div class="bar animate">
<span style="width: 100%"></span>
</div>
</body>
You need a background with repeating-linear-gradient
.background-lines {
background: repeating-linear-gradient(-45deg, grey,
grey 5px, white 5px, white 10px);
}
<div class="background-lines">
text if needed
</div>
You added your colors the wrong way.
At first the background-color from .bar span gets applied, resulting in a gray background for the whole bar.
And at second the gradient from .bar span:after get's appliced since it comes AFTER the actual html element.
Therefore just swap your colors and you are good to go.
So the white/transparent color on your span and the gray color on your :after.
Like so:
body {
background: white;
}
.bar {
box-sizing: content-box;
height: 20px;
margin: 0 20px 50px;
padding-bottom: 60px;
padding-left: 50px;
padding-right: 50px;
}
.bar span {
display: block;
height: 100%;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgba(255, 255, 255, .2);
position: relative;
}
.bar span:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
background-image: linear-gradient(
-45deg, rgba(0, 0, 0, .26) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .26) 50%, rgba(0, 0, 0, .26) 75%, transparent 75%, transparent );
animation: move 2s linear infinite;
}
#keyframes move {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
<div class="bar animate"><span style="width: 100%"></span></div>
Also keep in mind, as soon as you change the background color for the outer container for your bar (eg. body tag), the bar wil result in another color as well, since you are using transparent colors.
I am applying this CSS rule to some divs on a web application. Basically I need to display a border around the div, but without using the border property.
It works on every browser but Firefox. Can anyone help me understand what I'm doing wrong?
div {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image: radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-image: -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px), -moz-radial-gradient(#dedede 1px, rgba(255, 255, 255, 0) 1px);
background-position: top, right, bottom, left;
background-size: 1px 1px, 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div></div>
https://jsfiddle.net/za74L1st/1/
Many thanks!
This a job for linear-gradient not radial-gradient.
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede),
linear-gradient(#dedede,#dedede);
background-position: top, right, bottom, left;
background-size: 100% 1px,1px 100%;
background-repeat: no-repeat;
}
<div class="box"></div>
You are for sure facing subpixel rendring issue since you are defining very small circles having less than 1px radius. If you increase the values you will see something on Firefox:
.box {
margin: 20px;
width: 100px;
height: 100px;
background-color: #F8F9FA;
background-image:
/* doesn't matter what you put here as value since the background-size is already small */
radial-gradient(#dedede 51px, transparent 51px),
radial-gradient(#dedede 50px, transparent 50px),
radial-gradient(#dedede 99px, transparent 5px),
radial-gradient(#dedede 54px, transparent 54px);
background-position: top, right, bottom, left;
background-size: 1px 1px;
background-repeat: repeat-x, repeat-y;
}
<div class="box"></div>
I liked this book design in iBooks and have been wondering can it be easily made with css?
Original photo
have you tried gradients and shadows ?
.cover {
background: linear-gradient(to right, rgb(60, 13, 20) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.25) 7px, rgba(255, 255, 255, 0.25) 10px, transparent 12px, transparent 16px, rgba(255, 255, 255, 0.25) 17px, transparent 22px), url(https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg);
box-shadow: 0 0 5px -1px black, inset -1px 1px 2px rgba(255, 255, 255, 0.5);
margin: auto;
border-radius: 5px;
width: 389px;
height: 500px;
}
body {
min-height: 100vh;
display: flex;
}
<div title=" Don't make me think " class="cover"></div>
I think this could be pretty easily done with gradients in CSS. Here's a (very rough) example fiddle: https://jsfiddle.net/6yok9c4w/
HTML:
<div class="overlay">
</div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51pnouuPO5L.jpg" />
CSS:
.overlay {
width: 400px;
height: 500px;
position: fixed;
top: 0;
left: 0;
background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}
img {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
I used this tool to generate the gradient: https://cssgradient.io/
With more effort and tweaking, I think you can get really close to the original.
I have two images in the same directory. When I try to use one as a background image using css it does not show but when I use the other it does. What in the world is going on here?
Just for reference here is my css code.
This one does not work
a:hover {
background-image: url("images/menu-ident.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
This one does work
a:hover {
background-image: url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
of course this doesn't work - the second one overwrites the first one (same elements selected). if you want to have multiple background-images on the same element look here: https://w3schools.com/css/css3_backgrounds.asp
a:hover {
background-image: url("images/menu-ident.png"), url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
if you need two differents backgrounds for two different elements you need different css selectors like classes or ids:
a.bg-1:hover {
background-image: url("images/menu-ident.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
a.bg-2:hover {
background-image: url("images/logo.png");
background-size: 110px;
background-repeat: no-repeat;
background-color: transparent;
background-position: bottom center;
color: rgba(255, 255, 255, 1);
}
That is my css:
width: 0;
height: 0;
border-top: 31px solid transparent;
border-bottom: 31px solid transparent;
border-left: 31px solid #0caa3f;
Is it possible to make border-left have a gradient?
Demo: http://jsfiddle.net/abhitalks/fg7Ex/3/
#grad {
width: 60px;
height: 60px;
position: absolute;
top: 32px;
left: 32px;
clip: rect(auto 30px 60px auto);
}
#grad:after {
content: '';
position: absolute;
background-color: rgba(0, 0, 0, .7);
top: 8px;
bottom: 8px;
left: 8px;
right: 8px;
-webkit-transform: rotate(-45deg);
background-image: -webkit-gradient(linear, right bottom, left bottom, color-stop(.75, #52882d), color-stop(0, #eee));
border: 1px solid #fff;
}
<div id="grad"></div>
Shamelessly picked up from here: https://gist.github.com/distilledhype/582201
You can check the same kind of question in stackoverflow for solution right border gradient
Here is Jsfiddle Demo
There is no cross-browser css solution as it only supports chrome and firefox. So I recommend using div as parent and assigning it css:
.gradient {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(173, 14, 173)), color-stop(0.67, rgb(255, 0, 255)));
background-image: -moz-linear-gradient(center bottom, rgb(173, 14, 173) 33%, rgb(255, 0, 255) 67%);
padding: 2px;
}
.gradient > div {
background: #fff;
}
here is html:
<div class="gradient">
<div>text in div</div>
</div>
How about using a box-shadow on a pseudo element of the div. Something like
FIDDLE
div:before
{
content: '';
display: block;
height: 60px;
width: 3px;
box-shadow: -3px 2px 2px 0 rgba(0,0,0,.5);
left: -30px;
top: -31px;
position: relative;
}
--color:#777;
margin:0 1%;
padding:0 5%;
background:linear-gradient(to right, transparent, var(--color) 5%, transparent 5%, transparent 95%, var(--color) 95%, transparent);