:: CSS3. text-overflow

La propiedad de CSS3 "text-overflow" nos permite algunas opciones interesantes, a utilizar por ejemplo cuando un texto no cabe en el contenedor asociado.
Aunque los valores que puede tomar la propiedad text-overflow son las siguientes, la más utilizada y que funciona en la mayoría de los navegadores es "ellipsis":

• clip: valor predeterminado que únicamente recorta el texto
• ellipsis: añade tres puntos (...) al final del texto indicando que el tamaño del texto sobrepasa al de su contenedor
• string: se trata de una opción experimental, y que añade la cadena especificada al final del texto
• fade: se trata de una opción experimental, y que añade un fundido al final del texto

De esta manera un ejemplo de css que podemos establecer es:

.texto-largo{
   text-overflow:ellipsis;
}

Más infomación: https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow&preval=ellipsis

:: Estilos CSS. Cómo crear un bocadillo

Para crear un "bocadillo", mensaje al estilo de un cómic podemos realizarlo utilizando estilos CSS.

Los estilos que debemos aplicar sobre una capa para que esta tenga el aspecto de un "bocadillo", son los siguientes:
.bocadillo{

.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}

El código fuente completo es el siguiente:

< html lang="es" >
< head >

< title >Bocadillo (mensaje)< /title >
< style >
.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}
< /style >
< /head >
< body >
 < div class="bocadillo" >
 Mensaje de texto dentro de un bocadillo al estilo cómic.
 < /div >
< /body >
< /html >

:: Sombras en CSS

En CSS3 podemos establecer sombras sobre diversos elementos por medio de "text-shadow" y "box-shadow".
Un sencillo ejemplo de su uso sería el siguiente:
< !DOCTYPE html >
< html lang="es" >
< head >
< meta charset="UTF-8" >
< title >Text Shadow y Box Shadow< /title >
< style >
body{
font-family: trebuchet ms;
display: flex;
justify-content: space-around;
flex-direction: column;
margin: 40px;
}
h1{
color: #000;
text-shadow: 0 0 20px #dadada;
}
input{
font-size: 1em;
background-color: #fff;
border: 1px solid #dcdcdc;
border-radius: 5px;
padding: 8px;
width: 400px;
box-shadow: 0 0 20px #dedede;
}
div {
padding: 20px;
background-color: #333;
color: #ddd;
width: 300px;
font-size: 1em;
box-shadow: 0 0 20px #dcdcdc;
border-radius: 5px;
}
< /style >
< /head >
< body >
< h1 >Texto con sombra< /h1 >
< br />
< input type="text" placeholder="Introduzca un valor" />
< br />
< div >Efecto sobre una capa< /div >
< /body >
< /html >


La salida del código anterior sería algo como esto:

:: Especificidad CSS

Mediante la siguiente herramienta podemos determinar gráficamente si la especificidad de nuestros CSS es correcta. Para ello copiaremos nuestra hoja de estilos en el cajetín que nos muestra, y esperaremos unos segundos a la generación del gráfico.
Los picos en la gráfica son algo no deseable, y la tendencia debería ser a aumentar el nivel de especificidad (eje Y) a medida que avanza el CSS.


Más información sobre el generador de especificidad de las hojas de estilo:
https://jonassebastianohlsson.com/specificity-graph/

Información detallada sobre la especificidad en CSS:
http://csswizardry.com/2014/10/the-specificity-graph/

:: CSS. Cómo centrar elementos HTML

Breve resumen sobre cómo centrar elementos HTML, teniendo en cuenta si son elementos de bloque o de línea.
Algo a tener en cuenta y que puede sernos de ayuda cuando estamos maquetando una web.

Fuente: Campus MVP

:: CSSLint. Mejora tus hojas de estilo

Se trata de un servicio online y gratuito que nos ayudará a revisar y mejorar nuestras hojas de estilo.
Su funcionamiento es muy sencillo. Tras acceder a la url: ccslint.net copiaremos nuestro css en el cajetin y pulsaremos el botón: Lint !.
Desde este punto podemos configurar el tipo de errores a analizar, agrupados en las siguientes categorías:
- Errores
- Compatibilidad
- Rendimiento
- Mantenibilidad y duplicación
- Accesibilidad
- OOCSS

Tras el análisis de nuestro CSS obtendremos los errores encontrados, en función de su importancia, el nº de línea, la columna, título, navegador en el que podrán darse problemas, etcétera.

Más información: csslint.net

:: Aplicaciones 3D con CSS

Cada día aparecen nuevas aplicaciones de las hojas de estilo, y ahora podemos ver un ejemplo de visualización de moléculas en 3D con el simple uso de hojas de estilo sobre dispositivos táctiles.
Para simular por ejemplo unos circulos en 3D utilizaremos la técnica "billboarding" que consiste es rotar cada uno de los objetos de forma que aparezca todo el tiempo delante de la cámara, creando la ilusión de las 3 dimensiones. Tendremos que rotar cada uno de los circulos individualmente en la dirección opuesta del contenedor padre.

3D Molecules on the iPad from jackadam on Vimeo.

Más información: http://blog.jackadam.net