Different styles - necrifede/my-dev-setup GitHub Wiki
- Add shadows: https://www.joshwcomeau.com/shadow-palette/
- Several Loaders: https://cssloaders.github.io/
- Gradients: https://www.designgradients.com/
- Shaping images: https://bennettfeely.com/clippy/
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button>Click aqui</button>
<style>
body {
background-color: #eee;
}
button {
background-color: transparent;
font-weight: semibold;
color: #444;
font-size: 1rem;
padding: 1rem 1.5rem;
border: 2px solid #eee;
border-radius: 0.5rem;
cursor: pointer;
transition: all 1s ease;
box-shadow: 0.5rem 0.5rem 1rem #ccc, -0.5rem -0.5rem 1rem #fff;
}
button:hover {
box-shadow: 0.5rem 0.5rem 1rem #fff, -0.5rem -0.5rem 1rem #ccc;
}
button:active {
box-shadow: inset 0.2rem 0.2rem 1rem #fff, inset -0.2rem -0.2rem 1rem #ccc;
}
</style>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<img
src="https://www.nasa.gov/sites/default/files/styles/full_width/public/thumbnails/image/main_image_star-forming_region_carina_nircam_final-1280.jpg"
alt=""
width="500"
/>
<style>
img {
animation: fadeIn 3s ease;
}
@keyframes fadeIn {
0% {
opacity: 0;
filter: blur(20px);
}
10% {
opacity: 1;
filter: brightness(2) blur(10px);
}
}
</style>
</body>
</html>In reality this is more like an autocomplete input.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<label
>Elije el mejor Framework:
<input list="frameworks-all" />
</label>
<datalist id="frameworks-all">
<option value="React">React</option>
<option value="Vue">Vue</option>
<option value="Svelte">Svelte</option>
<option value="Angular">Angular</option>
</datalist>
</body>
</html>