Draw geometric shapes with pure CSS

Demo here.
I got intrigued by the possibility of css to render some primitive geometric figures.

How it works:

Square : just a plain border to a dummy element with equal width and height

Rectangle : Same as square with unequal width and height

Trapezium / Double Trapezium : Wonder how it works? border width is nothing but the thickness of that particular border side. If it is transparent, the space is allocated but border is not drawn.  Note that each side border is nothing but a trapezium by itself. By making the adjacent sides transparent, you get a trapezium.

Triangle : If the width of the element becomes zero pixels, the border converges and creates a triangle. Nice, right?

Diamond: Simply place upward triangle on top of a downward triangle.

Circle/Oval : We use border-radius property get a rounded square or rectangle. What if the border-radius is half the width? You get a perfect circle or oval depending on width and height of the html element.


Now that we can draw the basic figures, other complex figures can be drawn using a combination of these.  I found this page interesting. You get play with CSS shapes to create more complicated shapes. If you are in a rush and want some readymade styles look here.


 

Scrollable html table with fixed headers for displaying large table

Demo here

          We can easily make a table element scrollable by specifying overflow property to scroll and giving a fixed height. On scrolling down, the table headers scroll up and become invisible, by default. If the table is too large, and is being scrolled down, it is preferable to have the headers not scroll.

     

         To achieve this effect, we create two tables, one for displaying the header that would remain fixed and another for displaying the scrollable content. Overflow property now would be mentioned on the scrollable content.

Notes:

• table's border-collapse css property is set to collapse so the cell borders would be merged and only a single border will be shown
• column width of the two tables should match to give a single table feel.

Track mouse and display an html element around mouse

Demo here

How it works:

• Html (Have an html element that will be displayed around and move along with the mouse)
• CSS (Style the element that should move along with the mouse)
• by mentioning position as absolute, we can set the top, left property of an html element to position it anywhere on the page. More info here
• JS
• Register for mouse move event.
• In the mouse move event handler, get the mouse co ordinates
• Set the top and left of the element that should move along with the mouse

Notes:

• To display circle we set border-radius = 50% of width
• Elements can positioned freely on the page by mentioning top and left css properties only the position is set to absolute
• Mouse co ordinates can only be retrieved inside an event handler

css trick : Convert typed text to lower case, upper case or capitalize the text

Demo here

How it works: Use css property text-transform

 

Edit text inline with jquery

Demo is available here.

How it works:

• Wrap the editable content within a span and assign it a class
• Assign a click event handler to the class
• Click event handler returns immediately if it is already in editing mode
• Create a text input element and set its value to be the existing html of the editable element
• Replace DOM of the editable element with text input
• Assign the text input a blur event handler
• Blur event handler will get the value of the text element and replace DOM of the editable element with it.

Assigning the editable element a class is not done for styling it but rather to select it.
We could have assigned it an id and written an event handler for the id. The disadvantage with this approach is that we have to duplicate the code if we want multiple elements to be editable. Assigning it a class achieves this.