CSS
home esempi

1. introduzione
cos'è lo stile e perché è importante

2. dove si mette lo stile
in linea, incorporato, esterno
sintassi e classi

3. attributi del testo
font-family, -size, -style, -variant, -weight, -decoration

4. attributi dei margini, bordi e riempimento
margin, padding, border, width, float, clear

5. attributi di sfondo e posizionamento
position, background, visibility, overflow, z-index

6. effetti per MSIE
cursore, immagini, transizione,
scroll bar

7. effetti sui forms
position, background, visibility, overflow, z-index

 effetti per MSIE

MS ha sviluppato effetti che non sono stati ufficializzati.

forma del cursore

<DIV STYLE="cursor: forma del cursore; >...
</DIV>

forme del cursore: auto, crosshair, default, hand, move, text, wait, help, e-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize.

filtri sulle immagini

<IMG SRC="2.jpg" STYLE="filter: blur(enabled=1)">

filtri:

  • alpha: opacizza in %
  • blur: effetto sfuocato verso sx
  • light: effetto ombreggiato verso sx
  • wave: effetto ondulato
  • flip horizontal
  • flip vertical
con l'aggiunta di un po' di Javascript, si possono animare le immagini al passaggio del mouse:
esempi

transizioni

Gli effetti di transizioni possono essere in entrata (page-enter) o in uscita (page-exit) di pagina.

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=secondi,Transition=n)">

transizioni:

  1. box in
  2. box out
  3. circle in
  4. circle out
  5. wipe up
  6. wipe down
  7. wipe right
  8. wipe left
  9. vertical blinds
  10. horizontal blinds
  11. checkerboard across
  12. checkerboard down
  13. random dissolve
  14. split vertical in
  15. split vertical out
  16. split horizontal in
  17. split horizontal out
  18. split left down
  19. split left up
  20. split right down
  21. split right up
  22. random bars horizontal
  23. random bars vertical
  24. random
esempi

scrollbar

Le scroll bar sono una proprietà di BODY: 

BODY {
scrollbar-face-color:#CC9999;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFCCCC;
scrollbar-darkshadow-color:#660000;
scrollbar-shadow-color:#996666;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#FFCCCC;
}

esempio