Hacer un triángulo con CSS3

¿Cómo puedo insertar la imagen de un triángulo en mi web sin usar imágenes? ¿Es posible hacerlo sólo con CSS3? En el pasado vimos como hacer un exágono o un octógono, y el triángulo es todavía más fácil:

Vamos a crear cuatro divs, cada uno de ellos para un triángulo en una dirección. Este sería el marcado HTML:

<div id="triangulo"></div>
<br/>
<div id="trianguloinvertido"></div>
<br/>
<div id="trianguloizquierda"></div>
<br />
<div id="trianguloderecha"></div>

Y ahora veamos el CSS:

#trianguloizquierda{
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-right:50px solid black;
	}

#trianguloderecha {
	  width: 0;
	  height: 0;
	  border-top: 50px solid transparent;
	  border-bottom: 50px solid transparent;
	  border-left: 50px solid black;
	}

#triangulo {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-bottom: 50px solid black;
	}

#trianguloinvertido {
	  width: 0;
	  height: 0;
	  border-left: 50px solid transparent;
	  border-right: 50px solid transparent;
	  border-top: 50px solid black;
	}

En este jsfiddle le puedes echar un ojo al resultado.

Con este simple truco de CSS podrás crear botones en forma de flecha o triángulo que darán una mejor imagen a tu proyecto,pudiendo jugar con los tamaños y los colores para adaptarlos mejor a tu maquetación.

Anuncios

CSS: el pseudo-elemento ::selection

¿Quieres definir un estilo para el texto seleccionado? ¿que el color de fondo sea verde moco? ¿que la leta se ponga en añil? Con CSS esto es posible utilizando el pseudo-elemento ::selection.

Debemos empezar recalcando que ::selection no pertenece a la especificación standar de CSS3 (estaba presente en los borradores, pero se eliminó de la especificación final), por tanto no está garantizado su funcionamiento en todos los navegadores. A pesar de eso tiene bastante compatibilidad, al menos con los navegadores para sistemas operativos de escritorio (y por otra parte, en un dispositivo móvil no es muy habitual andar seleccionando texto, al menos en mi caso). En caniuse podéis comprobarlo.

Si habéis ojeado el enlace anterior veríais que además en el caso de Firefox hay que usarlo con el prefijo -moz. En todo caso, este pseudo-elemento sólo acepta un pequeño grupo de reglas CSS: color, background, background-color y text-shadow. Ojo con querer utilizar una imagen de fondo, porque background-image será ignorado, igual que el resto de reglas que no sean las cuatro antes citadas.

Vamos con un ejemplillo de cómo funciona esto. Para ello usaremos nombres de clase llamados ejemploN a los que sumaremos el pseudo-elemento:

/*Empezamos por el color de fondo, gris*/
.ejemplo1::selection{
    background-color:#555555;
}
.ejemplo1::-moz-selection{
    background-color:#555555;
}
/*Ponemos la letra en rojo*/
.ejemplo2::selection{
    color:#FF0000;
}
.ejemplo2::-moz-selection{
    color:#FF0000;
}

/*Ponemos la letra en negro y el color de fondo gris claro*/
.ejemplo3::selection{
    background-color:#cccccc;
    color:#000000;
}
.ejemplo3::-moz-selection{
    background-color:#cccccc;
    color:#000000;
}

/*Le ponemos sombra al texto seleccionado*/
.ejemplo4::selection{
    text-shadow: 1px 1px 0 #27ae60;
}
.ejemplo4::-moz-selection{
   text-shadow: 1px 1px 0 #27ae60;
}

Puede ser un efecto interesante, pero repito que no forma parte de la especificación, no es un standar y por tanto puede que en un futuro de problemas o no funcione correctamente. Nos tocará esperar.

CSS3 Media Queries para Moto 360 Watch

Si el otro día os comentaba que había estado ojeando el tema de las media queries para los dispositivos de Apple, vamos ahora con el wearable de Motorola. ¿Qué resulución usaría en CSS para este dispositivo? Pues esta:

@media 
  (max-device-width: 218px)
  and (max-device-height: 281px) { 
/*Aquí lo que toque*/
}

Conforme me vaya enterando de más dispositivos los iré compartiendo por aquí.

Media Queries para Apple Watch

Minientrada sobre CSS (y maquera muy a mi pesar) rápida mientras cocino una más musical para esta semana. ¿Cuál sería el tamaño de pantalla en una media query para aplicar un estilo CSS concreto a algo que se visualice en un dispositivo Apple Watch (aka El Reloj Manzanita)? Pues segú veo en github sería lo siguiente:

@media
  (max-device-width: 42mm)
  and (min-device-width: 38mm) { 
/*Aquí el código css a implementar*/
}

Si me voy enterando de otros dispositivos os los iré anunciando.

Creando una tabla con los bordes redondos con CSS3

¿Cómo puede redondear los bordes de una tabla con CSS? Ponerle bordes al objeto table o al tr no va a funcionar, hay que hacerlo sobre el primer o el último td de la fila.

table { border-collapse: separate; }
td { border: solid 1px #000; }
/*PARA LA PRIMERA FILA TIENES DOS OPCIONES*/
/*Así sería la cosa
si has empezado con un tr
*/
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:first-child td:only-child { border-top-right-radius: 10px;
border-top-left-radius: 10px; }
/*si en lugar de eso has usado la etiquetas thead y th es más
sencillo todavía*/
th:first-child { border-top-left-radius: 10px; }
th:last-child { border-top-right-radius: 10px; }
th:only-child { border-top-right-radius: 10px;
border-top-left-radius: 10px; }

/*Y ASÍ PONEMOS EL PIE*/
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
tr:last-child td:only-child { border-bottom-right-radius: 10px;border-bottom-left-radius: 10px; }

Cambiando el color de fondo del Centro de Software de Ubuntu para verlo en temas oscuros

Como os comentaba no hace mucho, actualicé de ElementaryOS Luna a ElementaryOS Freya. Posteriormente le metí el tema Numix, que estéticamente ha quedado fetén, pero que tenía un problema muy grande (típico de los temas oscuros GTK, por cierto): el fondo del centro de software es demasiado claro y la letra es blanca, lo que provoca que sea imposible leer el texto.

¿Hay solución? Claro que sí, que para algo esto es software libre y podemos meter mano. Lo bueno del centro de software es que la estética está definida en un archivo CSS, así que podemos editarlo cómodamente.

Lo primero es abrir el archivo /usr/share/software-center/ui/gtk3/css/softwarecenter.css con un editor de texto y con permisos de administrador para poder trastear, por ejemplo con el comando

sudo gedit /usr/share/software-center/ui/gtk3/css/softwarecenter.css

Una vez con el archivo abierto, casi al principio de todo, tienes una línea que pone los siguiente:

@define-color super-light-aubergine #F4F1F3;

Ahí se define el color de fondo del Centro de Software, que es un gris muy clarito, por lo que al estar ahora la fuente en blanco por el tema no se verá. La cosa es ponerle un gris más oscuro, así que la solución es comentar esta línea y cambiarle el color por otro tal que así (le voy a poner un gris oscuro):

@define-color super-light-aubergine #8A8A8A;

Y esto deja un resultado como el de la siguiente foto:
Centro Software Modificado

No es muy estético, pero ahora ya se lee. Podéis elegir otro color si queréis, tened en cuenta que el texto oscila entre blanco y negro, por lo que estos dos no son recomendables, el resto ya a vuestro libre albedrío.

Centrando verticalmente elementos de bloque en CSS

Si bien centrar elementos horizontalmente no suele suponer un problema cuando trabajamos con CSS, el hacerlo verticalmente es mucho más puñetero. Desde que se jubilaron las engorrosas tablas, que todo hay que decirlo para el tema del centrado eran bastante cómodas, son muchos los que llevan buscando una solución. Con los elementos inline la cosa no es tan pesada, pero con los elementos de bloque puede tonarse desquiciante.

Si trabajamos con navegadores modernos, con total soporte de CSS3, la solución nos llega de la mano de Flexbox con unas pocas líneas. Basta con definir la alineación usando esta propiedad en el elemento contenedor como podéis ver en este fiddle:

.contenedor {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Con flexbox la alineación vertical es tan simple como en las viejas tablas. Pero ¿y si no podemos contar con flexbox?… el horror, el horror… Bueno, no tanto, también hay una solución. En este caso lo primero será definir la posición del contenedor como relativa, y el elemento a centrar de forma absoluta, situado en la mitad de la altura del padre y a su vez desplazando su eje Y otro 50% (suena más rollo de lo que es, la idea es poner el borde superior en la mitad del contenedor y luego desplazarlo la mitad de su propia altura de forma que el centro del elemento queda en el centro del contenedor, viendo el código a continuación se entiende, y podéis ver el resultado en un fiddle)

.contenerdor {
  position: relative;
}
.elementoACentrar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Listo, dos métodos para alinear verticalmente un elemento de bloque en CSS que te pueden ahorrar mucho tiempo.