Porta Pass + Pass

[marcoft94]

Buongiorno, apro questo post perchè purtroppo né qui né sul web non ho ancora trovato una possibile soluzione.

Sono a qui a chiederVi se esiste un modo in CSS di creare il porta pass... Ovvero solamente il nastro quello blu.

Ringrazio chi mi può aiutare in anticipo.

Cordiali Saluti.
Marco.

DSC_a001.jpg

[KillerWorm]

Ciao e benvenuto, restando nell'ambito CSS si può fare comunque in diversi modi (sia con qualche accrocchio usando un po' di HTML e CSS, sia applicando un'immagine, magari un svg piuttosto che un png) ma, per poterti dare qualche risposta mirata, sarebbe meglio se tu chiarissi il contesto in cui devi utilizzare questa roba e per quale motivo vorresti avere una soluzione CSS.

Puoi fornire qualche dettaglio in più?

[marcoft94]

Buonasera, certo le spiego il tutto. Se posto l’immagine avrei risolto la problematica nel giro di 5 minuti. Però l’Avere tutto pronto subito mi sembra una cosa scontata. Ho letto su internet di una cosa che si chiama RIBBONS, che viene fatta con i tag BEFORE e AFTER. mi serve questo script perché sto creando il mio sito web ed essendo fotografo ci fanno i pass secondo quel modello li. Grazie mille

[KillerWorm]

Se posto l’immagine avrei risolto la problematica nel giro di 5 minuti. Però l’Avere tutto pronto subito mi sembra una cosa scontata.

Credimi, non ho capito il senso della frase.

In generale puoi usare un'immagine e applicarla comunque tramite CSS. L'immagine può essere un file esterno, ad esempio .png (quindi di tipo raster) o anche .svg (quindi vettoriale, che non perde qualità quando viene ridimensionata). Potresti anche includerla nel codice stesso (quindi senza avere il file esterno) usando una stringa cosiddetta Data URI.

Ho letto su internet di una cosa che si chiama RIBBONS, che viene fatta con i tag BEFORE e AFTER.

E' ciò che ho indicato come "qualche accrocchio usando un po' di HTML e CSS".
Certo, l'uso degli pseudo elementi CSS (::before e ::after) può permettere la creazione di elementi grafici (relativamente semplici) a livello di CSS.

Su internet hai trovato qualche codice che puoi utilizzare o comunque da prendere come spunto?

Non ho però capito perché stai puntando ad una soluzione del genere piuttosto che all'uso di un'immagine. Puoi chiarirmi questo punto? Magari riesco a consigliarti qualcosa di più preciso.

[marcoft94]

Farlo con il codice mi risolverebbe la vita da punto di vista che posso cambiare il colore del nastro e posso creare il rettangolo che vedi nella parte in basso. E quindi riesco anche adattarlo per smartphone.

Se uso il png, devo crearlo ed è difficile riprendere quel tipo di forme dato che la foto che ho inserito è pieno di copyright del produttore. Mi diventa difficile...

che consiglio mi daresti?

Gentilissimo, grazie

Credimi, non ho capito il senso della frase.

In generale puoi usare un'immagine e applicarla comunque tramite CSS. L'immagine può essere un file esterno, ad esempio .png (quindi di tipo raster) o anche .svg (quindi vettoriale, che non perde qualità quando viene ridimensionata). Potresti anche includerla nel codice stesso (quindi senza avere il file esterno) usando una stringa cosiddetta Data URI.


E' ciò che ho indicato come "qualche accrocchio usando un po' di HTML e CSS".
Certo, l'uso degli pseudo elementi CSS (::before e ::after) può permettere la creazione di elementi grafici (relativamente semplici) a livello di CSS.

Su internet hai trovato qualche codice che puoi utilizzare o comunque da prendere come spunto?

Non ho però capito perché stai puntando ad una soluzione del genere piuttosto che all'uso di un'immagine. Puoi chiarirmi questo punto? Magari riesco a consigliarti qualcosa di più preciso.

[KillerWorm]

Farlo con il codice mi risolverebbe la vita da punto di vista che posso cambiare il colore del nastro e posso creare il rettangolo che vedi nella parte in basso. E quindi riesco anche adattarlo per smartphone.

Ok, quindi ti serve poter cambiare il colore al volo e deve essere ridimensionabile.

Se uso il png, devo crearlo ed è difficile riprendere quel tipo di forme dato che la foto che ho inserito è pieno di copyright del produttore. Mi diventa difficile...

Immagino, ad ogni modo la grafica andrebbe ricreata anche se lo fai in CSS. In alternativa dovresti cercare un png gratuito che faccia al caso.

che consiglio mi daresti?

In questo caso gli pseudo elementi CSS possono essere limitativi nell'impostazione di una grafica simile (sebbene non sia così complessa).

Ti consiglierei piuttosto l'uso di un elemento svg da inserire dentro il codice HTML. Si tratta quindi di realizzare quella grafica con un qualsiasi programma con cui si possa esportare il codice svg (con sintassi xml). Tale codice potrai inserirlo dentro il tuo HTML come un elemento <svg>. A quel punto puoi attribuire degli id o delle classi agli elementi interni di tale svg per poterne applicaredelle regole CSS, ad esempio per gestire il colore.

Capisco che per un novizio non sia troppo semplice. Io ho fatto qualche prova usando il primo servizio online trovato sul web (questo) per la realizzazione della grafica e l'esportazione in svg. Chiaro che la grafica va creata; personalmente ho ricalcato in qualche modo l'immagine da te postata.

Una volta creata la grafica ed esportato il codice, l'ho inserito in una semplice pagina HTML.

Questo il risultato:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <style>
      
         #portapass{
            width: 100px;                 /* dimensioni */
            height: calc(100px * 2.55);
            
            filter: hue-rotate(120deg);   /* colore rosso */
         }
         
      </style>
   </head>
   <body>
      
      <svg id="portapass" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 765" width="300" height="765">
         <defs>
            <path d="M35.13 0L265.6 0L300 36.9L0 36.9L35.13 0Z" id="dtlRDWxq4"/>
            <radialGradient id="gradientb6CmVR7pW" gradientUnits="userSpaceOnUse" cx="151.57" cy="18.45" dx="300.09" dy="18.45" r="148.52">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #071b59;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M128.82 680L0 37.27L35.32 -0.37L168.08 680L128.82 680Z" id="b2SyLwrnCM"/>
            <radialGradient id="gradientbnA6XCjR1" gradientUnits="userSpaceOnUse" cx="62.12" cy="347.76" dx="-5.43" dy="11.29" r="343.18">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #2c407d;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M171.18 680L300 37.64L264.68 0L131.92 680L171.18 680Z" id="b3vnPHYEbY"/>
            <radialGradient id="gradientdFdEWc2AZ" gradientUnits="userSpaceOnUse" cx="215.96" cy="374.95" dx="287.12" dy="12.38" r="369.49">
               <stop style="stop-color: #829ad8;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #2c407d;stop-opacity: 1" offset="100%"/>
            </radialGradient>
            <path d="M170.8 709.94L171.24 710.01L171.67 710.11L172.09 710.22L172.5 710.35L172.91 710.5L173.3 710.67L173.69 710.85L174.07 711.05L174.43 711.27L174.79 711.51L175.13 711.75L175.46 712.02L175.78 712.3L176.09 712.59L176.38 712.9L176.66 713.22L176.92 713.55L177.17 713.89L177.4 714.24L177.62 714.61L177.82 714.99L178.01 715.37L178.18 715.77L178.33 716.17L178.46 716.59L178.57 717.01L178.66 717.44L178.74 717.87L178.79 718.32L178.82 718.77L178.83 719.22L178.83 737.79L178.82 738.24L178.79 738.69L178.74 739.14L178.66 739.57L178.57 740L178.46 740.42L178.33 740.84L178.18 741.24L178.01 741.64L177.82 742.02L177.62 742.4L177.4 742.77L177.17 743.12L176.92 743.46L176.66 743.79L176.38 744.11L176.09 744.42L175.78 744.71L175.46 744.99L175.13 745.26L174.79 745.5L174.43 745.74L174.07 745.96L173.69 746.16L173.3 746.34L172.91 746.51L172.5 746.66L172.09 746.79L171.67 746.9L171.24 747L170.8 747.07L170.36 747.12L169.91 747.15L169.46 747.17L130.54 747.17L130.09 747.15L129.64 747.12L129.2 747.07L128.76 747L128.33 746.9L127.91 746.79L127.5 746.66L127.09 746.51L126.7 746.34L126.31 746.16L125.93 745.96L125.57 745.74L125.21 745.5L124.87 745.26L124.54 744.99L124.22 744.71L123.91 744.42L123.62 744.11L123.34 743.79L123.08 743.46L122.83 743.12L122.6 742.77L122.38 742.4L122.18 742.02L121.99 741.64L121.82 741.24L121.67 740.84L121.54 740.42L121.43 740L121.34 739.57L121.26 739.14L121.21 738.69L121.18 738.24L121.17 737.79L121.17 719.22L121.18 718.77L121.21 718.32L121.26 717.87L121.34 717.44L121.43 717.01L121.54 716.59L121.67 716.17L121.82 715.77L121.99 715.37L122.18 714.99L122.38 714.61L122.6 714.24L122.83 713.89L123.08 713.55L123.34 713.22L123.62 712.9L123.91 712.59L124.22 712.3L124.54 712.02L124.87 711.75L125.21 711.51L125.57 711.27L125.93 711.05L126.31 710.85L126.7 710.67L127.09 710.5L127.5 710.35L127.91 710.22L128.33 710.11L128.76 710.01L129.2 709.94L129.64 709.89L130.09 709.86L130.54 709.84L169.46 709.84L169.91 709.86L170.36 709.89L170.36 709.89L170.8 709.94ZM132.2 714.89L131.8 714.96L131.4 715.04L131.02 715.15L130.64 715.27L130.27 715.42L129.91 715.59L129.57 715.78L129.24 715.99L128.92 716.22L128.61 716.46L128.32 716.72L128.04 717L127.78 717.29L127.54 717.59L127.31 717.91L127.11 718.24L126.92 718.59L126.75 718.95L126.6 719.31L126.47 719.69L126.36 720.08L126.28 720.47L126.22 720.88L126.18 721.29L126.17 721.71L126.17 735.3L126.18 735.72L126.22 736.13L126.28 736.54L126.36 736.93L126.47 737.32L126.6 737.7L126.75 738.06L126.92 738.42L127.11 738.77L127.31 739.1L127.54 739.42L127.78 739.72L128.04 740.02L128.32 740.29L128.61 740.55L128.92 740.79L129.24 741.02L129.57 741.23L129.91 741.42L130.27 741.59L130.64 741.74L131.02 741.86L131.4 741.97L131.8 742.05L132.2 742.12L132.61 742.15L133.03 742.17L168.16 742.17L168.51 742.15L168.85 742.12L169.18 742.07L169.51 742L169.83 741.92L170.14 741.81L170.44 741.69L170.74 741.55L171.02 741.39L171.3 741.22L171.56 741.03L171.81 740.83L172.05 740.62L172.28 740.39L172.5 740.15L172.7 739.9L172.88 739.63L173.06 739.36L173.21 739.07L173.35 738.78L173.48 738.48L173.58 738.16L173.67 737.84L173.74 737.52L173.79 737.18L173.82 736.84L173.83 736.5L173.83 721.71L173.82 721.29L173.78 720.88L173.72 720.47L173.64 720.08L173.53 719.69L173.4 719.31L173.25 718.95L173.08 718.59L172.89 718.24L172.69 717.91L172.46 717.59L172.22 717.29L171.96 717L171.68 716.72L171.39 716.46L171.08 716.22L170.76 715.99L170.43 715.78L170.09 715.59L169.73 715.42L169.36 715.27L168.98 715.15L168.6 715.04L168.2 714.96L167.8 714.89L167.39 714.86L166.97 714.85L133.03 714.85L132.61 714.86L132.61 714.86L132.2 714.89Z" id="a9rjaa6Er"/>
            <linearGradient id="gradientbexgxxZa" gradientUnits="userSpaceOnUse" x1="161.26" y1="709.84" x2="123.51" y2="747.17">
               <stop style="stop-color: #312d2e;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="69.8497582445905%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
            <path d="M128.92 680L171.08 680L171.08 720L128.92 720L128.92 680Z" id="a1FlVYgTg4"/>
            <linearGradient id="gradienta2XL3BFcgH" gradientUnits="userSpaceOnUse" x1="171.08" y1="720" x2="128.92" y2="720">
               <stop style="stop-color: #1a1a1a;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="78.04773526992581%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
            <path d="M159.23 732.71C163.18 732.71 166.38 735.91 166.38 739.86C166.38 744.89 166.38 752.82 166.38 757.85C166.38 761.8 163.18 765 159.23 765C154.11 765 145.89 765 140.77 765C136.82 765 133.62 761.8 133.62 757.85C133.62 752.82 133.62 744.89 133.62 739.86C133.62 735.91 136.82 732.71 140.77 732.71C145.89 732.71 154.11 732.71 159.23 732.71Z" id="a2SQ0DQ8Dn"/>
            <linearGradient id="gradientc1QNEyCy81" gradientUnits="userSpaceOnUse" x1="166.38" y1="765" x2="133.62" y2="765">
               <stop style="stop-color: #1a1a1a;stop-opacity: 1" offset="0%"/>
               <stop style="stop-color: #ffffff;stop-opacity: 1" offset="74.72955877459701%"/>
               <stop style="stop-color: #010000;stop-opacity: 1" offset="100%"/>
            </linearGradient>
         </defs>
         <g>
            <g>
               <g>
                  <g>
                     <use xlink:href="#dtlRDWxq4" opacity="1" fill="url(#gradientb6CmVR7pW)"/>
                  </g>
                  <g>
                     <use xlink:href="#b2SyLwrnCM" opacity="1" fill="url(#gradientbnA6XCjR1)"/>
                  </g>
                  <g>
                     <use xlink:href="#b3vnPHYEbY" opacity="1" fill="url(#gradientdFdEWc2AZ)"/>
                  </g>
               </g>
               <g>
                  <use xlink:href="#a9rjaa6Er" opacity="1" fill="url(#gradientbexgxxZa)"/>
               </g>
               <g>
                  <use xlink:href="#a1FlVYgTg4" opacity="1" fill="url(#gradienta2XL3BFcgH)"/>
               </g>
               <g>
                  <use xlink:href="#a2SQ0DQ8Dn" opacity="1" fill="url(#gradientc1QNEyCy81)"/>
               </g>
            </g>
         </g>
      </svg>
      
      
   </body>
</html>

Come vedi, ho inserito l'elemento <svg> a cui ho applicato un id in modo da poterlo poi gestire col CSS.

Nel CSS puoi vedere che ho ridimensionato l'elemento e gli ho dato un colore (di base è blu come l'immagine originale).

Per poter modificare il colore in teoria si può intervenire (da CSS) sulle proprietà CSS relative agli elementi SVG e, ad esempio, definirle per gli elementi interni a quello stesso svg. In questo caso però sono presenti dei riempimenti con diverse sfumature e verrebbe difficile da CSS ridefinire tutte le varie sfumature

Una soluzione alternativa può essere quella di applicare un filtro CSS all'intero oggetto, nello specifico ho usato hue-rotate() in modo da "ruotare" la tonalità di colore partendo dall'immagine originale. Per Apportare ulteriori variazioni (saturazione, luminosità, ecc) è possibile usare anche altre relative funzioni filtro (vedi qui).

Per ulteriori info riguardo SVG e CSS puoi consultare questa guida https://www.html.it/guide/svg-e-css-la-guida/

Per il momento credo sia sufficiente quanto indicato. Magari fai qualche prova e vedi se può andare una soluzione del genere.
Se hai bisogno di chiarimenti chiedi pure.
Buon proseguimento.

[marcoft94]

Grazie mille, gentilissimo...
Se posso chiederti un piacere, quell'immagine li fatto in svg non riesci a caricarmela in png?

Grazie mille e scusami

[KillerWorm]

Figurati.

Se posso chiederti un piacere, quell'immagine li fatto in svg non riesci a caricarmela in png?

Potrei anche e senza troppo sforzo ma preferisco spiegarti come poterti arrangiare da solo.
Ho postato il codice di quella pagina in cui è incluso il codice dell'immagine svg. Quello che devi fare è ottenere un file con estensione .svg da quel blocco di codice, e passare poi quel file su un qualsiasi convertitore "svg to png"; ne trovi a bizzeffe anche online.

Quindi:
- seleziona il blocco di codice <svg> (dal file html che avrai salvato o anche direttamente dal mio precedente post)
- in un qualsiasi code editor (ad esempio il "Blocco note") crea un nuovo documento e appiccicaci quel codice (ripeto, solo quel blocco da <svg> a </svg> compresi questi due tag)
- salva il documento come un normale file con estensione .svg
- apri l'home page di zio gugol e inserisci qualcosa del tipo "svg to png"
- clicca su "Mi sento fortunato" (giusto per far crescere l'autostima, altrimenti fai una normale ricerca)
- sul primo servizio online che trovi ci dovrebbe essere qualcosa dove puoi caricare il tuo file .svg
- la conversione dovrebbe partire in automatico, altrimenti clicca su qualche pulsante del tipo "Converti"
- una volta terminata la conversione dovrebbe apparire, da qualche parte sulla pagina, l'immagine png
- clicca su "download" o qualcosa del genere
- il gioco è fatto

Poi se hai difficoltà chiedi pure.

Chiaramente il png ottenuto farà fede al file originale svg, dove il nastro è di colore blue.

Grazie mille e scusami

Di che?!
Qualcuno disse: "Chiedere è lecito, rispondere è cortesia"

Buon proseguimento e, data l'ora, buon pranzo.

[marcoft94]

Grasssssssssssssssssie buon pranzo e buone feste

Figurati.


Potrei anche e senza troppo sforzo ma preferisco spiegarti come poterti arrangiare da solo.
Ho postato il codice di quella pagina in cui è incluso il codice dell'immagine svg. Quello che devi fare è ottenere un file con estensione .svg da quel blocco di codice, e passare poi quel file su un qualsiasi convertitore "svg to png"; ne trovi a bizzeffe anche online.

Quindi:
- seleziona il blocco di codice <svg> (dal file html che avrai salvato o anche direttamente dal mio precedente post)
- in un qualsiasi code editor (ad esempio il "Blocco note") crea un nuovo documento e appiccicaci quel codice (ripeto, solo quel blocco da <svg> a </svg> compresi questi due tag)
- salva il documento come un normale file con estensione .svg
- apri l'home page di zio gugol e inserisci qualcosa del tipo "svg to png"
- clicca su "Mi sento fortunato" (giusto per far crescere l'autostima, altrimenti fai una normale ricerca)
- sul primo servizio online che trovi ci dovrebbe essere qualcosa dove puoi caricare il tuo file .svg
- la conversione dovrebbe partire in automatico, altrimenti clicca su qualche pulsante del tipo "Converti"
- una volta terminata la conversione dovrebbe apparire, da qualche parte sulla pagina, l'immagine png
- clicca su "download" o qualcosa del genere
- il gioco è fatto

Poi se hai difficoltà chiedi pure.

Chiaramente il png ottenuto farà fede al file originale svg, dove il nastro è di colore blue.


Di che?!
Qualcuno disse: "Chiedere è lecito, rispondere è cortesia"

Buon proseguimento e, data l'ora, buon pranzo.