Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Emilia Romagna - Modna
    Messaggi
    51

    Come applicare effetto fascia semi trasparente a un video con CSS inline

    Come applicare effetto fascia semi trasparente a un video con CSS inline

    Ciao, in questa pagina
    http://www.cfsystem.it/sushi_video_bis.htm
    ho tentato (invano) di applicare l'effetto visto in questa pagina
    https://www.w3schools.com/howto/howt...reen_video.asp

    Quello che non riesco a capire è come fare per far rimanere la fascia semitrasparente e i relativi testi, solamente all'interno del video e non andare al 100% della pagina (continuando ad usare eventuale CSS inline e non esterno).

    Mi sapreste spiegare come dovrei modificare il codice?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,542
    Ciao e Buon Anno, dovresti intanto inserire entrambi, elemento video e fascia, dentro uno stesso contenitore (che potrebbe essere un semplice div con una specifica classe per poterlo impostare da CSS) quindi applicare position:relative al contenitore e position:absolute (anziché l'attuale fixed) alla fascia; in questo modo la fascia sarà posizionata in modo assoluto rispetto al contenitore.

    Per i posizionamenti CSS può esserti utile seguire qualche guida, giusto per capire come funziona; consiglio di dare uno sguardo al capitolo 2 dei link utili css (discussione in evidenza) sotto la voce "Position".

    Fai magari qualche altra prova secondo queste indicazioni e fai sapere cosa riesci a tirarne fuori. Se hai ancora bisogno di aiuto chiedi pure.

    Buon proseguimento e, ancora, un sereno ventiventi
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Emilia Romagna - Modna
    Messaggi
    51
    *ma quanta manutenzione ... ho riscritto questo messaggio 3 volte...*

    Ciao @KillerWorm grazie per i link, perdona ma non riesco a sfruttarli,
    come dicevo, vorrei intanto riuscire con l'uso di eventuale css in linea (questo mi pare mi semplifichi la vita e la comprensione del codice ...)

    Ho tentato con <DIV></DIV> , contenendo il codice in tabelle,

    nei piccoli esempi riesco a "isolare" i vari pezzi di codice (https://www.w3schools.com/tags/tag_div.asp) e gli esempietti son chiari, ma se lo provo ad applicare nella mia pagina (http://www.cfsystem.it/sushi_video_bis.htm) non mi funziona nulla ...

    Ma perchè se aggiungo i DIV, la sfocatura se ne frega?

    Mi puoi fare la cortesia della "pappa pronta" & spiegata? (in linea) ...

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,542
    Quote Originariamente inviata da reggio
    *ma quanta manutenzione ... ho riscritto questo messaggio 3 volte...*
    Purtroppo non dici nulla di nuovo ad ogni modo ci sono e ci saranno dei cambiamenti, in primis il cambio di amministrazione. Sono fiducioso che qualcosa migliorerà a livello di piattaforma.

    Quote Originariamente inviata da reggio
    Ciao @KillerWorm grazie per i link, perdona ma non riesco a sfruttarli,
    Mi spiace che tu non riesca a sfruttarli ma ribadisco il consiglio di iniziare a "studiacchiare" qualche guida anche giusto per avere una infarinatura dei concetti riguardo l'ambito in cui vuoi mettere mano, altrimenti per chi vuol cercare di aiutarti diventa in salita dover spiegare da zero certi principi; della serie "aiutaci ad aiutarti".

    Quote Originariamente inviata da reggio
    Ho tentato con <DIV></DIV> , contenendo il codice in tabelle,
    Bene per il div contenitore, mentre le tabelle (inutile dirlo) ad oggi (come buona pratica del web design) sarebbe meglio non usarle per la costruzione del layout (può essere utile dare uno sguardo all'articolo Dalle tabelle al layout table-less)

    Quote Originariamente inviata da reggio
    nei piccoli esempi
    [...]
    non mi funziona nulla ...
    Nella tua pagina vedo che hai inserito il div contenitore ma non hai fatto il resto che ti ho indicato nel precedente post.

    Quote Originariamente inviata da KillerWorm
    dovresti intanto inserire entrambi, elemento video e fascia, dentro uno stesso contenitore (che potrebbe essere un semplice div con una specifica classe per poterlo impostare da CSS) quindi applicare position:relative al contenitore e position:absolute (anziché l'attuale fixed) alla fascia; in questo modo la fascia sarà posizionata in modo assoluto rispetto al contenitore.
    Quote Originariamente inviata da reggio
    Ma perchè se aggiungo i DIV, la sfocatura se ne frega?
    Perdonami ma non mi è chiaro di quale "sfocatura" stai parlando.

    Quote Originariamente inviata da reggio
    Mi puoi fare la cortesia della "pappa pronta" & spiegata? (in linea) ...
    Eccola...
    Aggiungi una classe al div contenitore (quello con dentro il video e la fascia). Ricorda che, in programmazione, per classi e id (o in generale per i nomi delle variabili) è buona pratica attribuire dei nomi autoesplicativi; potresti quindi avere una cosa del genere:
    codice:
    <div class="contenitore-video">...</div>
    In questo modo puoi "selezionare" questo elemento attraverso il css usando appunto la classe .contenitore-video (nota il punto iniziale che determina il fatto che si tratti di una classe)

    Quote Originariamente inviata da reggio
    in linea (questo mi pare mi semplifichi la vita e la comprensione del codice ...)
    Permettimi di contraddirti, la presenza di CSS in linea rende il codice confuso. Il "css in linea" (cioè quello definito direttamente nei tag attraverso l'attributo "style") è meglio evitarlo quando possibile, è invece preferibile mantenere il CSS separato dalla struttura HTML, usando file esterni o tutt'al integrandolo con l'uso di tag <style> (preferibilmente inseriti dentro <head> e non a zonzo nel <body>).
    Chiaramente queste sono delle buone pratiche per ottenere uno sviluppo e una gestione ottimale del codice.
    Potrei consigliarti vari altri articoli sull'argomento ma prendi per buon quanto ti sto indicando.

    Puoi quindi inserire un blocco <style>...</style> dentro l'elemento <head> del tuo documento, e definire qui tutte le regole. Se hai timore di confonderti, puoi usare dei commenti per le varie regole; fondamentalmente se usi dei nomi autoesplicativi sei già un passo avanti.

    Applica magari una classe (autoesplicativa) anche per il div della fascia. Ora è "content", puoi capire da te che una cosa come "fascia-video" sicuramente aiuta ad evitare confusione.

    La struttura HTML potrebbe quindi essere una cosa del genere:
    codice HTML:
    <div class="contenitore-video">
       <video autoplay="" muted="" loop="">
          <source src="..." type="video/mp4">
       </video>
       <div class="fascia-video">
          ...
       </div>
    </div>
    Il CSS potrebbe essere una cosa del genere:
    codice:
    <style>
       .contenitore-video {                   /* CONTENITORE in cui ci sarà il video e la fascia */
          position: relative;                 /* Creo una relazione per il posizionamento assoluto della fascia */
          width: 100%;                        /* Larghezza del contenitore (100% significa che si estende per tutto lo spazio disponibile dell'elemento padre) */
       }
       
       .contenitore-video *{                  /* Reset del box model per tutti gli elementi dentro il contenitore */
          box-sizing: border-box;
       }
       
       .contenitore-video > video {           /* VIDEO */
          display: block;
          width: 100%;                        /* Larghezza del video (100% significa che si estende per tutto lo spazio disponibile del contenitore) */
       }
       
       
       .fascia-video {                        /* FASCIA sul video */
          position: absolute;                 /* Posizione assoluta rispetto al contenitore */
          bottom: 0;                          /* Posiziono in basso al contenitore */
          width: 100%;                        /* Larghezza della fascia (100% significa che si estende per tutto lo spazio disponibile del contenitore) */
          padding: 20px;
          background: rgba(0, 0, 0, 0.5);     /* Colore di sfondo con trasparenza */
          color: #fff;
       }
    </style>
    Chiaramente questo devi metterlo in <head> (come consigliato) e rimuovere le altre varie regole sparse nella struttura HTML, sia quelle definite in linea nei tag sia quelle dentro i blocchi <style> nel body, che diversamente andrebbero in conflitto con queste. Tutte le altre varie regole utilizzate (oltre queste) sarebbe meglio inserirle appunto in un tag <style> (questo o un altro) sempre dentro <head>.

    Fai qualche prova e fai sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Emilia Romagna - Modna
    Messaggi
    51
    Ciao @KillerWorm
    pappa pronta e buona!!!

    Ti ringrazio tantissimo per l'aiuto e per avermi seguito anche su "strade sconigliate", questo mi ha permesso di ricavarne questo
    http://www.cfsystem.it/sushi_video5.htm
    e anche di capire una piccolissima parte di css/html

    Cercando di ottimizzare x SEO ho letto anche dell'importanza di eliminare le tabelle .. ho dato un occhio al tuo link ma, concretamente, a uno come mè, non aiuta molto: provvederò a cercarmi qualche esempio pratico di come fare per trasformare una pagina html con tabelle in una html tableless con DIV (+CLASSE CONTENITORE + STYLE)

    Grazie molte ancora e... a presto!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.