목록HTML _CSS (226)

비전공자 개발일기

Animated Skills bar

Animated Skills Bar HTML CSS Java Script Swift @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } html,body{ display: grid; height: 100%; place-items: center; background-color: lightgray; } h1{ font-size: 4rem; text-align: center; color: #fff; text-shado..
HTML _CSS 2022. 9. 26. 00:52
Text Animation & BG

Wish u a happy T okyo D aeg u * { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } h3 { font-size: 1.5em; text-transform: uppercase; letter-spacing: 3px; font-weight: 300; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } h1 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: ..
HTML _CSS 2022. 9. 25. 09:34
Slide Sign In & Up

Sign Up Sign Up Sign In Forgot your password? Sign In Sign In Sign Up :root { /* COLORS */ --white: #e9e9e9; --gray: #333; --blue: #0367a6; --lightblue: #008997; /* RADII */ --button-radius: 0.7rem; /* SIZES */ --max-width: 758px; --max-height: 420px; font-size: 16px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", san..
HTML _CSS 2022. 9. 20. 22:38
Corner Text Parallax Effects

Corner Text Corner Text * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } section { width: 100%; height: 100vh; background-color: #222; overflow: hidden; } section .textBox { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333; clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%); } .skew1 h2, .textBox .skew2 h2 { position: absolute; width: ..
HTML _CSS 2022. 9. 17. 00:17
Gradient Circle Text

r e p o l e v e d d n e t n o r f * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } body::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#08FF12, #0791FF); z-index: 10; pointer-events: none; mix-blend-mode: multiply; } .circle { position: relative; ..
HTML _CSS 2022. 9. 15. 00:33
Christmas Tree

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #E8FFE8; } .tree { position: relative; top: -100px; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(30deg); animation: animate 6s linear infinite; } .tree::before { content: '⭐'; position: absol..
HTML _CSS 2022. 9. 13. 00:58
Growing Smiley Face Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 100vh; background-color: #222; overflow: hidden; } :root { --clr1: #FF0087; --clr2: #01FF5F; } label { position: relative; width: 150px; height: 150px; } label input { appearance: none; } label .face { position: absolute; inset: 0; backgr..
HTML _CSS 2022. 9. 12. 00:32
Hover Effect

Home About Services Team Contact * { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #222; overflow: hidden; } section ul { position: relative; display: flex; flex-direction: column; } section ul li { list-style: none; } section ul li a { position: relative; d..
HTML _CSS 2022. 9. 10. 00:24
이전 Prev 1 ··· 10 11 12 13 14 15 16 ··· 29 Next 다음