Gradienti CSS3 per riprodurre un effetto 'bagliore interno' da Illustrator con raggio di bordo applicato

Question

Sono in procinto di cercare di orientarmi correttamente attorno ai Gradienti CSS3 (in particolare quelli radiali) e così facendo penso di aver impostato io stesso una sfida relativamente difficile.

In Adobe Illustrator ho creato il seguente stile "pulsante".

per creare questa immagine ho creato un rettangolo con un colore di rgb(63,64,63) o #3F403F sfondo, poi 'stilizzata' di avere un raggio di 15px confine.

Ho quindi applicato un "bagliore interno" ad esso con un'opacità del 25%, sfocatura 8 px, bianco dal centro. Alla fine, ho applicato un tratto bianco di 3 pt. (Ti sto dicendo tutto questo nel caso in cui avete voluto riprodurlo, se l'immagine di cui sopra non è sufficiente.)

Quindi, la mia domanda è quindi:

E 'possibile ricreare questo' pulsante 'usando i CSS senza la necessità di un'immagine?

Sono a conoscenza dei "limiti" di Internet Explorer (e per il bene di questo esperimento, non potevo dare una scimmia). Sono anche a conoscenza del piccolo "bug" nel webkit che rende erroneamente un elemento con un colore di sfondo, un raggio di confine e un bordo (con un colore diverso rispetto al colore di sfondo) - lascia il colore di sfondo sfogliando sulla curva angoli.

mio miglior tentativo finora è abbastanza patetico, ma per riferimento è il codice:

section#featured footer p a 
{ 
    color: rgb(255,255,255); 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6); 
    text-decoration: none; 
    padding: 5px 10px; 
    border-radius: 15px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    border: 3px solid rgb(255,255,255); 
    background: rgb(98,99,100); 

    background: -moz-radial-gradient(
     50% 50%, 
     farthest-side, 
     #626364, 
     #545454 
    ); 
    background: -webkit-gradient(
     radial, 
     50% 50%, 
     1px, 
     50% 50%, 
     5px, 
     from(rgb(98,99,100)), 
     to(rgb(84,84,84)) 
    ); 
} 

In sostanza, terribile. Qualsiasi suggerimento o suggerimento è stato accettato con gratitudine e vi ringrazio molto in anticipo per loro!

Answer 1

Sembra che si sta cercando di produrre un gradiente di replicare questo:

"Ho poi applicato un 'bagliore interno "con un opacità del 25%, sfocatura 8 px, bianco dal centro".

È possibile eseguire esattamente tale operazione utilizzando un riquadro ombreggiato. Ad esempio:

-moz-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25); 
-webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.25); 

Answer 2

Beh, devo dire ... la tua domanda mi interessava molto, quindi ci sono andato.

Ho trovato una soluzione, ma utilizza un tag nidificato <span> che è un po 'rozzo, ma è praticamente identico all'immagine.

Ecco cosa il codice HTML appare come:

<a href="/" class="dark-button"><span>Carry on reading&nbsp;&nbsp;&rarr;</span></a> 

Avviso del nidificato <span> interno della <a>. Gli spazi senza interruzione sono lì solo per dare alla freccia la stessa quantità di spazio che hai nella tua foto.

Ed ecco il CSS:

a.dark-button { 
    font: 11pt/11pt "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: 100; 
    color: white; 
    text-decoration: none; 
    background-color: #555; 
    border: 3px solid white; 
    -moz-border-radius: 15px; padding: 5px 3px; 
    text-shadow: 1px 1px 2px #111; 
} 
    a.dark-button span { 
     background-color: #666; 
     padding: 2px 12px; 
     -moz-border-radius: 15px; 
     -moz-box-shadow: 0 0 1px #666, 0 0 2px #666, 0 0 3px #666, 0 0 4px #666, 0 0 5px #666, 0 0 7px #666; 
    } 

In sostanza per ottenere l'effetto interno-bagliore, ho fatto un bagliore esterno (sotto forma di un'ombra esterna) da un elemento interno. Spero che abbia un senso.

di vederla dal vivo: http://ianstormtaylor.com/experiments/css-buttons

Buon divertimento!

Answer 3

senza markup aggiuntivo:

gradienti radiali sono molto difficili da controllare, e lavorare molto di più in modo diverso tra i browser di gradienti lineari fanno. E, a differenza di un bagliore interno, saranno effettivamente circolari piuttosto che abbinare i contorni per lo più rettangolari della tua scatola.

Poiché ogni browser che consente le ombre box consente anche rgba e sfondi multipli, vorrei utilizzare una combinazione di due gradienti lineari, impilati e utilizzando i colori rgba: uno orizzontale e uno verticale. Qualcosa in questo senso (sostituendo i miei colori con quello che vi serve):

section#featured footer p a { 
    background-color: #000; 
    background-image: -moz-linear-gradient(
    left, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5) 
), -moz-linear-gradient(
    top, 
    rgba(255,255,255,.5), 
    rgba(255,255,255,0) 10%, 
    rgba(255,255,255,0) 90%, 
    rgba(255,255,255,.5) 
); 
    background-image: -webkit-gradient(
    /* webkit's syntax for the same horizontal gradient */ 
    ), -webkit-gradient(
    /* webkit's syntax for the same vertical gradient */ 
    ); 
} 

Answer 4

È anche possibile creare un gradiente radiale che vada dal bianco al trasparente su un div sovrapposto. Ho usato questo fantastico strumento di generazione css3 che ti offre tutto il css3 necessario per la compatibilità cross-browser.

http://www.colorzilla.com/gradient-editor/

Spero che questo aiuti qualcuno!