I have to make a horizontal navigation bar with five options. Each will have a icon to it. The list will be made using ul. I'm wondering how to give the icon for each option. Should I make five different CSS classes, each with an icon , and assign the classes to the <a> elements or is there some other way using lesser number of classes?
I'll be using a sprite sheet for the icons and using background-position to specify which icon to display.
Check out fontawesome in google and you might find what you are looking for. Simply add the icon tag inside each li tag and you will be able to get the required result. Sprite sheets are old way of doing it, use font icons. :)..
Related
I have a React component:
<input type="range" />
I used some css to transform it vertically and it looks like this at the moment:
I want to style it so it looks like this:
How do I even begin playing around with the circle select and line in the slider?
Do I use some kinds of css pseudo classes? Is it possible to use svg as the circle select?
I might be lazy, but I see 2 possible solutions in order to recreate it, so the axis would be mobile-friendly as well. And personally I would go with the first one.
SVG can be easily created in Figma for example and it will be responsive by itself. You can divide it as three different elements and style it properly, so it would be in right position. Furthermore, SVG can be beautifully animated in GSAP or other libraries of this kind.
The other way, more reduntant in my opinion, would be continuing recreating that purely in CSS with the usage of ::before, ::after and svg icon in the middle, with the additional usage of absolute positioned elements, but it might not be fully responsive in that case.
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 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
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!
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