Estructura global:
<!DOCTYPE html>
<html lang="es">
</html>
Cabecera:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
</html>
Cuerpo:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Juego de caracteres (meta):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
</head>
<body>
</body>
</html>
Agregando mas etiquetas meta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, Javascript">
</head>
<body>
</body>
</html>
Otro modo de escribir el apartado anterior (Cerrando las etiquetas):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1" />
<meta name="description" content="Ejemplo de HTML5" />
<meta name="keywords" content="HTML5, CSS3, JavaScript" />
</head>
<body>
</body>
</html>
Título del documento:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
</head>
<body>
</body>
</html>
Nota: Normalmente este texto es mostrado en la barra superior de la ventana del navegador.
Incorporar estilos, códigos Javascript, imágenes o iconos desde archivos externos (link):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
</body>
</html>
Incorporar información introductoria (header):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
</body>
</html>
Incorporar barra de navegación (nav):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
</body>
</html>
Sección (section):
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link href="misestilos.css" rel="stylesheet"></link>
</head>
<body>
<header>
<h1>
Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
</body>
</html>
Incorporar información secundaria (aside):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
</body>
</html>
Incorporar cierre (footer):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
Incorporar artículos (article):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
Este es el texto de mi primer mensaje
</article>
<article>
Este es el texto de mi segundo mensaje
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
Otro ejemplo de artículo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Título del mensaje uno</h1>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<h1>Titulo del mensaje dos</h1>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
Títulos (hgroup):
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="iso-8859-1">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header>
<h1>Este es el título principal del sitio web</h1>
</header>
<nav>
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Título del mensaje uno</h1>
<h2>Subtítulo del mensaje uno</h2>
</hgroup>
<p>publicado 10-12-2011</p>
</header>
Este es el texto de mi primer mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Título del mensaje dos</h1>
<h2>Subtítulo del mensaje dos</h2>
</hgroup>
<p>publicado 15-12-2011</p>
</header>
Este es el texto de mi segundo mensaje
<footer>
<p>comentarios (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Mensaje número uno</blockquote>
<blockquote>Mensaje número dos</blockquote>
</aside>
<footer>
Derechos Reservados © 2010-2011
</footer>
</body>
</html>
<figure> y <figcaption>:
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="iso-8859-1"> | |
| <meta name="description" content="Ejemplo de HTML5"> | |
| <meta name="keywords" content="HTML5, CSS3, JavaScript"> | |
| <title>Este texto es el título del documento</title> | |
| <link rel="stylesheet" href="misestilos.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Este es el título principal del sitio web</h1> | |
| </header> | |
| <nav> | |
| <ul> | |
| <li>principal</li> | |
| <li>fotos</li> | |
| <li>videos</li> | |
| <li>contacto</li> | |
| </ul> | |
| </nav> | |
| <section> | |
| <article> | |
| <header> | |
| <hgroup> | |
| <h1>Título del mensaje uno</h1> | |
| <h2>Subtítulo del mensaje uno</h2> | |
| </hgroup> | |
| <p>publicado 10-12-2011</p> | |
| </header> | |
| Este es el texto de mi primer mensaje | |
| <figure> | |
| <img src=”http://minkbooks.com/content/myimage.jpg”> | |
| <figcaption> | |
| Esta es la imagen del primer mensaje | |
| </figcaption> | |
| </figure> | |
| <footer> | |
| <p>comentarios (0)</p> | |
| </footer> | |
| </article> | |
| <article> | |
| <header> | |
| <hgroup> | |
| <h1>Título del mensaje dos</h1> | |
| <h2>Subtítulo del mensaje dos</h2> | |
| </hgroup> | |
| <p>publicado 15-12-2011</p> | |
| </header> | |
| Este es el texto de mi segundo mensaje | |
| <footer> | |
| <p>comentarios (0)</p> | |
| </footer> | |
| </article> | |
| </section> | |
| <aside> | |
| <blockquote>Mensaje número uno</blockquote> | |
| <blockquote>Mensaje número dos</blockquote> | |
| </aside> | |
| <footer> | |
| Derechos Reservados © 2010-2011 | |
| </footer> | |
| </body> | |
| </html> |
Sombrear <mark>:
<span>Mi <mark>coche</mark> es rojo</span>
Nota:
<em> es para indicar énfasis (reemplazando la etiqueta <i> que utilizábamos anteriormente).
<strong> es para indicar importancia.
<mark> es para resaltar texto que es relevante de acuerdo con las circunstancias.
<b> debería ser usado solo cuando no hay otro elemento más apropiado para la situación.
Letra pequeña <small>:
<small>Derechos Reservados © 2011 MinkBooks</small>
Cursiva <cite>:
<span>Amo la película <cite>Tentaciones</cite></span>
<address>:
<article>
<header>
<h1>Título del mensaje </h1>
</header>
Este es el texto del mensaje
<footer>
<address>
<a href=”http://www.jdgauchat.com”>JD Gauchat</a>
</address>
</footer>
</article>
<time>:
<article>
<header>
<h1>Título del mensaje dos</h1>
<time datetime="2011-10-12" pubdate>publicado 12-10-2011</time>
</header>
Este es el texto del mensaje
</article>
Referencia rápida:
<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…
<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.
<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc…
<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc…
<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.
<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo.
<hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido.
<figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.
<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.
<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc…).
<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc…).
<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento <footer>.
<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.
CCS (Cascading Style Sheets - Hojas de Estilo en Cascada)
Estilos en línea (style):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este es el título del documento</title>
</head>
<body>
<p style=”font-size: 20px”>Mi texto</p>
</body>
</html>
Estilos embebidos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>
Archivos externos:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p>Mi texto</p>
</body>
</html>
Referenciando con el atributo id:
Archivo misestilos.css:
#texto1 { font-size: 20px }
Archivo html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p id=”texto1”>Mi texto</p>
</body>
</html>
Referenciando con el atributo class:
Archivo misestilos.css:
.texto1 { font-size: 20px }
Archivo html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<p class=”texto1”>Mi texto</p>
<p class=”texto1”>Mi texto</p>
<p>Mi texto</p>
</body>
</html>
Referenciando con pseudo clases:
Archivo misestilos.css:
Ejemplo 1:
p:nth-child(2){
background: #999999;
}
Ejemplo 2:
p:nth-child(4){
background: #999999;
}
Ejemplo 3:
*{
margin: 0px;
}
p:nth-child(1){
background: #999999;
}
p:nth-child(2){
background: #CCCCCC;
}
p:nth-child(3){
background: #999999;
}
p:nth-child(4){
background: #CCCCCC;
}
Ejemplo 4:
*{
margin: 0px;
}
p:nth-child(odd){
background: #999999;
}
p:nth-child(even){
background: #CCCCCC;
}
Ejemplo 5:
*{
margin: 0px;
}
p:last-child{
background: #999999;
}
Ejemplo 6:
:not(p){
margin: 0px;
}
Ejemplo 7:
:not(.mitexto2){
margin: 0px;
}
Ejemplo 8:
div > p.mitexto2{
color: #990000;
}
Ejemplo 9:
p.mitexto2 + p{
color: #990000;
}
Ejemplo 10:
p.mitexto2 ~ p{
color: #990000;
}
Archivo html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<div id="wrapper">
<p class="mitexto1">Mi texto1</p>
<p class="mitexto2">Mi texto2</p>
<p class="mitexto3">Mi texto3</p>
<p class="mitexto4">Mi texto4</p>
</div>
</body>
</html>
Modelo de caja tradicional:
Archivo misestilos.css:
/* Establecer margenes (Regla CSS general) */
* {
margin: 0px;
padding: 0px;
}
/* Agregando estilos para los elementos <h1> y <h2> */
h1 {
font: bold 20px verdana, sans-serif;
}
h2 {
font: bold 14px verdana, sans-serif;
}
/* Regla por defecto para elementos estructurales de HTML5 */
/* Los elementos afectados por la regla serán posicionados uno sobre otro */
/* a menos que especifiquemos algo diferente más adelante */
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display: block;
}
/* Centrando el cuerpo */
body {
text-align: center;
}
/* Definiendo las propiedades de la caja principal */
#agrupar {
width: 700px; /* Originalmente 960px */
margin: 5px auto; /* Originalmente 15px */
text-align: left;
}
/* Agregando estilos para <header> */
#cabecera {
background: #FFFBB9;
border: 1px solid #999999;
padding: 20px;
}
/* Agregando estilos para <nav> */
#menu {
background: #CCCCCC;
padding: 5px 15px;
}
#menu li {
display: inline-block;
list-style: none;
padding: 5px;
font: bold 14px verdana, sans-serif;
}
/* Creando dos columnas con la propiedad float (Section y aside) */
#seccion {
float: left;
width: 460px; /* Originalmente 660px */
margin: 20px; /* Originalmente 20px */
}
#columna {
float: left;
width: 160px; /* Originalmente 220px */
margin: 20px 0px; /* Originalmente 20px */
padding: 20px; /* Originalmente 20px */
background: #CCCCCC;
}
/* Otorgando estilos a <footer> y recuperando el normal flujo del documento */
#pie {
clear: both;
text-align: center;
padding: 20px;
border-top: 2px solid #999999;
}
/* Agregando los últimos toques a nuestro diseño básico */
article {
background: #FFFBCC;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
article footer {
text-align: right;
}
time {
color: #999999;
}
figcaption {
font: italic 14px verdana, sans-serif;
}
/* Incluyendo padding y border en el tamaño del elemento */
/*
div {
width: 960px; /* Originalmente 100px */
margin: 10px; /* Originalmente 20px */
padding: 10px;
border: 1px solid #000000;
-chrome-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*/
/* Prefijos box-sizing:
-moz- para Firefox.
-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.
-ms- para Internet Explorer.
-chrome- específico para Google Chrome.
*/
Archivo html:
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<link href="misestilos.css" rel="stylesheet"></link>
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>
Este es el título principal del sitio web</h1>
</header>
<nav id="menu">
<ul>
<li>principal</li>
<li>fotos</li>
<li>videos</li>
<li>contacto</li>
</ul>
</nav>
<section id="seccion">
<article>
<header>
<hgroup>
<h1>
Título del mensaje uno</h1>
<h2>
Subtítulo del mensaje uno</h2>
</hgroup>
<time datetime="2011-12-10" pubdate="">publicado 10-12-2011
</time>
</header>
Este es el texto de mi primer mensaje
<figure>
<img src="http://minkbooks.com/content/myimage.jpg" />
<figcaption>
Esta es la imagen del primer mensaje
</figcaption>
</figure>
<footer>
comentarios (0)<br />
</footer>
</article>
<article>
<header>
<hgroup>
<h1>
Título del mensaje dos</h1>
<h2>
Subtítulo del mensaje dos</h2>
</hgroup>
<time datetime="2011-12-15" pubdate="">publicado 15-12-2011
</time>
</header>
Este es el texto de mi segundo mensaje
<footer>
comentarios (0)<br />
</footer>
</article>
</section>
<aside id="columna">
<blockquote>
Mensaje número uno</blockquote>
<blockquote>
Mensaje número dos</blockquote>
</aside>
<footer id="pie">
Derechos Reservados © 2010-2011
</footer>
</div>
</body>
</html>
Una plantilla simple para probar nuevas propiedades:
Archivo html:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Nuevos Estilos CSS3</title>
<link rel="stylesheet" href="nuevocss3.css">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos CSS Web 2.0</span>
</header>
</body>
</html>
Archivo misestilos.css (Reglas básicas CSS con las que comenzar.):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
}
#titulo {
font: bold 36px verdana, sans-serif;
}
Archivo misestilos.css (Generando esquinas redondeadas):
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-chrome-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
/* Prefijos box-sizing:
-moz- para Firefox.
-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.
-ms- para Internet Explorer.
-chrome- específico para Google Chrome.
*/
#titulo {
font: bold 36px verdana, sans-serif;
}
Archivo misestilos.css (Diferentes valores para cada esquina):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-chrome-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 20px 10px 30px 50px;
}
#titulo {
font: bold 36px verdana, sans-serif;
}
Archivo misestilos.css (Esquinas elípticas):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 20px / 10px;
}
#titulo {
font: bold 36px verdana, sans-serif;
}
Archivo misestilos.css (Aplicando sombra a nuestra caja):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(150,150,150) 5px 5px;
}
#titulo {
font: bold 36px verdana, sans-serif;
}
Agregando el valor de difuminación a box-shadow:
box-shadow: rgb(150,150,150) 5px 5px 10px;
Sombra interna:
box-shadow: rgb(150,150,150) 5px 5px 10px inset;
Text-shadow (Generando una sombra para el título):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#titulo {
font: bold 36px verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face (Nueva fuente para el título):
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
}
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face {
font-family: 'MiNuevaFuente';
src: url('font.ttf');
}
Agregando un hermoso gradiente de fondo a nuestra caja:
body {
text-align: center;
}
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: rgb(150,150,150) 5px 5px 10px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px 10px;
box-shadow: rgb(150,150,150) 5px 5px 10px;
background: -webkit-linear-gradient(top, #FFFFFF, #006699);
background: -moz-linear-gradient(top, #FFFFFF, #006699);
}
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgb(0,0,150) 3px 3px 5px;
}
@font-face {
font-family: 'MiNuevaFuente';
src: url('font.ttf');
}
Gradiente con un ángulo de dirección de 30 grados:
background: linear-gradient(30deg, #FFFFFF, #006699);
Declarando puntos de terminación:
background: linear-gradient(top, #FFFFFF 50%, #006699 90%);
Gradiente radial:
background: radial-gradient(center, circle, #FFFFFF 0%, #006699 200%);
RGBA (Mejorando la sombra del texto con transparencia):
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
}
Nuevo color para el título usando hsla():
#titulo {
font: bold 36px MiNuevaFuente, verdana, sans-serif;
text-shadow: rgba(0,0,0,0.5) 3px 3px 5px;
color: hsla(120, 100%, 50%, 0.5);
}
Agregando un segundo borde a la cabecera (Outline):
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
outline: 2px dashed #000099;
outline-offset: 15px;
}
Un borde personalizado para la cabecera (Border-image):
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 29px;
-moz-border-image: url("diamonds.png") 29 stretch;
-webkit-border-image: url("diamonds.png") 29 stretch;
border-image: url("diamonds.png") 29 stretch;
}
Cambiando la escala de la caja de la cabecera (Transform y transition):
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: scale(2);
-webkit-transform: scale(2);
}
Creando una imagen espejo con scale:
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: scale(1,-1);
-webkit-transform: scale(1,-1);
}
Inclinar horizontalmente (Transform: skew):
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
}
Moviendo la caja de la cabecera hacia la derecha (Transform: translate):
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: translate(100px);
-webkit-transform: translate(100px);
}
Moviendo, escalando y rotando el elemento con solo una línea de código:
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transform: translateY(100px) rotate(45deg) scaleX(0.3);
-webkit-transform: translateY(100px) rotate(45deg) scaleX(0.3);
}
Respondiendo a la actividad del usuario:
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
}
#principal:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
Transiciones:
#principal {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid #999999;
background: #DDDDDD;
-moz-transition: -moz-transform 1s ease-in-out 0.5s;
-webkit-transition: -webkit-transform 1s ease-in-out 0.5s;
}
#principal:hover{
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
Javascript en línea:
Javascript en línea:<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
</head>
<body>
<div id="principal">
<p onclick="alert('hizo clic!')">Hacer Clic</p>
<p onMouseOver="alert('pasó el maouse sobre!...')">Pasar el mouse sobre</p>
<p>No puede hacer clic</p>
</div>
</body>
</html>
Javascript embebido:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<script>
function mostraralerta(){
alert('hizo clic!');
}
function hacerclic(){
document.getElementsByTagName('p')[0].onclick=mostraralerta;
}
window.onload=hacerclic;
</script>
</head>
<body>
<div id="principal">
<p>Hacer Clic</p>
<p>No puede hacer Clic</p>
</div>
</body>
</html>
112
***
No hay comentarios:
Publicar un comentario