{"id":262948,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-increibles-tecnicas-de-css3-que-deberias-probar\/"},"modified":"2022-12-20T14:43:00","modified_gmt":"2022-12-20T11:43:00","slug":"7-increibles-tecnicas-de-css3-que-deberias-probar","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/7-increibles-tecnicas-de-css3-que-deberias-probar\/","title":{"rendered":"7 incre\u00edbles t\u00e9cnicas de CSS3 que deber\u00edas probar"},"content":{"rendered":"

\n La evoluci\u00f3n de CSS (Hojas de estilo en cascada) con HTML ha sido incre\u00edble. Hay montones de caracter\u00edsticas como Flexbox, CSS Grid y CSS propiedades personalizadas introducidas recientemente.\n<\/p>\n

\n Su avance continuo y su enorme potencial son lo que cautiva a los desarrolladores para probar nuevas t\u00e9cnicas de CSS y superar los l\u00edmites de lo que puede hacer. La combinaci\u00f3n de la tecnolog\u00eda HTML 5 y CSS3 es, sin duda, un flash-killer.\n<\/p>\n

\n No es de extra\u00f1ar que un plan de CSS bien ejecutado pueda casi controlar cualquier aspecto del dise\u00f1o y conducir a una mejor experiencia del usuario, lo cual es bastante necesario. Despu\u00e9s de todo, los visitantes tienen ciertas expectativas cuando ven su sitio a trav\u00e9s de una computadora port\u00e1til, una computadora de escritorio, una tableta o cualquier otro medio.\n<\/p>\n

\n Pero, \u00bfcu\u00e1les son las t\u00e9cnicas CSS de moda? \u00bfNo es una pregunta obvia que cruza la mente cuando hablamos de dise\u00f1ar un sitio web atractivo y f\u00e1cil de usar?\n<\/p>\n

\n Es por eso que hemos creado algunas de las nuevas t\u00e9cnicas y consejos de CSS para dominar sus habilidades de dise\u00f1o web. Cada uno incluye algunas explicaciones y fragmentos de c\u00f3digo de muestra.\n<\/p>\n

\n \u00a1As\u00ed que vamos directo a ello!\n<\/p>\n

\n 1 Alinear verticalmente con Flexbox
\n<\/h5>\n

\n Los desarrolladores anteriores sol\u00edan enfrentar muchas dificultades para alinear un texto o cualquier otro elemento en el centro vertical. Pero ahora, tras la introducci\u00f3n de la nueva especificaci\u00f3n CSS3 Flexbox<\/strong>, las cosas se han vuelto mucho m\u00e1s f\u00e1ciles.\n<\/p>\n

\n La propiedad, display: flex<\/strong> proporciona una forma sencilla para que los usuarios alineen cualquier texto o elemento en el centro. \u00a1Aqu\u00ed est\u00e1 el c\u00f3digo de ejemplo!\n<\/p>\n

\n HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  En el c\u00f3digo CSS anterior, display: flex describe el dise\u00f1o de Flexbox para el elemento, mientras que align-items: center; es responsable del centrado vertical del texto.\n<\/p>\n
\n  RESULTADO:<\/strong>\n<\/p>\n
\n  2 Rejilla CSS receptiva
\n<\/h5>\n
\n  No haga que su cuadr\u00edcula sea una excepci\u00f3n, h\u00e1galo tambi\u00e9n receptivo, como todo lo dem\u00e1s en su dise\u00f1o.\n<\/p>\n
\n  Hay muchas formas de hacer que su cuadr\u00edcula responda con CSS Grid. Y la mejor parte de usarlo es que podr\u00e1 crear una cuadr\u00edcula m\u00e1s flexible que le brinde el aspecto deseado, sin importar el tama\u00f1o del dispositivo.\n<\/p>\n
\n  Adem\u00e1s de esto, la cuadr\u00edcula CSS tambi\u00e9n le permite trabajar con tama\u00f1os de columna iguales y desiguales. Es una gran pieza de tecnolog\u00eda repleta de opciones que dan libertad a los usuarios para tener control sobre sus dise\u00f1os.\n<\/p>\n
\n  Puede usar varios puntos de ruptura, la altura de m\u00faltiples dimensiones y hacer otras ubicaciones, como se muestra en el ejemplo a continuaci\u00f3n.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  La unidad de fracci\u00f3n (fr) utilizada en el c\u00f3digo CSS anterior es la unidad flexible que separa el espacio abierto de acuerdo con sus pautas. Cada declaraci\u00f3n fr es para la columna, luego puede sumar los espacios y preparar la cuadr\u00edcula.\n<\/p>\n
\n  RESULTADO:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 animaciones de texto
\n<\/h5>\n
\n  Es posible que haya creado animaciones de fondo con CSS, pero ahora tambi\u00e9n influye en la forma en que los usuarios interact\u00faan y se relacionan con los elementos de texto de un sitio web. Desde ajustes de desplazamiento hasta hacer que las palabras floten en el aire, CCS3 lo ha hecho todo posible.\n<\/p>\n
\n  Los sitios web que no tienen muchos elementos atractivos para atraer a sus usuarios pueden aprovechar al m\u00e1ximo esta caracter\u00edstica. Aqu\u00ed hay un peque\u00f1o ejemplo de ello.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n