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…

how browser render a page with html/css/js

Basic steps: 1. DNS get the IP. Then send http/s request to the server to fetch the page content. 2. On getting the content, download the resources(css/js/images) and try to render it. Note: the render process would not begin before css is all downloaded since it does not make sense to render something without konwing…

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.

disable obfuscation in gwt css resources

Option 1 setting in gwt.xml use the the code that generates the aforementioned  very  long class names is present in the computeObfuscatedNames  method of com.google.gwt.resources.rg.CssResourceGenerator  class: Retaining the original class names is a very useful tool while development. (obfuscation is ideal for only production) Unfortunately, you can not override the above method which means we are stuck…

Learning To Use The :before And :after Pseudo-Elements In CSS

Reference for Pseudo class  and  Pseudo element What Does A Pseudo-Element Do? A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted. The word “pseudo” is a transliteration of a Greek word that basically means “lying, deceitful, false.” So, calling them pseudo-elements is…

multi level css class selection

div.high>div.middle>div.low { border: 1px solid #a8a8a8; } That means “a div with a class of low, which is a child of a div with a class of middle, which is a child of a div with a class of high”. <div class=”high”> <div class=”middle”> <div class=”low”> </div> </div> </div>

CSS Attribute Selectors

Attribute Selectors An attribute selector allows you to style an element based on the existence, value or partial value of a specific attribute. Operator: none Description: Using an attribute selector with no operator will select all the elements that contain that attribute. (CSS 2.1) This example would look for all a tags that have the “rel” attribute…

white space missing in css GWT 2.4

GWT 2.4 will eat white space inside css prpperties. For exapmle     It will eat the spance between #6d6d6d and 0%, also that between #494949 and 100%. This would cause the property invalid. What’s more, due to the invalidation of the background property, the text-shadow would not appear in the client side css because it is…

LESS css notes

Per my understanding, 4 best features of LESS are: Variables Mixin (and Parametic  Mixin) Programmatic css (method class) Nested rules   Getting Started To make sure your LESS code compiles correctly, throw the following code into the head of your HTML. 1 2 <link rel=”stylesheet/less” href=”style.less” type=”text/css”> <script src=”http://lesscss.googlecode.com/files/less-1.0.21.min.js”></script&gt; Notice that the typical rel=”stylesheet” has become rel=”stylesheet/less” and that…

css scroll changing picture trick

The markup Each image will need it’s only container. I’ve used a header div and a content div. <html> <head> … </head> <body> <div> … </div> <div> … </div> </body> </html> The CSS Now you assign each image as the background image of each div. The positioning should always be the same, and background-attachment should be set…

center a div in CSS

Here’s how to center a div: <div id=”divid” style=”margin-left: auto;margin-right: auto;”> Blah </div>