Gradientes CSS3 para reproducir un efecto de ''brillo interior'' de Illustrator con el radio de borde aplicado

gradients radial-gradients

Question

Estoy en el proceso de intentar ubicar correctamente mi cabeza en torno a los gradientes de CSS3 (específicamente los radiales) y, al hacerlo, creo que me he planteado un desafío relativamente difícil.

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

Para crear esta imagen, creé un rectángulo con un color de fondo de rgb(63,64,63) o #3F403F , luego lo '' #3F403F '' para tener un radio de borde de 15px.

Luego le apliqué un ''brillo interior'' con una opacidad del 25%, 8px blur, blanco desde el centro. Finalmente, le apliqué un trazo blanco de 3 puntos. (Te estoy diciendo todo esto en caso de que desees reproducirlo, si la imagen de arriba no es suficiente).

Entonces, mi pregunta es así:

¿Es posible recrear este ''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 darles a los monos). También soy consciente del pequeño ''error'' en el webkit que representa incorrectamente un elemento con un color de fondo, un radio de borde y un borde (con un color diferente al color de fondo) - permite que el color de fondo fluya en la curva. 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 consejos aceptados con gratitud y muchas gracias de antemano por ellos!

Answer 1

Bueno, tengo que decir ... tu pregunta me interesó mucho, así que fui a eso.

Encontré una solución, pero usa una etiqueta <span> anidada que es un poco tosca, pero es prácticamente idéntica a su imagen.

Así es como se ve el HTML:

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

Observe el <span> anidado dentro del <a> . Los espacios que no se rompen están justo ahí para darle a la flecha la misma cantidad de espacio que tienes en tu foto.

Y aquí está el 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 de brillo interior, hice un brillo exterior (en forma de una sombra) de un elemento interno. Espero que tenga sentido.

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

¡Que te diviertas!

Answer 2

Parece que estás tratando de producir un gradiente para replicar esto:

"Luego le apliqué un ''resplandor interior'' con una opacidad del 25%, 8px borroso, blanco desde el centro".

Puedes hacer exactamente eso usando un recuadro de sombra. 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 3

Sin margen adicional:

Los gradientes radiales son muy difíciles de controlar y funcionan de manera mucho más diferente en los navegadores que los gradientes lineales. 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.

Dado que cada navegador que permite box-shadows también permite rgba y fondos múltiples, utilizaría una combinación de dos degradados lineales, apilados y con colores rgba, uno horizontal y otro verticalmente. Algo a lo largo de estas líneas (reemplazando mis colores con lo que necesitas):

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 pase de blanco a transparente en un div superpuesto. Utilicé esta increíble herramienta de generación de css3 que le brinda todo el css3 necesario para la compatibilidad con varios navegadores.

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

Espero que esto ayude a alguien!