Ormai questi amati/odiati nastrini sono molto diffusi nel web. Se vi siete mai chiesti come realizzarli in modo abbastanza veloce, la soluzione si chiama 3d Ribbon Generator.
Vediamo come:
Dobbiamo prima di tutto scegliere la tipologia di nastro che più ci aggrada:
Successivamente possiamo specificare caratteristiche quali:
– Dimensioni in px.
– Colore.
– Ombre.
Con un semplice clik sul bottone “Generate“, otterremo codice Html e Css da importare nel nostro progetto.
Ecco un esempio:
Codice Html:
1 2 3 4 5 6 7 8 9 10 11 | <div class="ribbon-wrapper"> <div class="ribbon-front"> <!-- ribbon text goes here --> </div> <div class="ribbon-edge-topleft"></div> <div class="ribbon-edge-topright"></div> <div class="ribbon-edge-bottomleft"></div> <div class="ribbon-edge-bottomright"></div> <div class="ribbon-back-left"></div> <div class="ribbon-back-right"></div> </div> |
Codice Css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | /* ribbon style */ .ribbon-wrapper { position: relative; } .ribbon-front { background-color: #15EB4E; height: 40px; width: 140px; position: relative; left:-20px; z-index: 2; } .ribbon-front, .ribbon-back-left, .ribbon-back-right { -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); -o-box-shadow: 0px 0px 4px rgba(0,0,0,0.55); } .ribbon-edge-topleft, .ribbon-edge-topright, .ribbon-edge-bottomleft, .ribbon-edge-bottomright { position: absolute; z-index: 1; border-style:solid; height:0px; width:0px; } .ribbon-edge-topleft, .ribbon-edge-topright { } .ribbon-edge-bottomleft, .ribbon-edge-bottomright { top: 40px; } .ribbon-edge-topleft, .ribbon-edge-bottomleft { left: -20px; border-color: transparent #000000 transparent transparent; } .ribbon-edge-topleft { top: -5px; border-width: 5px 10px 0 0; } .ribbon-edge-bottomleft { border-width: 0 10px 0px 0; } .ribbon-edge-topright, .ribbon-edge-bottomright { left: 110px; border-color: transparent transparent transparent #000000; } .ribbon-edge-topright { top: 0px; border-width: 0px 0 0 10px; } .ribbon-edge-bottomright { border-width: 0 0 5px 10px; } .ribbon-back-left { position: absolute; top: -5px; left: -1010px; width: 1000px; height: 40px; background-color: #06AC11; z-index: 0; } .ribbon-back-right { position: absolute; top: 5px; right: -1010px; width: 1000px; height: 40px; background-color: #06AC11; z-index: 0; } |
Trovi utile questo servizio? Hai mai utilizzato questi nastri nei tuoi progetti?
[adsense]
Lascia un commento