<Button className={`white-color-text bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]" bodyS my-4`} text={"Get Started"} />
I cant see to change the background color (which is linear) on active in Tailwind . Any suggestions?
You are using the hover modifier with the wrong syntax. Instead of wrapping your hover modifier (hover:"bg-gradient-to-r from-[#fff] to-[#ff6f48]"), you need to apply the modifier to each segment of your gradient utility:
<div class="bg-gradient-to-r from-[#f02aa6] to-[#ff6f48] hover:bg-gradient-to-r hover:from-[#fff] hover:to-[#ff6f48]">Get Started</div>
Tailwind-play
There's an explanation on how to apply modifiers on each class in the documentation, for example, for the Gradient Color Stops.
Related
I have this background in simple css:
background: linear-gradient(152deg,#fff,#00bfd8 42%,#0083f5);
I want to add it into the tailwind css:
<section class="relative bg-[here] table w-full py-36 lg:py-44">
For equal color stops use tailwind's bg-gradient-to class
bg-gradient-to-br from-white via-[#00bfd8] to-[#0083f5]
If you want to use your custom colour stops use arbitrary values
bg-[linear-gradient(152deg,_#fff,_#00bfd8_42%,_#0083f5)]
Use "_" underscore for spaces : ref
To use tailwind colors in custom gradients: replace hex code with theme(colors.blue.500)
Theme()
Check it out in this playground
I am working on canvas with Konvajs. I have a circle layer which I want to animate. Is there a way to add a custom CSS to button to make it blink. Below is the code section for Konva config.
<div class="container">
<v-stage :config="stageConfig" >
<v-layer>
<v-image :config="imageConfig1"/>
<v-circle :config="{radius:13,fill:'red',x:20,y:29}"/>
<v-text :config="{text:'5G Camera', x:42, y:15, fontSize:35, fontStyle: 'bold', fill:'white', stroke:'black',strokeWidth:'2', shadowEnabled:'true'}"/>
</v-layer>
</v-stage>
</div>
You can't use CSS to style Konva shapes. CSS is for DOM elements, Konva nodes are not DOM elements.
If you want to style shapes, you need to set properties directly. Such as fill.
If you want to animation shape, you can use some Konva methods such as Konva.Tween, node.to() method or Konva.Animation.
Take a look into Konva.Animation + Vue demo
I have an image (combination of blue and white in color) and background colour(white) . On click of the div, I need to reverse the colors. (background color to blue) and image(blue part of the image to white colour and white part of the image to blue colour).
Html :
<div class="col" ng-click="onHomeButtonClick()">
<img src="images/iconHome.png" class="menu-icons"><br>
</div>
Js code :
this.onHomeButtonClick = function($event){
$event.target.style.backgroundColor="DarkSlateBlue";
}
Tried so far :
Using $event.target.style.backgroundColor="DarkSlateBlue"; I am just able to set the background colour.But how do i invert the colors.
Try to use the CSS deklaration:
This could be like this:
HTML:
<img src="images/iconHome.png" id="imageToInvert" class="menu-icons">
CSS:
#imageToInvert:hover {
filter: invert(100%);
}
Hope this helps.
Not sure that filter:invert(100%) is actually what you're asking for but if it is as indicated in a comment you made, just make a class with that style. Such as .filterClass{filter: invert(100%)} then add that class in your click event using this element.className +="filterClass";
I hope this may help you Fiddle this one is for the div with background color you can use the same technique and change the image color too.
I use css framework Materialize.css
I don't understand where past color in my HTML icon
<i class="large material-icons">note_add</i>
I have tried cyan darken-4
<i class="large material-icons cyan darken-4">note_add</i>
But nothing succeeded, I need exactly change color icon.
How to make it?
Add the class of "cyan-text" & "text-darken-4" to the .
<i class="large material-icons cyan-text text-darken-4">note_add</i>
You can do this by adding a class to your icon like below-
<i class="large material-icons icon-blue">note_add</i>
And then in your CSS stylesheet, you can define the color for the icon-blue class
i.icon-blue {
color: blue;
}
Your icon color will then be changed. Hope this helps!
It's easy, I'll show you an example:
<i class="material-icons large red-text">room</i>
Just enter the name before the text (red-text)
I got an example with using the "style" attribute.
<pre></td><td class="col-sm-2"><i class="little material-icons" style="color:blue">search</i></pre>
According to Materialize documentation you can access their direct css attributes.
.input-field input[type=text]:focus + label or similar
Class or ID modifier
Using materialize's color palette
Hey you asking that you want to change icon colour in Materialize CSS.
Same was my Question But i have Find the ans....that
<i class="material-icons red-text" >home</i>
This Code will change the icon Color and if we want to give its background color just change it in custom.css
.class {background-color:red;}
If you want to use Jquery
This will change color of all the material icons
$(".material-icons").css("color", themeColor);
This will change color of the material icons inside an element eg input field
$(".input-field>.material-icons").css("color", themeColor);
Live Demo
See the Pen Materialize CSS Change Theme Color by Hitesh Sahu (#hiteshsahu) on CodePen.
I am trying to change the background color of a div using ng-repeat. The color I am trying to pull from the object in the loop. Whenever I do this however it sets my style property equal to blank.
Here is the code that I am using:
<div ng-repeat="channel in channelObjects">
<div class="mediumTile" style="background-color:#{{channel.Color}}">
Channel Color: {{channel.color}}
</div>
</div>
This displays my mediumTile object with the correct channel color displayed. By the style is set to nothing once the page loads
This is what the page displays:
<div class="mediumTile" style="">
Channel Color: 123456
</div>
Am I doing something wrong?
You should use ng-style instead of style, using style with interpolation will cause some browsers to strip the values off (invalid style attribute with the presence of {{ etc..) before even angular has a chance to process it. This happens specifically in IE (not sure which browser you tested this).
<div class="mediumTile" ng-style="{'background-color':'#' + channel.color}">
Also mind the casing as well, color.
Plnkr