viphalongpro's public fiddles
-
Custom radio button using pure CSS (Cross-browser, single line support only)
This demo demonstrates how to create a custom radio button using pure CSS, this version has short HTML and CSS code but only supports single line text.
-
Custom radio button using pure CSS (Cross-browser, multiline support)
This demo demonstrates how to create a custom radio button which renders OK on all the browsers. It also supports multiline label text (auto wrap text).
-
Custom radio button using pure CSS (not work for IE and FireFox)
This demo demonstrates how to customize a radio input field using pure CSS. The point is we use the appearance property to hide the default look & feel of the radio input field and style it normally. It's fortunate that we can also use :before on a radio input field.
-
Some implementations of base conversion (between Dec, Hex, Bin and Oct)
The demo introduces a new approach to solving the base conversion problem. We base almost on BIT operations to solve it (not by integral division and Modulo division).
-
Fake solid background for each digit (backgrounds separated by a transparent pipe)
This demo demonstrates a simple way to use only 1 background of the parent element to mimic the backgrounds for all the digits contained in that element. Check out the demo to see it in action.
-
Fade in/out placeholder for input field when losing focus/getting focus.
This demo demonstrates how you can style the placeholder to make it fade out when focused and fade in when losing focus. There is a little tricky related problem which has been described as a comment in the javascript code area.
-
Different ways of modifying style using script.
This demo demonstrates how to modify the style in many different ways as well as the popular ways using pure Javascript.
-
Using radial-gradient background to mimic dotted lines in notebooks.
This demo demonstrates how to use radial-gradient background to mimic the dotted lines that you can see in notebooks. It allows us to generate such a background easily with some abilities to vary the space between dots and between lines.
-
Gradually faded background (top to bottom) using box-shadow.
This demo demonstrates how to use the box-shadow applied on the html element to create a bottom faded background. We can create the same (even better) effect using multiple backgrounds feature in which we apply the linear-gradient background as the first (to make it on top), the image as the second. However the multiple-backgrounds feature is not supported by all versions of all browsers, in such a case using box-shadow trick may still work.
-
Dealing with TABLE using Javascript
This demonstrates some basic dealings/handlings/manipulatings to the TABLE object using pure Javascript.
-
Direct mouse event to the underlying element.
This demo demonstrates how to direct mouse event through an element to the underlying element using dispatchEvent
-
Arrow tab buttons using pure CSS
This demo uses :before and :after pseudo-elements combining with CSS triangle trick to create pure CSS arrow tab buttons.