목록filter (7)

비전공자 개발일기

Ring Of Fire

* { margin: 0; padding: 0; box-sizing: border-box; position: relative ; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .circle { width: 600px; height: 600px; filter: url(#wavy) blur(1px); } .circle::before { content: ''; position: absolute; top: 100px; left: 100px; right: 100px; bottom: 100px; border: 20px solid #FFF; border-rad..
HTML _CSS 2023. 1. 8. 00:51
Product Filter

Search All Topwear Bottomwear Jacket Watch * { padding: 0; margin: 0; box-sizing: border-box; border: none; outline: none; font-family: "Poppins", sans-serif; } body { background-color: #f5f8ff; } .wrapper { width: 95%; margin: 0 auto; } #search-container { margin: 1em 0; } #search-container input { background-color: transparent; width: 40%; border-bottom: 2px solid #110f29; padding: 1em 0.3em; ..
Javascript 2022. 12. 4. 19:55
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
Search Filter

Live User Filter Search by name and/or location Loading... @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #f8f9fd; font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { border-radius: 5px; box-shadow..
Javascript 2022. 8. 2. 00:33
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
filter() Animation

.blob { width: 150px; height: 150px; animation: hue-animation 5s alternate infinite; } @keyframes hue-animation { 100% { filter: hue-rotate(360deg); } }
HTML _CSS 2022. 4. 16. 00:22
Javascript forEach, map, filter, some, every, reduce

★ 모든 method는 지정한 배열 내 요소들로 진행 array.map(x => x *2)이면 이때 x는 array[0], array[1].... 이 되는 것! // Array.map(함수) const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]; const doubles = numbers.map(function (num) { return num * 2; }) console.log(doubles) /////////////////////////////////////////////////////////////// // Array.forEach(함수) const numbers = [1, 2, 3, 4, 5, ..
Javascript 2021. 9. 15. 00:13
이전 Prev 1 Next 다음