Skip to main content

Some CSS resources and quick notes


CSS is something we all pre assume that we know and can code, think again.

Following are some quick notes you can refer, post your comments for further discussions.

--------------------------------------------------------------------------------------

Z index is the order of stacking, ie placing of elements one over another

font size: em are preferred over pix for device compatibility

font-variant: small-caps

text-transform: uppercase;

text-align: justify or center

text-indent: 1em(can also be negative)

curning is changing the letter spacing to make text more readable

letter-spacing: 1em

word space:

line-height: 1,6 (times the size of normal font)


box model: from outside

1) margin
2) border - width, style, color
3) padding
4) width(inside)

facts: if a propery is not declared, don't assume the value is 0
elements often have default margins that you need to account for

a 100% width property when combined with padding and borders will create elemenst that are larger than their parent.


Margins and padding

Padding: top right bottom left


background: gardient

hsl model in CSS3 - hue saturation and lightness

units: absolute values: in, cm, mm, pt, pc

relative units: em, exes, px, gd, rem, ch, vm, vh

---positions

normal , element and absolute positions

normal- when we do nothing and it is default

relative is with normal document flow

absolute does not follow the normal flow, and other elements occupies the space of that moved element

fixed no movement

element stacking-z index

---floats- float left , clear both


whats new in css3

border radius, box shadow,  multiple backgrounds, rgba hsla, text shadow, multiple columns, web fonts, css gradiant. transforms, transitions, animations

animations and transitions are not same

---vendor prefixes ---

cross browser syntax like moz, opera, webkit


popular CSS framework ---
blueprint -- www.blueprint.org

52 framework -- 52framework.com

960gridsystem -- http://960.gs
filter

YUI2 framework -- developer.yahoo.com

CSS boilerplate -- code.google.com

baseline -  advance typographic styles



for prepocessors

less-- lesscss.org and sass -- sasslang.com

turbine , switch css, css cacheer


css editors

notepad++

improvingcode.com/snapcss

v imp -- rapid css -- bluementals.net

simple css- hostm.com/css

stylemaster -- westsiv.com


IMP - stylizer -- skybound.ca

coffecup


-----online tools for css-----

css3generator.com

css3.me

css3please.com

layerstyles.org

css3.milkplate.com

css3maker.com

colorzilla.com/gradient-editor/

westsiv.com

validator.w3.org

csslint.net


alvit.de/handbook

reference.sitepoint.com/css

css-tricks

typetester.org

kuler.adobe.com

colorzilla.com/gradient-editor/

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

STRESS MANAGEMENT

STRESS Stress is an unpleasant fact of life.  We all experience it for various reasons,  and we all try to come up with ways of  coping with it—some with more success  than others. So what exactly is stress  doing to your mind (and body)  when you're staring down a deadline?  And what can you do to power through it? What Stress Actually Does  to You and What You Can  Do About It The real problem with stress is that, for such a well  understood and universally experienced condition,  as a society we deal with it so poorly that it leads  to many of our most lethal illnesses and  long-term health problems. High blood  pressure, heart disease, cancer, stroke,  obesity, and insomnia are all medical  conditions across the spectrum that  can be related to or directly influenced  by high stress as an environmental conditio...
Post a Comment
Read more

SugarCRM Footer Logo Remove

Hi Googler, Let us discuss about how to remove the SugarCRM Footer logo.. You all are aware of the power of the SugarCRM Tool and also must be very eager to remove the footer in order to make it look more professional. So below mentioned are some tricks for removing the footer from SugarCRM Community edition. 1) O pen-modules/Administration/ updater_utils.php Add-exit() ; in between function check_now() and return . By doing this u can remove 'powered by sugar crm' footer logo. 2) Go to modules/Trackers/Tracker.php, line 128, in the 'logPage' function. Drop the 'echo' statement. 3) Now to root(Sugarfolder)\include\mvc\view\sugarview.php and modify the line array(show header => true, show subpanel => true...........and so on) and make the changes to showfooter=>true to showfooter=>false And then enjoy by making it as your own built tool. As per the requests, make a reply and then I'll post the code and path to let you know how to write a cust...
10 comments
Read more

Jquery Carousels

Jquery Carousels we all love carousels they are a fantastic way to give the effects we want our visitors to have, more than that we have multiple components to show like images, links, text etc. There are lot many ways to achieve it, Jquery is ofcourse the best possible option available outside. We all search for lot of ems it can be Jquery Flexslider  or Jcarousel Lite  whatever you choose, customization is required, in this tutorial I am not going to focus on how to install these libraries rather one step ahead, to let you know how these carousels can be called multiple times in the same page having their controls working respectively for each carousel instance. So, lets get started with the HTML <div id="sideRight"> <div id="first">       <!-- Do not change the class and tag type, as this will remain as it is for all the following divisions-->       <p class="containheader">Plans for you <a ...
Post a Comment
Read more