Introducción:La interfaz de usuario es lo primero en su sitio web que atrae al usuario. El diseño de su sitio web o el diseño de su sitio web le da buenas vibraciones al usuario. No se usa ampliamente como JavaScript, pero se encuentra entre los principales lenguajes de codificación. Es utilizado por el 96% por ciento de todos los sitios web. Mientras construimos una aplicación, siempre tratamos de optimizar el código. Seguimos varios atajos y hacks. Esto también es aplicable para CSS. Estos trucos ahorran mucho tiempo y mejoran el diseño de su sitio web. Puede insertar estos fragmentos directamente en su código. Mientras construimos una aplicación, la mayoría de las veces terminamos escribiendo un código largo en CSS. Agregamos varias propiedades en nuestro código para lograr el diseño apropiado de nuestro sitio web. Estas cosas ensucian nuestro código y para evitar esto vamos a compartir algunos trucos en CSS. Estos trucos lo ayudarán a escribir un código eficiente para la interfaz de usuario del sitio web. Empecemos.
Ahora veremos los 7 CSS Hacks que todo desarrollador debería saber.
1. Retrasos del efecto de desplazamiento con CSS: para crear el efecto de desplazamiento, puede usar un selector de desplazamiento. Para retrasar el efecto de desplazamiento, puede utilizar un elemento de transición para retrasar el efecto de desplazamiento. Básicamente, se ve tan limpio que atrae la atención del usuario hacia el elemento.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
position: relative;
animation: lit 2s;
animation-delay: 2s;
}
@keyframes lit {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h3>
How to use animation-delay in CSS?
</h3>
<p>Animation will start after 2 sec.</p>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
2. Posicionar el contenido en el centro con CSS: otra cosa complicada que los desarrolladores de UI luchan por hacer es posicionar el contenido en el centro. Configuración de la posición de la propiedad: resolución absoluta de este problema. El contenido se colocará en el centro. Establecer esta propiedad funcionará en todos los dispositivos.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parent {
position: relative;
height: 400px;
width: 400px;
background-color: red;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
This element is centered
</div>
</div>
</body>
</html>
Producción:
3. Fijar la posición del elemento en CSS: Mientras trabaja en el código en CSS, puede encontrar los elementos para fijar en una determinada posición. Esto puede ser lo más complicado como principiante. Para obtener el resultado deseado, puede establecer la posición de la propiedad: absoluta. Asegúrese de que esta propiedad no interrumpa la capacidad de respuesta de su sitio. Verifique la apariencia de su sitio en cada tamaño de pantalla y resolución. Hacer esto asegura que su diseño se ajuste a todas las resoluciones de pantalla o dispositivos. Los elementos deben permanecer en la misma posición para todos los usuarios.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 150px;
right: 80;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h1>position: absolute;</h1>
<h2>position: fixed;</h2>
<div class="absolute">
This element has position: absolute;
</div>
</body>
</html>
Producción:
4. Ajuste las imágenes a la página en CSS: si las imágenes pueden hacer que su sitio web sea hermoso, también pueden hacer que su sitio web sea feo. Las imágenes se ven muy mal en un sitio web cuando se derraman por toda la pantalla. Este problema es común en el desarrollo web. Crea una mala impresión en los usuarios que visitan el sitio web. Entonces, ¿cuál es la solución para eso?
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width: 60%;
height: 300px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks Image" />
</div>
</body>
</html>
Producción:
5. Estilo de enlace visitado en CSS: puede personalizar el estilo de su enlace cuando un usuario lo visita. Es posible que haya notado que una vez que se hace clic en un enlace, cambia el estilo o el color del enlace. Puede personalizarlo según lo necesite y puede codificar para modificar el aspecto de los enlaces antes y después de hacer clic en ellos.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Meta data-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1 {
color: #006600;
text-align: center;
}
/* If the link is unvisited you see this color*/
a:link {
color: #006600;
text-decoration: none;
}
/* If the link is visited you see this color*/
a:visited {
color: rgb(255, 105, 223);
}
/* On placing mouse over the link */
a:hover {
color: rgb(128, 105, 255);
text-decoration: underline;
}
/* If the click the link, you see this color*/
a:active {
color: rgb(255, 105, 138);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>Click the links</p>
<ul>
<li><a href=
"https://www.geeksforgeeks.org/dbms/?ref=ghm">
DBMS
</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/computer-network-tutorials/?ref=ghm">
Computer Networks</a>
</li>
<li> <a href=
"https://www.geeksforgeeks.org/operating-systems/?ref=ghm">
Operating Systems</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/data-structures/?ref=ghm">
Data Structures</a>
</li>
<li><a href="https://www.geeksforgeeks.org/">
And many more</a>
</li>
</ul>
</body>
</html>
Producción:
6. Consolide el estilo en CSS: en su página web, si necesita repetir el mismo estilo varias veces, escribir ese código en varios lugares lleva mucho tiempo. Debe optimizar su código CSS aquí y necesita escribir el código en menos líneas, puede separar los elementos con comas y puede escribir el estilo en él. Se añadirá a todos ellos.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks,
img {
width: 70%;
height: 70%;
}
</style>
</head>
<body>
<div class="geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks Image" />
</div>
</body>
</html>
Producción:
7. Restablecer y anular estilos CSS: puede haber una situación en la que necesite anular todos los atributos de estilo predeterminados para diferentes navegadores. El estilo predeterminado no garantiza que funcione en todos los navegadores. Cada navegador tiene su propia hoja de estilo con estilos incorporados predeterminados. Si el diseño no funciona en el navegador que está utilizando, esto puede ser un problema para usted, especialmente cuando tendrá que hacer que su sitio web sea coherente en todos los navegadores. A continuación se muestra la solución para ello.
A continuación se muestra un ejemplo del fragmento de código.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to reset/remove CSS
styles for element ?
</title>
<style>
body {
display: grid;
min-height: 100vh;
}
.gfg {
all: unset;
}
.geeks {
color: green;
font-size: 3rem;
}
</style>
</head>
<body>
<center>
<div class="geeks">
<button class="gfg">
GeeksforGeeks
</button>
</div>
<p>
Here the GeeksforGeeks button is
attached with the unset property
</p>
<br>
<button class="GFG">
A Online Computer Secience Portal
</button>
</center>
</body>
</html>
Producción:
Conclusión: hemos compartido algunos trucos comunes de CSS, pero estos no se limitan aquí. A medida que avance en el viaje del desarrollo frontend, aprenderá muchas cosas en CSS. Leer el código del otro desarrollador ayuda mucho a crear una hermosa interfaz de usuario. En el desarrollo de UI, es muy importante verificar la capacidad de respuesta de su aplicación web en todos los navegadores. Muchos desarrolladores terminan escribiendo código largo que no es bueno. Recomendamos enfáticamente que verifiquen el código del otro desarrollador y verifiquen los proyectos que usan menos líneas de código y aun así logran las mismas cosas.
Publicación traducida automáticamente
Artículo escrito por anuupadhyay y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA