Degradados CSS3 para reproducir un efecto de 'resplandor interior' de Illustrator con radio de borde aplicado

Question

Estoy en el proceso de tratar de enfocar adecuadamente los degradados de CSS3 (específicamente los radiales) y al hacerlo creo que he establecido yo mismo un desafío relativamente duro.

En Adobe Illustrator, he creado el siguiente estilo de 'botón'.

para crear esta imagen que creé un rectángulo con un color de fondo de rgb(63,64,63) o #3F403F, a continuación, 'estilizada' que tenga un radio de 15 píxeles frontera.

Luego aplique un 'resplandor interior' con una opacidad del 25%, desenfoque de 8px, blanco desde el centro. Finalmente, apliqué un trazo blanco de 3 puntos. (Te digo todo esto en caso de que deseara para reproducirlo, si la imagen anterior no es suficiente.)

Por lo tanto, mi pregunta es la siguiente:

¿Es posible volver a crear esta " botón 'usando CSS sin la necesidad de una imagen?

Soy consciente de las "limitaciones" de Internet Explorer (y por el bien de este experimento, no pude dar monos). También conozco el pequeño 'error' en webkit que representa incorrectamente un elemento con un color de fondo, borde-radio y un borde (con un color diferente al color de fondo) - deja que el color de fondo se filtre en el curvado esquinas.

Mi mejor intento hasta ahora es bastante patético, pero para referencia aquí está el código:

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)) 
    ); 
} 

Básicamente, terrible. Cualquier sugerencia o sugerencia aceptada con gratitud y muchas gracias de antemano por ellos!

Answer 1

Parece como si estuviera tratando de producir un gradiente de replicar esto:

"Luego aplica un 'resplandor interior 'a ella con un 25% de opacidad, 8 píxeles de desenfoque, blanco desde el centro ".

Puede hacer exactamente eso usando un recuadro de sombreado de caja. Por ejemplo:

-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

Bueno, tengo que decir que ... su pregunta me interesaba mucho, así que lo intenté.

he encontrado una solución, pero utiliza una etiqueta anidada <span> que es un poco tosco, pero es prácticamente idéntica a la imagen.

Aquí es lo que el HTML se parece a:

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

Aviso del anidada <span> interior de la <a>. Los espacios sin interrupción están ahí para darle a la flecha la misma cantidad de espacio que tiene en su imagen.

y aquí está la 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; 
    } 

Básicamente para obtener el efecto del centro de la resplandor, hice un resplandor exterior (en la forma de una gota de sombra) de un elemento interior. Espero que tenga sentido.

verlo en directo: http://ianstormtaylor.com/experiments/css-buttons

Que se diviertan!

Answer 3

sin margen de beneficio extra:

gradientes radiales son muy difíciles de controlar, y trabajar mucho más diferente a través de los navegadores de los gradientes lineales hacen. Y, a diferencia de un resplandor interno, en realidad serán circulares en lugar de coincidir con los contornos en su mayoría rectangulares de su caja.

Como todos los navegadores que permiten sombras de caja también permiten rgba y fondos múltiples, usaría una combinación de dos degradados lineales, apilados y usando colores rgba, uno horizontal y otro vertical. Algo a lo largo de estas líneas (reemplazando mis colores con lo que necesita):

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

También puede crear un degradado radial que va de blanco a transparente en un div superpuesto. Utilicé esta impresionante herramienta de generación de css3 que le brinda el css3 necesario para la compatibilidad con navegadores cruzados.

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

Espero que esto ayude a alguien!