CSS (hojas de estilo en cascada) ayuda al desarrollador a mejorar la apariencia visual de las páginas web. En otras palabras, podemos decir que CSS agrega vida a las páginas web y las embellece. Con CSS, podemos cambiar el diseño, el color, las fuentes, las imágenes y, lo mejor de todo, es que, para un estilo o diseño en particular, podemos escribir un código una vez y usarlo muchas veces cuando queramos implementarlo en nuestro sitio web, lo cual es muy ventajoso y ahorro de tiempo.
Aquí discutiremos 5 trucos de CSS que pueden hacer que su sitio web se destaque.
1. Cursor personalizado: ¿Alguna vez se sintió aburrido usando el mismo cursor común cada vez? ¿Qué pasaría si pudieras personalizar tu cursor según tus deseos? ¿Imaginas un cursor que tenga tu imagen o algo único? Suena genial, ¿verdad? Esto se puede hacer simplemente usando CSS en una sola línea de código. En el siguiente ejemplo, hemos usado tres imágenes diferentes para el cursor: el logotipo de GeeksforGeeks, una imagen de queso y un cohete, puede usar cualquier imagen de su elección.
cursor: url("anyimage.png"), pointer;
Ejemplo:
index.html
<!DOCTYPE html> <html> <head> <title>Customized Cursor</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <button>GFG Cursor</button> <button>Cheese Cursor</button> <button>Rocket Cursor</button> </div> </body> </html>
style.css
body {
background-color: pink;
padding: 0;
margin: 0;
}
.container {
width: 690px;
height: 220px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
button {
font-size: 30px;
background-color: white;
border: none;
outline: none;
text-transform: uppercase;
color: black;
width: 200px;
padding: 20px;
padding-left:40px;
padding-right:40px;
}
button:nth-child(1) {
cursor: url("gfg.png"),pointer;
}
button:nth-child(2) {
cursor: url("cheese.png"),pointer;
}
button:nth-child(3) {
cursor: url("rocket.png"),pointer;
}
Producción:
Limitaciones para usar cualquier imagen deseada como cursor:
- Se puede usar cualquier formato de imagen como JPG, PNG o BMP
- El tamaño de la imagen debe ser de 32 × 32 px , cualquier tamaño de imagen mayor que este no funcionará.
2. Efecto de sombra: El efecto de sombra es un efecto muy simple pero sorprendente que le da un toque 3D a nuestro texto.
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shadow Effect</title>
<style>
h1 {
font-size: 5rem;
text-shadow: 5px 5px 0px green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
3. Filtros coloridos: el color de cualquier imagen se puede cambiar sin usar ninguna herramienta de edición, esto se puede hacer fácilmente usando la propiedad de filtro CSS.
Ejemplo:
index.html
<!DOCTYPE html> <html> <head> <title>CSS FILTERS</title> </head> <link rel="stylesheet" type="text/css" href="style.css"> <body> <div class="image"> <img class="original" src="gfg.jpg"> <img class="brightness" src="gfg.jpg"> <img class="huerotate" src="gfg.jpg"> <img class="grayscale" src="gfg.jpg"> <img class="blend" src="gfg.jpg"> </div> </body> </html>
style.css
.image img {
max-width: 300px;
}
.original {
}
.brightness {
filter: brightness(150%);
}
.huerotate {
filter: hue-rotate(180deg);
}
.grayscale {
filter: grayscale(100%);
}
.blend {
filter: invert(1) hue-rotate(260deg);
}
Producción:
Consejo de propiedad: el color de cualquier imagen se puede cambiar a muchos colores, simplemente cambiando el valor de los grados.
Ejemplo:
filter: invert(1) hue-rotate(90deg); filter: invert(1) hue-rotate(150deg);
4. Texto recortado de fondo: casi todos hemos intentado darle un fondo elegante a nuestro texto, que es muy simple. ‘Texto recortado de fondo’ significa recortar la imagen de fondo al texto para que se vea más atractivo y fresco.
Simplemente podemos hacerlo con la siguiente línea de código, donde ‘cualquier imagen’ es la imagen deseable de su elección que desea recortar.
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Background Clipped Text</title>
<style>
h1 {
font-size: 12rem;
background-image: url('anyimage.jpg');
-webkit-background-clip: text;
color: transparent;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
¡Incluso puedes recortar un GIF en el fondo del texto! esto se puede hacer usando el mismo código anterior simplemente reemplazando el nombre de la imagen con el nombre del GIF
5. Texto en mayúsculas: ‘Capitulares’ es un efecto de texto en el que la primera letra del primer párrafo se hace más grande para crear un efecto llamativo, se usa a menudo en periódicos, revistas y novelas.
p::first-letter {
color:green;
font-size: 3.9rem;
float: left;
padding-right: 4px;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS Drop Effect</title>
<style type="text/css">
.content {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.article {
width: 50%;
margin: 20px;
}
p::first-letter {
float: left;
line-height: 30px;
font-size: 50px;
padding-right: 5px;
padding-left: 5px;
color: green;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: -5px;
margin-right: 5px;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<div class="content">
<div class="article">
<p>
Geeksforgeeks is a computer science
portal for geeks. The content on
GeeksforGeeks has been divided into
various categories from programming
languages, topic-wise practice,
development , data structures ,
algorithm to interview preparation,
company- wise interview experience,
recruitment procedure of a company
it has verything covered. A drop cap
is a effect in which the first letter
of the first paragraph is made larger
to create an eye catchy effect it is
often used in newspaper , magazines
and novels.
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por tausifsiddiqui y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA