목록HTML _CSS (226)

비전공자 개발일기

Plus Neon BTN

Button Button Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #27282C; } .container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 120px; } .container a { position: relative; padding: 16px 30px; font-size: 1.5em; color: var(--clr); text-shadow..
HTML _CSS 2022. 11. 21. 00:05
Sticky Cards

Card Title Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit aliquid atque porro ipsum minima nesciunt quo excepturi corrupti animi? Quo natus non soluta minus vitae? Card Title Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit aliquid atque porro ipsum minima nesciunt quo excepturi corrupti animi? Quo natus non soluta minus vitae? Card Title Lorem ipsum dolor sit, amet..
HTML _CSS 2022. 11. 20. 00:46
Water Drop Card

01 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 02 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More 03 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, id? Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-c..
HTML _CSS 2022. 11. 18. 00:31
BG CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #001F25; } .loader { position: relative; width: 300px; height: 300px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(36deg * var(--i))); } .loader span::before { con..
HTML _CSS 2022. 11. 17. 16:58
Toggle Button Animation

*, *:before, *:after { border: 0; box-sizing: border-box; margin: 0; padding: 0; } body { background: linear-gradient(#fff, #ccc); display: flex; height: 100vh; --on: #88e661; --off: #f0f0f0; --transDur: 0.6s; } input { position: fixed; transform: translateX(-100%); } .toy-toggle { background: radial-gradient(at top left, #fff 10%, #fff0 20%), radial-gradient(at top right, #fff 20%, #e4e4e4 35%)..
HTML _CSS 2022. 11. 15. 14:26
Responsive Services Section

Designing Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More Development Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More SEO Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, aperiam. Read More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-heig..
HTML _CSS 2022. 11. 11. 21:30
Main Page in WEB

Our Services Web Application Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry... Read More Highly customizable Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry... Read More Responsive design Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum ..
HTML _CSS 2022. 11. 10. 00:39
Filter Gallery

FILTER GALLERY All Animals Lightning Desert body { margin: auto; background: orange; width: 353px; font-family: "Arial" } h2 { text-align: center; } ul { padding: 0; } ul.gallery li { display: inline-block; opacity: 1; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } label { curso..
HTML _CSS 2022. 11. 7. 00:49
이전 Prev 1 ··· 6 7 8 9 10 11 12 ··· 29 Next 다음