JSFiddle

viphalongpro's public fiddles

• Cut image into cells and flip each cell.

  This demo demonstrates how to cut some image into cells and allow to flip each cell on click.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Styled caret project (completing...)

  This demo tries to implement a caret which is stylable (you can style it to whatever you want). The approach here is to cover the default black caret (to hide it) and place a mimic blinking caret exactly at the position of the default caret. It's not perfect but it's acceptable in some use cases, especially in a single line input field. This demo is still being completed.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Bubbles in a box (without collision between the bubles)

  This demo demonstrates how to create bubbles bouncing against the edges of a box (but do not collide each other) using the animate() method in jQuery. Because of using that method, implementing collision detection is something hard to do.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Get charater under mouse cursor (by wrapping each one in a span) and insert some virtual text caret after it on click.

  This demo demonstrates how to get a character under a mouse cursor (in onclick event handler), then insert some virtual text caret (not blinking) after that character.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• X-letter (2 halves of a letter with different styles)

  This demo demonstrates how to make an effect in which a letter has 2 different halves with different styles (color). It uses a popular technique to customize each character (called overlaying). The interesting thing in this demo is it supports a little italic font (for arial) using some transform and the overflow clipping technique.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Fieldset with 2 legends (one on the left and the other on the right).

  This demo demonstrates how to build 2 legends for a fieldset. The simple trick is to use display:table for the legend, expand its width to 100%, add :after element for the left legend (the left cell) to render the middle line (connecting the 2 legends). With this solution, you can have some background behind.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS arrow tab using Overflow Cliping Technique

  This demo demonstrates how to create a right arrow (with angle of 90deg) using the Overflow Clipping Technique. The most important note is you have to choose the correct transform origin (to rotate), that is the right-middle of the inmost :before element (as well as the left-top of the DIV inner-arrow. If choosing the center point, we have to calculate many values (top, left) each time changing the width and height of the arrow.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS pyramid with 5 faces.

  This demo demonstrates how to build a pyramid using pure CSS (the transforms with perspective and 3d style). The most important note is we need to set transform-style to preserve-3d for a container if it contains some element (including pseudo-elements) which is effected by some transform. Otherwise, we can't have a 3d effect.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Flying flag effect.

  This demo demonstrates how to create a flying flag effect applied on an element with image background using mostly the CSS animation plus some jQuery (less but important). The idea is to fragment the image into many flag elements (with width of 1px and applying different background-positions) and animate the top alternately with different delays. Note that this effect consume fairly much CPU usage so use it when it's really necessary and the smaler the image is, the lesser CPU usage is consumed.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• A little of using Range to modify DOM

  This demo demonstrates a litlle of using the Range object. Specifically, it finds all the d's and wrap a SPAN element around each one to style with a color of blue. The algorithm is fairly complicated because of the nested structure of arbitrary level contained by the outer div. We have to deal with the TextNode only when using Range in this case, hence the complexity.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Yet-another arrow tabs using pure CSS (using skew transform)

  This demo demonstrates how to create yet another arrow tabs using pure CSS. The idea is not based on using CSS triangle (with border trick) but using the skew transform. With this trick, you can apply a distinct border to the arrow tabs while using border trick can't help us achieve this effect.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Make an element focusable (Example with a custom CheckBox from a focusable label)

  This demo demonstrates how to make an element focusable. By default there are many elements which is unfocusable such as label, div, span... However we have a trifle trick to make them focusable. We just need to add the attribute contenteditable then set the font-size to 0 to hide the caret. It's totally fine in many cases but in some cases we may have to add further script to prevent keystrokes.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Custom ordered bullet using :before and CSS counter.

  This demo demonstrates how to customize the ordered bullets. You can set the list-style to none and style the :before pseudo-element with the content got from CSS counter (which will hep us number the list items correctly).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Apply blur effect on just a part of a div (webkit-based browsers only)

  This demo demonstrates how to apply the blur effect on just a part (a circle or a rectangle) of an element. Again we use Overflow Clipping technique and some other tricks. This demo also has some jQuery script allowing user to move the blurred part around the whole element using mouse.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Render line by coordinates using jQuery.

  This demo demonstrates how you can use script (jQuery) to make a function called drawLine(x1,y1,x2,y2) to draw a line like as a familiar drawLine function in some graphics library. This function just creates elements (to mimic a line) with appropriate CSS style set.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Vertically center placeholder text using pure CSS.

  This demo demonstrates how to center the placeholder text vertically, normally it is vertically centered by default but when we reduce the font-size of the placeholder text, it will be aligned to top which looks ugly. So we have a simple solution to solve this.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS Triangle using Overflow clipping technique.

  This demo shows an example of creating a triangle using overflow clipping technique. We all know about the famous CSS triangle trick using border, it's very simple but we can't apply background-image and creating a border around is something hard to do. This CSS triangle is different, it can show background-image and render borders. However it's much more difficult and tricky to setup the properties (requires trial and error).

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS Hexagon (the best solution using circular core element)

  This demo is another version of pure CSS Hexagon (the other version uses a rectangular core element) but this uses a circular core element. It allows us to create the Hexagon much more easily with shorter and simpler CSS code.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Pure CSS Hexagon (created from 4 rectangular DIVs)

  This demo demonstrates how to create a Hexagon using a very powerful technique in CSS called Overflow Clipping (overflow:hidden). We have a core element and clip this element using some clippers so that we have the desired shape. Of course we have to position and transform the clippers appropriately.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Cutting off an image by a large curve using overflow:hidden

  This demo introduces to you an interesting technique to clip off some element based on a curve. With this kind of technique, you may find out many ways to clip off an element.

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 2
• 3
• ▶︎
• 4