In sostanza: no, non v'è un modo per ottenere questo usando solo i CSS.
Ma, se questo viene osservato come un indovinello CSS (ti consiglio di non utilizzare la seguente soluzione in nessuna applicazione del mondo reale), potresti ottenere qualcosa di simile. Di nuovo, questo sarà completamente offensivo sia per HTML che per CSS.
Fondamentalmente si crea molto divs
, ognuno corrisponde a un "pixel". È possibile modificare e mantenere lo background-color
dopo lo stato :hover
utilizzando un (ancora un altro abuso) transition
trucco (ritardo pseudo-infinito).
Ecco una demo: little link. Prova a passare il mouse sulle parti in alto per vedere i "breadcrumb" che vengono disegnati mentre muovi il mouse.
I, ancora una volta, questo è esagerato e non dovrebbe essere utilizzato in nessuna applicazione reale.
Questo può essere espanso per creare un piccolo programma di pittura usando CSS. Ho fatto un po 'dabblet per illustrare: another little link (provate disegno cliccando e spostando il mouse!)
La linea di fondo: Usa JavaScript - è l'unico resort in questo caso (non si può controllare un canvas
senza JavaScript).
Non è possibile utilizzare la tela senza javascript. –
@dystroy Peccato, ma grazie per aver chiarito! Quindi penso che sia il mio unico modo per conoscere il canvas HTML5 e crearlo usando la soluzione canvas JS/HTML5. – Atadj
Certo che è possibile. Gli eventi del mouse forniscono informazioni sul cursore in tempo reale e la tela consente di dipingere linee corrispondenti. Consiglio di investire un po 'di tempo in un tutorial su tela. –