more understanding on css transition

A transition occurs when a CSS property changes from one value to another value over a period of time. You can create CSS Transitions with the transition property: .selector { transition: property duration transition-timing-function delay; } The transition property is a shorthand of four CSS properties, transition-property, transition-duration, transition-timing-function, transition-delay. .selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition…

polygon in svg and css

in svg we can create triangle like below turns out in css, we have similar stuff called clip-path which take similar parameter and draw the shape. For circle/ellipse, it has specific function, circle and ellipse. We can do something like clip-path: circle(50% at 50% 50%); Or clip-path: circle(50px at 50px 50px) means at（50px, 50px），clip a circle with…

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…

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. HTML:

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…

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…

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…

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…

version compress css js with maven

One problem in release is the user still caches our resources that our new look/feel can not be presented unless user hard refresh the browser. To overcome this, several ways: 1. append a query string(like UUID) to the resource This is good if you want to user download a fresh copy each request. If we randomize…

page-break property in css

There isn’t an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before, page-break-after and page-break-inside. These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like. Properties page-break-before The page-break-before property adds a page-break before the element to which…

print the page without link

While print, we do not want those long links which makes the page not readable. add some style to the @media print should be able to achieve this. Some server (rails/java) is required to use a parent selector. The body element is perfect for selecting what should be the entire page.

The order of precedence for the various CSS selectors

The following list of selectors is by increasing specificity: Universal selectors * { padding:12px; border: 1px solid #be135f; } Type selectors textarea { background-color:#821b83; } Class selectors .badge { font-style:italic; } Attributes selectors The attribute selector is another selector that is now fairly widely supported. The attribute selector will style an element based on its attribute….