L'elemento <canvas> di HTML5 è un elemento un pò particolare perchè nasce con lo scopo di crearci animazioni dentro.
In generale, quindi, deve avere un'altezza e una larghezza precise.
In alcuni casi potrebbe essere necessario fare in modo che sia automaticamente all 100% rispetto all'elemento in cui si trova.
Abbiamo due possibilità.
Twitter Bootstrap è un framework basato su Javascript / jQuery e CSS che offre parecchi controlli preimpostati.
Molto semplice da usare, leggero e anche responsive se si vuole.
Lo sto usando con soddisfazione su diversi ormai!
Volendo è anche possibile personalizzare il CSS.
Ci sono due modi per farlo, oltre ad editare direttamente i CSS ovviamente.
Un primo strumento ce lo offre il sito stesso: Customize.
Solo che questa pagina è abbastanza statica in quanto non da una preview delle modifiche.
Ho trovato questo sito molto interessante: GenerateIt.
In pratica questo servizion , gratuito e che non richiede iscrizione, è in grado di generare automaticamente molti "contenuti" o cose utili per il web.
Nella sezione Image troviamo bottoni, gradienti, email, QR code, ecc.
Twitter Bootstrap è un framework Javascript e CSS leggero e pieno di funzionalità interssanti.
Tra queste, però, gli manca un datepicker.
Lo possiamo integrare però attraverso un plugin esterno scaricabile da qua.
Una volta scaricati entrambi, aggiungiamoli alla pagina:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
<link rel="stylesheet" href="bootstrap/css/datepicker.css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/script.js"></script>
Questi sono i JS e i CSS che ci servono; script.js è dove metteremo il codice per impostare il datepicker.
Ho torvato un sito molto interssante, che in pratica ci mostra tutte le informazioni sul colore che noi gli diamo.
Possiamo ricercare i colori in vari modi, tipo:
Questa operazione a rigor di logica è facile, da applicare non lo è sempre e spesso ci si impicca.
Vediamo se riusciamo a spiegarlo in maniera facile
Partiamo da una pagina HTML di base:
<html>
<head>
<title>Centro Assoluto del DIV</title>
<link media="screen" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="top"></div>
<div id="centroassoluto">
IL TUO CONTENUTO
</div>
</body>
</html>
Il div centroassoluto è quello da posizionare a centro pagina.