Оригинальная всплывающая панель BB кодов для комментариев by Apocalypse для uCoz
|
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 |
<script type="text/javascript" src="/js/BB_Codes_jquery.caret.js"></script> <script type="text/javascript" src="/js/BB_Codes.js"></script> <div id="menu"> <center> <table> <tr> <td><a title="Товстий" class="point" id="bold"><img src="/images/BB_Codes/b.gif" border="0"></a></td> <td><a title="Похилий" class="point" id="italic"><img src="/images/BB_Codes/i.gif" border="0"></a></td> <td><a title="Підкреслений" class="point" id="underline"><img src="/images/BB_Codes/u.gif" border="0"></a></td> <td><a title="По лівому краю" class="left" id="left"><img src="/images/BB_Codes/l.gif" border="0"></a></td> <td><a title="По центру" class="center" id="center"><img src="/images/BB_Codes/c.gif" border="0"></a></td> <td><a title="По правому краю" class="right" id="right"><img src="/images/BB_Codes/r.gif" border="0"></a></td> <td><a title="Вставити лінк" class="point" id="link"><img src="/images/BB_Codes/link.gif" border="0"></a></td> <td><a title="Код" class="point" id="code"><img src="/images/BB_Codes/code.gif" border="0"></a></td> <td><a title="Цитата" class="point" id="quote"><img src="/images/BB_Codes/quote.gif" border="0"></a></td> </tr><tr> <td><a class="point" id="grey"><div class="grey effect"></div></a></td> <td><a class="point" id="olive"><div class="olive effect"></div></a></td> <td><a class="point" id="green"><div class="green effect"></div></a></td> <td><a class="point" id="blue"><div class="blue effect"></div></a></td> <td><a class="point" id="purple"><div class="purple effect"></div></a></td> <td><a class="point" id="red"><div class="red effect"></div></a></td> <td><a class="point" id="orange"><div class="orange effect"></div></a></td> <td><a class="point" id="pink"><div class="pink effect"></div></a></td> <td><a class="point" id="yellow"><div class="yellow effect"></div></a></td> </tr> </table> </center> </div> |
2#: В самый низ вашего 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 |
#menu { padding: 10px 10px 0px 10px; background: #fff; display:none; overflow:hidden; position:absolute; top:0; left:0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); -khtml-opacity: .3; -moz-opacity: .3; opacity: .3; -webkit-border-radius: 5px; -khtml-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-box-shadow: 0px 0px 5px #4c4c4c; -moz-box-shadow: 0px 0px 5px #4c4c4c; -box-shadow: 0px 0px 5px #4c4c4c; } #menu:hover { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -khtml-opacity: .9; -moz-opacity: .9; opacity: .9; -webkit-box-shadow: 0px 0px 7px #4c4c4c; -moz-box-shadow: 0px 0px 7px #4c4c4c; -box-shadow: 0px 0px 7px #4c4c4c; } #menu a {padding:0 1px 0 0} .effect { -webkit-border-radius: 30px; -khtml-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .effect:hover { -webkit-transform: scale(1.15) translateY(0px); -moz-transform: scale(1.15) translateY(0px); -ms-transform: scale(1.15) translateY(0px); -o-transform: scale(1.15) translateY(0px); transform: scale(1.15) translateY(0px); } .point {cursor:pointer;} .grey {background:grey; width:20px; height:20px;border:0;} .olive {background:olive; width:20px; height:20px;border:0;} .green {background:green; width:20px; height:20px;border:0;} .blue {background:blue; width:20px; height:20px;border:0;} .purple {background:purple; width:20px; height:20px;border:0;} .red {background:red; width:20px; height:20px;border:0;} .orange {background:orange; width:20px; height:20px;border:0;} .pink {background:pink; width:20px; height:20px;border:0;} .yellow {background:yellow; width:20px; height:20px;border:0;} |
