elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  El Cuadro Del Div Afecta mi box-shadow [CSS]		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: El Cuadro Del Div Afecta mi box-shadow [CSS]  (Leído 2,309 veces)
SrTrp


Desconectado Desconectado

Mensajes: 328


Script/C#


Ver Perfil
El Cuadro Del Div Afecta mi box-shadow [CSS]
« en: 20 Enero 2020, 01:41 am »
Buenas lo que quiero lograr es un efecto como el de la derecha, pero lo que hace es que me da el efecto de la izquierda mi imagen es png. no se si sea porque le estoy asignando el background como imagen al mismo div, como podría solucionar esto?
Citar


Código
  1. <div class="Coin">
  2.             <p><?php echo $_SESSION['monedas']; ?></p>
  3.         </div>
  4.  

Código
  1. .Coin:hover{
  2.   cursor:pointer;
  3.   -moz-box-shadow: 0px 0px 42px #12bfff;
  4.   -webkit-box-shadow: 0px 0px -2px #12bfff;
  5.   box-shadow: 10px 0px 44px #12bfff;
  6.  
  7. }
  8. .Coin{
  9.   background-image: url("../Imgs/coin.png");
  10.   width: 100px;
  11.   height: 100px;
  12.   background-size: 100px 100px;
  13.   display: flex;
  14.   justify-content: center;
  15.   align-items: center;
  16. }
  17. .Coin p{
  18.   font-size:20px;
  19.   color:white;
  20. }
  21.  
En línea
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.399


Turn off the red ligth


Ver Perfil WWW
Re: El Cuadro Del Div Afecta mi box-shadow [CSS]
« Respuesta #1 en: 20 Enero 2020, 02:03 am »
Métele un borde rounded y lo quitas.
border-radius: 50%;
border: 0;

Con lo que tienes funciona 100%

Asegúrate de tener centrada la moneda. Así te es más fácil que quede bien. Te es más sencillo retocarla gráficamente que ajustar en el css.

No te recomiendo usar px como medida. Si tengo una pantalla de 3 metros no veo la moneda. Y si tengo una mini solo veo una moneda enorme.

Tampoco cualquier técnica responsive que veas por ahí, porque te puede estirar la imagen, duplicarla, repetirla, etc. Y es un show diseñar así.

Mete el meta tag del viewport y usa vw y vh para los tamaños. Y media query para las distintas resoluciones.
Es mejor incluso usar solo vw el 100% de las veces porque algunos dispositivos sacan el teclado táctil en pantalla y reducen el alto del viewport no dándote un diseño estable que a lo mejor buscas.

También puede hacer diseños responsive con grids o con javascript usando body.innerWidth y medidas así. Hay librerías completas basado en ello. Yo prefiero no usar javascript para no bloquear el IU. Usando css puede correr animaciones secillamente detrás de un alert por ejemplo.


« Última modificación: 20 Enero 2020, 02:05 am por @?0!,5^34 » En línea
Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cuadro de texto C#
.NET (C#, VB.NET, ASP) 		shin_akuma 3 8,890 Último mensaje 30 Marzo 2008, 22:02 pm
por sangano
que es un shadow phone?
Dispositivos Móviles (PDA's, Smartphones, Tablets) 		zamolxe 0 2,100 Último mensaje 31 Mayo 2011, 17:00 pm
por zamolxe
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines