polygon in svg and css

in svg we can create triangle like below

<svg height="210" width="500">
  <polygon points="200,10 250,195 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  Sorry, your browser does not support inline SVG.

turns out in css, we have similar stuff called clip-path which take similar parameter and draw the shape.

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

For circle/ellipse, it has specific function, circle and ellipse.

We can do something like

clip-path: circle(50% at 50% 50%);
clip-path: circle(50px at 50px 50px) means at(50px, 50px),clip a circle with radius 50px.

More example here.

Or a 中文文章

debug hover item in chrome devtools

Chrome devtools is our friend, always.

Today when I was developing an angular 4.x app with primeng library, i have to check the class set on the tooltip component. As we know the tooltip is hover event based, so if we hover on it to make it showup and then shift our focus to the dev tool element tab, the tooptip would disappear.

Chrome tool has a feature to activate the hover stuff(:hover) on specific element for CSS sake. It is quite handy but obviously it does not apply in this use case since this tooltip is js based.

Search around and finally find a solution: using F8 or CMD + \ which is pause the script execution.

Steps are quite straightforward:

Mouse over the tooltip, and press F8 while it is displayed.

Now you can now use the inspector to look at the CSS.

Long Text Wrapping in ie9/10 inside table td

Both IE 9 and 10 seem to have problem wrapping long text inside table td element, even we explicitly set the the word-wrap CSS property.

Turns out the solution is we also have a set with and table-layout css to the wrapping table.

/* Both of them are Necessary.*/
.long-text-table {  


<table class="long-text-table">
   <div class="long-text-wrapper"> REALLY LONG TEXT NEED TO WRAP</div>

3d css with perspective and transform rotate

The perspective CSS property gives an element a 3D-space by affecting the distance between the Z plane and the user.

The strength of the effect is determined by the value. The smaller the value, the closer you get from the Z plane and the more impressive the visual effect. The greater the value, the more subtle will be the effect.

Important: Please note the perspective property doesn’t affect how the element is rendered; it simply enables a 3D-space for children elements. This is the main difference between the transform: perspective() function and the perspective property. The first gives element depth while the later creates a 3D-space shared by all its transformed children.

 * Syntax
 * perspective: none | &lt;length&gt; 

.parent {
    perspective: 1000px;

.child {
    transform: rotateY(50deg);

Here in the bottom is the some other examples to create cool 3d with hover (transform: rotate(0))effect.

target pseudo class in css3

Basically the :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

we can define ‘:target’ for general purpose.

We can also use it with other css selectors to define specific matching rules.

So if we have a http://www.abc.com/index.html#myHash and in the css we have myHash:target{something}

Then the something will be applied to the id=myHash div or whatever container when the anchor <a href=’#myHash‘></a> is clicked.



Psuedo class is good for creating css only modal window. And here is the fiddle.

W3School has some good example about :target.

some other example in css-tricks

This is an interesting way of building modal with JS using IIFE and in an OO way.


transition vs animation in css

CSS animation is definitely the next big step in CSS. Absolutely amazing things can be done with this. It is literally up to your imagination, as you’ll come to realize if you don’t already understand how CSS animations work. HTML5 and javascript continues to replacing what Flash was previously used for, and similarly CSS continues to replace functionality javascript was used to provide. In this article we’re going to cover the CSS animation basics and make sure we’ve learnt it well enough to add it to our development-toolbox.

So, what’s the difference between the Transition property and the Animation property?

There are two basic differences:

  1. The first major difference is that transitions only have a ‘to’ and ‘from’ state. Transitions also only effect once a pseudo class (such as :hover, :focus, :checked, etc) is triggered or removed.
  2. The second notable difference between animations and transitions are @keyframes. Transitions only have two @keyframes (the ‘to’ and ‘from’ states), but animations can have an endless number of @keyframes. The keyframe positions are set with percentage values. You could make a ball spin and bounce up and down with only few lines of CSS (Sort of. Since you’ll have to do everything multiple times with vendor prefixes, the CSS gets quite a bit longer).

Animation syntax

The animation property and keyframes go hand in hand. The animation property’s ‘values’ are the element-to-be-animated’s options and the keyframes are the actions it should follow.

A simpler way to put it is:

Animation: How to animate – duration, speed, etc.
Keyframes: The properties to animate – From/To.

The following animation property is shorthand for the various CSS properties which will be covered later in this section.

#element { animation: name duration timing-function delay iteration-count direction; }
@keyframes name {
     0% { property: value1; }    //Start of animation duration
     35% { property: value2; }   //35% through the animation duration
     100% { property: value3; }  //End of animation duration


The name of the animation. This value links the animation properties to the keyframes. This value is required, without this the keyframes can’t be referenced.


The time it takes for the animation to complete in seconds.


Supported timing-function keywords are: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end. The cubic-bezier() CSS function is supported by animation-timing-function and can be used to create custom timing-functions.

If left out, this property defaults to ease.


The amount of time, in seconds, waited before the animation begins after the animation has been applied to the element.

If left out, this property defaults to 0s.


The amount of times the animation should run. Negative values are treated as 1 and fraction values play that fraction of that animation. For example 1.5 will play through the animation 1 time and stop halfway through the second iteration. “infinite” does what you’d imagine, it doesn’t stop the animation.

If left out, this property defaults to 1.


The direction of the animation. This property has 4 values: normal, alternate, reverse, alternate-reverse.

The “normal” state would play through the keyframes from the lowest percentage to the highest. This property can be set to “reverse” where it will play from 100% down to 0%.

“alternate” runs the animation in reverse every second iteration, so the animation goes from 0% to 100% the first time and then from 100% to 0% the second time and repeats that pattern. This is property gives the effect that the animation doesn’t restart.

“reverse” runs the keyframes in reverse, for example it begins at 100% and ends at 0%.

Lastly, “alternate-reverse” begins at 100% and reverses every second iteration.

If left out, this property defaults to ‘normal’.

CSS Keyframes

Along with the animation-name, keyframes are the most important aspects of CSS animations. Keyframes are the animation instructions.

Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The “from” keyword references 0% and the “to” keyword references 100%. Functionally the following is identical:

@keyframes example {
    0% { bottom: -90px; right: -40px; }
    100% { bottom: -90px; right: -40px; }
@keyframes example {
    from { bottom: -90px; right: -40px; }
    to { bottom: -90px; right: -40px; }

Quick demonstration based on the previously covered properties


In the above example I’ve made use of:

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-iteration-count

The 4 “ball” keyframes are telling the element to animate through each of the 4 keyframes within 6 seconds, while making use of a the boring ‘ol linear timing-function and to do this indefinitely.

As you can see, the keyframes syntax is similar to the media query syntax (And SCSS!) – which most people have been exposed to. Hopefully that makes you feel more at home!

That’s really all there is to it. Let’s go over a more detailed tutorial to make this even more digestible.

Simple tutorial

First we have to come up with a cool animation idea. I’m a big fan of Paul Irish (and you should be too) so I’m going to do some sort of animation involving him.

I’ve taken this image and cut out the arm quite badly, so I have two images. The plan is to layer the arm on top of the larger image and animate it.
First we need to define the html



Next, the CSS

#paul {
   background: url(../img/paul-bg.jpg) no-repeat left top;
   height: 450px;
   margin: 0 auto;
   overflow: hidden;
   width: 600px;
   position: relative;
#paul .arm {
   animation: pumping-iron 2s ease-out alternate infinite;
   position: absolute;
   right: -40px;
   bottom: -90px;
@keyframes pumpingIron {
    0% { bottom: -90px; right: -40px; transform: rotate(20deg); }
    100% { bottom: -20px; right: 70px; transform: rotate(-20deg); }

So a recap of the above CSS:

  1. Set the basic properties to #paul
  2. Absolutely position .arm and set the animation property with the relevant values. I’ve named the animation “pumping-iron”, set the animation-duration to 3s, used the boring-old linear timing-function and set the loop to infinite because Paul never gets tired of pumping-iron.
  3. Keyframe #1 sets the starting position of Paul’s arm and keyframe #2 sets the end position. The animation-direction value “alternate” tells the animation that once it has completed, it should alternate the keyframes. This brings the animation back to the starting position. The animation-iteration-count value “infinite” tells the animation to continue forever.

You would really feel the vendor-prefixes on this one. A prefix on the @keyframes means you duplicate that entire keyframe section 5 times! Looking at the prefixed version of animation and @keyframes is definitely intimidating, but as long as you realize it’s just CSS bloat you should be fine. Let’s take a look at this for visual reference… Be prepared:

#paul .arm {
    -webkit-animation: pumping-iron 2s ease-out alternate infinite;
    -moz-animation: pumping-iron 2s ease-out alternate infinite;
    -ms-animation: pumping-iron 2s ease-out alternate infinite;
    -o-animation: pumping-iron 2s ease-out alternate infinite;
    animation: pumping-iron 2s ease-out alternate infinite;
@-webkit-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -webkit-transform: rotate(20deg); }
    to { bottom: -20px; right: 70px; -webkit-transform: rotate(-20deg); }
@-moz-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -moz-transform: rotate(20deg); }
@-ms-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -ms-transform: rotate(20deg); }
@-o-keyframes pumping-iron {
    from { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; -o-transform: rotate(20deg); }
@keyframes pumping-iron {
    from { bottom: -90px; right: -40px; transform: rotate(20deg); }
    to { bottom: -90px; right: -40px; transform: rotate(20deg); }

And now for the final product!


Cross Browser compatibility

To quote HTML5Please: “For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.”
Currently all modern browsers and/including IE10 support CSS animations with a vendor prefix. Next time you come across an animation you need to add, use CSS animations and either fall back to no animation or use Modernizr to detect for the support and fall back to the javascript you would have added anyway. Viva la progressive enhancement.

…And because Modernizr is so damn cool and simple to use I’ll briefly explain how exactly to make use of this feature detection and fallback option.


Modernizr adds various classes to the HTML element depending on whether the browser supports a feature or not. You could make use of classes such as .boxshadow, .no-boxshadow, .borderradius, .no-borderradius, etc. This puts the power of feature detection right into the CSS which is great and easy to make use of. You could also do more intricate feature detection by using their Modernizr javascript object.


I think you should all be using CSS animations right now, provided you include the vendor-prefixed versions and have a decent fallback for non-modern browsers.


From here

And the MDN’s animation example 

Another step by step guide for keyframe css animation

Bootstrap 3 Grid system

cascades up grid definition

The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.

For example, let’s say you want a site that has:

  • 1 column on extra small devices
  • 2 columns on small AND medium devices(6 6….)
  • 4 columns on large devices(3 3 3 3…)

Since the grid system now cascades up from mobile devices, this is how this code will look.

<div class="row">
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.
    <div class="col-sm-6 col-lg-3">
        This is part of our grid.

We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.

Grid Size

You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

.col-xs-$ Extra Small Phones Less than 768px
.col-sm-$ Small Devices Tablets 768px and Up
.col-md-$ Medium Devices Desktops 992px and Up
.col-lg-$ Large Devices Large Desktops 1200px and Up

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.

From here where provides more example for things like make certain content only viewable in lg using ‘visible-lg‘.