전체 글 (38) 썸네일형 리스트형 CSS Filter Cards Category Example Card Heading Category Example Card Heading Category Example Card Heading Category Example Card Heading :root{ --background-dark: #2d3548; --text-light: rgba(255,255,255,0.6); --text-lighter: rgba(255,255,255,0.9); --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px; --spacing-xxl: 64px; --width-container: 1200px; } *{ border: 0; margin: 0; padding: 0; box-.. Magic Card Magic Card Mythrill @property --rotate { syntax: ""; initial-value: 132deg; inherits: false; } :root { --card-height: 65vh; --card-width: calc(var(--card-height) / 1.5); } body { min-height: 100vh; background: #212534; display: flex; align-items: center; flex-direction: column; padding-top: 2rem; padding-bottom: 2rem; box-sizing: border-box; } .card { background: #191c29; width: var(--card-width.. Split Card Hover Effect Card Split Hovers The City Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos excepturi nostrum necessitatibus doloremque? Quasi non molestias odio. Quasi non molestias odio. The Beach Quasi non molestias odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos excepturi nostrum necessitatibus doloremque? Quasi non molestias odio. :root { --cover-timing: 0.5s;.. The World Outside * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; overflow: hidden; background: repeating-radial-gradient( circle at center, #444 0 10%, #111 10% 20% ); touch-action: none; } canvas { width: 100%; height: auto; object-fit: contain; } /********* * made by Matthias Hurrle (@atzedent) */ /** @type {HTMLCanvasElement} */ const canvas = window.canvas const gl = canvas.getContex.. Social Media Icons with Popups Facebook Twitter Instagram Github Youtube /* Auther: Abdelrhman Said */ @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } *:focus, *:active { outline: none !important; -webkit-tap-highlight-color: transparent; } html, body { display: grid; height: 100%; width: 100%; font-family: "Poppins", sans-serif; place-items: c.. Social media icon *{ margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #000; } ul { position: relative; display: flex; } ul li { position: relative; list-style: none; margin: 0 20px; cursor: pointer; } ul li a { text-decoration: none; } ul li a .fa-brands { font-size: 6em; color: #222; } ul li a::before { font-family: "F.. Hover or tap the icons :root { --color-light: rgb(203 213 225); --color-mid: rgb(51 65 85); --color-dark: rgb(71 85 105); } body { background-color: black; color: var(--color-light); font-family: sans-serif; font-family: "Inter", sans-serif; font-size: 14px; } body::before { content: "Hover or tap the icons."; font-size: 18px; position: absolute; left: 50%; top: calc(50% - 100px); transform: translate(-50%, -50%); } b.. Polaroid-like photo carousel /* number of images*/ .gallery { --d: 10s; /* duration */ display: grid; width: 220px; } .gallery > img { grid-area: 1/1; width: 100%; aspect-ratio: 1; object-fit: cover; border: 10px solid #f2f2f2; box-shadow: 0 0 4px #0007; animation: slide var(--d) infinite; } .gallery img:last-child { animation-name: slide-last; } .gallery > img:nth-child(1) { animation-delay: calc(0*var(--d)); --r: 12deg; }.. 이전 1 2 3 4 5 다음
