Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Guida ad HTML5: multimedialità, realizzazione di un player video (2/7)
Scritto da Pellegrino Principe il 15-10-2010 ore 09:35
Intel Cluster Studio XE
Vediamo, in quest’articolo il presentation layer dell’applicazione SimplePlayer, ovvero com’è stato strutturato il file CSS player.css visualizzando solo gli aspetti più importanti della sua implementazione:
  1. .vc
  2. {
  3.     border: thin dotted #000000;
  4.     position: absolute;
  5.     width: 600px;
  6.     height: 400px;
  7.     top: 10px;
  8.     left: 10px;
  9.     background-color: #153A54;
  10. }
  11. #controls
  12. {
  13.     border: thin solid #000000;
  14.     position: absolute;
  15.     width: 600px;
  16.     height: 36px;
  17.     top: 413px;
  18.     left: 10px;
  19.     background-color: #0578Af;
  20.     border-radius: 15px;
  21.     -moz-border-radius: 5px; /* compatibilità per Firefox */
  22. }
  23. div[id~="track"]
  24. {
  25.     border-width: 1px;
  26.     border-color: #000000;
  27.     position: relative;
  28.     width: 380px;
  29.     height: 49px;
  30.     border-bottom-style: dashed;
  31.     font-family: Tahoma;
  32.     font-size: 13px;
  33.     color: #FFF;
  34.     line-height: 40px;
  35.     background-color: #0578AF;
  36. }
  37. div[id~="track"]:hover
  38. {
  39.     cursor: pointer;
  40.     background-color: #094C93;
  41. }
  42. div[id=controls] > div
  43. {
  44.     background-repeat: no-repeat;
  45.     width: 32px;
  46.     height: 32px;
  47.     float: left;
  48.     margin: 3px;
  49.     font-family: Tahoma;
  50.     font-size: 12px;
  51.     text-align: center;
  52.     line-height: 25px;
  53.     color: #FFF;
  54.     opacity: 0.7;
  55. }
  56. div[id=controls] > div:hover
  57. {
  58.     cursor: pointer;
  59.     opacity: 1;
  60. }
  61. #c_start
  62. {
  63.     background-image: url('img/control_start_blue.png');
  64. }
  65. #c_rew
  66. {
  67.     background-image: url('img/control_rewind_blue.png');
  68. }
  69. ...
Il div relativo ai controlli ha un selettore di tipo ID denominato controls, che permette di arrotondare i suoi bordi con la dichiarazione standard per i CSS 3 border-radius, e una dichiarazione supplementare specifica per Firefox, che utilizza il prefisso –moz (non più necessaria con il motore Gecko 2.0 implementato in Firefox 4).

È stato poi utilizzato il selettore, basato su un valore di attributo parziale (spaced list), div[id~="track"] che consente di applicare per tutti i div rappresentanti le tracce della playlist la stessa serie di dichiarazioni. Infatti, esso consente di selezionare tutti gli elementi il cui attributo è composto dal valore indicato, separato da uno spazio, e infatti la regola esposta seleziona i div che hanno un id contenente il valore track, separato da uno spazio.

Infine, lo stesso selettore con l’aggiunta della pseudo-classe dinamica :hover consente di cambiare, quando l’utente posizionerà il mouse su di una traccia, il cursore del mouse e il suo colore di sfondo. Per quanto attiene, invece, ai div dei controlli (play, pause ecc.) si è utilizzato il selettore, basato su un valore di attributo esatto con relazione di discendenza padre-figlio (direct child), div[id=controls] > div, che ha consentito di applicare una serie di dichiarazioni — opacity, background-repeat ecc. — per tutti i div (c_start, c_rew ecc.) figli diretti del div controls.
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Utilizzare la classe BlockingCollection nelle applicazioni .NET parallele
Successiva: Il futuro sistema operativo made in India
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.254 secondi.