목록html5 (313)

비전공자 개발일기

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
Project Management Dashboard

Portfolio Aybüke C. Projects December, 12 45 In Progress 24 Upcoming 62 Total Projects December 10, 2020 Web Designing Prototyping Progress 60% 2 Days Left December 10, 2020 Testing Prototyping Progress 50% 2 Days Left December 10, 2020 Svg Animations Prototyping Progress 80% 2 Days Left December 10, 2020 UI Development Prototyping Progress 20% 2 Days Left December 10, 2020 Data Analysis Prototy..
HTML _CSS 2022. 6. 22. 00:36
Sticky Note

Title #1 Text Content #1 Title #2 Text Content #2 Title #3 Text Content #3 Title #4 Text Content #4 Title #5 Text Content #5 Title #6 Text Content #6 Title #7 Text Content #7 Title #8 Text Content #8 @import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,300&display=swap'); div { margin: 20px auto..
JQuery 2022. 6. 21. 00:24
Word Counter

Word Counter Characters: 0 Words: 0 Sentences: 0 Paragraphs: 0 Reading Time: 0 Show readability score. Top keywords: /* border box */ html { box-sizing: border-box; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ } *, *:before, *:after { box-sizing: inherit; } b { font-we..
Javascript 2022. 6. 20. 00:31
Sliding Card UI Design

Someone Famous Hero I'm IRONMAN * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .card { position: relative; width: 350px; height: 85px; background-color: #F00; border-radius: 20px; filter: drop-shadow(-20px 20px 40px #398CC055); transition: .5s ease-in-out; } .card.active { height: 420px; } .card.active..
HTML _CSS 2022. 6. 19. 00:54
Background color picker

Background Color Picker Click me! # .center { padding-top: 70px; margin: auto; text-align: center; } .btn { margin: auto; text-align: center; } function getHex() { let letters = "0123456789ABCDEF"; let color = "#"; for(let i = 0; i < 6; i++) { color += letters[(Math.floor(Math.random() * 16))]; } return color; } function changeColor() { let hex = getHex(); document.getElementById("hex").innerHTM..
Javascript 2022. 6. 18. 00:59
Scroll Animation

Scroll to see the animation Content Content Content Content Content Content Content Content Content Content * { box-sizing: border-box; } body { background-color: #EFEDD6; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: #9535F0; color: #FFF; display: flex; align-items: center; just..
HTML _CSS 2022. 6. 17. 00:46
이전 Prev 1 ··· 28 29 30 31 32 33 34 ··· 40 Next 다음