CSS3 básico parte 2 – PHP paso a paso

Deja una respuesta

css3

El camino hasta ahora

En el último artículo empezamos a dar formato a nuestro hola mundo. Para ello utilizamos CSS3. Si has accedido a este artículo sin leer su anterior, es interesante que primero te tomes tu tiempo para leer la primera parte:

Habíamos dejado nuestro documento maquetado con el siguiente resultado:

css3-html5-hola-mundo7

Resultado final parte 1

CSS3 para dar un poco de estilo y belleza a nuestra pantalla.

Para terminar con la aplicación de estilos a nuestro hola mundo, vamos a jugar un poco con las nuevas propiedades de CSS3 box-shadow border-radius y text-shadow.

border-radius

En CSS3 tenemos border-radius, la forma más sencilla que existe para crear el efecto de borde redondeado.

Su uso es como para margin, se da un valor en píxeles y se aplicará ese redondeado a todas las esquinas.

Pero también podemos especificar un borde diferente para cada esquina, gracias a que border-radius también se divide en cuatro propiedades diferentes:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Desafortunadamente, no podemos usar el border-radius (ni sus variantes) tal cual. Los navegadores han incorporado una serie de prefijos mientras sea algo «experimental» y aunque están destinados a desaparecer, por compatibilidad se recomienda su uso.

Nosotros aplicaremos un borde de 10px  a nuestro head, section y aside, por lo que modificaríamos la declaración dejándola de la siguiente manera:

header, section article, aside {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid black;
	padding: 10px;
	padding: 0.714285714rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
Bordes redondeados

Bordes redondeados

box-shadow

Otra de las novedades del CSS3 es el box-shadow que nos permite incluir sombras a nuestras cajas. El box-shadow necesita 4 valores:

  • Desplazamiento horizontal de la sombra en px
  • Desplazamiento vertical de la sombra en px
  • Tamaño del difuminado en px
  • Color de la sombra: Este puede ser hexadecimal, rgb (red, green, blue) o rgba (la a es de alpha, para agregar opacidad, valor entre 0 y 1).

Al igual que con el border-radius, existen prefijos para los diferentes navegadores, por lo que nuestro CSS para poner sombra en las mismas etiquetas que tienen el borde redondeado sería:

header, section article, aside {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid black;
	padding: 10px;
	padding: 0.714285714rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
Todas nuestra cajas con sombras!

Todas nuestra cajas con sombras!

Interesante: El valor en píxeles para el desplazamiento horizontal y vertical puede ser negativo, de esta forma la sombra en vez de aparecer a la derecha y debajo sería a la izquierda y encima.

text-shadow

Esta propiedad es igual que box-shadow pero destinada a las tipografías. Su funcionamiento es exactamente el mismo que box-shadow y nosotros lo utilizaremos para nuestro h1:

header h1 {
	font-size: 20px;
	font-size: 1.428571429rem;
	text-shadow: 1px 1px #333;
}

Importante: Podemos crear diferentes sombras dentro de la misma propiedad text-shadow, sólo deberemos anidarlas con comas. Vamos a cambiar el fondo del header y el color de la tipografía para poder agregar un efecto de doble sombra, por lo que tendríamos este nuevo CSS

header h1 {
	font-size: 20px;
	font-size: 1.428571429rem;
	color: #ccc;
	text-shadow: -1px -1px white, 1px 1px #333;
}
Interesante efecto fuente!

Interesante efecto fuente!

Vital: En los navegadores sin soporte CSS3 este efecto no se verá. Como hemos declarado el color de la fuente igual que el color de fondo del header, el título no se distinguiría, por lo que deberemos modificar el color de la fuente por uno que, al menos, permita ver la diferencia de color en los navegadores sin soporte CSS3

header h1 {
	font-size: 20px;
	font-size: 1.428571429rem;
	color: #ddd;
	text-shadow: -1px -1px white, 1px 1px #333;
}
Pequeño cambio de color pensando en navegadores viejos.

Pequeño cambio de color pensando en navegadores viejos.

CSS3 y su font-face para embeber tipografías.

Nuevamente gracias a CSS3 tenemos la posibilidad de utilizar tipografías aunque no estén disponibles en los equipos de quienes visitan nuestra web.

Una de las grandes limitaciones a la hora de diseño era el uso de las tipografías. Hasta CSS3 el navegador leía la familia que le indicábamos por CSS y la buscada entre las tipografías instaladas en el equipo; de no existir, no la utilizaba.

Ahora, con CSS3, podemos precargar la tipografía a utilizar desde una URL, para que el navegador web pueda utilizarla aunque no esté en el equipo instalada.

El uso del font-face significa que el navegador deberá descargar las tipografías de la URL indicada antes de mostrar los textos. Esto se traduce en un aumento del tiempo de carga. Tenemos que ser conscientes de ello y no utilizar más de dos o tres tipografías vía font-face para que el tiempo de carga no se resienta en exceso.

Google nos ofrece un sistema genial llamado google fonts que nos proporciona una serie de tipografías listas para utilizar en nuestro CSS3. Es muy recomendable utilizar este servicio ya que como muchas webs lo utilizan es muy probable que las fuentes que utilicemos ya estén en la caché del navegador de nuestros visitantes al haberlas descargado de otro sitio web que utiliza también google fonts.

Nosotros vamos a utilizar la tipo Lobster para nuestro h1 de hola mundo. Debemos incluir el siguiente código en el head de nuestro index.php antes de la llamada al style.css:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Y ya podemos utilizarla para nuestro h1, aumentando el tamaño de la fuente para que se vea bien:

header h1 {
	font-size: 32px;
	font-size: 3rem;
	color: #ddd;
	text-shadow: -1px -1px white, 1px 1px #333;
	font-family: 'Lobster', cursive;
}
Tipografía personalizada!

Tipografía personalizada!

El resultado final de nuestro PHP con HTML5 y CSS3

Aplicando todo lo que hemos visto al resto de elementos dejamos nuestro index.php de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
	<head>
		<meta charset="utf-8" />
		<title><?php echo 'Hola Mundo!'; ?></title>
		<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" id="global-css" href="./style.css" type="text/css" media="all" />
	</head>
	<body>
		<header>
			<h1><?php echo 'Hola Mundo!'; ?></h1>
			<!-- <nav>El men&uacute; si procediese</nav> --> <!-- Etiqueta comentada al no tener men&uacute; -->
		</header>
		<section>
			<article>
				<h2><?php echo 'Nuestra primera p&aacute;gina PHP'; ?></h2>
				<?php echo 'Nuestra primera p&aacute;gina realizada en PHP con HTML5'; ?>
			</article>
		</section>
		<aside>
			<h3><?php echo 'Art&iacute;culos relacionados';?></h3>
			<ul>
				<li><a href="//rolandocaldas.com/php/primera-toma-de-contacto-php-paso-a-paso" target="_blank"><?php echo 'Primera toma de contacto'; ?></a></li>
				<li><a href="//rolandocaldas.com/php/html5-estructura-basica" target="_blank"><?php echo 'HTML5 estructura b&aacute;sica'; ?></a></li>
			</ul>
		</aside>
		<footer>
			<?php echo 'Creado por rolandocaldas.com'; ?>
		</footer>
	</body>
</html>

y nuestro style.css sería:

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}

header, section article, aside, footer {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid rgb(158, 158, 158);
	padding: 10px;
	padding: 0.714285714rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
   -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
   -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

header {
	background: #ccc;
}

header h1 {
	font-size: 32px;
	font-size: 3rem;
	color: #ddd;
	text-shadow: -1px -1px white, 1px 1px #333;
	font-family: 'Lobster', cursive;
}

section {
	width: 60%;
	display: inline-block;
	vertical-align: top;
}

article h2 {
	font-size: 18px;
	font-size: 1.285714286rem;
	color: #ccc;
	text-shadow: 1px 1px black;
}

aside {
	width: 33%;
	display: inline-block;
	margin-left: 0;
	vertical-align: top;
}

aside h3 {
	font-size: 16px;
	font-size: 1.142857143rem;
	color: #ccc;
	text-shadow: 1px 1px black;
}

ul {
	margin-left: 20px;
	margin-left: 1.428571429rem;
}

ul li a {
	color: black;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.857142857rem;
}

footer {
	background: #ddd;
	font-size: 12px;
	font-size: 0.857142857rem;
	text-align: center;
}

El resultado final no es que sea una belleza ni un referente de diseño, pero utiliza recursos que serán muy valiosos a la hora de maquetar el trabajo realizado por un diseñador y ahí, evidentemente, el resultado será más espectacular.

Nuestro Hola Mundo en PHP, HTML5 y CSS3

Nuestro Hola Mundo en PHP, HTML5 y CSS3

¿Y si usamos un poquito más de CSS3?

El resultado de nuestro hola mundo ya es bastante majete, pero CSS3 tiene otra de esas cosas geniales que nos trae: Los fondos degradados.

Los degradados en CSS3 sin usar imágenes son una realidad maravillosa. El tema da para mucho ya que hay diferentes tipos de degradado, cada uno con sus configuraciones, etc etc. Si quieres ver más sobre degradados hay un artículo en genbetadev muy básico sobre los degradados: Fondos con degradados en CSS3.

Nosotros vamos a utilizar un sitio web llamado colorzilla que proporciona una herramienta para hacer degradados muy al estilo de cómo se configuran en photoshop, gimp etc. Lo genial de este servicio es que nos proporciona el código CSS que genera el degradado que hayamos escogido.

En nuestro ejemplo he seleccionado el «White 3D» para el article y el aside, dejando para header y footer el «Grey Pipe». Copié el CSS3 que me indicaba la herramienta y mi style.css quedó de la siguiente manera:

* {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}

header, section article, aside, footer {
	margin: 10px;
	margin: 0.714285714rem;
	border: 1px solid rgb(158, 158, 158);
	padding: 10px;
	padding: 0.714285714rem;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
   -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
   -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

header {
	background: rgb(245,246,246); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
}

header h1 {
	font-size: 32px;
	font-size: 3rem;
	color: #ddd;
	text-shadow: -1px -1px white, 1px 1px #333;
	font-family: 'Lobster', cursive;
}

section {
	width: 60%;
	display: inline-block;
	vertical-align: top;
}

article h2 {
	font-size: 18px;
	font-size: 1.285714286rem;
	color: #ccc;
	text-shadow: 1px 1px black;
}

article {

	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
}

aside {
	width: 33%;
	display: inline-block;
	margin-left: 0;
	vertical-align: top;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
}

aside h3 {
	font-size: 16px;
	font-size: 1.142857143rem;
	color: #ccc;
	text-shadow: 1px 1px black;
}

ul {
	margin-left: 20px;
	margin-left: 1.428571429rem;
}

ul li a {
	color: black;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.857142857rem;
}


footer {
	font-size: 12px;
	font-size: 0.857142857rem;
	text-align: center;
	background: rgb(245,246,246); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
}

y el resultado final de nuestro hola mundo con fondos degradados es…

Bello, hermoso, oh sí.

Bello, hermoso, oh sí.

GitHub: CSS3 básico parte 2 – PHP paso a paso

En la próxima entrega

Con este artículo, llegamos a la versión 0.1 de nuestra aplicación. Aún estamos comenzando, por lo que ni siquiera está definido el proyecto, ya que por ahora sólo estamos aprendiendo, practicando y habituándonos al lenguaje PHP y todo lo necesario para llevar a cabo un proyecto web. En cualquier momento puedes consultar toda la evolución del código en el github del PHP paso a paso y queda marcado como tag el resultado final tras este artículo:

En los dos artículos sobre CSS3 básico hemos estado declarando los estilos para las etiquetas HTML; o sea, para el header, footer, aside … Tal y como lo hemos hecho hasta ahora los estilos se aplican a todas las etiquetas del documento.

En la realidad, nosotros no querremos que todos los article se vean igual, ni que todos los aside, section, li, etc. Realmente querremos un estilo por defecto y luego poder personalizarlo de forma individual o conjunta. Para ello deberemos usar los class, ID’s, pseudo-clases etc etc. Eso es lo que veremos en el próximo artículo!

Sí vale… más de uno pensará que esto se debería haber hecho al principio… y no le faltará razón, pero esto ya es más teórico y me parecía más interesante ver resultados lo antes posible 😉

Related posts:

  1. CSS3 básico parte 1 – PHP paso a paso
  2. CSS3 Sintaxis: Reglas y selectores PHP paso a paso
  3. CSS3 Pseudo-clases y pseudo-elementos – PHP paso a paso
  4. HTML5 y su estructura básica – PHP paso a paso

Deja un comentario