ShadedBorder: bordi e dropshadow senza immagini
Giovedì 29 Marzo 2007 - 12:37
di Alessandro Fulciniti
È da un po’ che non si sente parlare di soluzioni per gli angoli arrotondati senza immagini con CSS e Javascript. Steffen Rusitschka, dopo aver presentato circa un anno fa Ruzee.Borders
citata a suo tempo qui sul blog, ha recentemente rilasciato ShadedBorder. Si tratta uno script per creare angoli e bordi arrotondati con effetto glow o drop shadow con una precisione grafica simile a Photoshop, senza l’ausilio di immagini ma solo con Javascript e CSS: ecco l’esempio.
Non ho ancora avuto tempo di dare uno sguardo allo script, che è leggero in quanto a peso (7.7 Kb non compresso, e senza la necessità di librerie esterne) ma a parer mio piuttosto pesante per ciò che riguarda il rendering e l’albero DOM delle pagine in cui è applicato. Discreta la compatibilità cross-browser e davvero eccellenti graficamente i risultati.
Categoria: Scripting | Permalink
Commenti
1
Visto che siamo sull’argomento vi segnalo RoCo: la mia soluzione per i rounded corners basata su jQuery.
2
scusate, ma questi metodi sono disastrosi!!!!! vengono generati DIV a sfare, UN DIV PER OGNI PIXEL! il browser rallenta e si appesantisce, e tutto questo per evitare le immagini???? mi sembra un controsenso, la classica soluzione che è peggio del problema stesso.
A mio parere, o si usano le immagini, o NON si usano i bordi stondati, o si aspettano delle specifiche CSS che li gestiscano.# - postato da p.battino - 29 Marzo 2007 - 14:14
3
Sono d’accordo con p.battino, la maggior parte di questi metodi è a dir poco “laboriosa”… ma che problema c’è a mettere le img?
# - postato da Laboo in Corsica - 29 Marzo 2007 - 14:18
4
ritiro quello che ho detto: c’è una quarta alternativa: RoCo di Michele! ;-) che ha scritto DOPO che ho visto il post ma PRIMA che inviassi il mio commento.
Bell’idea, peccato che con IE6 non funzica. Ma il tipo di errore mi pare risolvibile.# - postato da p.battino - 29 Marzo 2007 - 14:20
5
La soluzione di Michele è ingeniosa a dir poco! Però ho notato che quando si aumenta la dimensione del testo, gli angoli si sfasano… Comunque è già un passo avanti, secondo me :) Ben fatto!
6
la soluzione di alessandro rimane la migliore a parer mio,
..oppure utilizzare delle immagini..# - postato da kentaromiura - 29 Marzo 2007 - 15:58
7
molto carino RoCo…
8
La soluzione di Michele è senza dubbio originale, ma non sono d’accordo con l’utilizzo di • per arrotondare i box, perchè alla fin fine (come già detto da Andre) qualsiasi lieve manipolazione del layout finisce col rovinare l’effetto iniziale e dare un senso generale di instabilità. Ovviamente è un parere che non vuole in alcun modo denigrare il tuo lavoro Michele, anzi mi fa piacere scoprire nuovi progetti portati avanti da italiani. ;)
Per ora se proprio dovessi scegliere penso mi affiderei allo script di Alessandro Fulciniti, anche se in genere preferisco fare uso delle vecchie e care immagini.
Per il resto quoto p.battino, ShadedCorner è sicuramente geniale come quasi tutti gli script nati per abbellire le nostre pagine, ma è troppo pesante per i miei gusti.
9
ShadedCorner.
Requisito minimo: scheda video ASUS ATI EAX1950XTX 512Mb DDR4, altrimenti il tuo sito starà sotto i 25fps ;)# - postato da Gabriele Fabbri - 30 Marzo 2007 - 09:45
10
Anche secondo me ShadedCorner è disastrosamente pesante ed inutilizzabile. È valido solo come dimostrazione o esercizio di stile.
Volevo segnalarvi che su Mac OS X con Safari non si vedono bene i bordi inferiori. Credo sia un problema di css.
Ciao a tutti.
# - postato da Gianni Valenti - 02 Aprile 2007 - 12:43