CSS 3 Avanzado by Alex Garcia Aguilar https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae en-us 2022-10-04 15:05:00 UTC 2026-02-06 09:16:41 UTC hello@padlet.com Gradientes alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325905214 ¿Que es?
Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Los gradientes están disponibles desde CSS3 y se configuran como fondos, por lo que tendremos que usar la propiedad “background“. Disponemos de dos tipos de gradientes: lineal y radial.

1. Gradiente lineal
El gradiente lineal se define mediante la función linear-gradient() y permite crear fondos degradados en una dirección específica. El formato es el siguiente:

background: linear-gradient(dirección|ángulo, color, color, color...);
background: linear-gradient(dirección|ángulo, color tamaño, color tamaño, color tamaño...);
background: linear-gradient(color, color, color…);

2. Gradiente radial
El gradiente radial nos permite crear degradados con formas circulares. El formato para los gradientes radiales es muy parecido al anterior. En este caso, debemos usar la función radial-gradient() y un nuevo atributo para la forma.

background: radial-gradient(forma, color, color, color...);
background: radial-gradient(forma tamaño, color, color, color...);
background: radial-gradient(forma, color tamaño, color tamaño, color tamaño...);
background: radial-gradient(color, color, color...);
]]> 2022-10-04 15:09:07 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325905214 Sombras alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325950475 La versión CSS 3 incluirá una propiedad llamada box-shadow para crear este tipo de sombras.

A continuación se muestra la regla CSS 3 necesaria para crear una sombra gris muy difuminada y que se visualice en la esquina inferior derecha de un elemento:

.elemento {
  box-shadow: 2px 2px 5px #999;
}
La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador de trabajo del módulo de fondos y bordes de CSS3. A continuación se muestra su sintaxis simplificada habitual:

box-shadow: <medida> <medida> <medida>? <medida>? <color>
  • La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia la izquierda.
  • La segunda medida también es obligatoria e indica el desplazamiento vertical de la sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se desplaza hacia arriba.
  • La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto más grande sea su valor, más borrosa aparece la sombra. Si se utiliza el valor 0, la sombra se muestra como un color sólido.
  • La cuarta medida también es opcional e indica el radio con el que se expande la sombra. Si se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un valor negativo, la sombra se comprime.
  • El color indicado es directamente el color de la sombra que se muestra.
La siguiente regla CSS muestra una sombra en los navegadores Firefox y Safari:

.elemento {
  -webkit-box-shadow: 2px 2px 5px #999;
  -moz-box-shadow: 2px 2px 5px #999;
}
]]> 2022-10-04 15:31:16 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325950475 Efectos de texto alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325970226 Propiedades:
  • desbordamiento de texto
  • ajuste de línea
  • salto de palabra
  • modo de escritura

  • desbordamiento de texto
<!DOCTYPEhtml>
<html lang="es">
<cabeza>
<estilo>
p.texto1 {
	espacios en blanco: nowrap;
	ancho: 200px;
	borde: 1px sólido #000000;
	desbordamiento: oculto;
	desbordamiento de texto: clip
}	

p.texto2 {
	espacios en blanco: nowrap;
	ancho: 200px;
	borde: 1px sólido #333333;
	desbordamiento: oculto;
	desbordamiento de texto: puntos suspensivos;
}
</estilo>
</cabeza>
<cuerpo>
<h2>La propiedad text-overflow</h2>
<p class="text1">Este es un texto largo que no cabe en el cuadro</p>

<h2>desbordamiento de texto: puntos suspensivos;</h2>
<p class="text2">Este es un texto largo que no cabe en el cuadro</p>
</cuerpo>
</html>
  • ajuste de línea
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba {
ancho: 11em;
borde: 1px sólido #000000;
ajuste de palabra: ruptura de palabra;
}
</estilo>
</cabeza>
<cuerpo>

<h1>La propiedad de ajuste de palabra</h1>

<p class="test">Este párrafo contiene una palabra muy larga:
esta es una palabra muy muy muy muy muy larga. La palabra larga se dividirá y pasará a la siguiente línea.</p>

</cuerpo>
</html>
  • salto de palabra
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba1 {
ancho: 140px;
borde: 1px sólido #000000;
separación de palabras: guardar todo;
}

p.prueba2 {
ancho: 140px;
borde: 1px sólido #000000;
ruptura de palabra: ruptura total;
}
</estilo>
</cabeza>
<cuerpo>

<h1>La propiedad de separación de palabras</h1>
<p class="test1">Este párrafo contiene algo de texto. Esta línea se dividirá en guiones.</p>

<p class="test2">Este párrafo contiene algo de texto. Las líneas se romperán en cualquier carácter.</p>

</cuerpo>
</html>
  • modo de escritura
<!DOCTYPEhtml>
<html>
<cabeza>
<estilo>
p.prueba1 {
modo de escritura: horizontal-tb;
}

intervalo.prueba2 {
modo de escritura: vertical-rl;
}

p.prueba2 {
modo de escritura: vertical-rl;
}
</estilo>
</cabeza>
<cuerpo>
<h1>La propiedad del modo de escritura</h1>
<p class="test1">Algo de texto con el modo de escritura predeterminado.</p>
<p>Algún texto con un elemento span con un modo de escritura <span class="test2">vertical-rl</span>.</p>
<p class="test2">Algo de texto con modo de escritura: vertical-rl.</p>
</cuerpo>
</html>

]]> 2022-10-04 15:41:04 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325970226 Web fonts alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325979084 Las fuentes web permiten a los diseñadores usar fuentes que no están instaladas en la computadora del usuario. Cuando hayas encontrado/comprado la fuente que deseas usar, simplemente incluye el archivo de fuente en tu servidor web y se descargará automáticamente al usuario cuando lo necesite.
Para usar la fuente para un elemento HTML, consulta el nombre de la fuente (myFirstFont) a través de la propiedad font-family.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
@font-face {
	font-family: myFirstFont;
	src: url(sansation_light.woff);
}

* {
	font-family: myFirstFont;
}
</style>
</head>
<body>
<h2>La regla @font-face</h2>
<div>
Con CSS, los sitios web pueden usar fuentes distintas a las fuentes
 "seguras para la web" preseleccionadas.
</div>
</body>
</html>
Usando texto en negrita

Debe agregar otra regla @font-face que contenga descriptores para texto en negrita.

Ejm

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}
]]> 2022-10-04 15:45:09 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325979084 Transformaciones 2D alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325986936 Con la propiedad transform podemos usar los siguientes métodos:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()
El método translate()

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 300px;
	height: 100px;
	background-color: yellow;
	border: 1px solid black;
	transform: translate(50px, 100px);
}
</style>
</head>
<body>
<h1>El método translate()</h1>
<div>
El elemento div será movido 50px hacia la derecha y 100 hacia abajo de su posición actual
</div>
</body>
</html>
El método rotate()

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}

div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>

<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>
El método scale()
Ejm

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(2,3);
}
</style>
</head>
<body>

<h1>El método scale()</h1>

<p>El método scale() incrementa o decrementa el tamaño de un elemento.</p>

<div>
Este elemento div es dos veces su ancho original y tres veces su altura original.
</div>

</body>
</html>
scaleX()

Ejm

div {  transform: scaleX(2);
}
scaleY()

Ejm

div {
transform: scaleY(3);
}
]]> 2022-10-04 15:48:51 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325986936 Transiciones alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325998098 Las transiciones CSS te permiten cambiar los valores de propiedad sin problemas, durante un período determinado. En este capítulo miraremos las siguientes propiedades:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
Como usar transiciones CSS
Para generar una transición debemos seguir dos pasos:
  • la propiedad CSS a la que desea agregar un efecto
  • la duración del efecto
Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 100px;
	height: 100px;
	line-height: 100px;
	color: yellow;
	background: red;
	transition: width 2s;
	text-align: center;
}

div:hover {
	width: 300px;
}
</style>
</head>
<body>
<h1>La propiedad transition</h1>
<p>Pasa el cursor sobre el elemento div a continuación para ver el efecto de transición:</p>
<div>Hola que tal</div>
</body>
</html>
]]> 2022-10-04 15:54:05 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2325998098 Animaciones alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326001169 CSS permite animaciones HTML sin usar Javascript o Flash.

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation
Que son las animaciones CSS

Una animación permite que un elemento cambie gradualmente de un estilo a otro. Puedes cambiar tantas propiedades CSS como desees, tantas veces como desees. Para usar la animación CSS, primero debes especificar algunos fotogramas clave para la animación. Los fotogramas clave contienen los estilos que tendrá el elemento en determinados momentos.

La regla @keyframes

Cuando especificas estilos CSS dentro de la regla @keyframes, la animación cambiará gradualmente del estilo actual al nuevo estilo en ciertos momentos. Para que una animación funcione, debe vincular la animación a un elemento. El siguiente ejemplo vincula la animación "example" al elemento <div>. La animación durará 4 segundos y cambiará gradualmente el color de fondo del elemento <div> de "rojo" a "amarillo".

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

@keyframes example {
	from {background-color: red;}
	to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>Animaciones CSS</h1>
<div></div>
<p><b>Observación: </b>cuando una animación termina vuelve a su estado original</p>
</body>
</html>
]]> 2022-10-04 15:55:33 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326001169 Tooltips alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326010479 Tooltip básico

Crea una información sobre herramientas que aparece cuando el usuario mueve el mouse sobre un elemento.

Ejm

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	
	/* POSICION DEL TOOLTIP */
	position: absolute;
	z-index: 1;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
}
</style>
</head>
<body style="text-align:center">

<h2>Tooltip básico</h2>
<div class="tooltip">Situate sobre mí
	<span class="tooltiptext">Tooltip text</span>
</div>

<p>Ten en cuenta que la posición del texto de información sobre herramientas
no es muy buena. Vuelve al tutorial y continúa leyendo sobre 
cómo colocar el Tooltip de una manera deseable.</p>

</body>
</html>
]]> 2022-10-04 16:00:10 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326010479 Estilo sobre imágenes alexgarciaaguilar05 https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326014539 Control del tamaño desde CSS o desde HTML
Hemos visto cómo controlar el tamaño de la imagen desde el propio código HTML, incluyendo en la etiqueta de imagen los atributos width y height.
Con el código CSS también podemos controlar el tamaño de las imágenes mediante las propiedades width (ancho) y height (alto) las cuales veremos a continuación. Estas propiedades nos permiten mostrar la imagen con cualquier anchura y altura, independientemente de su altura o anchura real.
Propiedades width y height
Las Propiedades width y height Se emplean no sólo con imágenes, sino que pueden emplearse también para definir el ancho y el alto de otras partes del documento, bien sea párrafos, columnas, etc. Esto lo veremos en temas posteriores. De momento vamos a definir estas propiedades.

La propiedad width

width | Anchura
Valores | <medida> | <porcentaje> | auto | inherit
Descripción | Establece la anchura de un elemento
Valor inicial | auto
se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

La Propiedad height

height | Altura
Valores | <medida> | <porcentaje> | auto | inherit
Descripción | Establece la altura de un elemento
Valor inicial | auto
se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las filas de tabla y los grupos de filas de tabla

]]> 2022-10-04 16:02:16 UTC https://padlet.com/alexgarciaaguilar05/7y29rhupduh6b5ae/wish/2326014539