Card by JaydipPrajapati1910
#e8e8e8
1.card { 2 width: 200px; 3 height: 290px; 4 background: white; 5 border-radius: 10px; 6 transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 7 display: flex; 8 flex-direction: column; 9} 10 11.shadow { 12 box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 13 0 0 0 2px rgb(190, 190, 190), 14 0.3em 0.3em 1em rgba(0,0,0,0.3); 15} 16 17.ribbon { 18 width: 230px; 19 position: absolute; 20 margin-top: 229px; 21 margin-left: -20px; 22 text-align: center; 23 font-size: 20px !important; 24 background: #D64B4B; 25 background: -webkit-gradient(linear, left top, left bottom, from(#D64B4B), to(#AB2C2C)); 26 background: -webkit-linear-gradient(top, #D64B4B, #AB2C2C); 27 background: -moz-linear-gradient(top, #D64B4B, #AB2C2C); 28 background: -ms-linear-gradient(top, #D64B4B, #AB2C2C); 29 background: -o-linear-gradient(top, #D64B4B, #AB2C2C); 30 background-image: -ms-linear-gradient(top, #D64B4B 0%, #AB2C2C 100%); 31 -webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 1px; 32 -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 1px; 33 box-shadow: rgba(0,0,0,0.3) 0 1px 1px; 34 font-family: 'Helvetica Neue',Helvetica, sans-serif; 35} 36 37.ribbon span { 38 font-size: 35px !important; 39 color: #801111; 40 text-shadow: #D65C5C 0 1px 0; 41 margin: 0px; 42 padding: 19px 10px; 43} 44 45.ribbon:before, .ribbon:after { 46 content: ''; 47 position: absolute; 48 display: block; 49 bottom: -1em; 50 border: 1.5em solid #C23A3A; 51 z-index: -1; 52} 53 54.ribbon:before { 55 left: -2em; 56 border-right-width: 1.5em; 57 border-left-color: transparent; 58 -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px; 59 -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 1px; 60 box-shadow: rgba(0,0,0,0.4) 1px 1px 1px; 61} 62 63.ribbon:after { 64 right: -2em; 65 border-left-width: 1.5em; 66 border-right-color: transparent; 67 -webkit-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px; 68 -moz-box-shadow: rgba(0,0,0,0.4) -1px 1px 1px; 69 box-shadow: rgba(0,0,0,0.4) -1px 1px 1px; 70} 71 72.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 73 border-color: #871616 transparent transparent transparent; 74 position: absolute; 75 display: block; 76 border-style: solid; 77 bottom: -1em; 78 content: ''; 79} 80 81.ribbon .ribbon-content:before { 82 left: 0; 83 border-width: 1em 0 0 1em; 84} 85 86.ribbon .ribbon-content:after { 87 right: 0; 88 border-width: 1em 1em 0 0; 89} 90 91.ribbon-stitches-top { 92 margin-top: 2px; 93 border-top: 1px dashed rgba(0, 0, 0, 0.2); 94 -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); 95 -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5); 96 box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5); 97} 98 99.ribbon-stitches-bottom { 100 margin-bottom: 2px; 101 border-top: 1px dashed rgba(0, 0, 0, 0.2); 102 -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); 103 -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); 104 box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3); 105} 106
830 views
830 views
MIT License