Wow, I could really use a hand with this one. I've got some #font-face text that needs an image mask on hover.
Off state:
Hover state
You can see that there's a fire background to the hover text, but ONLY on the next and not the entire item. I'm trying to avoid individual image rollovers so that this effect can apply to any text shown in the menu, but I'll resort to fixed images if I have to.
Is there any way to achieve this without photoshopping every single link?
Nope! Extract images from the photoshop file for both inactive and active states, then apply on css :hover!
Related
I need to style an icon button with 3 different border colors, one for regular state, one for on hover, and another one for when the icon is clicked. I am using react, and right now I have a function that checks if the current button is the one that is selected and that works for regular and on clicked, I also added the onHover color but if that button is the on that is active you can't tell because on hover takes over, you can't see the clicked border until you move the mouse away. How to go about this?
you need 3 style declarations
.button {}
.button:hover {}
.button.selected{}
If you write them in exactly this order, then the button's selected style won't overridden by hover as the declaration for selected comes after declaration for :hover state and won't be overridden by it.
It's tough to tell without seeing your code, but it seems like you want both borders for active and hover states to show at the same time.
Since you can only have one border on an element at a time, one state will always overwrite the other.
There are some effects you can use with other CSS properties so that users can tell when a button is both active and being hovered:
outline - outline is similar to border and the two can exist at the same time (outline will probably only work if the buttons are rectangular because it doesn't adhere to border-radius)
box-shadow - this could be an easy way to add a hover effect underneath the element and its border
pseudo-element - This one is more complicated but adds the most flexibility - perhaps adding a ::before or ::after element to the button, positioning it absolute behind the element, and have that behave separately based on whether the button is active or hovered.
I usually use CSS's :hover feature along with the framework (e.g. react)... there are some good examples online where this feature doesn't just change color, but present some type of animation to help the link/button stand out:
https://www.proglobalbusinesssolutions.com/css-hover-effects/#:~:text=A%20CSS%20hover%20effect%20causes%20a%20graphical%20interface,on%20the%20web%20page%20and%20improve%20site%20interactivity
You might also consider this answer: How can I access a hover state in reactjs?
I want a popup block to appear when I hover over the image as given in the picture below. How can I achieve this using css.
I have already used css to change the background on hover so how can I make the content appear.
I have been using wordpress but I couldn't find any plugin for the same.
Can anyone help with this one?
Sorry, but you can't do this with only CSS : you have to use JS for it (so if you have not learned it before, I think you should...)
CSS can apply properties on elements "selected" but only that.
If you want to get an information about an element (like whether it is hovered) and apply a propertie to another element depending on the information (like visibility:hidden), you have to use JavaScript.
I want to achieve the look and feel as shown in the above picture. There is a completed image besides two lines of text. I know how to achieve this via putting image into background of css. But I am working in a Salesforce project and it is really hard to put images into css. So is there any pure html way in order to achieve this (the fonts and size are definitely css though). I have tried a lot but none succeeded.
The html code for a checkmark is & # 10003; and a heavy checkmark is & # 10004; (without the spaces).
Create a div around the checkmark and make it a circle: Draw Circle using css alone
...Otherwise you are stuck using a ballot-box checkmark: ☑ (& # 9745;)
I am looking at the topcoat library and using one of there components; Topcoat Switch.
The example functions fine here:
http://codepen.io/Topcoat/pen/upxds
But in my app I nest the switch in an unordered list and have to apply a background colour to the containing list element for styling purposes. As mimicked here:
http://codepen.io/anon/pen/ekKEc
This crude example masks the text from being visible which is highly undesirable.
Similarly if i apply a background colour to the label element the same issue is evident.
Any help on this would be nice as i spent the last day messing about with z-index etc and just figured out it was the background colour.
Increasing the z-index on the .topcoat-switch class should do the trick.
Check it out: http://codepen.io/anon/pen/vcqGh
What is the best way to create an HTML image that displays various states (e.g. for a button: normal, hovered, selected, disabled)?
Ideally, I want to do via CSS classes (including the :hover meta-class).
Also, I've seen multiple states combined into a single image (which makes image pre-loading easier), but I don't know how to display a single slice of the image as needed.
Thanks!
I assume you are talking about CSS Sprites. Here's a A List Apart article to get you started: http://www.alistapart.com/articles/sprites. The basic idea is that you have all of your images combined into a single, large image.
Whereas normally you will have img tags or small elements with background image applied, now you have the single image applied to multiple elements as a background image, and each of them have different background position values to position the correct image into position. An example of this would be jQuery UI's icons - the single combined image look like this:
Then each of the individual icons share a single class, with a backgroun-image set:
.ui-icon{width:16px;height:16px;background-image:url(../images/ui-icons_808080_256x240.png);}
As well as individual background-position for each of the different icons:
.ui-icon-carat-1-n{background-position:0 0;}
.ui-icon-carat-1-ne{background-position:-16px 0;}
.ui-icon-carat-1-e{background-position:-32px 0;}
.ui-icon-carat-1-se{background-position:-48px 0;}
The same can be done for the individual interactive states - change the background-position of the element on :hover, and you get a different color or icon.
Check this out: http://josefaeti.com/tutorials/css/css-how-to-use-multiple-images-stored-in-a-single-file.html#box-0
and this: http://www.alistapart.com/articles/sprites