I want to write the following CSS using TailwindCSS 3.
`
background-clip: padding-box, border-box;
I highlight that I have multiple background gradients and want also to have various background clips. The final goal is to have a button with a border gradient effect and a background color gradient.
Here is also the gradient background value that I want to make.
background-image: linear-gradient(279.45deg, #ffd317 7.13%, #ffb40d 92.87%),
linear-gradient(279.45deg, #ffd317 7.13%, #ffb40d 92.87%);
Any help is appreciated
Similarly to this I tried the following code but with no success.
bg-[position:center_bottom,_right_-15px_bottom_-20px,_left_0px_bottom_0px]
bg-[clip:padding,_border]
Related
I know that for applying a linear gradient, we need at-least 2 colours. But this is what i see in figma from the designer. How do i translate this into css. And the #4D00F0 is a dynamic colour in my case. How do i apply gradient with a dynamic colour as border .Please help. The end result should look like this.
Strange I faced this question just now - are there any differences between css background color overlay and same looking color? For ex: designer designed buttons for hover, focus etc. On hover he wrote - overlay #FFF 15%. Now sice we use mixins and colors are hex, I have two choices - wrap element with other div or convert my rgba color rgba(255,255,255,0.15) to rgba #FFFFFF26 and use a pseudo class to apply it on hover.
It looks ugly, why not just other background color on hover?
I can get a hex color like this rgba(255,255,255,0.15) and it looks the same...
What are the benefits of overlay color (are there any?)?
If you have overlay with transparency then the background color will be seen through the overlay. If you apply directly on the button then what is behind it will show (in most cases white) so you have 2 different results
Currently busy on creating a range input. However, the range input should be a different background-color, depending where the thumb is.
So far it is working fine, but the thumb is barely visible. Is there some way I can get the thumb on top of the slider? Tried all sorts of styling; position, z-index, display etc.
Here is a snippet of what I have so far.
My expected behavior would be a white circle as thumb, around 20x20.
Use gradient background on the track
You could style the track in such a way that you achieve the same result, using a gradient as background. For a slider at 20% it would be something like:
background: linear-gradient(to right, blue 20%, purple 20%);
A full working example can be found here: https://jsfiddle.net/jkrielaars/frdyr15L/7/
Add styles to CSS
Unfortunately, we can not access the track style directly from js. A workaround for this problem is to add all the possible values in CSS, and than activate them by changing the class, or an other attribute on the input element. (I use style in my example)
This can easily done using some SASS magic.
For a range input from 0 to 100 it could look like this:
#for $i from 0 through 100 {
input[type=range][style=v#{$i}]::-webkit-slider-runnable-track {
background: linear-gradient(to right, blue round(percentage($i/100)), purple round(percentage($i/100)));
}
}
(Note that you can't just use a numeral value in the style attribute. I've adde a letter to make it a string.)
Update element using javascript
Updating the style attribute can be done with some simple javascript. Using the oninput attribute you can make the style update as you slide around.
<input type="range" style="v20" value="20" oninput="this.setAttribute('style', 's'+this.value);"></input>
Hello i have the imageview
The css i got from boss is :
/* Rectangle 3: */
background-image: linear-gradient(-180deg, rgba(137,129,129,0.00) 0%, rgba(0,0,0,0.51) 100%);
I search many websites but it's seem impossible.
I read that post Drawing gradient over image in ios then i think is that a solution to apply that css to my image. Or convert this css to objective C code.
Does someone meet same problem?
For this case, you can use gradient color as you already told. The trick is, put gradient color to a view and place that view over image view, and than set its opacity (alpha) to 0.51f.
You check here for a CAGradientLayer example and another option is using a great color library Chameleon for creating gradient color and layer.
I came across this tool that will be practical using the first top box (deg)
http://www.workwithcolor.com/hsl-color-picker-01.htm
I have this css code:
#FullMenuContent input:checked { -webkit-filter: hue-rotate(290deg);
filter: hue-rotate(290deg);
That produces a color, fine. I understood that the image must have a color (does not work on grey scale). I understood that the final result depends on the color of the image, so my question is:
What should be the color of the image for the color picker linked above to be accurate?