목록HTML _CSS (226)

비전공자 개발일기

Broken Effect

https://bennettfeely.com/clippy/ Clippy — CSS clip-path maker About Clip Paths The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source. CSS Animations and transitions are possible with two or more clip-path shape bennettfeely.com * { margin: 0; padding: 0; box-sizing: border-box; } body { di..
HTML _CSS 2022. 7. 18. 00:41
Progress Bar

body { background: black; } .progress { --progress: 0%; width: 500px; height: 50px; margin: 9em auto; border: 1px solid #fff; padding: 12px 10px; box-shadow: 0 0 10px #aaa; } .progress .bar { width: var(--progress); height: 100%; background: linear-gradient(gold, #c85, gold); background-repeat: repeat; box-shadow: 0 0 10px 0px orange; animation: shine 4s ease-in infinite, end 1s ease-out 1 7s; t..
HTML _CSS 2022. 7. 16. 03:01
Rainbow Button

Purple button Green button Red button Blue button Yellow button html, body { height: 100%; } body { display: grid; place-content: center; } .btn { background: hsl(var(--hue), 98%, 80%); border: none; border-radius: 7px; cursor: pointer; color: black; font: 600 1.05rem/1 "Nunito", sans-serif; letter-spacing: 0.05em; overflow: hidden; padding: 1.15em 3.5em; min-height: 3.3em; position: relative; t..
HTML _CSS 2022. 7. 15. 00:01
CSS Focus

F O C U S * { margin: 0; padding: 0; box-sizing: border-box; /* font-family: monospace; */ } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg, #FF0057, #2196F3); } h2 { position: relative; display: flex; gap: 5px; color: #FFF; font-size: 4em; cursor: pointer; } h2 span { position: relative; filter: blur(5px); padding: 0 5px;..
HTML _CSS 2022. 7. 14. 00:58
Youtube Clone

menu search search videocam apps notifications account_circle home Home local_fire_department Trending subscriptions Subcriptions library_add_check Library history History play_arrow Your Videos watch_later Watch Later thumb_up Liked Videos Recommended Top 5 Programming Languages to Learn in 2021 | Best Programming Languages to Learn FutureCoders 10M Views • 3 Months Ago Build A Password Generat..
HTML _CSS 2022. 7. 13. 00:03
Parallax Effect

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;700&display=swap'); :root{ --color: #333; } body { font-family: 'Red Hat Text', sans-serif; } .container { text-align: center; color: var(--color); width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url(https://images.unsplash.com/photo-1..
HTML _CSS 2022. 7. 12. 00:54
Cubic Spinner

1 4 3 6 5 2 body { margin: 12% 40%; background-color: #CCC; } .container { width: 300px; height: 300px; position: relative; perspective: 1000px; } .cubic { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ(-200px) rotateZ(180deg) rotateX(45deg); animation: spin 3s infinite linear; } .cubic .surface { width: 100%; height: 100%; font-size: 130px; fo..
HTML _CSS 2022. 7. 10. 00:37
CSS Wave

Simple CSS Waves @import url(//fonts.googleapis.com/css?family=Lato:300:400); body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position:relative; text-align:center; background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172..
HTML _CSS 2022. 7. 4. 00:51
이전 Prev 1 ··· 16 17 18 19 20 21 22 ··· 29 Next 다음