¿Creamos una página web con HTML y CSS y que sea chula?, que mole, que entres y digas… Dios es la página de las páginas.
Cómo programar una web en HTML5 y CSS3
Pues ya vimos cómo podemos crear nuestra web con HTML5 y CSS, pero si es cierto que aunque bonita le falta ese punto de dinamismo, ese movimiento en la página que le haga estar viva.
Crear un dinamismo con CSS3
Pues sí querido lector (como diría el gran Dean), así es, podemos hacer cosas con el CSS3 que nos ayuda a crear esa pequeña sensación de dinamismo en la hace ver que la pagina no es un simple texto, dos fotos y unos colores, si no que puedas verla que tú «interactúas» o intervienen en ella.
Es cierto que no vas a poder hacer milagros, pero también es cierto que con la parte básica que vamos a ver tampoco te puedes quejar y no estaría mal que en los comentarios contaras como si es el DIOS de las PÁGINAS WEB básicas.
Esta idea la cogí de uno de los grandes que me ayudó mucho cuando iba a la uni y ahora para recordar muchas cosas que por la falta de uso se me olvida, y es por eso que también tengo que decir, me ayuda estos post, por que quiero que aprendáis y yo poder recordar y aprender algunas cosas.
Empezamos con la parte de HTML5
Como sabéis debemos crear el texto de nuestra web y esto es sencillo solo necesitamos nuestro HTML y un enlace e nuestra carpeta style.css y ya tenemos hecho nuestra parte de texto con las imágenes de la web.
<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="windows-1252" />
<meta name="description" content="Web de prueba para imágenes con efectos" />
<meta name="keywords" content="HTML5, CSS3 JavaScript" />
<title>EL ejercicio de Javi Lázaro para HTML5 y CSS3</title>
<link href="style1.css" rel="stylesheet" />
</head>
<body>
<header>
<h1> JaviLázaro. Los ejercicios con Mis imagenes</h1>
<br />
<h2>Estas son las únicas que no tenían derechos de autor</h2>
</header>
<section>
<figure>
<img src="C:\Users\Megaport\prueba1\imagen\bombilla-consumo-materialled.jpg" alt="Bombilla de bajo consumo de Materialled" width="150" height="150" />
<figcaption>
Foto 1: Bombillas Materialled
</figcaption>
</figure>
<figure>
<img src="C:\Users\Megaport\prueba1\imagen\bombilla-negra-materialled.jpg" alt="Bombilla de luz negra de Materialled" width="150" height="150" />
<figcaption>
Foto 2: Bombilla Materialled
</figcaption>
</figure>
<figure>
<img src="C:\Users\Megaport\prueba1\imagen\calles-materialled.jpg" alt="Calles iluminadas de Materialled" width="150" height="150" />
<figcaption>
Foto 3: calles Materialled
</figcaption>
</figure>
<figure>
<img src="C:\Users\Megaport\prueba1\imagen\homer.jpg" alt="Homer Simpson Mr. X" width="150" height="150" />
<figcaption>
Foto 4: yo mismo
</figcaption>
</figure>
</section>
<footer>
<p><small>Copyright de www.javilazaro.es y bueno al final lo copiarás si quieres asi que porfa un <a href="https://www.javilazaro.es"> enlace a mi página</a> </small></p>
</footer>
</body>
</html>Creo que de aquí ya no tenemos mucho que explicar por qué lo tenéis en la parte de programar con HTML y CSS.
Lo nuevo del CSS3
Aquí sí que hemos añadido un par de cosas pero que son muy buenas para poder con menos programación hacer cosas «chachis piruli».
Antes de CSS3 todo esto había que hacerlo con JavaScript y la verdad que es más «complicado» y a su vez hacer que tengas más programación en tu web haciendo esta «más lenta» y dependiendo de ás lenguajes.
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th, caption {
font-weight: normal;
text-align: left;
}
img, fieldset {
border: 0;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
q:before, q:after {
content: '';
}
/*fin del reseteo de la hoja de estilos*/
body
{
font-size:62.5%;
}
h1 {
font: normal 2.4em Verdana, Geneva, sans-serif;
background:-webkit-linear-gradient(top, blue, aqua);
width:35%;
border-radius:10px;
margin:15px, auto;
text-align:center;
padding:15px;
color:#666;
box-shadow: blue 5px 5px 10px;
text-shadow:#FFF 2px 2px 5px;
}
h2 {
font: bold 1.8em Verdana, Geneva, sans-serif;
margin:5px;
padding:5px, 10px, 5px, 8px;
color:#000;
}
section{
width:92%;
border-top:1px dashed #999;
margin:auto;
}
figure{
float:left;
margin:auto;
}
figure img {
border-radius: 15px;
padding: 4px;
background: #666;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.1s;
margin: 10px;
}
figure img:hover {
-webkit-transform: scale(1.2)
}
figcaption {
font-family: Verdana, Geneva, sans-serif;
font-size:1.5;
text-align:center;
margin:10px;
}
footer{
clear:both;
padding-top:110px;
}
footer:past{
font:1.6em Georgia, "Times News Roman" Times, Serif;
color:#666;
margin:10px 8px;
}Vamos a comenzar ahora como diría Jack el destripador trozo por trozo para que lo entendamos mejor.
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th, caption {
font-weight: normal;
text-align: left;
}
img, fieldset {
border: 0;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
q:before, q:after {
content: '';
}
/*fin del reseteo de la hoja de estilos*/Este mamotreto es solo copiar y pegar, y es única y exclusivamente para poner a cero las diferentes partes, vamos un reseteo como pone en nuestro programa y se utiliza por que tú quizás y esperemos hayas programado mucho y estos datos se han podido quedar guardados, ya bien sea por que lo susas mucho o por que tu editor de codigo lo guarda, pues de esta manera lo pone en modo de fábrica.
Antes de CSS3 todo esto había que hacerlo con JavaScript y la verdad que es más «complicado» y a su vez hacer que tengas más programación en tu web haciendo esta «más lenta» y dependiendo de ás lenguajes
Mia como siempre
body
{
font-size:62.5%;
}La parte del Body, es toda modificación que vamos a hacer al body a través de nuestra página de CSS, no me voy a enrollar mucho por que se supone que esto lo habéis visto en mi anterior post, REPITO.
h1 {
font: normal 2.4em Verdana, Geneva, sans-serif;
background:-webkit-linear-gradient(top, blue, aqua);
width:35%;
border-radius:10px;
margin:15px, auto;
text-align:center;
padding:15px;
color:#666;
box-shadow: blue 5px 5px 10px;
text-shadow:#FFF 2px 2px 5px;H1 muy importante en nuestros post y páginas web, podemos ver como le hemos metido unos fondos y como le hemos hecho que el color sea gradiente, (para los que no sabéis es que pase de manera escalada de un color, en este caso, a otro).
Podemos también ver que con la opción border-radius redondeamos las esquinas del recuadro que rodea nuestro título, cuantos más píxeles, mayor será el circulo que crean.
Y text-shadow no hace falta ser un filólogo en lengua inglesa que más que menos sabemos que es la sombra de las letras al igual que box.shadow es la sombra de la caja.
figure{
float:left;
margin:auto;
}
figure img {
border-radius: 15px;
padding: 4px;
background: #666;
-webkit-transition: -webkit-transform 0.5s ease-in-out 0.1s;
margin: 10px;
}
figure img:hover {
-webkit-transform: scale(1.2)
}
figcaption {
font-family: Verdana, Geneva, sans-serif;
font-size:1.5;
text-align:center;
margin:10px;
}Bien aquí es donde está el meollo de la cuestión, las imágenes, si donde vemos como suben y bajan cuando pasas el ratón.
Empezamos con figure, ¿qué es figure y para qué sirve en CSS3?.
figure:
Nos indica que en ese «cajón» habrá una foto o ilustración.
webkit-transition:
Esta parte es la que indicamos primero con el webkit que solo se verá en Google Chrome, y me dirás ¿y por qué? y yo respondo, porque es mi programa y se ve donde quiera.
También puedes hacerlo para mozilla, excel, Opera… o todos juntos, pero yo no me quería estar a tanto por que no hay necesidad, eso sí, si el dia de mañana eres programador de webs o desarrollador de webs si hay necesidad.
-webkit-transform 0.5s ease-in-out 0.1s;
Pues como decía antes el webkit para Chrome y luego dice que en 0,5 hace el efecto de acercarse y luego tarda 0,1 para alejarse.
Tenemos más efectos los cuales como consejo te digo que es tontería aprenderlos de memoria el código, lo mejor es o tenerlos apuntado o buscarlo por internet por que ese trozo de disco duro de tu cabeza lo necesitarás para fechas de cumpleaños, aniversarios, sobre todo aniversarios, que lo voy a marcar que no se olvide y temas mas importantes
figure img:hover
Aqui con hover le a Chrome que solo tiene el efecto cuando pasa el ratón sobre la imagen, nada mas que eso.
-webkit-transform: scale(1.2)
Es el trabajo que va a realizar y es una ampliación de la imagen.
Conclusión
Como podemos ver con unas líneas somos capaces de hacer unas funciones dinámicas en nuestra páginas sin necesidad de muchas complicación
Si quieres crear tu página con tu toque personal debe empezar con estos métodos de CSS y HTML que con los avances que tienen van dando esa posibilidad de hacer más con menos lenguajes.
Es por esto lector y futuro desarrollador o ya desarrollador que cada vez necesitaremos «menos lenguajes» para hacer los mismo trabajos.
Si tienes alguna idea de página que podamos hacer o en la que necesites ayuda no dudes en escribir y decir que te parece.
¿Y tú qué efectos das a tus imágenes con CSS3?😎
Venga escribe tus efectos y cómo lo haces y si está bien hacemos una réplica a lo que tengas o ponemos un enlace a tu página.
