http://codepen.io/davidkpiano/pen/xwyVXO/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS-only Colorful Calendar Concept</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style type="text/css"> @charset "UTF-8"; .cal-scene, .cal-button > *, .cal-title > .cal-heading, .cal-day { -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } [id="index"]:target ~ .cal-device .cal-scene.-calendar > .cal-month, [id="index"]:target ~ .cal-device .cal-scene.-calendar > .cal-header { -webkit-animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both; animation: fade-in 0.6s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) both; } @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } [id="oct-week-3"]:target ~ .cal-device [href="#oct-week-3"] { cursor: default; } [id="oct-week-3"]:target ~ .cal-device .cal-app { background: -webkit-linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); } [id="oct-week-4"]:target ~ .cal-device .cal-month { -webkit-transform: translateY(-7.71429vh); -ms-transform: translateY(-7.71429vh); transform: translateY(-7.71429vh); } [id="oct-week-4"]:target ~ .cal-device .cal-month.-october > .cal-header { -webkit-transform: translateY(7.71429vh) translateX(30.85714vh); -ms-transform: translateY(7.71429vh) translateX(30.85714vh); transform: translateY(7.71429vh) translateX(30.85714vh); } [id="oct-week-4"]:target ~ .cal-device .cal-scene.-calendar:before { box-shadow: 0vh 7.71429vh #f3b56b, 7.71429vh 7.71429vh #f1ae6b, 15.42857vh 7.71429vh #f0a76b, 23.14286vh 7.71429vh #efa06b, 30.85714vh 7.71429vh #ee996b, 38.57143vh 7.71429vh #ec926b, 46.28571vh 7.71429vh #eb8b6b, 0vh 15.42857vh #e9836b, 7.71429vh 15.42857vh #e87b6b, 15.42857vh 15.42857vh #e6736b, 23.14286vh 15.42857vh #e56b6b, 30.85714vh 15.42857vh #e3636b, 38.57143vh 15.42857vh #e25b6b, 46.28571vh 15.42857vh #e0536b, 0vh 23.14286vh #df4e6b, 7.71429vh 23.14286vh #dd496c, 15.42857vh 23.14286vh #dc446c, 23.14286vh 23.14286vh #da3f6c, 30.85714vh 23.14286vh #d93a6c, 38.57143vh 23.14286vh #d7356d, 46.28571vh 23.14286vh #d6306d, 0vh 30.85714vh #cf2f6c, 7.71429vh 30.85714vh #c72f6c, 15.42857vh 30.85714vh #c02e6b, 23.14286vh 30.85714vh #b92e6a, 30.85714vh 30.85714vh #b22d69, 38.57143vh 30.85714vh #aa2d69, 46.28571vh 30.85714vh #a32c68, 0vh 38.57143vh #9c2c68, 7.71429vh 38.57143vh #952b67, 15.42857vh 38.57143vh #8e2b67, 23.14286vh 38.57143vh #872b66, 30.85714vh 38.57143vh #802b66, 38.57143vh 38.57143vh #792a65, 46.28571vh 38.57143vh #722a65, 0vh 46.28571vh #6b2965, 7.71429vh 46.28571vh #642964, 15.42857vh 46.28571vh #5d2864, 23.14286vh 46.28571vh #572863, 30.85714vh 46.28571vh #502763, 38.57143vh 46.28571vh #492762, 46.28571vh 46.28571vh #422662, 0vh 54vh #3b2661, 7.71429vh 54vh #342661, 15.42857vh 54vh #2d2660, 23.14286vh 54vh #27255f, 30.85714vh 54vh #20255e, 38.57143vh 54vh #19255e, 46.28571vh 54vh #12255d, 0vh 61.71429vh #152d60, 7.71429vh 61.71429vh #183464, 15.42857vh 61.71429vh #1b3c67, 23.14286vh 61.71429vh #1e446b, 30.85714vh 61.71429vh #214c6e, 38.57143vh 61.71429vh #245372, 46.28571vh 61.71429vh #275b75, 0vh 69.42857vh #2a6378, 7.71429vh 69.42857vh #2d6a7b, 15.42857vh 69.42857vh #30727e, 23.14286vh 69.42857vh #337a82, 30.85714vh 69.42857vh #368285, 38.57143vh 69.42857vh #398988, 46.28571vh 69.42857vh #3c918b, 0vh 77.14286vh #3f998e, 7.71429vh 77.14286vh #42a092, 15.42857vh 77.14286vh #45a895, 23.14286vh 77.14286vh #49af98, 30.85714vh 77.14286vh #4cb79b, 38.57143vh 77.14286vh #4fbe9f, 46.28571vh 77.14286vh #52c6a2, 0vh 84.85714vh #55cda5, 7.71429vh 84.85714vh #58d4a8, 15.42857vh 84.85714vh #5bdbab, 23.14286vh 84.85714vh #5de3ad, 30.85714vh 84.85714vh #60eab0, 38.57143vh 84.85714vh #63f1b3, 46.28571vh 84.85714vh #66f8b6, 0vh 92.57143vh #6df8b9, 7.71429vh 92.57143vh #74f9bd, 15.42857vh 92.57143vh #7bf9c0, 23.14286vh 92.57143vh #82f9c3, 30.85714vh 92.57143vh #89f9c6, 38.57143vh 92.57143vh #90faca, 46.28571vh 92.57143vh #97facd; } [id="oct-week-4"]:target ~ .cal-device .cal-app { background: -webkit-linear-gradient(#F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); background: linear-gradient(#F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); } [id="oct-week-4"]:target ~ .cal-device [href="#oct-week-4"] { z-index: -1; } [id="nov-week-1"]:target ~ .cal-device .cal-month { -webkit-transform: translateY(-15.42857vh); -ms-transform: translateY(-15.42857vh); transform: translateY(-15.42857vh); } [id="nov-week-1"]:target ~ .cal-device .cal-month.-october > .cal-header { -webkit-transform: translateY(7.71429vh) translateX(30.85714vh); -ms-transform: translateY(7.71429vh) translateX(30.85714vh); transform: translateY(7.71429vh) translateX(30.85714vh); opacity: 0; } [id="nov-week-1"]:target ~ .cal-device .cal-app { background: -webkit-linear-gradient(#EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); background: linear-gradient(#EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); } [id="nov-week-1"]:target ~ .cal-device .cal-scene.-calendar:before { box-shadow: 0vh 7.71429vh #e9836b, 7.71429vh 7.71429vh #e87b6b, 15.42857vh 7.71429vh #e6736b, 23.14286vh 7.71429vh #e56b6b, 30.85714vh 7.71429vh #e3636b, 38.57143vh 7.71429vh #e25b6b, 46.28571vh 7.71429vh #e0536b, 0vh 15.42857vh #df4e6b, 7.71429vh 15.42857vh #dd496c, 15.42857vh 15.42857vh #dc446c, 23.14286vh 15.42857vh #da3f6c, 30.85714vh 15.42857vh #d93a6c, 38.57143vh 15.42857vh #d7356d, 46.28571vh 15.42857vh #d6306d, 0vh 23.14286vh #cf2f6c, 7.71429vh 23.14286vh #c72f6c, 15.42857vh 23.14286vh #c02e6b, 23.14286vh 23.14286vh #b92e6a, 30.85714vh 23.14286vh #b22d69, 38.57143vh 23.14286vh #aa2d69, 46.28571vh 23.14286vh #a32c68, 0vh 30.85714vh #9c2c68, 7.71429vh 30.85714vh #952b67, 15.42857vh 30.85714vh #8e2b67, 23.14286vh 30.85714vh #872b66, 30.85714vh 30.85714vh #802b66, 38.57143vh 30.85714vh #792a65, 46.28571vh 30.85714vh #722a65, 0vh 38.57143vh #6b2965, 7.71429vh 38.57143vh #642964, 15.42857vh 38.57143vh #5d2864, 23.14286vh 38.57143vh #572863, 30.85714vh 38.57143vh #502763, 38.57143vh 38.57143vh #492762, 46.28571vh 38.57143vh #422662, 0vh 46.28571vh #3b2661, 7.71429vh 46.28571vh #342661, 15.42857vh 46.28571vh #2d2660, 23.14286vh 46.28571vh #27255f, 30.85714vh 46.28571vh #20255e, 38.57143vh 46.28571vh #19255e, 46.28571vh 46.28571vh #12255d, 0vh 54vh #152d60, 7.71429vh 54vh #183464, 15.42857vh 54vh #1b3c67, 23.14286vh 54vh #1e446b, 30.85714vh 54vh #214c6e, 38.57143vh 54vh #245372, 46.28571vh 54vh #275b75, 0vh 61.71429vh #2a6378, 7.71429vh 61.71429vh #2d6a7b, 15.42857vh 61.71429vh #30727e, 23.14286vh 61.71429vh #337a82, 30.85714vh 61.71429vh #368285, 38.57143vh 61.71429vh #398988, 46.28571vh 61.71429vh #3c918b, 0vh 69.42857vh #3f998e, 7.71429vh 69.42857vh #42a092, 15.42857vh 69.42857vh #45a895, 23.14286vh 69.42857vh #49af98, 30.85714vh 69.42857vh #4cb79b, 38.57143vh 69.42857vh #4fbe9f, 46.28571vh 69.42857vh #52c6a2, 0vh 77.14286vh #55cda5, 7.71429vh 77.14286vh #58d4a8, 15.42857vh 77.14286vh #5bdbab, 23.14286vh 77.14286vh #5de3ad, 30.85714vh 77.14286vh #60eab0, 38.57143vh 77.14286vh #63f1b3, 46.28571vh 77.14286vh #66f8b6, 0vh 84.85714vh #6df8b9, 7.71429vh 84.85714vh #74f9bd, 15.42857vh 84.85714vh #7bf9c0, 23.14286vh 84.85714vh #82f9c3, 30.85714vh 84.85714vh #89f9c6, 38.57143vh 84.85714vh #90faca, 46.28571vh 84.85714vh #97facd; } [id="nov-week-2"]:target ~ .cal-device .cal-month { -webkit-transform: translateY(-23.14286vh); -ms-transform: translateY(-23.14286vh); transform: translateY(-23.14286vh); } [id="nov-week-2"]:target ~ .cal-device .cal-month.-october > .cal-header { opacity: 0; } [id="nov-week-2"]:target ~ .cal-device .cal-scene.-calendar:before { box-shadow: 0vh 7.71429vh #df4e6b, 7.71429vh 7.71429vh #dd496c, 15.42857vh 7.71429vh #dc446c, 23.14286vh 7.71429vh #da3f6c, 30.85714vh 7.71429vh #d93a6c, 38.57143vh 7.71429vh #d7356d, 46.28571vh 7.71429vh #d6306d, 0vh 15.42857vh #cf2f6c, 7.71429vh 15.42857vh #c72f6c, 15.42857vh 15.42857vh #c02e6b, 23.14286vh 15.42857vh #b92e6a, 30.85714vh 15.42857vh #b22d69, 38.57143vh 15.42857vh #aa2d69, 46.28571vh 15.42857vh #a32c68, 0vh 23.14286vh #9c2c68, 7.71429vh 23.14286vh #952b67, 15.42857vh 23.14286vh #8e2b67, 23.14286vh 23.14286vh #872b66, 30.85714vh 23.14286vh #802b66, 38.57143vh 23.14286vh #792a65, 46.28571vh 23.14286vh #722a65, 0vh 30.85714vh #6b2965, 7.71429vh 30.85714vh #642964, 15.42857vh 30.85714vh #5d2864, 23.14286vh 30.85714vh #572863, 30.85714vh 30.85714vh #502763, 38.57143vh 30.85714vh #492762, 46.28571vh 30.85714vh #422662, 0vh 38.57143vh #3b2661, 7.71429vh 38.57143vh #342661, 15.42857vh 38.57143vh #2d2660, 23.14286vh 38.57143vh #27255f, 30.85714vh 38.57143vh #20255e, 38.57143vh 38.57143vh #19255e, 46.28571vh 38.57143vh #12255d, 0vh 46.28571vh #152d60, 7.71429vh 46.28571vh #183464, 15.42857vh 46.28571vh #1b3c67, 23.14286vh 46.28571vh #1e446b, 30.85714vh 46.28571vh #214c6e, 38.57143vh 46.28571vh #245372, 46.28571vh 46.28571vh #275b75, 0vh 54vh #2a6378, 7.71429vh 54vh #2d6a7b, 15.42857vh 54vh #30727e, 23.14286vh 54vh #337a82, 30.85714vh 54vh #368285, 38.57143vh 54vh #398988, 46.28571vh 54vh #3c918b, 0vh 61.71429vh #3f998e, 7.71429vh 61.71429vh #42a092, 15.42857vh 61.71429vh #45a895, 23.14286vh 61.71429vh #49af98, 30.85714vh 61.71429vh #4cb79b, 38.57143vh 61.71429vh #4fbe9f, 46.28571vh 61.71429vh #52c6a2, 0vh 69.42857vh #55cda5, 7.71429vh 69.42857vh #58d4a8, 15.42857vh 69.42857vh #5bdbab, 23.14286vh 69.42857vh #5de3ad, 30.85714vh 69.42857vh #60eab0, 38.57143vh 69.42857vh #63f1b3, 46.28571vh 69.42857vh #66f8b6, 0vh 77.14286vh #6df8b9, 7.71429vh 77.14286vh #74f9bd, 15.42857vh 77.14286vh #7bf9c0, 23.14286vh 77.14286vh #82f9c3, 30.85714vh 77.14286vh #89f9c6, 38.57143vh 77.14286vh #90faca, 46.28571vh 77.14286vh #97facd; } [id="nov-week-2"]:target ~ .cal-device .cal-app { background: -webkit-linear-gradient(#E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); background: linear-gradient(#E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); } [id="schedule"]:target ~ .cal-device .cal-bar .-schedule { opacity: 1; } [id="schedule"]:target ~ .cal-device .cal-bar .-calendar { opacity: 0; } [id="schedule"]:target ~ .cal-device .cal-scene.-schedule { opacity: 1; z-index: 2; } [id="schedule"]:target ~ .cal-device .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-task > * { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(1) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(1) .cal-task > * { -webkit-transition-delay: 0s; transition-delay: 0s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(2) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(2) .cal-task > * { -webkit-transition-delay: 0.06s; transition-delay: 0.06s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(3) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(3) .cal-task > * { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(4) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(4) .cal-task > * { -webkit-transition-delay: 0.18s; transition-delay: 0.18s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(5) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(5) .cal-task > * { -webkit-transition-delay: 0.24s; transition-delay: 0.24s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(6) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(6) .cal-task > * { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } [id="schedule"]:target ~ .cal-device .cal-item:nth-child(7) .cal-time > *, [id="schedule"]:target ~ .cal-device .cal-item:nth-child(7) .cal-task > * { -webkit-transition-delay: 0.36s; transition-delay: 0.36s; } [id="schedule"]:target ~ .cal-device .cal-scene.-calendar, [id="schedule"]:target ~ .cal-device .cal-scene.-calendar * { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; } .cal-device { width: 54vh; height: 96vh; background: white; } .cal-device > .cal-header { height: 11.57143vh; background: #1c3e69; } .cal-app { height: 84.42857vh; width: 100%; background: -webkit-linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); background: linear-gradient(#FBEC6B, #F4BC6B, #EB8B6B, #E0536B, #D6306D, #A32C68, #722A65, #422662, #12255D, #275B75, #3C918B, #52C6A2, #66F8B6); } .cal-week { height: 7.71429vh; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .cal-weekday { color: white; width: 7.71429vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: 1; font-weight: 600; font-size: 2.57143vh; } .fa { font-size: 2.57143vh; } .cal-scene { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; } .cal-scene.-calendar:before { content: ''; display: block; height: 7.71429vh; width: 7.71429vh; position: absolute; top: -7.71429vh; left: 0; box-shadow: 0vh 7.71429vh #fae56b, 7.71429vh 7.71429vh #f9de6b, 15.42857vh 7.71429vh #f8d76b, 23.14286vh 7.71429vh #f7d16b, 30.85714vh 7.71429vh #f6ca6b, 38.57143vh 7.71429vh #f5c36b, 46.28571vh 7.71429vh #f4bc6b, 0vh 15.42857vh #f3b56b, 7.71429vh 15.42857vh #f1ae6b, 15.42857vh 15.42857vh #f0a76b, 23.14286vh 15.42857vh #efa06b, 30.85714vh 15.42857vh #ee996b, 38.57143vh 15.42857vh #ec926b, 46.28571vh 15.42857vh #eb8b6b, 0vh 23.14286vh #e9836b, 7.71429vh 23.14286vh #e87b6b, 15.42857vh 23.14286vh #e6736b, 23.14286vh 23.14286vh #e56b6b, 30.85714vh 23.14286vh #e3636b, 38.57143vh 23.14286vh #e25b6b, 46.28571vh 23.14286vh #e0536b, 0vh 30.85714vh #df4e6b, 7.71429vh 30.85714vh #dd496c, 15.42857vh 30.85714vh #dc446c, 23.14286vh 30.85714vh #da3f6c, 30.85714vh 30.85714vh #d93a6c, 38.57143vh 30.85714vh #d7356d, 46.28571vh 30.85714vh #d6306d, 0vh 38.57143vh #cf2f6c, 7.71429vh 38.57143vh #c72f6c, 15.42857vh 38.57143vh #c02e6b, 23.14286vh 38.57143vh #b92e6a, 30.85714vh 38.57143vh #b22d69, 38.57143vh 38.57143vh #aa2d69, 46.28571vh 38.57143vh #a32c68, 0vh 46.28571vh #9c2c68, 7.71429vh 46.28571vh #952b67, 15.42857vh 46.28571vh #8e2b67, 23.14286vh 46.28571vh #872b66, 30.85714vh 46.28571vh #802b66, 38.57143vh 46.28571vh #792a65, 46.28571vh 46.28571vh #722a65, 0vh 54vh #6b2965, 7.71429vh 54vh #642964, 15.42857vh 54vh #5d2864, 23.14286vh 54vh #572863, 30.85714vh 54vh #502763, 38.57143vh 54vh #492762, 46.28571vh 54vh #422662, 0vh 61.71429vh #3b2661, 7.71429vh 61.71429vh #342661, 15.42857vh 61.71429vh #2d2660, 23.14286vh 61.71429vh #27255f, 30.85714vh 61.71429vh #20255e, 38.57143vh 61.71429vh #19255e, 46.28571vh 61.71429vh #12255d, 0vh 69.42857vh #152d60, 7.71429vh 69.42857vh #183464, 15.42857vh 69.42857vh #1b3c67, 23.14286vh 69.42857vh #1e446b, 30.85714vh 69.42857vh #214c6e, 38.57143vh 69.42857vh #245372, 46.28571vh 69.42857vh #275b75, 0vh 77.14286vh #2a6378, 7.71429vh 77.14286vh #2d6a7b, 15.42857vh 77.14286vh #30727e, 23.14286vh 77.14286vh #337a82, 30.85714vh 77.14286vh #368285, 38.57143vh 77.14286vh #398988, 46.28571vh 77.14286vh #3c918b, 0vh 84.85714vh #3f998e, 7.71429vh 84.85714vh #42a092, 15.42857vh 84.85714vh #45a895, 23.14286vh 84.85714vh #49af98, 30.85714vh 84.85714vh #4cb79b, 38.57143vh 84.85714vh #4fbe9f, 46.28571vh 84.85714vh #52c6a2, 0vh 92.57143vh #55cda5, 7.71429vh 92.57143vh #58d4a8, 15.42857vh 92.57143vh #5bdbab, 23.14286vh 92.57143vh #5de3ad, 30.85714vh 92.57143vh #60eab0, 38.57143vh 92.57143vh #63f1b3, 46.28571vh 92.57143vh #66f8b6, 0vh 100.28571vh #6df8b9, 7.71429vh 100.28571vh #74f9bd, 15.42857vh 100.28571vh #7bf9c0, 23.14286vh 100.28571vh #82f9c3, 30.85714vh 100.28571vh #89f9c6, 38.57143vh 100.28571vh #90faca, 46.28571vh 100.28571vh #97facd; -webkit-transition: box-shadow 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: box-shadow 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } .cal-scene.-schedule { z-index: -1; opacity: 0; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header, .cal-device .cal-month.-october > .cal-header, .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-january > .cal-header, .cal-month:first-child > .cal-header { -webkit-transform: translateX(30.85714vh); -ms-transform: translateX(30.85714vh); transform: translateX(30.85714vh); } [id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link, .cal-device .cal-month.-october > .cal-header > .cal-link, .cal-device .cal-month.-december > .cal-header > .cal-link, .cal-device .cal-month.-january > .cal-header > .cal-link, .cal-month:first-child > .cal-header > .cal-link { background-color: rgba(255, 255, 255, 0.4); } [id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-link > span, .cal-device .cal-month.-october > .cal-header > .cal-link > span, .cal-device .cal-month.-december > .cal-header > .cal-link > span, .cal-device .cal-month.-january > .cal-header > .cal-link > span, .cal-month:first-child > .cal-header > .cal-link > span { -webkit-transform: translateX(calc(-50% - 1.92857vh)) translateY(-50%); -ms-transform: translateX(calc(-50% - 1.92857vh)) translateY(-50%); transform: translateX(calc(-50% - 1.92857vh)) translateY(-50%); color: white; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november > .cal-header > .cal-arrow, .cal-device .cal-month.-october > .cal-header > .cal-arrow, .cal-device .cal-month.-december > .cal-header > .cal-arrow, .cal-device .cal-month.-january > .cal-header > .cal-arrow, .cal-month:first-child > .cal-header > .cal-arrow { opacity: 1; pointer-events: inherit; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-november .cal-day, [id="nov-week-2"]:target ~ .cal-device .cal-month.-november .cal-day, .cal-device .cal-month.-october .cal-day, .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-january .cal-day, .cal-month:first-child .cal-day { color: rgba(255, 255, 255, 0.4); } [id="nov-week-1"]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-october.cal-month.-november .cal-arrow, .cal-device .-october.cal-month .cal-arrow, .-october.cal-month:first-child .cal-arrow { color: #EB8B6B; } [id="nov-week-1"]:target ~ .cal-device .-november.cal-month .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-november.cal-month .cal-arrow, .cal-device .-november.cal-month.-october .cal-arrow, .cal-device .-november.cal-month.-december .cal-arrow, .cal-device .-november.cal-month.-january .cal-arrow, .-november.cal-month:first-child .cal-arrow { color: #D6306D; } [id="nov-week-1"]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-december.cal-month.-november .cal-arrow, .cal-device .-december.cal-month .cal-arrow, .-december.cal-month:first-child .cal-arrow { color: #102152; } [id="nov-week-1"]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .-january.cal-month.-november .cal-arrow, .cal-device .-january.cal-month .cal-arrow, .-january.cal-month:first-child .cal-arrow { color: #97FACD; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-december > .cal-header, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december > .cal-header, .cal-device .cal-month.-november > .cal-header { -webkit-transform: translateX(15.42857vh); -ms-transform: translateX(15.42857vh); transform: translateX(15.42857vh); } [id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-link, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-link, .cal-device .cal-month.-november .cal-link { background-color: white; color: gray; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-link > span, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-link > span, .cal-device .cal-month.-november .cal-link > span { -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } [id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-arrow, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-arrow, .cal-device .cal-month.-november .cal-arrow { opacity: 0; pointer-events: none; } [id="nov-week-1"]:target ~ .cal-device .cal-month.-december .cal-day, [id="nov-week-2"]:target ~ .cal-device .cal-month.-december .cal-day, .cal-device .cal-month.-november .cal-day { color: white; } [id="nov-week-1"]:target ~ .cal-device .-november.cal-month.-december .cal-link span, [id="nov-week-2"]:target ~ .cal-device .-november.cal-month.-december .cal-link span, .cal-device .-november.cal-month .cal-link span { color: #DA3F6C; } [id="nov-week-1"]:target ~ .cal-device .-december.cal-month .cal-link span, [id="nov-week-2"]:target ~ .cal-device .-december.cal-month .cal-link span, .cal-device .-december.cal-month.-november .cal-link span { color: #26255F; } .cal-month { display: block; counter-reset: month; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); z-index: 1; } .cal-month:first-child { margin-top: -7.71429vh; } .cal-month:first-child > .cal-header { top: 15.42857vh; } .cal-month:first-child ~ .cal-month { margin-top: -7.71429vh; } .cal-month > .cal-header { position: absolute; height: 7.71429vh; width: 23.14286vh; padding: 2.20408vh; z-index: 1; -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } .cal-month > .cal-header > .cal-link { display: block; height: 100%; width: 100%; font-size: 1.92857vh; text-decoration: none; color: gray; text-transform: uppercase; padding: 0.64286vh 5.14286vh; border-radius: 2.57143vh; background: white; -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); font-weight: 600; } .cal-month > .cal-header > .cal-link > span { display: block; position: absolute; top: 48%; left: 50%; -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); } .cal-month.-january { margin-top: 0 !important; } .cal-subheader { height: 3.85714vh; width: 100%; } .cal-bar { height: 7.71429vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .cal-bar > .cal-title { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; height: 100%; } .cal-bar .-schedule { opacity: 0; } .cal-button { width: 7.71429vh; height: 7.71429vh; } .cal-button > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: white; text-decoration: none; font-size: 3.08571vh; } .cal-title > .cal-heading { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: white; font-size: 3.08571vh; } .cal-arrow { position: absolute; height: 7.71429vh; width: 7.71429vh; background: white; top: 0; right: 0; padding: 1.28571vh; background-clip: content-box; border-radius: 50%; opacity: 0; pointer-events: none; -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-decoration: none; color: gray; } .cal-arrow .fa-chevron-up { top: -1px; } .cal-day { counter-increment: month; width: 7.71429vh; height: 7.71429vh; display: block; float: left; text-decoration: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; color: white; font-size: 2.57143vh; } .cal-day[href="#schedule"]:before { background: rgba(255, 255, 255, 0.4); } .cal-day:before { content: counter(month); display: block; height: 75%; width: 75%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 50%; } .cal-item { height: 7.71429vh; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .cal-item.-long { height: 15.42857vh; } .cal-item:nth-child(1) > .cal-time { background-color: #fa739d; } .cal-item:nth-child(1) > .cal-task { background-color: white; } .cal-item:nth-child(2) > .cal-time { background-color: #f26993; } .cal-item:nth-child(2) > .cal-task { background-color: #fcf5f7; } .cal-item:nth-child(3) > .cal-time { background-color: #eb5e8a; } .cal-item:nth-child(3) > .cal-task { background-color: #f9ecf0; } .cal-item:nth-child(4) > .cal-time { background-color: #e35480; } .cal-item:nth-child(4) > .cal-task { background-color: #f6e2e8; } .cal-item:nth-child(5) > .cal-time { background-color: #dc4977; } .cal-item:nth-child(5) > .cal-task { background-color: #f4d8e1; } .cal-item:nth-child(6) > .cal-time { background-color: #d43f6d; } .cal-item:nth-child(6) > .cal-task { background-color: #f1ced9; } .cal-item:nth-child(7) > .cal-time { background-color: #cc3463; } .cal-item:nth-child(7) > .cal-task { background-color: #eec5d1; } .cal-item:nth-child(8) > .cal-time { background-color: #c52a5a; } .cal-item:nth-child(8) > .cal-task { background-color: #ebbbca; } .cal-time { width: 15.42857vh; -webkit-flex-basis: 15.42857vh; -ms-flex-preferred-size: 15.42857vh; flex-basis: 15.42857vh; height: 100%; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; line-height: 7.71429vh; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; color: white; } .cal-time > * { -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translateX(-15.42857vh); -ms-transform: translateX(-15.42857vh); transform: translateX(-15.42857vh); font-weight: 600; font-size: 2.57143vh; } .cal-task { -webkit-flex-basis: 38.57143vh; -ms-flex-preferred-size: 38.57143vh; flex-basis: 38.57143vh; height: 100%; background-color: white; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 0 2.57143vh; font-size: 1.92857vh; } .cal-task > p { margin-top: 0; margin-bottom: 0; color: #12255E; } .cal-task > a { text-decoration: none; color: #EA80A2; font-weight: 600; } .cal-task > a > .fa { margin-right: 0.96429vh; } .cal-task > * { -webkit-transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1); -webkit-transform: translateX(38.57143vh); -ms-transform: translateX(38.57143vh); transform: translateX(38.57143vh); } .meta { -webkit-flex-basis: calc(80% - 54vh); -ms-flex-preferred-size: calc(80% - 54vh); flex-basis: calc(80% - 54vh); font-size: 2.57143vh; font-weight: 300; } .meta p, .meta a { color: rgba(255, 255, 255, 0.7); } .meta h1 { font-size: 9.25714vh; line-height: 9.25714vh; font-weight: 300; color: white; } .meta p { line-height: 1.4; } .meta a:hover { color: rgba(255, 255, 255, 0.7); } @media (max-width: 750px) { .meta { display: none; } } body { background: #4ACDDE; background: -webkit-linear-gradient(315deg, #4EFFDF, #48BBDE, #F47EC6); background: linear-gradient(135deg, #4EFFDF, #48BBDE, #F47EC6); font-family: Source Sans Pro, sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; overflow: hidden; } @media (max-width: 750px) { body { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } html, body { width: 100%; height: 100%; margin: 0; padding: 0; quotes: "«" "»"; } *, *:before, *:after { box-sizing: border-box; position: relative; } .cal-month:before, .cal-month:after { content: " "; /* 1 */ display: table; /* 2 */ } .cal-month:after { clear: both; } </style> </head> <body> <div class="route" id="index"></div> <div class="route" id="oct-week-3"></div> <div class="route" id="oct-week-4"></div> <div class="route" id="nov-week-1"></div> <div class="route" id="schedule"></div> <main class="cal-device"> <header class="cal-header"> <div class="cal-subheader"></div> <div class="cal-bar"> <div class="cal-button -left"> <i class="fa fa-bars -calendar"></i> <a href="#index" class="fa fa-chevron-left -schedule"></a> </div> <div class="cal-title"> <div class="cal-heading -calendar">Calendar</div> <div class="cal-heading -schedule">Wednesday, November 10</div> </div> <div class="cal-button -right"> <i class="fa fa-search"></i> </div> </div> </header> <section class="cal-app"> <header class="cal-week"> <div class="cal-weekday">SUN</div> <div class="cal-weekday">MON</div> <div class="cal-weekday">TUE</div> <div class="cal-weekday">WED</div> <div class="cal-weekday">THU</div> <div class="cal-weekday">FRI</div> <div class="cal-weekday">SAT</div> </header> <div class="cal-scene -calendar"> <div class="cal-month -october"> <header class="cal-header"> <a class="cal-link" href="#oct-week-1"><span>October</span></a> <a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-up"></i></a> <a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-up"></i></a> </header> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> </div> <div class="cal-month -november"> <header class="cal-header"> <a class="cal-link" href="#nov-week-1"><span>November</span></a> <a class="cal-arrow"><i class="fa fa-chevron-up"></i></a> </header> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> </div> <div class="cal-month -december"> <header class="cal-header"> <a class="cal-link"><span>December</span></a> <a class="cal-arrow" href="#nov-week-1"><i class="fa fa-chevron-down"></i></a> <a class="cal-arrow" href="#oct-week-3"><i class="fa fa-chevron-down"></i></a> </header> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a href="#schedule" class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> </div> <div class="cal-month -january"> <header class="cal-header"> <div class="cal-link"><span>January</span></div> <a class="cal-arrow" href="#oct-week-4"><i class="fa fa-chevron-down"></i></a> </header> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> <a class="cal-day"></a> </div> </div> <div class="cal-scene -schedule"> <div class="cal-item"> <div class="cal-time"><span>08:00</span></div> <div class="cal-task"> <p>wake up</p> </div> </div> <div class="cal-item -long"> <div class="cal-time"><span>12:15</span></div> <div class="cal-task"> <p>meeting with the team, discussing the project requirements</p> </div> </div> <div class="cal-item"> <div class="cal-time"><span>13:00</span></div> <div class="cal-task"> <p>lunch with Peter</p> <a><i class="fa fa-map-marker"></i>cafe <q>Petit brasserie</q></a> </div> </div> <div class="cal-item"> <div class="cal-time"><span>14:30</span></div> <div class="cal-task"> <p>call with Johnathan and Stevie</p> </div> </div> <div class="cal-item -long"> <div class="cal-time"><span>16:45</span></div> <div class="cal-task"> <p>project presentation</p> <a><i class="fa fa-map-marker"></i>Head Office</a> </div> </div> <div class="cal-item"> <div class="cal-time"><span>18:00</span></div> <div class="cal-task"> <p>call with Johnathan and Stevie</p> </div> </div> <div class="cal-item -long"> <div class="cal-time"><span>19:00</span></div> <div class="cal-task"> <p>David's birthday party</p> <a><i class="fa fa-map-marker"></i>bar <q>Tailor's John</q></a> </div> </div> <div class="cal-item"> <div class="cal-time"></div> <div class="cal-task"></div> </div> </div> </section> </main> <div class="meta"> <h1>CSS-only Colorful <br>Calendar Concept</h1> <p> Dribbble Rework<br /> Original Shot by <a href="https://dribbble.com/shots/2335073-Calendar-App-Animation" target="_blank">Ludmila Shevchenko</a> </p> <p> Click on the arrows (when enabled) and the highlighted date to see the effect.<br> You can also go <strong>back</strong> in your browser to navigate between scenes, or click the left arrow in the schedule view. </p> <p> Works in all modern browsers. </p> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » CSS-only Colorful Calendar Concept 喜欢 (0)or分享 (0)
