a*'s listography
user image

bookmarks:
listography GIVE A GIFT OF MEMORIES
FAVORITE LISTOGRAPHY MENTIONS
IMPORTANT NOTICES
MESSAGES
PRIVACY
login
sign up
explore
main  (356) ongoing  (38) archive    private  (17)

CONVERSIONS

Relative Units

  • 1em = 16px (if not specified by user)
    • ie., if user specifies default = font-size: 10px;
    • then, width: 30em; /* 300px */
    • and, font-size: 1.2em; /* 12px */
    • NOTE
      • em can be dangerously have a compounding effect, so best if you use:
      • REM Unit
        • stands for "Root Em", always represents font-size of the root elements of the page, w/c is usually the HTML element.
        • ie. html {font-size: 1em;}
        • .box {font-size: 2em;} /*32px*/
        • p {font-size: 1.2em;} /*19.2px*/
        • doesn't compound here.
  • 1 px = 1/96th of an inch
  • 1 ex = x height of the character "x"

Absolute Units

  • 1 pc = 12pts or 1/6"
  • 1 pt = 170sec of an inch

CSS3 REMINDERS

:after and :before

  • :after {
  • content: ;
  • }

STRINGS

  • in order to use "" or '' within "" or '' use backward slash before each "".
    • ie " show the \ "quotations \ " within quotations "
    • result: " show the " quotations " within quotations "
  • in order to use \ within quotes use \\
    • ie " \\ show the \"quotations\" within quotations \\ "
    • result: \ show the "quotations within quotations \

FONT

  • font-variations : small-caps;
    • small-caps is NOT equal to lower case. It's actually a smaller version of the uppercase! (Didn't know that!)
  • font (shorthand property):
    • font: [font-style] [font-variant] [font-weight] [font-size] [font-family]

TEXT EDITS

  • shadows
    • for the letterpress look:
      • text-shadow: 0px 1px #fff;

LAYOUTS

ROUND CORNERS

  • 2 values background-radius: (ᒥ ᒧ) (ᒪ ᒣ);
  • 3 values background-radius: (ᒥ ) (ᒪ ᒣ) ( ᒧ);

BORDER-IMAGE

  • God fucking damn, I can't fucking understand this shite!!
  • 4 sides, 4 corners, and a center.
  • border-image-slice: [move left/right for the width] [move up/down for the height];
    • % (relative to the image)
    • px (relative to the border px)

FONT SIZES

PT Sans

  • .body - 18pts
  • h2 - 32pts
  • h3 - 21.28 pts
  • blockquote:before - 72 pts ???
  • code - 16 pts
  • @media queries
  • @media screen and (max-width: 599px) {
  • body {
  • font-size: 1em;
  • }
  • .wrap {
  • max-width: 85%;
  • }
  • }
  • @media screen and (min-width: 980px) {
  • .wrap {
  • max-width: 600px;
  • }
  • }

PICTOGRAMS

VERTICAL RHYTHM

TYPOGRAPHY

FOR LINEAR GRADIENTS

  • For Safari +180 because the deg for safari is reversed from Chrome & Firefox.

FOR RADIAL GRADIENTS

jun 26 2013 ∞
aug 20 2013 +
our listography guide about privacy terms contact