목록css3 (310)

비전공자 개발일기

Automatic Image Slider

/* Main Rules */ :root{ --white-c: #fff; --black-c: #000; --body-background-c: #FD7AC0; --wrapper-background-c: #D4F1F4; --wrapper-shadow-c: rgba(0, 0, 0, 0.219); --buttons-background-c: rgba(255, 255, 255, 0.219); --buttons-active-background-c: rgba(135, 207, 235, 0.493); } *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Baloo Chettan 2', cursive; background: radial-grad..
Javascript 2022. 6. 30. 00:41
Toast Notification

Show Notification @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: rebeccapurple; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .btn { background-color: #ffffff; color: rebeccapurp..
Javascript 2022. 6. 29. 22:25
Arrow Magic Menu Indicator

Home About us Our Services Portfolio Team Contact * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; } ul { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } ul li a { position: relative;..
HTML _CSS 2022. 6. 28. 00:59
3D Text Animation Effect

AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble AvengersAssemble * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-h..
HTML _CSS 2022. 6. 27. 20:59
Animated Hot Cup of Tea

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #607D8B; } .container { position: relative; top: 50px; } .plate { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 500px; height: 200px; background: linear-gradient(to right, #F9F9F9F9, #E7E7E7); border-radi..
HTML _CSS 2022. 6. 26. 00:41
Dark Card Hover Effect

Design Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Code Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More Launch Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cum cumque minus iste veritatis provident at. Read More body{ margin: 0; padding:..
HTML _CSS 2022. 6. 25. 03:38
Animated Magic Menu Indicator

Home Profile Message Help Settings * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #F53B57; transition: .5s; } .navigation { position: relative; width: 70px; height: 350px; background-color: #FFF; border-radius: 35px; box-shadow: 0 15px 25px rgba(0, 0, 0, .1); } .navigation ul { position..
HTML _CSS 2022. 6. 24. 00:58
Switch Text Effect

You Are So Amazing.... body { background-color: #000; } .container { width: 100%; height: 80vh; position: relative; font-family: monospace; color: #FFF; font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 58%; left: 96%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } ...
HTML _CSS 2022. 6. 23. 00:33
이전 Prev 1 ··· 27 28 29 30 31 32 33 ··· 39 Next 다음