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.
Related
Background:
I'm trying to create a rotating image banner with several links, each link being different. The FIGURE are set inside a DIV which is nested inside another DIV for centering and positioning purposes.
Current JSFiddle:
Available here without WebKits.
Problem:
Although I tried with several combinations, inside the markup and CSS, never does it trigger the anchor in any of the images (I have not set any effect on hovering yet, not to confuse the code). I deleted the anchors so you can see the base code before the tests I did. It functions now as perfect Pic Slideshow, yes, but that is not the intent.
Need:
To know what to do with an A tag for it to work on each of the images separately, in order to transform the PIC SLIDESHOW into an alternative to a Slider.
Code type restrictions:
I do not wish to use a JQuery in the solution, only CSS, HTML and the smallest JavaScript possible if everything else fails
Many Thanks
For example, if you look at the image here:
Is it possible to create the love' hate part? where the hide text is a little-but underneath the Love text? And also, how can I cross out the hate text?
yes, it is possible, but I don't recommend doing it that way
for the stroke: simply create an element and rotate it a bit
for the "underneath" look: use position: relative (absolute), margins, paddings etc.
here is live example: http://jsfiddle.net/78qpE/1/
If you want the image to look like the one you attached, it would be done in a program like Illustrator, but it is unclear if this is what you want. Can you elaborate at all, or provide code for what you are trying to do? It is possible to have both "Love" and "Hate" in separate DIVs, positioned by CSS. If it is only text, there are CSS controls for strikethrough as well.
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
I know you can define some custom cursors in CSS like the re-size cursors and such, but I am trying to use the "rotate" cursors for the four different corners. The ones that are bent at a 90 degree depending on what corner you are hovering over.
Any ideas how to do this in CSS?
Thanks
Try to add invisible divs to your corners and define custom cursor for each div. The useful article: http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/
Example with crossbrowser code:
cursor: url(cursor.cur),url(cursor/cursor.cur),default;
This is a list of the basic cursor style in css work in CSS2 (IE 4+) and there are CSS3 cursor too.
http://www.worldtimzone.com/mozilla/testcase/css3cursors.html
i'm solving a problem to make select inputs look the same in all browsers (Chrome and Safari on Mac renders them differently) how to do that ?
The ONLY way to make them look the same right now would be to hide the original inputs, and replace them with appropriately styled html equivalents (of god forbig Flash objects), which would act as proxies, passing the functionality over to the hidden inputs.
That may be automated with JavaScript. But that would be WRONG. You are not supposed to force a different look on to OS styled elements of the webpage. It conflicts with a lot of usability and accessibility practices.
So, the only way is to make your design flexible enough to support differently looking control elements on a web page, and also use different stylesets for different browsers, to ease the adjustment of the styles (at the moment there are no inputs that would look and act the same on all browsers with the same style rules applied).
Unfortunately, life just kinda sucks on this one. Just wait till you need to style a file input...now that's some fun!
if you dont mind using js you can simply design your own look (a jpg img it can even be the same img as the original select element or if you wish you can model parts of it in css)
Then place a div on top of that image that div will contain the text which select element would usually contain
<div id="selectTxt" >
then set another div on top of that with the select element inside it.
<div id="transparentSelect" class="transparent">
<select id="selectCar" name="selectCar">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</div>
Now the trick is to set the select element opacity to zero
you can do this by adding by adding a class transparent
and then applying the class to the div
.transparent
{
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}
now the element is hidden but when you click on it the list will still show up.
So the list will always look like the default list in the browser
now use js to extract the select value every time you click on the select
and set the inner html of selectTxt div to its value.
This way you get the text of the select on top of an image you want
you can make the image animated with the hover effect in css or with js
I also make a select that looks the same in all browsers but it doesnt work when you click directly on the arrow...
so its an inferior version but if you wish to look at it here it is
http://jsfiddle.net/fiddlerOnDaRoof/LM73V/
it also lacks the arrow image but you can print screen that from your browser
good luck
You should apply a CSS to reset the styles (not just for the inputs, this is a highly recommended practice for all element so that your page looks almost the same in all browsers) there are many, just google a little, for example this one, and then apply your desired styles (border color and width, background, etc...) take a look at this tutorial on how to style form elements