CSS Sandbox

by Aurelio Jargas (GitHub)
Help

Click on the CSS properties at the bottom to change the Sandbox appearance.

Point the "A" and "1." buttons to use Paragraph or List on the Sandbox.

Messed it all? Just Reload the page and start again.

Maximize your browser window and be happy.

 Ajuda

Clique nas propriedades do CSS (lá embaixo) para mudar a aparência da Caixa.

Passe o mouse sobre os botões "A" e "1." para usar Parágrafo ou Lista na Caixa.

Bagunçou tudo? Basta recarregar a página.

Aumente o tamanho da janela do navegador!

CSS Code
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
color:
  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • orange
  • purple
  • red
  • silver
  • teal
  • white
  • yellow
border-color:
  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • orange
  • purple
  • red
  • silver
  • teal
  • white
  • yellow
  • transparent
background-color:
  • aqua
  • black
  • blue
  • fuchsia
  • gray
  • green
  • lime
  • maroon
  • navy
  • olive
  • orange
  • purple
  • red
  • silver
  • teal
  • white
  • yellow
  • transparent
background-image:
  • none
  • url(image.gif)
background-repeat:
  • repeat
  • repeat-x
  • repeat-y
  • no-repeat
background-position:
  • left
  • right
  • top
  • bottom
  • center
background-attachment:
  • scroll
  • fixed
 font-family:
  • Verdana
  • Arial
  • Times
  • Courier
  • sans-serif
  • serif
  • monospace
  • cursive
  • fantasy
font-size:
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • smaller
  • larger
  • 8pt
  • 10pt
  • 12pt
  • 14pt
  • 16pt
  • 50%
  • 75%
  • 100%
  • 150%
font-style:
  • normal
  • italic
  • oblique
font-variant:
  • normal
  • small-caps
font-weight:
  • normal
  • bold
  • bolder
  • lighter
 text-align:
  • left
  • right
  • center
  • justify
text-decoration:
  • none
  • underline
  • overline
  • line-through
  • blink
text-transform:
  • none
  • capitalize
  • uppercase
  • lowercase
text-indent:
  • 0
  • 1em
  • 2em
  • 5em
  • -2em
line-height:
  • normal
  • 150%
  • 50%
letter-spacing:
  • normal
  • .2em
  • .5em
  • 1em
  • -.1em
word-spacing:
  • normal
  • .5em
  • 1em
  • 2em
  • -.5em
white-space:
  • normal
  • pre
  • nowrap
direction:
  • ltr
  • rtl
 border-style:
  • none
  • solid
  • double
  • dashed
  • dotted
  • groove
  • ridge
  • inset
  • outset
border-width:
  • thin
  • medium
  • thick
  • 0
  • 1px
  • 2px
  • 5px
  • 10px
  • 0.5em
  • 1em
  • 2em
padding:
  • 0
  • 1em
  • 2em
  • 3em
  • 4em
  • 5em
  • 1px
  • 5px
  • 10px
  • 25px
  • 50px
visibility:
  • visible
  • hidden
display:
  • none
  • block
  • inline
  • list-item
  • table
  • table-cell
cursor:
  • auto
  • crosshair
  • default
  • pointer
  • move
  • text
  • wait
  • progress
  • help
  • e-resize
  • n-resize
  • s-resize
  • w-resize
  • ne-resize
  • nw-resize
  • se-resize
  • sw-resize
 width:
  • auto
  • 50%
  • 75%
  • 100%
height:
  • auto
  • 50px
  • 100px
  • 200px
  • 50%
margin:
  • auto
  • 0
  • 1em
  • 5em
overflow:
  • auto
  • visible
  • hidden
  • scroll
float:
  • none
  • left
  • right
position:
  • static
  • relative
  • absolute
  • fixed
top:
  • auto
  • 0
  • 40px
  • 25%
bottom:
  • auto
  • 0
  • 40px
  • 25%
left:
  • auto
  • 0
  • 40px
  • 25%
right:
  • auto
  • 0
  • 40px
  • 25%
 list-style-type:
  • none
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-alpha
  • upper-alpha
  • lower-latin
  • upper-latin
  • lower-greek
list-style-image:
  • none
  • url(image.gif)
list-style-position:
  • inside
  • outside
<CODE>