CSS like a Pro
CSS like a Pro
August 12, 2024
In case you dont know yet, CSS is oart of the front-end of websites.
And you can make cool things, easily.
Tailwind
https://tailwindui.com/components
Material UI - MUI
https://mui.com/material-ui/ https://mui.com/material-ui/react-image-list/
DaisyUI
https://daisyui.com/components/diff/
More CSS Resources
Infinite Scroll for Astro with CSS 📌
Just with CSS!
---
// Frontmatter script area (JavaScript goes here if needed, but for this example, it's not required)
---
<style>
.carousel {
margin: 0 auto;
padding: 20px 0;
max-width: 700px;
overflow: hidden;
display: flex;
}
.carousel > * {
flex: 0 0 100%;
}
.group {
display: flex;
gap: 20px;
padding-right: 20px;
will-change: transform;
animation: scrolling 10s linear infinite;
}
.card {
width: 100%;
color: white;
border-radius: 24px;
box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
padding: 20px;
font-size: xx-large;
justify-content: center;
align-items: center;
min-height: 200px;
}
.card:nth-child(1) {
background: #7958ff;
}
.card:nth-child(2) {
background: #5d34f2;
}
.card:nth-child(3) {
background: #4300da;
}
@keyframes scrolling {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.carousel:hover .group {
animation-play-state: paused;
}
</style>
<div class="carousel">
<div class="group">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
</div>
<div aria-hidden="true" class="group">
<div class="card">A</div>
<div class="card">B</div>
<div class="card">C</div>
</div>
</div>
FAQ
Check that its performing with: