1
0

HTML5 y CSS3 pt. 3: Formularios y Tablas 05

Transiciones - clase 'enviar' para input submit.
Propiedades CSS: cursor: pointer, transition, transform: scale y rotate.
This commit is contained in:
devfzn 2023-04-12 12:17:48 -04:00
parent bbd9eefea1
commit 387de82f06
Signed by: devfzn
GPG Key ID: E070ECF4A754FDB1
3 changed files with 31 additions and 16 deletions

View File

@ -173,27 +173,22 @@ en [productos.css](./html_css_parte2/productos.css).
Se utiliza una imagen como fondo con la propiedad css background
`background: url(./imagenes/bg.jpg)` para la etiqueta `<footer>`.
[Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
- [Centrar](https://www.aluracursos.com/blog/centrar-un-elemento-con-css) un
elemento con css.
Caracteres especiales, unicode
- Caracteres especiales, unicode
[wiki](https://en.wikipedia.org/wiki/List_of_Unicode_characters).
Final curso HTML5 y CSS parte 2
### Parte 3 - Formularios y Tablas
Nueva página, [contacto.html](./html_css_parte3/contacto.html).
Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
- Nueva página, [contacto.html](./html_css_parte3/contacto.html).
- Se renombraron los estilos css: productos.css como [style.css](./html_css_parte3/style.css),
y style.css como [style_home](./html_css_parte3/style_home.css).
Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
- Creación de formulario HTML, tags `<form>`', `<input>` (text y submit)
para entradas de usuario. Tag `<label>` como etiqueta.
Conexión del **input** () con su **label**.
Uso de `id` para el `input` asociado al atributo `for` del `label`.
- Conexión del **input** () con su **label**.
- Uso de `id` para el `input` asociado al atributo `for` del `label`.
Jerarquía en css, ejemplo.
@ -297,6 +292,7 @@ p.test { color: magenta; }
</details></br>
Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
Descripción de imagenes `alt="Descripción de imagen"`.
- Etiqueta `<fieldset>` como agrupador y `<legend>` como parrafo.
- Descripción de imagenes `alt="Descripción de imagen"`.
- Clase css *enviar* para input submit "Enviar Formulario" [contacto](./html_css_parte3/contacto.html#L63).
- Propiedades: cursor (pointer), transition, transform (scale, rotate).

View File

@ -60,7 +60,7 @@
<label class="checkbox"><input type="checkbox" checked>
¿Te interesa recibir novedades y ofertas?
</label>
<input type="submit" value="Enviar Formulario"/>
<input type="submit" class="enviar" value="Enviar Formulario"/>
</form>
</main>
<footer>

View File

@ -120,6 +120,25 @@ form label, form legend {
margin: 20px 0;
}
.enviar {
width: 40%;
padding: 15px 0;
font-size: 18px;
font-weight: bold;
color: #f1f1f1;
background: #046dfc;
border: none;
border-radius: 5px;
/*transition: 0.3s background;*/
transition: 0.3s all;
cursor: pointer;
}
.enviar:hover{
background-color: #cd4f39;
transform: scale(1.2) rotate(4deg);
}
/* Usados para observar Jerarquía en CSS
form p {
color: blue;