목록HTML _CSS (226)

비전공자 개발일기

BootStrap Progress bar

.progress .progress-bar{ -webkit-animation: progress 5s; /* Safari 4+ */ -moz-animation: progress 5s; /* Fx 5+ */ -o-animation: progress 5s; /* Opera 12+ */ animation: progress 5s; /* IE 10+ */ } @-webkit-keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } @-o-keyframes progress { 0% { width: 0%; } 100% { width: 100%..
HTML _CSS 2023. 2. 28. 20:43
Universe Loading

/* KEYFRAMES */ @keyframes spin { from { transform: rotate(0); } to{ transform: rotate(359deg); } } @keyframes spin3D { from { transform: rotate3d(.5,.5,.5, 360deg); } to{ transform: rotate3d(0deg); } } @keyframes configure-clockwise { 0% { transform: rotate(0); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360d..
HTML _CSS 2023. 2. 27. 20:13
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
Wandering cube Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #333; display: flex; justify-content: center; align-items: center; } .wandering-cubes { width: 4em; height: 4em; position: relative; margin: auto; } .wandering-cubes .cube { background-color: #229ABC; width: 2em; height: 2em; position: absolute; top: 0; left: 0; animation: wandering-cubes 1.8s ease-i..
HTML _CSS 2023. 2. 23. 20:14
Apple iMessage

Text Soap An iMessage chat becomes fodder for daytime drama This begins one morning with my friend in San Diego telling me about an earthquake they just had. It was loud. We just laid there and said “is this an earthquake? I think this is an earthquake.” Like is this an earthquake just go back to sleep It’s more like “this is an earthquake. Check the Internet. Yup. Earthquake. This is the size. ..
HTML _CSS 2023. 2. 22. 21:24
HTML dialog tag

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog : The Dialog element - HTML: HyperText Markup Language | MDN The HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow. developer.mozilla.org Favorite animal: Choose… Brine shrimp Red panda Spider monkey Cancel Confirm Show the dialog const showButton = document.ge..
HTML _CSS 2023. 2. 20. 21:14
Toolbar Motion

:root { --primary-color:#0D6FFA; --accent-color:#49CE95; --danger-color:#EC3582; --fore-color:rgba(0,0,0,0.65); --main-cast-shadow: 0px 3px 12px rgba(0, 0, 0, 0.08), 0px 3px 6px rgba(0, 0, 0, 0.12); } body { background-color:#9664A5; } .sc-bottom-bar { position:absolute; display:flex; padding: 16px 36px; justify-content:space-between; width:375px; margin:auto; top:0; left:0; bottom:0; right:0; h..
HTML _CSS 2023. 2. 19. 19:16
Landscape Design

* { padding: 0; margin: 0; box-sizing: border-box; } body { height: 100vh; background-color: #0A4B78; display: flex; justify-content: center; align-items: center; } .container { width: 367px; height: 500px; position: relative; background: linear-gradient(to bottom, #01263A 0%, #4F94D4 70%, #C5d9ED 100%); box-shadow: 0 10px 20px rgba(0, 0, 0, .3), 0 10px 10px rgba(0, 0, 0, .3); border-radius: 80p..
HTML _CSS 2023. 2. 18. 19:31
이전 Prev 1 2 3 4 ··· 29 Next 다음