Im writing css code to add a dark theme to a website. One element is a lineargradient from the top to the bottom of a div. How can I change this element to have the lineargradient at the top only and #000 at the bottom?
You could define a breakpoint where your #000 color starts as a percentage. For example setting
background: linear-gradient(#555, #000 50%);
on your element would only display the gradient in the first 50% of its height and the rest would be black. It also works for colored gradients:
background: linear-gradient(#0EB6F3, #002A65, #000 70%);
Related
so im trying to make a gradient like this one but with other colors:
So, im kinda new to css and i don't know how to make this glow effect bellow the gradient, thanks!
A background image can consist of more than one image - the first image in the list overriding those that come afterwards.
Using gradient images this snippet puts a transparent to a sort of dark gray from top to bottom image over a left to right gradient of colors.
Obviously this is just a start which will require you to play around with the parameters and the colors to get the effect you want.
div {
height: 10vh;
background-image: linear-gradient(transparent 0, #404040 40%), linear-gradient(to right, cyan, magenta, yellow);
background-size: 100% 100%;
background-repeat: no-repeat no-repeat;
}
<div></div>
I need to change the color of the center line in the v-timeline components of the Vuetify framework so that it will be a particular color up-to a certain colored dot and another color afterwards as shown here, is it possible to do so?
The color for the whole line could be changed as follows
.theme--light.v-timeline:before {
background: red;
}
I think only one way is setting linear-gradient. Because v-timeline divider setting up all the space. Try setting
background: linear-gradient(180deg, black 0% 50%, gray 50% 100%) !important
I am sorry if it is dumb question, but this code is driving me crazy, i strip it down, was thinking i will be able to understand, but after doing that and investing 2-4 hours now i am confused about the things which i thought i knew.
This below code adding this cool effect when i over, it seems like background is appear from the bottom and goes to the top,
Only think i knew it has to some thing with background image, linear gradient, background size, and background-position
Please have look and try to take me out of my misery.
HTML CODE
<ul><li>Home</li> </ul>
css code
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
If any body want to have link here is link as well.
https://codepen.io/arif_suhail_123/pen/jLPYOB
I've annotated your styles below to hopefully explain what is happening.
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
Background Position
If you check out the CSS specs for background-position, you'll see that the default value is 0% 0%, which is basically top left.
Your CSS code does not specify an initial background position and so it will default to top left. Keep this in mind.
Your background gradient is defined to bottom, so from top -> bottom. The first 50% is transparent (invisible). The second 50% is comprised of two different colours.
Then consider that your background gradient is twice the height of your element. This is specified by the background-size: 100% 200% (100% width, 200% height). The background can be larger than the element to which it is applied, and any overflow will be hidden.
So initially when you're showing only the top half of your background gradient, what are you going to see? Only the transparent portion.
When you then override the background-position on hover, you're saying to now show the bottom center portion. Seeing as how your background matches the full width of your element, the center horizontal value doesn't change anything. But the bottom vertical setting does. It now means that the second 50% is displayed.
Does that help?
So, here is JSFIDDLE.
Here, you see header with background color gradient:
background: linear-gradient(to right, #827099 0%, #dc5562 100%)
I also have span with :before css attribute that mimics the background color behind it.
The purpose of this is to get a "cut" feature as a part of the word "THIS". You will notice that a top left portion of "T" is missing or more like hidden behind the :before attribute.
The issue I am having is that since the background color is linear-gradient, when the screen width changes, so does the linear-gradient (you can see by making the browser window smaller)
This change in the gradient does not reflect on the :before attribute and it no longer matches the background color.
Is there a way to fix this while keeping the linear-gradient of the background?
Not sure if this is an option for your use case, but you could set the linear gradient to ensure that the color change doesn't happen until after it clears the cutout.
You would set the first stop in the gradient to be the width of the padding (118px) plus the width of the clip border (21px) and then change the clip border colors to be the same as the starting color of the gradient. In the example below I rounded up to 140px.
https://jsfiddle.net/6dvy7dks/
.head {
background: linear-gradient(to right, #827099 140px, #dc5562 100%);
}
span.first:before {
border-top-color: #827099;
border-left-color: #827099;
}
I want to make a div with a gradiant: white to transparent. I add a red bow shadow on it, but I need the box-shadow effect respect the same gradient to transparancy than the box her-self!
Like we see http://jsfiddle.net/by57bkgy/ it's not good here, I don't want red effect at the left of my div.
I tried box-shadow(0px 0px 2px 1px linear-gradient(90deg, rgba(0,0,0,0) 0, red 10%, red 100%)); but don't work.
How can I do a linear gradiant red to transparent on box-shodow?
thx.
EDIT I tried with -webkit-mask:linear-gradient(90deg, rgba(0,0,0,0) 0, white 10%, white 100%); but box-shadow is ignored....
Just change the div gradiant from (white, transparent) to (white, the background -color of the element in which the div is placed).
There is no css support for gradient shadow