목록text (8)

비전공자 개발일기

Text Animation

CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME CSS IS AWESOME * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #222; min-height: 100vh; display: flex; justify-content: center; align-items: center; } .box { position: relative; display: flex; flex-direction: column; } .box h2 { font..
HTML _CSS 2023. 2. 24. 23:11
Cool Text Style

Code body { background-color: #DC143C; } span { font-size: 7rem; letter-spacing: .5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-shadow: 7px 7px #FFA500, 18px 18px #000; }
HTML _CSS 2023. 2. 16. 00:24
Confetti Text Effect

OLLEH!!! body { height: 100vh; display: grid; place-items: center; font-family: "bebas", sans-serif; background-color: #000; } .particletext { text-align: center; font-size: 48px; position: relative; color: #fff; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti..
HTML _CSS 2023. 2. 9. 23:17
Intro Text Animation

Avengers Assemble * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: radial-gradient(#93D9F9, #0C80B5); min-height: 100vh; overflow: hidden; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70vh; background-color: rgba(0, 0, 0, .1); } section { display: flex; justify-content: center; align-items: center; min-height: ..
HTML _CSS 2023. 1. 11. 00:40
Copy to Text

실행 영상 Copy Text Copy Text * { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background-color: #bb2629; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { background-color: #ffffff; padding: 30px; border-radius: 10px; margin: 30px 0; } .container input { font-size: 18px; padding: 10px; bo..
Javascript 2023. 1. 1. 01:59
Text Editor

a@Q superscript"> H1 H2 H3 H4 H5 H6 Font Color Highlight Color * { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #338cf4; } .container { background-color: #ffffff; width: 90vmin; padding: 50px 30px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 10px; box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2); } .options { display: flex; f..
Javascript 2022. 12. 16. 07:49
Search Highlight Text

Search Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id, aut aliquam molestias a provident vel deleniti laborum voluptatibus animi labore eligendi possimus, maiores accusantium in officia sit reiciendis laudantium totam nihil optio aliquid sapiente quasi. Architecto labore voluptas iste omnis doloribus minima, veritatis quibusdam animi eaque deserunt non repellendus accusantium rerum..
Javascript 2022. 11. 29. 15:42
Text Animation

♠ POKER ♣ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } h2 { position: relative; font-size: 6em; color: #222; } h2::before { content: attr(data-text); position: absolute; color: #FFF; width: 350px; overflow: hidden; white-space: nowrap; border-right: 4px solid #FFF; filter: dro..
HTML _CSS 2022. 8. 5. 00:22
이전 Prev 1 Next 다음