Text-stroke, borde en el texto con CSS3
Es muy fácil hacer borde en un texto con imágenes, con Photoshop, pero, ¿y si queremos hacerlo con CSS? Una nueva característica de CSS3, text-stroke, (aunque todavía no es parte de él) es la inclusión de borde en el texto, de una forma muy sencilla, tal y como nos tiene acostumbrados CSS3. Pero hay que … Lee más!
Cómo elegir la mejor tipografía para tu diseño
Existen una lista interminable de tipografías, pero sólo unas cuantas encajarán con el estilo que tenemos en el sitio web. Desde aquí os mostraré algunos puntos que os pueden resultar útiles para distinguir entre una tipografía aceptable y otra que no es buena para nuestro sitio. En las tipografías para títulos, se podrían seguir estos … Lee más!
Eliminar el contorno de puntos en Firefox con CSS
Todo el que use Firefox 3 se dará cuenta que al hacer click sobre un enlace o un elemento enlazado con la etiqueta <a> este crea un recuadro punteado alrededor de sí mismo. En Firefox 3, el color de los puntos está determinado por el color del texto, en anteriores versiones y en otros navegadores … Lee más!
Sintaxis de @font-face
En esta entrada explicaré los mejores métodos para introducir @font-face en nuestro documento. @font-face { font-family: ‘Graublau Web’; src: url(GraublauWeb.eot); src: local(‘Graublau Web Regular’), local(‘Graublau Web’), url(GraublauWeb.otf) format(‘opentype’); } El código de arriba podría ser la mejor opción para aplicar @font-face, pero en IE no nos sirve y necesitamos tener una fuente .EOT, mientras que … Lee más!
@font-face, inserta cualquier tipografía en tu sitio web
Existen una lista de tipografías estándares que todos los navegadores pueden interpretar, pero, ¿qué ocurre con las demás tipografías? ¿Cómo podemos implementarlas? @font-face es una propiedad muy útil para definir en un sitio web una fuente que el usuario no tenga instalada en su ordenador. Sólo debemos subir la fuente deseada a nuestro sitio web … Lee más!
Bloques de texto encima de una imagen
Ya enseñamos hace tiempo a crear un rotador de imágenes con CSS, pero, ¿Y si solo deseamos ubicar texto encima de una imagen? En esta entrada aprenderemos a insertar bloques de texto encima de una imagen. Estructura La imagen se ubica al fondo del todo, y, el bloque de texto está agrupado por un encabezado … Lee más!
Rotar un texto con CSS Transformations
Igual que disponíamos la fecha con CSS Sprites, ahora queremos rotar un texto para crear una fecha gracias a CSS Transformations. Explicación de su funcionamiento CSS Mágico La clave de estas rotaciones se encuentran en CSS Transformations, y tanto Firefox como Safari tienen esta ventaja: -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); Es decir: -webkit-transform: rotate(VALORdeg);-moz-transform: rotate(VALORdeg);
Crear enlaces inteligentes con CSS
Muchas veces necesitamos mostrar iconos al lado de los enlaces, ayuda al lector además de que ayudan a expresar el significado del enlace si sabemos utilizarlo correctamente. Pero, ¿y si estos enlaces fueran “inteligentes” y dependiendo del contenido del enlace, pasaran a mostrar un icono distinto automáticamente? Mucho más inteligentes que si tienen el poder … Lee más!
Insertar imagen en un campo de texto con CSS
Un usuario me preguntó como podía insertar una imagen en un campo de texto. Bien, es muy sencillo, y en esta entrada se explicará paso a paso.
Grabado de texto con CSS
Hay muchas técnicas de grabar un texto. Apple utiliza mucho esta técnica últimamente, por ello queremos enseñarla para que la podáis usar. Existen varios tipos:
Sobreescribir estilos en línea en CSS
Un pequeño truco en CSS que os vamos a explicar es cómo invalidar estilos que se han definido en línea, sustituyéndolos por los que están en el archivo CSS o entre las etiquetas <style type=”text/CSS”></style>.Este truco no funciona en Internet Explorer 6 pero sí en IE7, IE8, FireFox, Safari, y Opera.
Sombras en el texto sin usar text-shadow
La propiedad text-shadow, propiedad de CSS3, es muy nueva y por lo tanto la mayoría de los navegadores no la han implementado. Solo Safari, con sus versiones 3 y 4 lo soporta. Pero nosotros queremos que sea soportada por la mayoría de navegadores, así que vamos a implementar otra técnica para lograr sombras en el … Lee más!
