0

Hola a todos He conseguido realizar más o menos lo que quería con mi web. Pero me encuentro con que ahora quiero hacer que la parte de arriba de mi "botón" sea transparente para así poder visualizar la línea negra de la plantilla y el resto del botón sea blanco con el color del texto como el que tengo puesto en la plantilla general. Pero no lo consigo. Adjunto código css para a ver si alguien, me puede ayudar. No hay html, ya que esto es joomla y posiciones de módulos... y solo estoy tocando los estilos de la plantilla, los "botones" esos los he creado con css y solo estoy preguntando sobre css

.drop-down li a, .drop-down li span.separator {
border: 1px;
display : inline;
padding: 12px 4px 12px 6px;
font-size: 1.2em;
text-decoration: none;
text-align: left;
background-image:none;

-webkit-transition : all 0.3s ease-in-out;
-moz-transition : all 0.3s ease-in-out;
-ms-transition : all 0.3s ease-in-out;
-o-transition : all 0.3s ease-in-out;
transition : all 0.90s ease-in-out;
word-wrap: break-word;

    /*estilo forma botón*/
    border: 2px solid transparent; /*anchura, estilo y color borde*/
    padding: 0; /*espacio alrededor texto*/
    background-color: #778899; /*color botón*/
    color: #7A0707; /*color texto*/
    text-decoration: none; /*decoración texto*/
    text-transform: uppercase; /*capitalización texto*/
    font-family: 'Helvetica', sans-serif; /*tipografía texto*/
}

menú

Como veis en la imagen el fondo entero es gris. Quiero que sea blanco pero la parte de arriba, que tenga esa línea negra o sea transparente. A parte quiero que salga todo como en una caja. Intento ponerle un "border" a esa parte del módulo "js-navigation" Pero no me aparece. adjunto código de este bloque

#js_navigation{
    position: fixed;
    margin-top: 180px;
    border-top: 10px;
    border-bottom: 1em;
}

Con todo el código que he estado tocando. Mis preguntas son:

  • Como hacer que la parte de arriba del botón tenga la misma línea negra de atrás o como hacer transparente la parte de arriba del botón.

  • Como puedo unir todos mis botones, es decir que no haya márgenes o si los hay ya se los daré yo como vea conveniente.

  • Como puedo meter esos botones en una especie de "div" para que sea una caja.

  • Como le cambio en color al texto del enlace, ya que no puedo cambiarlo.

6
  • 1
    Por favor, incluye el código HTML y CSS relevante a la pregunta para crear un ejemplo mínimo verificable y que podamos reproducir el problema y darte una solución
    – Alvaro Montoro
    Commented el 17 jul. 2017 a las 0:26
  • ya está todo el código aportado....
    – scorpions
    Commented el 17 jul. 2017 a las 0:33
  • 1
    Está el CSS, falta el HTML
    – Alvaro Montoro
    Commented el 17 jul. 2017 a las 0:35
  • no hay html, ya que esto es joomla y posiciones de módulos... y solo estoy tocando los estilos de la plantilla, los "botones" esos los he creado con css y solo estoy preguntando sobre css
    – scorpions
    Commented el 17 jul. 2017 a las 0:39
  • Lo que mencionas en último comentario debe incluirse en la pregunta.
    – Rubén
    Commented el 17 jul. 2017 a las 1:17

1 respuesta 1

1

Creo que esto puede ayudar:

	button{
		background: -o-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));
		background: -moz-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));
		background: -webkit-linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));
		background: linear-gradient(rgba(50, 50, 50, .5), rgba(50, 50, 50, .75), rgb(50, 50, 50));
		height: 90%;
                width: 90%;
                margin: 5%;
		color: #aaa;
	}
  <div style="background: red; width: 100px; text-align: center; height: 100px;">
	  <button>Degradado</button>
  </div>

Cambia el color del div para ver la diferencia.

Entonces, usando los colores de tus botones (los convertí a rgba pues desconozco cómo hacerle para hex) código quedaría algo así:

button{
	background: -o-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));
	background: -moz-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));
	background: -webkit-linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));
	background: linear-gradient(rgba(119, 136, 153, .5), rgba(119, 136, 153, .75), rgb(119, 136, 153));
	color: #7A0707;
}
<button>Degradado</button>

Respondiendo a las preguntas:

  1. Dándole un degradado donde la parte de arriba sea transparente (en este caso le puse al 50%)
  2. Puedes hacerlo con float: left;, pero es más recomendable con la propiedad flex. También con un display: inline-block; o margin: 0; TODO depende de la estructura de tu página.
  3. Para ponerlos en un div sólo los anidas en uno. Hasta donde yo sé con CSS no es posible hacer eso.
  4. Con la propiedad color, si lo que quieres es quitarle lo subrayado, es con text-decoration: none;

Esto lo comentaría pero no tengo suficiente reputación: Haz las preguntas más claras y en algunos casos (aquí), es sumamente esencial revisar todo el código para dar una buena respuesta, sino no las podemos responder bien, por ejemplo en la 3er respuesta te dí varias respuestas porque no conozco la estructura.

6
  • muchas gracias por tu respuesta. voy a poner una imagen de lo que me gustaría hacer... a ver si me podéis echar una mano.
    – scorpions
    Commented el 18 jul. 2017 a las 9:25
  • i.sstatic.net/dwTAW.png eso es lo que me gustaría hacer pero no se como hacerlo... porque si supiera donde añadir el div... pues estupendo
    – scorpions
    Commented el 18 jul. 2017 a las 9:27
  • Gracias por tu respuesta. Me puedes decir que significan estás líneas?? ya que no tengo una gran experiencia con css y hay muchas cosas que no entiendo y para poder modificar tu código lo necesito. Son las siguientes: Todas las de background: la propiedad -o-linear-gradient; -moz-linear-gradient; -webkit-linear-gradient; linear-gradient
    – scorpions
    Commented el 18 jul. 2017 a las 13:33
  • @guzman he respondido, a tu respuesta
    – scorpions
    Commented el 18 jul. 2017 a las 18:07
  • Aquí puedes encontrar excelente documentación
    – ben
    Commented el 18 jul. 2017 a las 23:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.