Dentro de CSS3 tenemos la capacidad de embeber nuestras propias fuentes dentro de nuestra página web. Abriendonos a un gran abanico de tipografías y evitando las restricciones de las propias fuentes que vienen definidas en el estándar de CSS.

Esto nos dará una gran potencia, ya que simplemente tendremos que generar texto y aplicarles la nueva tipografía gracias a la capacidad de embeber nuestras propias fuentes y no tendremos que recurrir a soluciones como la integración de tipografías con imágenes. Tendremos una página web más ligera.

Lo primero que tenemos que hacer es tener una tipografía. Las extensiones soportadas son TrueType (.ttf), OpenType (.otf) y Scalable Vector Grapgichs (.svg).

Así, nuestra fuente elegida para el ejemplo de embeber fuentes en CSS3 es NisePico.ttf.

La regla que tenemos que meter en CSS3 para embeber nuestra fuente es @font-face. Esta regla lo que hace es definir el nombre de nuestra fuente e indicar de dónde se descarga dicha fuente. Así el código será el siguiente:

@font-face {
     font-family: 'NisePico';
     src: url('NisePico.ttf');
}

Ya simplemente podremos utilizar la fuente NisePico dentro de cualquier uso del font en nuestras CSS. Así, por ejemplo, podemos definirnos el siguiente estilo.

.fuente1 {
     font: 40px 'NisePico', Arial, sans-serif;;
     color:red;
     letter-spacing: 0;
     text-align:center;
     text-shadow: 3px 3px 7px #111;
}

Que asignaremos a la clase de cualquier elemento:

<span class="fuente1">EstO es una fuente NisePicO</span>

Aunque embeber fuentes en CSS3 es muy potente, tenemos que tener cuidado en comprobar que los navegadores sobre los que despleguemos nuestro desarrollo, tienen capacidad de interpretar el @font-face.

El soporte lo podemos encontrar desde Internet Explorer 9, Firefox 6, Chrome 13, Safari 3.2 y Opera 11 en adelante.Similar Posts:

• Formato de texto por defecto con CSS
• Pseudo-elementos tipograficos: Primera línea de un parrafo
• Letra capital
• Hola mundo en SVG
• Modificando propiedades CSS con un Slider

Cuando estamos diseñando una web una de las cosas que siempre vamos a necesitar es saber como poner un fondo en nuestras páginas web.

Aunque tiempo atrás esto era una tarea que se podía hacer en HTML, desde que se separo HTML para la estructura y CSS para el diseño, fue este segundo lenguaje, el CSS, el que se quedó encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web es background. Dicho elemento se puede aplicar al fondo de diferentes elementos. Si bien, si queremos utilizar para poner el fondo de la página web, lo tendremos que utilizar sobre el elemento body.

La estructura del elemento background es la siguiente:

background: [color] [image] [repeat] [attachment] [position];

Es decir, podemos indicarle un color RGB, una imagen, podemos indicar cómo se repite o si no se repite. Con attachment podemos indicar si se queda fijo o en formato scroll y por último podremos indicar la posición inicial en la que se situará la imagen.

Lo mejor que puedes hacer es leerte la documentación sobre el elemento background.

Así, nuestro código CSS quedará de la siguiente forma:

 
<style type="text/css">
body {  
        background:url(fondo.gif) repeat 0 0;                   
 }
</style>
 

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.

Otra de la cosas que hay que fijarse en el código es que utilizamos la función url() para indicar el directorio dónde se encuentra la imagen. En nuestro caso la página que diseñamos para ponerle en fondo de mi web está en el mismo directorio que la imagen. Si bien, si queremos utilizar otro directorio podemos poner lo siguiente:

 
<style type="text/css">
body {  
        background:url('/imagenes/fondo.gif') repeat 0 0;                   
 }
</style>
 

Ahora la imagen se encuentra en un directorio llamados "imagenes" que está en la raiz.

Por último tenemos que saber que existe otra propiedad llamada background-image, la cual nos permite solo indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.

En este caso el código quedaría de la siguiente forma:

 
<style type="text/css">
body {  
        background-image:url('/imagenes/fondo.gif');
 }
</style>
 

Similar Posts:

• Fondo estático en una página web
• Múltiples fondos
• Poner un color de fondo a nuestra web
• Fondo de pantalla estático en hi5.com
• Combos con imagenes

Una de las mejoras menos conocidas en CSS3 es la capacidad de especificar múltiples fondos con la propiedad background. De esta forma los diferentes fondos se irán montando en cascada.

Pero primero revisemos la propiedad background.

background: [color] [image] [repeat] [attachment] [position];

De esta forma, poner una imagen de forma sencilla podría hacerse de la siguiente forma:

background:url(logo.png) no-repeat 50px 700px;

Para poner múltiples fondos con CSS simplemente tendremos que concatenarlos con comas. Así, si queremos tener dos imágenes de fondo lo haremos de la siguiente forma:

background:url(logo.png) no-repeat 50px 700px,
                url(bg.gif) repeat 0 0;

Como el soporte de múltiples fondos no está en todos los navegadores tendremos que utilizar un pequeño truco, y este será especificar varios fondos. Uno de ellos será definido de la forma tradicional:

background:url(bg.gif) repeat 0 0;
background:url(logo.png) no-repeat 50px 700px,
                url(bg.gif) repeat 0 0;  

Así el navegador que no soporte los múltiples fondos, cargará un único fondo, de la forma tradicional.

Las versiones de los navegadores a partir de las cuales se soportan los múltiples fondos con CSS son:

• Chrome 4.0
• Safari 4.0
• Opera 10.10
• Firefox 3.6
• Internet Explorer 9

Similar Posts:

• Fondo estático en una página web
• Combos con imagenes
• Poner un fondo en mi página web
• Fondo de pantalla estático en hi5.com
• Poner un color de fondo a nuestra web

Gracias a CSS3 podemos redondear los bordes de los elementos. Y es que para redondear los bordes con CSS utilizaremos la propiedad border-radius.

La sintaxis general de border-radius es la siguiente:

border-radius: [tamaño|porcentaje];

De esta forma podemos indicar el tamaño o porcentaje en el que se redondeará cada una de las esquinas de la capa. El valor corresponde con el radio de la circunferencia trazada en la esquina.

Así, si utilizamos:

border-radius: 15px;

Veremos el siguiente resultado:

Podemos especificar un radio para cada una de las esquinas. En este caso se aplicará el orden de las agujas del reloj, empezado por la esquina superior izquierda, siguiendo por la esquina superior derecha, esquina inferior derecha y esquina inferior izquierda.

border-radius: 5px 30px 45px 60px;

Si bien tenemos la capacidad de indicar el tamaño de cada de las esquinas por separado mediante:

border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Cuando identificamos los radios de las esquinas por separado podemos indicar de forma diferente los dos radios que conforman la esquina. Por ejemplo, podríamos modificar la esquina superior izquierda de la siguiente forma:

border-top-left-radius: 400px 200px;

Y obtendremos el siguiente resultado:

Si queremos modificar los dos radios de todas las esquinas podemos utilizar la versión reducida de border-radius:

border-radius: [tamaño|porcentaje] {1,4} [tamaño|porcentaje] {1,4};

Por último tenemos que ser conscientes del soporte de la propiedad border-radius de CSS3. Ya que no todos los navegadores van a poder ejecutarla. En esos casos, los bordes que hayamos redondeado no se verán.

La implementación de border-radius que hemos visto es la de la W3C. Hay implementaciones propietarias en los motores de renderizado de los browsers. Este es el caso de mozilla. Dónde las propiedades para redondear los borders con CSS están especificadas como:

-moz-border-radius: [tamaño|porcentaje];
-moz-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-moz-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

En el caso de Webkit (sería, por ejemplo, para versiones antiguas de Safari) se soportaba mediante el prefijo -webkit:

-webkit-border-radius: [tamaño|porcentaje];
-webkit-border-top-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-bottom-left-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-top-right-radius: [tamaño|porcentaje] [tamaño|porcentaje];
-webkit-border-bottom-right-radius: [tamaño|porcentaje] [tamaño|porcentaje;

Por lo cual, si queremos buscar compatibilidad con nuestros ejemplos anteriores podemos poner lo siguiente:

border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;

border-radius: 5px 30px 45px 60px;
-moz-border-radius: 5px 30px 45px 60px;
-webkit-border-radius: 15px;

border-top-left-radius: 400px 200px;
-moz-border-top-left-radius: 400px 200px;
-webkit-border-radius: 15px;

Los navegadores a partir de los cuales se empezó a dar soporte a border-radius son:

• Chrome 0.2 (con -webkit) y Chrome 4.0 (con el estándar)
• Opera 10.5
• Safari 3.0 (con -webkit) y Safari 5.0 (con el estándar)
• Firefox 1.0 (con -moz) y Firefox 4.0 (con el estándar)
• Internet Explorer 9

Similar Posts:

• Bordes 3D con CSS
• Imagenes con borde
• Borde con doble linea mediante CSS
• Bordes con puntos
• Borde con lineas discontinuas

Hay situaciones en las que el contenido que queremos poner puede desbordar del tamaño de la capa en la que están contenidos. En este sentido ya vimos como controlar el overflow de una capa.

Ahora vamos a ver un caso práctico del uso de las capacidades CSS. Y es el que se produce, por ejemplo, al añadir código fuente que quieras mostrar en una página. Cosa que nos pasa ya en nuestros códigos fuente (y que deberíamos de subsanar).

En este caso, ya que el contenido el código fuente y los caracteres pueden ser variopintos, va dentro de etiquetas PRE.

 
< pre class="codigo" >
<!-- Código fuente -->
< /pre >
 

La idea es ahora que el código fuente nos aparezca en una capa con scroll. Para ello vamos a manejar la propiedad CSS overflow. Lo que vamos a indicar, es que en caso de que haya overflow, se aplique un scroll.

El código CSS sería el siguiente:

.codigo{
  width:400px;
  height:300px;
  display:block;
  overflow:scroll
}

De esta forma sencilla podremos tener capas en las cuales mostrar el código fuente. Sencillo verdad... Ahora solo queda que lo apliquemos a Linea de Código. Similar Posts:

• Controlando el overflow de una capa
• Quitar el scroll de nuestra página web
• Imagenes con sombra en CSS
• Modificando propiedades CSS con un Slider
• Cambiar el color de las barras de scroll

Como veíamos en el artículo definir el ancho de una capa con CSS, una de las cosas que nos puede suceder es que el contenido de la capa sea más grande al tamaño que demos a la capa.

Aunque en el ejemplo de definir el ancho de una capa con CSS sucedía con el texto, lo más normal es que suceda de forma más normal cuando utilicemos otros elementos como las imágenes.

Por ejemplo, nos puede pasar lo siguiente:

En esta situación, cuando trabajemos con capas, tendremos que controlar la propiedad overflow de la capa. Es decir, como queremos que desborde el contenido de la capa. Para ello podemos utilizar los siguientes valores de overflow:

• visible - el contenido superará el tamaño definido por la capa. Es decir, si es más grande el contenido, se quedará por encima de la capa. Es el valor por defecto de la propiedad overflow.
• hidden - el contenido que desborda el tamaño de la capa se corta y queda eliminado. Es decir, no se visualiza.
• scroll - la capa incorpora un scroll vertical y horizontal para poder ver la totalidad del contenido, sin modificar el tamaño de la capa.
• auto - incorpora scroll solo en la dirección que lo necesite.
• inherit - el valor de la propiedad será heredado del valor del atributo overflow del elemento padre.

Veamos como queda nuestro diseño dependiendo del valor de las propiedades de overflow:

El código CSS que tenemos que añadir quedaría de la siguiente forma:

 
<style type="text/css">
.casa{
  width:200px;
  background:red;
  overflow:scroll;
} 
</style>
 

Este es el caso del valor overflow. Solo tienes que modificar este valor para ver como quedan los otros valores.

Seguiremos con más artículos sobre las capas. Los siguientes serán para controlar su ubicación...Similar Posts:

• Código fuente en una capa con scroll
• Quitar el scroll de nuestra página web
• Definir el ancho de una capa con CSS
• Obtener el contenido de una capa con Prototype
• Cargar contenido con el scroll usando jQuery

Una de las mejores formas de maquetar nuestras web es utilizando capas (principalmente elementos DIV). Una vez que definamos la estructura de nuestro documento HTML mediante las capas podremos maquetarlo y darle estilo con CSS. Definir el ancho de una capa con CSS debería de ser una cosa, a priori sencilla. Pero veremos que alguna cosa que otra hay que tener en consideración.

Las estructura de nuestro documento HTML podría ser la siguiente:

 
<!-- Capa 1 -->
<div id="equipos">
<h2>Equipos</h2>
 
Los equipos que se han presentado son FC.Barcelona, Real Madrid, At. Madrid y Betis.
</div>
 
<!-- Capa 2 -->
<div id="goleadores">
<h2>Goleadores</h2>
 
Los goleadores de esta temporada son Villa, Diego Forlan, Messi y Cristiano Ronaldo.
</div>
 

Como podemos ver, tenemos dos capas (la de equipos de fútbol y la de goleadores). Una cosa importante es que hemos dado un ID a las capas. Ya que mediante ese ID vamos a dar un ancho a dichas capas.

Si queremos definir el ancho de una capa con CSS deberemos de utilizar el atributo width. Así nuestra hoja de estilos CSS quedará de la siguiente forma:

 
<style type="text/css">
#equipos{
  width:100px;
  background:red;
}
#goleadores {
  width:100px;
  backgorund:blue;
} 
</style>
 

Vemos que utilizamos los valores de los ID precedidos de una almohadilla (#) para dar el estilo CSS al elemento.

Hemos añadido un fondo a la capa, mediante el atributo background, con el fin de poder apreciar que hemos dado a las capas un ancho de 100px.

Inicialmente podríamos decir que ya tenemos resuelto nuestro problema y que era sencillo definir el ancho de una capa con CSS.

Veamos una captura de la imagen...

Bueno, viendo el resultado, quizás me asalten algunas dudas:

• El texto "Goleadores" se sale de la capa. ¿Cómo debería de quedar ajustado?
• Las capas están una debajo de otra. Yo pensaba que al definirlas un ancho, se situarían una detrás de otra.
• ...

De momento dejamos definido el ancho de las capas con CSS. En siguientes artículos iremos viendo como ajustar esos pequeños detalles.Similar Posts:

• Controlando el overflow de una capa
• Obtener el contenido de una capa con Prototype
• Combos con imagenes
• Listar opciones seleccionadas de un combo con jQuery
• Cambiar el contenido de una capa con JavaScript

En algunos casos tener scroll en nuestras páginas web puede resultar molesto para nuestros usuarios. O, al menos, eso dicen ciertos diseñadores. Si bien, a mí me parece un elemento muy útil.

Si te encuentras en una situación en la que tengas que quitar el scroll puedes seguir una serie de pasos y apoyándonos en el lenguaje CSS. La idea consiste en jugar con la propiedad overflow. La propiedad overflow controla lo que sucede cuando un contenido desborda el área en la que se encuentra. Si lo aplicamos a nivel de toda la página, será cuando el contenido supere el tamaño de la ventana.

Los valores que puede tener la propiedad overflow serían:

• visible, el contenido que sobresale no se corta. Se renderiza fuera del área que tenía asignado. Este es el valor por defecto.
• hidden, el contenido que sobresale se corta y el resto del contenido se queda como invisible.The overflow is clipped, and the rest of the content will be invisible
• scroll, el contenido que sobresale se corta, pero se añade una scrollbar que nos permite llegar al resto del contenido.
• auto, si el contenido que sobresale se corta, se añade una scrollbar para ver el resto del contenido.content
• inherit, el valor será heredado del elemento padre.

En nuestro caso vamos a asignar el valor hidden. Es decir, cortaremos el contenido que sobresale. Consecuentemente, el navegador no necesitará poner una barra de scroll.

El código a utilizar sería el siguiente:

 
<style type="text/css">
html,body { 
  overflow:hidden; 
}
</style>
 

Similar Posts:

• Controlando el overflow de una capa
• Código fuente en una capa con scroll
• Cambiar el color de las barras de scroll
• Fondo estático en una página web
• Número de inicio de una lista con CSS

Mediante este sencillo ejemplo veremos como podemos crear bordes con puntos. Los cuales podremos aplicar a múltiples objetos de nuestra página HTML.

Los bordes se pueden configurar mediante el atributo border-style. Cuando queremos que el borde sea con puntos deberemos de utilizar el valor "dotted".

border-style:dotted;

Este valor se lo podemos aplicar a varios elementos HTML directamente o bien crear un estilo adhoc donde definamos este tipo de borde. En nuestro ejemplo se lo vamos a aplicar a las tablas y vamos a crear el estilo "borde_con_puntos", el cual, mediante estilos en linea, aplicaremos al elemento concreto que queramos.

 
<style type="text/css">
.borde_con_puntos{
  border-style:dotted;
}
table{
  border-style:dotted;
}
</style>
 

Para ver el efecto en las tablas bastará con añadir una tabla a nuestra página:

 
<table>...</table>
 

Para aplicar el estilo en línea a un elemento en concreto utilizamos el atributo class. Veamos como quedaría sobre una imagen:

<img src="lineadecodigo.jpg" class="borde_con_puntos">

Visualizar el ejemplo
|- Descargar el código
|- Descargar del SVN
|- Reportar un error del códigoSimilar Posts:

• Borde con doble linea mediante CSS
• Imagenes con borde
• Bordes 3D con CSS
• Borde con lineas discontinuas
• Subrayado con puntos en CSS

En un procedimiento de diseño estándar lo más normal es que al mismo tiempo que definimos cómo será nuestra página vamos creando nuestras hojas de estilo CSS. De tal manera, cada vez que se realice una petición sobre la página, se descargue la hoja de estilos asociada.

Si bien, manipulando el DOM de la página podemos conseguir unos efectos interesantes, ya que podemos crear estilos CSS on-line.

La idea es crear un elemento <STYLE> y dotarle de contenido. Es decir, de los estilos que queremos crear online.

Para crear el elemento STYLE utilizamos el método document.createElement. Además indicaremos que el tipo de elemento es un "text/css"

estilo = document.createElement("style");
estilo.type = "text/css";

Una vez creado el elemento, deberemos de añadirle el estilo CSS que queremos crear on-line. En este punto tenemos dos formas de hacerlo, dependiendo de los navegadores (como no). En el caso del Internet Explorer al crear un elemento STYLE, se dispone del objeto styleSheet y de su propiedad cssText donde podemos asignar el código CSS

codigo = "body{background: red;}";
estilos.styleSheet.cssText = codigo;

Vemos que el código CSS añadido es muy sencillo, ya que simplemente pone el fondo de la página a rojo. Podemos poner el código CSS que queramos.

En el caso estándar lo que hacemos es crear un nodo hijo sobre el elemento. Es decir, manipularmos el DOM.

codigo = "body{background: red;}";
estilos.appendChild(document.createTextNode(codigo)); 

El código con la decisión será algo así:

codigo = "body{background: red;}";
 
if (estilos.styleSheet){
   estilos.styleSheet.cssText = codigo;
} else {
   estilos.appendChild(document.createTextNode(codigo));
}

Ahora solo nos quedará el añadir el elemento STYLE al DOM de nuestra página. Y nos preguntaremos, ¿en que parte del dom? y la respuesta es ¿donde ponemos los estilos CSS normalmente? En la cabecera.

Pues añadimos el elemento STYLE sobre el elemento HEAD del DOM.

document.getElementsByTagName("head")[0].appendChild(estilos);

Ahora solo nos quedará lanzar este código en algún punto de la página.

<script type="text/javascript">
function crearEstiloOnline(){
  var estilos = document.createElement("style");
  estilos.type = "text/css";
 
  codigo = "body{background: red;}";
 
  if (estilos.styleSheet){
     estilos.styleSheet.cssText = codigo;
  } else {
     estilos.appendChild(document.createTextNode(codigo)); 
  }
 
  document.getElementsByTagName("head")[0].appendChild(estilos);
}
</script>

Vía: Intenta

Visualizar el ejemplo | Descargar el códigoSimilar Posts:

• Crear elementos HTML con JavaScript
• Poner un color de fondo a nuestra web
• Cambiar estilos dinámicamente
• Borde con lineas discontinuas
• Nuevo validador de markup de la W3C