How do I achieve a texture like this using CSS3 gradients? - css

How do I achieve a texture like this using CSS3 gradients?


The first background is easy using repeating-linear-gradient:
body {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
#58D68D 0,
#58D68D 30px,
#2ECC71 30px,
#2ECC71 60px
);
}
The second background is much more complicated and should not be a CSS solution. I recommend to use a background-image instead!
It is not impossible to solve it with CSS (using perspective):
body {
transform: perspective(100em) rotateX(50deg) scale(2);
overflow:hidden;
}
div {
height:100vh;
width:100vw;
background:repeating-linear-gradient(
to bottom,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
), repeating-linear-gradient(
to right,
rgba(46, 204, 113, 0.5) 0,
rgba(46, 204, 113, 0.5) 30px,
rgba(88, 214, 141, 0.5) 30px,
rgba(88, 214, 141, 0.5) 60px
);
}
<div></div>

Related

Is it possible to make rainbow gradient ::selection

I am trying to make a rainbow gradient ::selection, I have tried this:
::selection {
background: linear-gradient(
90deg,
rgba(255, 0, 0, 1) 0%,
rgba(255, 154, 0, 1) 10%,
rgba(208, 222, 33, 1) 20%,
rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%
);
color: white;
}
but it just appears as if I did this:
::selection {
background: white;
color: white;
}
Is it possible to have a rainbow gradient? Preferably with no JavaScript? I have looked all over, but none of them look good, and all of them use JavaScript.

Can't be done using a gradient on ::selection, because background-image isn't supported. According to MDN:
Only certain CSS properties can be used with ::selection:
color
background-color
text-decoration and its associated properties
text-shadow
stroke-color, fill-color and stroke-width
In particular, background-image is ignored.

Ionic 5 ion-tab-bar gradient background

Hello everyone I want to set the ion-tab-bar background to gradient like the toolbar in this image.
What I have tried. (sets the toolbar as expected but doesn't work as intended for the tab-bar)
--ion-toolbar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-toolbar-color: var(--ion-color-light);
--ion-tab-bar-background: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
--ion-tab-bar-color: var(--ion-color-light);
Checking Ionic 4 Tabs styling I tried the following but still same result.
ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
ion-tabs ion-tab-bar {
--ion-background-color: linear-gradient(to right, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%) !important;
}
All help is appreciated thanks.

I have fixed it using
ion-tab-bar {
--background: transparent;
background-image: linear-gradient(90deg, rgba(252, 176, 69, 1) 0%, rgba(255, 149, 0, 1) 50%, rgba(241, 90, 41, 1) 100%);
}

Gradient overlay on Image with single line of CSS

I'm trying to put a gradient on a background image using this code
background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;
I'm getting the image but the gradient is not being applied

Add the gradient first and then add the image url, just like this:
background: linear-gradient(rgba(244, 67, 54, 0.95),
rgba(33, 150, 243, 0.75),
rgba(139, 195, 74, 0.75),
rgba(255, 87, 34, 0.95)),
url("http://placehold.it/200x200");
Or look at the snippet below:
.bg {
background: linear-gradient(
rgba(244, 67, 54, 0.45),
rgba(33, 150, 243, 0.25),
rgba(139, 195, 74, 0.25),
rgba(255, 87, 34, 0.45)),
url("http://placehold.it/200x200");
width: 200px;
height: 200px;
}
<div class="bg"></div>
Hope this helps!

div {
width: 350px;
height: 350px;
background: linear-gradient(to bottom right, rgba(0,47,75,.9), rgba(220,66,37,.9)), url(http://placehold.it/350x350);
background-size: cover;
}
<div></div>

do it in one line like below, I gave an example for that, see it
background-image: linear-gradient(to start-direction end-direction, color1, color2, url("imageUrl");
#hero {
height: 320px;
width: 100%;
background-image: linear-gradient(to right bottom, rgba(99, 102, 241, .9), rgba(219, 99, 139, .9)), url("https://i.picsum.photos/id/305/600/300.webp?hmac=QcFzy6dHM3Qs5MQwTjvnHEkSoTGAfg_VRgbH5g7pUQM");
background-size: cover;
}
<div id="hero"></div>

Multi-color bar in css - ok in Firefox but not others

I am using the following to create a 100% width multi-colored bar which runs across the page.
In Firefox its ok but all other browsers it's empty, no colors.
Here's the CSS:
.colorBar {
position: relative;
height: 0.5em;
background: -moz-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
background: -webkit-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
background: -ms-linear-gradient(left center ,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25) inset;
}
Called simply like: <div class="colorBar"></div> so question is how to make it all browser compatible
Here's a fiddle

The syntax is slightly different in various browsers.
Is this closer to what you are looking for? (just added the standard, no vendor prefixes)
background: linear-gradient(90deg,
rgb(231, 82, 57) 0%,
rgb(231, 82, 57) 12.5%,
rgb(255, 150, 28) 12.5%,
rgb(255, 150, 28) 25%,
rgb(255, 204, 39) 25%,
rgb(255, 204, 39) 37.5%,
rgb(252, 230, 47) 37.5%,
rgb(252, 230, 47) 50%,
rgb(205, 227, 91) 50%,
rgb(205, 227, 91) 62.5%,
rgb(130, 204, 51) 62.5%,
rgb(130, 204, 51) 75%,
rgb(65, 190, 206) 75%,
rgb(65, 190, 206) 87.5%,
rgb(4, 156, 219) 87.5%,
rgb(4, 156, 219) 100%)
repeat scroll 50% 0px transparent;
http://jsfiddle.net/mNZDP/6/
90deg simply means "go from left to right". Personally I think it's easier to understand than the longer "left top, right bottom" (or whatever). If you don't provide a directional argument, it will default to a zero degree rotation – which means, it will go from top to bottom.
A bit on vendor prefixes:
Chrome, Opera and IE10+ use the standard. If you need to support Android, iOS6 (or lower) or Safari 6 (or lower), you need the -webkit- prefix.
IE has never used a prefix for gradients (people who tell you to use -ms- are filthy liars), so if you need to support IE9 or lower, you need some kind of fallback.
You probably won't need the -moz- or -o- prefix, except in special cases.
Beware: Older versions of Webkit (say, on Android 2.3) use a different syntax.
Check the spec for more details: http://dev.w3.org/csswg/css-images-3/
Also checkout Can I Use to see which browser supports what.

Overlay a CSS gradient with an RGBA colour?

I'm wanting to add a transparent black overlay to a button for it' :active state, so when you click it, it's the same gradient but with just an overlay of e.g. rgba(0,0,0,.3)
The way I thought this would work is (using webkit in this example):
background:rgba(0,0,0,.3), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
or without the comma, and the order reversed... but nothing shows up at all!
I'm not keen on adding another div to act as the overlay to do it, so is there a strictly CSS way to do this? I was thinking maybe it's a :before or :after pseudo class, but I don't have a clue how to use these!
Would really appreciate an answer, this has been bugging me for a long time.

You can't do that; rgba defines a colour, not an image. What you can do is use a gradient that's not a gradient:
background: -webkit-linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), -webkit-linear-gradient(top, #fcfcfc 0%,#bababa 100%);
This is why I always specify background-image instead of using the shorthand when developing - it makes debugging easier.

You can do it with ::after pseudo-element.
First, you need to define the button CSS with position: relative and then use ::after with position: absolute, like this:
.button {
position: relative;
}
.button:active::after {
content: ' ';
position: absolute;
background: rgba(0, 0, 0, 0.3);
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Live Fiddle demo

Think in Reverse
Set background-color: black and overlay the gradient with your colors converted from hex to rgba (initially set to 1 for alpha), then on :active fade the gradient to 0.7 (which will show 30% black) alpha.
See the fiddle.
button {
background-color: black;
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(186, 186, 186, 1) 100%);
}
button:active {
background-image: -webkit-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
background-image: -moz-linear-gradient(top, rgba(252, 252, 252, .7) 0%, rgba(186, 186, 186, .7) 100%);
}

Resources