Joomla.it Forum
Joomla! 1.5.x (versione con supporto terminato) => Joomla! 1.5 => I Template di Joomla 1.5.x => : bigham 28 Feb 2011, 23:39:15
-
Ciao a tutti.
Non so se vi è mai capitato di voler applicare l'effetto shadow (ombra) ad un testo usando, ovviamente le classi di un foglio di stile.
Quasi tutti i browser, tranne IE, supportano la proprietà text-shadow
.moduletable h2{
text-shadow:1px 1px 3px #999999;
}
Per Ie invece sto diventando matto. Normalmente si potrebbe risolvere utilizzando questo:
.moduletable h2{
filter:progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=2);
}
L'unico problema è che il font del testo si "corrompe", ossia perde la fluidità dei contorni (che prima, sanza ombra aveva) e si vede una ciofeca.
Vi allego due immagini esemplificative. La prima è il font con effetto ombra in Firefox e la seconda con IE.
Mi sorge l'atroce dubbio che il problema nasca dal fatto che sto usando un font esterno anche se il difetto lo fa solo con IE e solo se applico l'effetto ombra.
Qualche idea?
-
Dimenticavo una cosa.
Quando si usa @font-face per gestire i font esterni bisogna utilizzare diversi tipi di font per maggiore compatibilità con i browser.
Ho trovato questo sito (http://www.fontsquirrel.com/fontface/generator) che permette di generare, partendo da un qualsiasi tipo di file di font diversi formati (ttf, eot, woff, ecc) che verranno poi racchiusi in un file compresso (completo di css e demo).
-
Aggiorno il post con quello che ho scoperto fino ad ora.
Il problema del frastagliamento del font (jagging) è causato in internet explorer dal fatto che nelle impostazioni non è attivo per default l'uso del ClearType per l'html. Questo significa che IE non esegue lo smoothing del font (mentre tutti gli altri browser lo fanno).
Motivo per cui alcuni font (non tutti ma molti) soprattutto se personalizzati attraverso l'uso di @font-face vengono visualizzati male.
Quindi, come visualizzare un testo con effetto ombra in IE senza che venga frastagliato?
In realtà si potrebbe usare un filtro come:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);
Ma, anche se funziona, non va d'accordo con il filtro Shadow e non si riesce (almeno io non ci riesco) a creare una combinazione dei due filtri.
Comunque, continuo a ceercare una soluzione e che IE sia maledetto!! ;D
-
Continuo il mio soliloquio ;D
Una possibile soluzione al problema dell'effetto ombra con IE (senza usare filtri ovviamente) è quella di visualizzare due immagini sovrapposte di colore diverso.
E ci voleva tanto!!! ;D
Partiamo da questo esempio:
Codice html:
<h1 class="ombreggiatura_css">
<span>OMBREGGIATURA CSS</span>
OMBREGGIATURA CSS
</h1>
e queste sono le classi del foglio di stile che creano l'effetto ombreggiatura:
.ombreggiatura_css{
/*la misura dei caratteri*/
font-size:30px;
/*il colore del ombreggiatura del testo*/
color:#CCCCCC;
/*necessario per poi posizionare l’elemento span in modo assoluto*/
position:relative;
}
.ombreggiatura_css span{
/*il colore del testo*/
color:#3399CC;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-2px;
/*spostamento di 2 px verso la sinistra*/
left:-2px;
}
lo spostamento dell’elemento span di un paio di pixel serve per lasciare intravedere il testo di colore grigio (l’ombra) al di sotto.
I valori di spostamento top e left possono essere cambiati per cambiare l’effetto d’ombra.
Questo esempio però non è applicabile in un template per joomla perchè il codice generato dal componente com_content non è quello che ci server.
Quindi? Quindi dobbiamo necessariamente applicare l'override al componente com_content per generare il codice html come lo vogliamo noi:
Proviamo ad applicare questo esempio ai titoli degli articoli.
Override per i template di joomla 1.5
(caming soon)
Override per i template di Joomla 1.6
1) creare le cartelle html/com_content/article all'interno della cartella del template
2) copiare il file default.php dalla cartella /components/com_content/viewes/article/tmpl e incollarlo nella cartella creata in precedenza
3) modificare il file default.php come segue
alla riga 26 troviamo il seguente blocco di codice:
<h2>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</h2>
Questo serve a visualizzare il titolo di un articolo.
Modifichiamolo come segue:
<h2>
<span>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
</span>
<!--[if gte IE 6]>
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<?php echo $this->escape($this->item->title); ?></a>
<?php else : ?>
<?php echo $this->escape($this->item->title); ?>
<?php endif; ?>
<![endif]-->
</h2>
Come vedete ho inserito il tag span e duplicato il codice di visualizzazione del titolo dell'articolo condizionandolo al browser IE 6 o successivi.
Adesso adattiamo l'esempio al foglio di stile per i template di Joomla 1.6
.item-page h2 {
font-family: 'nome_del_font';
font-size: 1.250em;
/* colore dell'ombra */
color:#999999;
position:relative;
}
.item-page h2 span{
/*il colore del testo*/
color:#87431e;
/*trasformazione da elemento di riga a elemento di blocco*/
display:block;
/*posizione assoluta in rapporto a l’elemento genitore*/
position:absolute;
/*spostamento di 2 px verso l’alto*/
top:-1px;
/*spostamento di 2 px verso la sinistra*/
left:-1px;
}
Il sistema funziona bene se i titoli degli articoli non sono dei link, ma credo che, in questo caso, la soluzione non sia difficile da trovare ;)
N.B.
Non ho sotto mano una versione di Joomla 1.5 quindi questa sera, da casa, inserirò il codice per l'override per i template della 1.5
-
Starai anche facendo un soliloquio bigham, ma non vano.
Io ti sto leggendo e alla fine mi metterò tra i preferiti questo piccolo saggio per quando io o qualcun'altro ne avrà bisogno ;D
B R A V O ! :)
-
ciao bigham,
certo che la fantasia e l'ingegno non ti mancano.... :) complimenti!
non ho capito bene se usando i filtri nascono problemi con i font personalizzati... al momento non ho tempo di provare. ho solo fatto una prova al volo con i font standard e con questi funzionano bene i filtri.
ti linko la documentazione.... anche se sicuramente l'avrai già letta
http://msdn.microsoft.com/en-us/library/ms533086%28v=VS.85%29.aspx
non hai preso in considerazione la possibilità di utilizzare uno script?
è sicuramente cross-browser, più semplice e rapido da implementare......
.....ma di certo da' meno soddisfazione ;)
http://pr0digy.com/mootools/text-dropshadows/
-
@tonicopi
Grazie, sapevo che eri dietro l'angolo a sbirciare ;D
@ricadata
Si, credo che il problema nasca proprio dall'uso di un font personalizzato e ancor di più dal tipo di font (Helvetica neue roman)
I filtri li ho provati e il risultato è pessimo, usare uno script (jQuery, mootools, javascript) appesantisce ulteriormente il caricamento della pagina.
Ne avevo provato uno con jQuery ma era veramente lento, magari devo provare con mootools, visto che c'è già. Vediamo cosa succede.
Ciao
-
immaginavo che avevi esculso gli script per motivi di caricamento...
comunque quello che ti ho linkato è in mootool e minimizzato fa appena 1k ;)
-
Ho provato lo script e... un bagno di sangue! ;D ;D
Sostanzialmente fa la stessa cosa della soluzione precedente, ovvero duplica il testo con due colori diversi mettendoli uno sopra l'altro con uno sfasamento di n pixel in orrizzontale e in verticale.
C'è però un problema: Joomla! ;D
Ovvero le classi nidificate sono poi difficili da gestire. Già è difficile trovare l'elemento e la classe corretta, poi saltano tutte le proprietà che sono state applicate a quell'elemento.
Faccio un esempio.
Se applico lo script al al tag:
<div class='item-page'>
<h2> Chi siamo </h2>
</div>
lo script trasforma il tutto in:
<div class='item-page'>
<div style="position: relative; left: 0px; top: 0px; height: 30px; width: 421px;">
<h2 style="color: rgb(169, 169, 169); left: 1px; top: 1px; position: absolute;"> Chi siamo</h2>
<h2 style="position: absolute; left: 0px; top: 0px;"> Chi siamo</h2>
</div>
</div>
le proprietà della classe .item-page h2 che erano prima impostate nel foglio di stile, in particolare il padding-bottom che distanzia il titolo dal testo successivo, non funzionano più. Adesso quello che comanda è il <div> più esterno.
Inoltre, e non ultimo, lo script funziona per tutti i browser (ovviamente) e mi costringerebbe a modificare l'intero foglio di stile del template eliminando l'effetto ombra ottenuto con la proprietà text-shadow.
La cura è peggiore della malattia! ;D ;D ;D
-
Ho trovato uno script che sfrutta jQuery per l'effetto ombra e funziona meglio di quelli che avevo provato.
Soprattutto non costringe a modificare, con l'override, il codice generato da joomla per contenuti e moduli.
Per adesso posto il link ma se funziona, come sembra, forse sarebbe il caso di scriverci due righe nel wiki ;)
http://www.hintzmann.dk/testcenter/js/jquery/textshadow/
Ciao
-
Lo script funziona discretamente.
Certo non c'è paragone con l'effetto ombra usando text-shadow del css3 però chi si accontenta... ;D
Magari ci scrivo due righe?
-
Magari ci scrivo due righe?
...magari! :)
si può vedere il risultato??
-
Le righe arriveranno ;D
Non so se sia meglio un articolo in home o una miniguida.
Il risultato non è ancora visibile, appena consegno il sito (e non credo manchi molto) te lo faccio vedere.
-
Le righe stanno arrivando, aspettano solo che Alexred prema un pulsante ;D
-
Articolo pubblicato! ;D