Archive for the ‘CSS’ Category

marzo 25, 2010 1

Generando CSS mediante PHP

By in CSS, PHP

Si algo se hecha de menos en CSS es el no poder hacer uso de variables o de cierta lógica. Hay que tener en cuenta que CSS es un lengauje meramente estilístico, sirve para describir los estilos y la presentación de los elementos de la página.

Si alguna vez necesitamos incluir lógica en los CSS, por ejemplo para cambiar la paleta de colores en función de la estación del año, podemos usar PHP para esto. Lo que vamos a tener ahora es un archivo PHP en lugar del CSS, por ejemplo style.php. En este archivo lo primero que tendremos será:

header("Content-type: text/css; charset: UTF-8");

De esta forma le decimos al navegador que el contenido será del tipo CSS. Veamos un ejemplo donde el color de fondo y el color del texto se seleccionará de forma aleatoria. Primero el código de nuestra página:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="es-ES">
<head>
<link rel="stylesheet" type="text/css" href="style.php"/>
</head>
<body>
<div id="bloque">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam at facilisis odio. Integer sollicitudin facilisis tortor, id
ullamcorper dolor dignissim vel. Curabitur tristique pellentesque iaculis.
Vivamus molestie condimentum hendrerit. In hac habitasse platea dictumst.</div>
</body>
</html>

Y ahora el del script PHP que genera la CSS:

<?php

header("Content-type: text/css; charset: UTF-8");

$colores = array(
  array('bg' => '#000', 'fg' => '#fff'),
  array('bg' => '#00f', 'fg' => '#fff'),
  array('bg' => '#fff', 'fg' => '#f00')
);

$color = $colores[rand(0,2)];
?>

#bloque {
color: <?php echo $color['fg'];?>;
background-color: <?php echo $color['bg'];?>;
}

Se puede ver como se elige una u otra paleta de forma aleatoria en este enlace.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: ,

octubre 13, 2009 0

Tutorial de CSS parte II. Menú horizontal con listas.

By in CSS

Hoy vamos a ver como crear un menú horizontal con listas. Hay muchos tutoriales en Internet donde viene explicado como hacer esto, pero aquí lo vamos a explicar paso a paso.

Lo primero que vamos a hacer va a ser crear nuestro menú con una lista no ordenada:

<ul id="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Sobre el Autor</a></li>
</ul>

Ahora vamos a aplicar los estilos. Para ello vamos a eliminar la viñeta por defecto (list-style: none) y vamos a hacer que los elementos floten a la izquierda, para que salga en horizontal. También le vamos a dar un borde para decorar y vamos a cambiar el color de fondo de los enlaces al pasar sobre ellos. Veamos el código CSS:

ul#menu {
  list-style: none;
  float: left;
  width: 900px;
  margin: 0;
  padding: 0;
  background: #f0f0f0;
  border: 1px solid #ddd;
}
ul#menu li {
  float: left;
  margin: 0;
  padding: 0;
  border-right: 1px solid #ddd;
}
ul#menu li a {
  float: left;
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
ul#menu li a:hover {
  background: #333;
  color: #f0f0f0;
}

De esta forma obtenemos un menú como el de la imagen:

Menu horizontal

Con unas pocas modificaciones podemos hacer que tenga el aspecto de pestañas:

ul#menu {
list-style: none;
float: left;
width: 900px;
margin: 0;
padding: 0;
border-bottom: 1px solid #ddd;
}
ul#menu li {
float: left;
margin: 0;
padding: 0;
border: 1px solid #ddd;
}
ul#menu li a {
float: left;
display: block;
padding: 10px;
color: #333;
background: #f0f0f0;
text-decoration: none;
}
ul#menu li a:hover {
background: #333;
color: #f0f0f0;
}

Y nos quedaría como la siguiente imagen:

Menu con pestanas

Con esto finaliza esta parte sobre las listas y CSS. En la próxima entrega volveremos con las listas, para ver como podemos crear unas listas con más estilo.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

octubre 8, 2009 0

Tutorial de CSS parte I. Padding vs margin.

By in CSS

Vamos a comenzar este tutorial de CSS hablando de dos propiedades, que en ocasiones se confunde y no son bien utilizadas. Me refiero a las propiedades padding y margin.

¿Qué son estas propiedades?

Básicamente estas propiedades hacen referencia al espacio interior y exterior del elemento, la propiedad padding hace referencia al espacio interior y la propiedad margin al espacio exterior al elemento. Lo podemos ver mejor con la siguiente imagen:

margin vs padding

En esta imagen se puede apreciar como la propiedad padding hace referencia al espacio interior, dentro del borde rojo, y la propiedad margin hace referencia al espacio exterior al contenido, entre el borde de puntos y el borde rojo.

Para controlar el espacio dependiendo de la dirección (arriba, derecha, abajo e izquierda) podemos hacer uso de las siguientes propiedades:

Para el padding:

  • padding-top: Espacio interior de la parte de arriba.
  • padding-right: Espacio interior a la derecha.
  • padding-bottom: Espacio interior de la parte de abajo.
  • padding-left: Espacio interior de la parte de la izquierda.

Para el margin:

  • margin-top: Espacio exterior de la parte de arriba.
  • margin-right: Espacio exterior a la derecha.
  • margin-bottom: Espacio exterior de la parte de abajo.
  • margin-left: Espacio exterior de la parte de la izquierda.

O también podemos hacer uso de la propiedad padding y margin dándole distintos valores dependiendo de la posición.

Veamos un ejemplo:

margin: 10px 5px 10px 5px;
padding: 15px 25px 15px 25px;

Cada valor corresponde con una de las propiedades anteriores. El primer valor corresponde al top, parte de arriba, y los siguientes al correspondiente siguiendo el sentido de las agujas del reloj:

  1. Top
  2. Right
  3. Bottom
  4. Left

En la siguiente imagen se ve mucho más fácil:

Posiciones de padding y margin

Existe también una forma abreviada:

margin: 15px 10px;
padding: 20px 15px;

De esta forma hacemos que el margen superior e inferior sea de 15px y que el margen derecho e izquierdo sea de 10px. Lo mismo ocurre con el padding, pero con un valor de 20px para arriba y abajo y de 15px para los lados derecho e izquierdo.

El fondo y las propiedades padding y margin:

Cuando aplicamos un fondo a un elemento este se ve afectado por la propiedad padding pero no por la propiedad margin. Lo explico ahora un poco mejor. La propiedad margin es el espacio exterior al contenido, por lo que el espacio de margen no tendría el mismo fondo que el contenido. Sin embargo la propiedad padding es el espacio dentro del contenido, por lo que este espacio tendría el mismo fondo que el contenido.

Cosas a tener en cuenta:

Hay que tener en cuenta que el valor del padding se añade al ancho de nuestro elemento. Si tenemos un elemento de tamaño 150px y con un padding de 20px para los lados derecho e izquierdo, el ancho total del elemento será de 190px, 150px de ancho + 20px de padding derecho + 20px de padding izquierdo = 190px en total.

Con esto finaliza este primer tutorial. En próximas partes veremos otras propiedades muy interesantes y como funcionan estas combinadas unas con otras. Hasta la próxima.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , ,