【jQuery】サムネイルにいいねボタンとツイートボタンをつける
最近3DのjQueryプラグインを色々探しているが、
実用的っぽいのを見つけたのでやってみた。
ECサイトのアーカイブページなどですぐにディテイルページにとばすのではなくて
マウスオーバーでソーシャルプラグインなどを出したりする。
まずはベースを作り(下記[ベース参照])
デフォルト表示画像の定義と隠すコンテンツを配置する。
その中に配置してある「.view」(複数可)の直下にある「img」に動的に加工が入る。
具体的には「.view img」が5分割され、「.slice」と「.s1」?「.s5」までが自動的に付与される。
それらにcssプロパティtranslate3dとlinear-gradientでつけておく。
[ベース]
■HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div id="grid" class="main"> <div class="view"> <div class="view-back"> <span><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.johnlennon.com%2F&send=false&layout=box_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=90&appId=485267988153181" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe></span> <span class="t90"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.johnlennon.com/" data-via="sterfield" data-lang="ja" data-dnt="true">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span> <a href="http://www.emimusic.jp/st/johnlennon/">→</a> </div> <img src="images/1.jpg" /> </div> <div class="view"> <div class="view-back"> <span><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.paulmccartney.com%2Fweb%2Fguest%2Fhome&send=false&layout=box_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=90&appId=485267988153181" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe></span> <span class="t90"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.paulmccartney.com/web/guest/home" data-via="sterfield" data-lang="ja" data-dnt="true">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></span> <a href="http://www.paulmccartney.com/web/guest/home">→</a> </div> <img src="images/2.jpg" /> </div> </div> </div> |
■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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | .container { width: 900px; clear: both; overflow: hidden; margin: auto; } .view { width: 400px; height: 400px; float: left; margin: 10px; position: relative; border: 8px solid #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.05); background: #333; -webkit-perspective: 500px; -moz-perspective: 500px; -o-perspective: 500px; -ms-perspective: 500px; perspective: 500px; } .view .slice { width: 80px; height: 100%; z-index: 100; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform 150ms ease-in-out; -moz-transition: -moz-transform 150ms ease-in-out; -o-transition: -o-transform 150ms ease-in-out; -ms-transition: -ms-transform 150ms ease-in-out; transition: transform 150ms ease-in-out; } .view div.view-back { width: 50%; height: 100%; position: absolute; right: 0; background: #666; z-index: 0; } .view-back span { display: bock; position: absolute; right: 15px; top: 15px; width: 70px; overflow: hidden; } .view-back span.t90 { top: 90px; } .view-back a { display: bock; font-size: 18px; color: rgba(255,255,255,0.4); position: absolute; right: 15px; bottom: 15px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; width: 30px; height: 30px; line-height: 22px; text-align: center; font-weight: 700; } .view .s2, .view .s3, .view .s4, .view .s5 { -webkit-transform: translate3d(80px,0,0); -moz-transform: translate3d(80px,0,0); -o-transform: translate3d(80px,0,0); -ms-transform: translate3d(80px,0,0); transform: translate3d(80px,0,0); } .view .s1 { background-position: 0px 0px; } .view .s2 { background-position: -80px 0px; } .view .s3 { background-position: -160px 0px; } .view .s4 { background-position: -240px 0px; } .view .s5 { background-position: -320px 0px; } .view .overlay { width: 80px; height: 100%; opacity: 0; position: absolute; -webkit-transition: opacity 150ms ease-in-out; -moz-transition: opacity 150ms ease-in-out; -o-transition: opacity 150ms ease-in-out; -ms-transition: opacity 150ms ease-in-out; transition: opacity 150ms ease-in-out; } .view:hover .overlay { opacity: 1; } .view img { position: absolute; z-index: 0; -webkit-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -ms-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } |
■js
|
1 | $( '#grid' ).hoverfold(); |
[配置図]
■サンプル1
|
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 | .view:hover .s2{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-45deg); } .view:hover .s3, .view:hover .s5{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,90deg); } .view:hover .s4{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-90deg); } .view .s1 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } .view .s2 > .overlay { background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } .view .s3 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); } .view .s4 > .overlay { background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } .view .s5 > .overlay { background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } |
■サンプル2
|
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 89 90 91 92 | .view { -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; -ms-perspective: 800px; perspective: 800px; } .view:hover .s1{ -webkit-transition-delay: 200ms; -moz-transition-delay: 200ms; -o-transition-delay: 200ms; -ms-transition-delay: 200ms; transition-delay: 200ms; -webkit-transform: rotate3d(0,1,0,-3deg); -moz-transform: rotate3d(0,1,0,-3deg); -o-transform: rotate3d(0,1,0,-3deg); -ms-transform: rotate3d(0,1,0,-3deg); transform: rotate3d(0,1,0,-3deg); } .view:hover .s2{ -webkit-transition-delay: 150ms; -moz-transition-delay: 150ms; -o-transition-delay: 150ms; -ms-transition-delay: 150ms; transition-delay: 150ms; -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-10deg); } .view:hover .s3{ -webkit-transition-delay: 100ms; -moz-transition-delay: 100ms; -o-transition-delay: 100ms; -ms-transition-delay: 100ms; transition-delay: 100ms; -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-16deg); } .view:hover .s4{ -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; -o-transition-delay: 50ms; -ms-transition-delay: 50ms; transition-delay: 50ms; -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-30deg); } .view:hover .s5{ -webkit-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg); -moz-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg); -o-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg); -ms-transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg); transform: translate3d(80px,0,0) rotate3d(0,1,0,-42deg); } .view .s4 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(right, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } .view .s5 > .overlay { background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } .view div.view-back{ background: #0a0a0a; background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666)); background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } |
■サンプル3
|
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 | .view { -webkit-perspective: 1000px; -moz-perspective: 1000px; -o-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; } .view:hover .s1{ -webkit-transform: rotate3d(0,1,0,-55deg); -moz-transform: rotate3d(0,1,0,-55deg); -o-transform: rotate3d(0,1,0,-55deg); -ms-transform: rotate3d(0,1,0,-55deg); transform: rotate3d(0,1,0,-55deg); } .view:hover .s2, .view:hover .s5{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,20deg); } .view:hover .s3{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,30deg); } .view:hover .s4{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,40deg); } .view .s1 > .overlay { background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%); } .view .s5 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(right, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); } |
■サンプル4
|
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 | .view { -webkit-perspective: 1050px; -moz-perspective: 1050px; -o-perspective: 1050px; -ms-perspective: 1050px; perspective: 1050px; } .view div { -webkit-transition: all 150ms ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .view:hover .s3{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-55deg); } .view:hover .s4{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,110deg); } .view:hover .s5{ -webkit-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg); -moz-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg); -o-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg); -ms-transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg); transform: translate3d(79px,0,0) rotate3d(0,1,0,-110deg); } .view .s2 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } .view .s3 > .overlay { background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } .view .s4 > .overlay { background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%); background: -o-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); background: -ms-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); } .view .s5 > .overlay { background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); } .view div.view-back{ background: #0a0a0a; background: -moz-linear-gradient(left, #0a0a0a 0%, #666666 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#0a0a0a), color-stop(100%,#666666)); background: -webkit-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: -o-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: -ms-linear-gradient(left, #0a0a0a 0%,#666666 100%); background: linear-gradient(left, #0a0a0a 0%,#666666 100%); } |
Author Profile
SHARE
