Testo con "ombra" più grande

[Girovago]

Ciao ragazzi, vorrei creare un testo come da immagine in basso.



Potrei farlo velocemente con un programma di grafica, ma il testo più piccolo dovrà essere un H1.
Avevo pensato di fare l'ombra come immagine, ma non saprei come riuscire a inserirla poi dietro il testo

L'ombra può essere anche più piccola rispetto a quella in foto, ma comunque più grande del testo.

Chi mi aiuta per cortesia?

[KillerWorm]

Ciao, beh un'immagine dietro il testo puoi gestirla col background-image dell'elemento che contiene il testo, se questo ha dimensioni sufficienti per mostrare l'intera immagine; oppure usando un elemento <img> posizionato in modo assoluto per poterne gestire la sovrapposizione col testo.

Ti sconsiglio però questo metodo; l'uso di immagini "statiche" per ricreare effetti del genere è poco pratico - si faceva 20, 25 anni fa quando HTML e CSS avevano funzionalità piuttosto limitate rispetto ad oggi - pensa, se hai più testi a cui vuoi applicare tale effetto, dovrai realizzare una relativa immagine per ciascuno; se poi decidi per qualche ragione di cambiare font nella pagina, dovrai ricreare e aggiornare opportunamente le relative immagini.

Sicuramente si può ragionare per delle soluzioni più pratiche con l'uso di opportuno CSS o con altre eventuali tecniche, vedi SVG.

Qui ho realizzato un Pen di esempio usando uno pseudo elemento (::before) che pesca il testo da un attributo data, così da "clonare" il testo di quell'elemento. Ho usato poi le proprietà text-stroke e text-fill-color per ottenere l'effetto contorno testo:
CSS text outline watermark effect

Il risultato mi sembra buono anche se purtroppo le proprietà text-stroke e text-fill-color al momento non sono standardizzate, benché siano supportate, con l'uso del prefisso -webkit-, dalla maggior parte degli odierni browser.

Se vuoi andare su proprietà standard, per l'effetto contorno testo è possibile usare un piccolo trucco con la proprietà text-shadow.

Qui il codice:

<style>
h1 {
  font: bolder 80pt 'Arial Narrow', Arial, sans-serif;
  font-stretch: condensed;
  text-transform: uppercase;
  text-align: center;
  color: #0a2b41;
  white-space: nowrap;
}
[data-watermark]{
  position: relative;
}
[data-watermark]:before{
  content: attr(data-watermark);
  position: absolute;
  top: calc(50% - .35em);
  left: 50%;
  transform: translate(-50%,-50%) scale(1.5);
  z-index: -1;
  line-height: 0;
  opacity: .15;
  
  /* Qui l'effetto contorno, riprodotto con proprietà attualmente non-standard */
  color: #000;
  -webkit-text-stroke: 1px #000;
  -webkit-text-fill-color: transparent;
  
  /* Qui invece un effetto equivalente ma con proprietà standard  */
  /*
  color: #fff;
  mix-blend-mode: multiply;
  text-shadow:
    1px 0 0 #000,
    0 1px 0 #000,
    -1px 0 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px 1px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000;
  */
}
</style>

<h1 data-watermark="About Us">About Us</h1>

Nel codice ci sono entrambi i metodi (vedi commenti). Se preferisci usare proprietà pienamente standard, rimuovi il primo metodo e decommenta il secondo.

Vedi se può andare bene, fai sapere.

[Girovago]

Ciao Killerworm, non ho parole, anzi eccole: "Sei un grande".
Fare le immagini era una follia e ad ogni modifica avrei dovuto rifare tutto da zero, con la tua soluzione è tutto pratico e veloce.

Ti ringrazio molto, davvero, è tutto perfetto.

[Girovago]

Ho cantato vittoria troppo presto, da mobile l'ombra non sembra essere responsive quindi succede una roba simile

[KillerWorm]

Bene, mi fa piacere grazie a te per l'apprezzamento.

Buon lavoro


EDIT:

Ho cantato vittoria troppo presto

Sì avevo considerato che poteva presentarsi quel problema è avevo anche provato a risolvere in qualche modo ma non ha funzionato, per cui al momento ho lasciato così. Ad ogni modo penso sia risolvibile in una maniera o nell'altra.

Tieni conto che il testo (quello principale nonché quello ombra) dovrà stare su una singola riga per poter gestire al meglio la cosa. Ora di fatto è così, fammi però capire se per te questo possa comportare qualche problema.

EDIT 2:
o meglio... in parte avevo risolto col white-space:nowrap; che ho applicato per H1. Presumo tu non abbia specificato tale proprietà. Per cui ripeto: mantenere il testo su singola riga presenta un problema per te?

[Girovago]

Ho aggiunto white-space:nowrap, ora ci siamo. Dovrei riuscire sempre a mantenere il testo su una sola riga.
Rinnovo i miei ringraziamenti, a buon rendere!

[KillerWorm]

Ok, però con white-space:nowrap si risolve a metà. Se il testo (sia quello principale che quello ombra) dovesse sporgere oltre i limiti del contenitore, in particolari situazioni, se non diversamente impostato, potrebbe comparire la scrollbar orizzontale sul body o su qualche altro contenitore, per permettere di visualizzare quella parte che sborda.

Per evitare questo eventuale problema considera di aggiungere una cosa tipo overflow: clip visible; su H1. Questo taglierà il contenuto che sborda lateralmente.

Quindi su H1 dovrai avere queste due proprietà:

white-space: nowrap;
overflow: clip visible;

Era ciò che stavo cercando di fare ieri nell'esempio, ma qualcosa continuava a non tornarmi. Ora ho aggiornato l'esempio e sembra ok anche su questo problema.

Buon proseguimento