это кнопочка с рамочкой и вообще пример как добавлять шаблонные кнопки в область ответа
А автор скрипта кто?
ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp
это кнопочка с рамочкой и вообще пример как добавлять шаблонные кнопки в область ответа
А автор скрипта кто?
Automation Baby
Я просто взял часть из скрипта в котором было вставка кнопки и поменял стиль как мне нужно. Можно вставлять любые формы через это. У меня были шаблоны эпизода. Не могу уже найти где было это изначально.
Свойство для изменения положения текста в блоке
writing-mode: sideways-lr;
подходит когда надпись хочется расположить вертикально, к примеру
-
выделение части текста в хтмл-цсс шаблоне
-webkit-user-select: all; /* для Safari */
user-select: all;
к классу, свойству и пр.
только выделение, копирования сегмента не происходит
-
background-blend-mode: darken;
способ наложения бэка
можно после
background: url();
background-color: #ccc;
Возможность оформления форумов в категории:
как напугать юзверей формой логина
Will O The Wisp
Для планшетов и пк вполне красиво
Но под мобилки не пойдет
МАЧОнаДАЧЕ
на мобильном разница не велика, разве что реклама еще везде лезет под руку
добавить бы еще placeholder и можно сделать страницу логина
порыться в кастомизации для придания еще одной отличной черты своему форуму в дополнение к странице переадресации
Will O The Wisp
А ты спроси у Deff, может он помнит. 1 - 1,5 года назад я видел ох....ую страницу логина помоему для ролевки делали (под пк и телефоны) на майбе. К сожалению автора тоже не помню
Хотя... Мне ли что-то советовать тебе))) Ты вон какую красоту делаешь
меню панелька
<style> .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .container1 { position: absolute; margin: -70px 0px 0px -150px; clear: both; } .mcd-menu { list-style: none; padding: 0; margin: 0; background: #ffffffb5; /*height: 100px;*/ border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; /* == */ width: 120px; /* == */ } .mcd-menu li { position: relative; /*float:left;*/ } .mcd-menu li a { display: block; text-decoration: none; padding: 12px 20px; color: #777; /*text-align: center; border-right: 1px solid #E7E7E7;*/ /* == */ text-align: left; height: 36px; position: relative; border-bottom: 1px solid #EEE; /* == */ } .mcd-menu li a i { /*display: block; font-size: 30px; margin-bottom: 10px;*/ /* == */ float: left; font-size: 20px; margin: 0 10px 0 0; /* == */ } /* == */ .mcd-menu li a p { float: left; margin: 0 ; } /* == */ .mcd-menu li a strong { display: block; text-transform: uppercase; } .mcd-menu li a small { display: block; font-size: 10px; } .mcd-menu li a i, .mcd-menu li a strong, .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; } .mcd-menu li:hover > a { color: #424e78; } .mcd-menu li a.active { position: relative; color: #424e78; border:0; /*border-top: 4px solid #424e78; border-bottom: 4px solid #424e78; margin-top: -4px;*/ box-shadow: 0 0 5px #DDD; -moz-box-shadow: 0 0 5px #DDD; -webkit-box-shadow: 0 0 5px #DDD; /* == */ border-left: 4px solid #424e78; border-right: 4px solid #424e78; margin: 0 -4px; /* == */ } .mcd-menu li a.active:before { content: ""; position: absolute; /*top: 0; left: 45%; border-top: 5px solid #424e78; border-left: 5px solid transparent; border-right: 5px solid transparent;*/ /* == */ top: 42%; left: 0; border-left: 5px solid #424e78; border-top: 5px solid transparent; border-bottom: 5px solid transparent; /* == */ } /* == */ .mcd-menu li a.active:after { content: ""; position: absolute; top: 42%; right: 0; border-right: 5px solid #424e78; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } /* == */ @-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } .mcd-menu li ul, .mcd-menu li ul li ul { position: absolute; height: auto; min-width: 200px; padding: 0; margin: 0; background: #ffffffb5; /*border-top: 4px solid #424e78;*/ opacity: 0; visibility: hidden; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; /*top: 130px;*/ z-index: 1000; /* == */ left:120px; top: 0px; border-left: 4px solid #424e78; /* == */ } .mcd-menu li ul:before { content: ""; position: absolute; /*top: -8px; left: 23%; border-bottom: 5px solid #424e78; border-left: 5px solid transparent; border-right: 5px solid transparent;*/ /* == */ top: 25px; left: -9px; border-right: 5px solid #424e78; border-bottom: 5px solid transparent; border-top: 5px solid transparent; /* == */ } .mcd-menu li:hover > ul, .mcd-menu li ul li:hover > ul { display: block; opacity: 1; visibility: visible; /*top: 100px;*/ /* == */ left:150px; /* == */ } /*.mcd-menu li ul li { float: none; }*/ .mcd-menu li ul li a { padding: 10px; text-align: left; border: 0; border-bottom: 1px solid #ffffffb5; /* == */ height: auto; /* == */ } .mcd-menu li ul li a i { font-size: 16px; display: inline-block; margin: 0 10px 0 0; } .mcd-menu li ul li ul { left: 230px; top: 0; border: 0; border-left: 4px solid #424e78; } .mcd-menu li ul li ul:before { content: ""; position: absolute; top: 15px; /*left: -14px;*/ /* == */ left: -9px; /* == */ border-right: 5px solid #424e78; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } .mcd-menu li ul li:hover > ul { top: 0px; left: 200px; } /*.mcd-menu li.float { float: right; }*/ @media only screen and (min-width: 960px) and (max-width: 1199px) { .mcd-menu { margin-left:10px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { .mcd-menu { width: 200px; } .mcd-menu li a { height:30px; } .mcd-menu li a i { font-size: 22px; } .mcd-menu li a strong { font-size: 12px; } .mcd-menu li a small { font-size: 10px; } .mcd-menu li > ul { min-width:180px; } .mcd-menu li:hover > ul { min-width:180px; left:200px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li:hover > ul { left:150px; min-width:150px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .mcd-menu { width: 50px; } .mcd-menu li a { position: relative; padding: 12px 16px; height:20px; } .mcd-menu li a small { display: none; } .mcd-menu li a strong { display: none; } .mcd-menu li a:hover strong,.mcd-menu li a.active strong { display:block; font-size:10px; padding:3px 0; position:absolute; bottom:0px; left:0; background:#424e78; color:#ffffffb5; min-width:100%; text-transform:lowercase; font-weight:normal; text-align:center; } .mcd-menu li > ul { min-width:180px; left:70px; } .mcd-menu li:hover > ul { min-width:180px; left:50px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li > ul { left:35px; top: 45px; border:0; border-top:4px solid #424e78; } .mcd-menu li ul li ul li > ul:before { left:30px; top: -9px; border:0; border-bottom:5px solid #424e78; border-left:5px solid transparent; border-right:5px solid transparent; } .mcd-menu li ul li ul li:hover > ul { left:30px; min-width:150px; top: 35px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; } } @media only screen and (max-width: 479px) { .mcd-menu { width: 50px; } .mcd-menu li a { position: relative; padding: 12px 16px; height:20px; } .mcd-menu li a small { display: none; } .mcd-menu li a strong { display: none; } .mcd-menu li a:hover strong,.mcd-menu li a.active strong { display:block; font-size:10px; padding:3px 0; position:absolute; bottom:0px; left:0; background:#424e78; color:#FFF; min-width:100%; text-transform:lowercase; font-weight:normal; text-align:center; } .mcd-menu li > ul { min-width:180px; left:70px; } .mcd-menu li:hover > ul { min-width:180px; left:50px; } .mcd-menu li ul li > ul, .mcd-menu li ul li ul li > ul { min-width:150px; } .mcd-menu li ul li:hover > ul { left:180px; min-width:150px; } .mcd-menu li ul li ul li > ul { left:35px; top: 45px; border:0; border-top:4px solid #424e78; } .mcd-menu li ul li ul li > ul:before { left:30px; top: -9px; border:0; border-bottom:5px solid #424e78; border-left:5px solid transparent; border-right:5px solid transparent; } .mcd-menu li ul li ul li:hover > ul { left:30px; min-width:150px; top: 35px; } .mcd-menu li ul a { font-size:12px; } .mcd-menu li ul a i { font-size:14px; } }</style> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container1"> <nav> <ul class="mcd-menu"> <li> <a href=""> <i class="fa fa-home"></i> <strong>Home</strong> <small>sweet home</small> </a> </li> <li> <a href="" class="active"> <i class="fa fa-edit"></i> <strong>About us</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-gift"></i> <strong>Features</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-globe"></i> <strong>News</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-comments-o"></i> <strong>Blog</strong> <small>what they say</small> </a> <ul> <li><a href="#"><i class="fa fa-globe"></i>Mission</a></li> <li> <a href="#"><i class="fa fa-group"></i>Our Team</a> <ul> <li><a href="#"><i class="fa fa-female"></i>Leyla Sparks</a></li> <li> <a href="#"><i class="fa fa-male"></i>Gleb Ismailov</a> <ul> <li><a href="#"><i class="fa fa-leaf"></i>About</a></li> <li><a href="#"><i class="fa fa-tasks"></i>Skills</a></li> </ul> </li> <li><a href="#"><i class="fa fa-female"></i>Viktoria Gibbers</a></li> </ul> </li> <li><a href="#"><i class="fa fa-trophy"></i>Rewards</a></li> <li><a href="#"><i class="fa fa-certificate"></i>Certificates</a></li> </ul> </li> <li> <a href=""> <i class="fa fa-picture-o"></i> <strong>Portfolio</strong> <small>sweet home</small> </a> </li> <li> <a href=""> <i class="fa fa-envelope-o"></i> <strong>Contacts</strong> <small>drop a line</small> </a> </li> </ul> </nav> </div>
вставляете в форму ответа при включенном хтмл
залипаете надолго
[html] <style> @import url("https://fonts.googleapis.com/css?family=Lato:300,900"); container4 { background-color: #222; font-family: Lato, sans-serif; color: rgba(255, 255, 255, 0.75); text-align: center; display: block; } #c { display: block; width: 320px; height: 480px; margin: 1rem auto; border-bottom: 1px solid; } #score { font-size: 6rem; font-weight: 900; } #restart { margin: 1rem; border: 1px solid; border-radius: 0.5rem; padding: 0.25em 0.3em 0.25em 0.5em; font-family: inherit; font-size: 2rem; font-weight: 300; color: inherit; text-transform: uppercase; letter-spacing: 0.2em; background: transparent; transition: background-color 0.2s ease; &:hover { background: rgba(255, 255, 255, 0.25); } &:focus { outline: 1px dotted; outline-offset: 2px; } } </style> <script> var TILE_SIZE = 64; var TILE_PADDING = 8; var canvas = document.getElementById('c'); var scoreCounter = document.getElementById('score'); var restartButton = document.getElementById('restart'); var ctx = canvas.getContext('2d'); // off-screen canvas for tile prerendering var osc = document.createElement('canvas'); osc.width = 4 * TILE_SIZE; osc.height = TILE_SIZE; var canvasW = canvas.width; var canvasH = canvas.height; var boardW = Math.floor(canvasW / TILE_SIZE); var boardH = Math.floor(canvasH / TILE_SIZE); var clickable = true; var score = 0; var board = []; function resetBoard() { score = 0; clickable = true; scoreCounter.innerHTML = score; for (var i = 0; i < boardW * boardH; ++i) { board[i] = 1 + Math.floor(Math.random() * 4); } } function prerenderTiles() { var ctx = osc.getContext('2d'); ctx.lineWidth = 3; ctx.lineJoin = 'bevel'; var colors = [ 'mediumslateblue', 'cornflowerblue', 'darkslateblue', 'royalblue' ]; for (var color = 0; color < 4; ++color) { ctx.strokeStyle = colors[color]; ctx.fillStyle = 'rgba(127, 127, 255, 0.1)'; ctx.save(); { ctx.translate(color * TILE_SIZE, 0); if (color > 1) ctx.translate(0, TILE_SIZE); if (color && color < 3) ctx.translate(TILE_SIZE, 0); ctx.rotate(color * Math.PI / 2); ctx.beginPath(); ctx.moveTo(TILE_PADDING, TILE_PADDING); ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING); ctx.lineTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2); ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING); ctx.lineTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING); ctx.closePath(); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.moveTo(1.5 * TILE_PADDING, TILE_SIZE - TILE_PADDING); ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING); ctx.lineTo(TILE_PADDING, TILE_PADDING); ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING); ctx.lineTo(TILE_SIZE - TILE_PADDING, 1.5 * TILE_PADDING); ctx.moveTo(TILE_SIZE - TILE_PADDING, TILE_SIZE / 2); ctx.lineTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING); ctx.lineTo(TILE_SIZE * 0.75 - TILE_PADDING / 2, TILE_SIZE * 0.75 - TILE_PADDING / 2); ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING); ctx.lineTo(TILE_SIZE / 2, TILE_SIZE - TILE_PADDING); ctx.moveTo(TILE_SIZE - 3 * TILE_PADDING, 3 * TILE_PADDING); ctx.lineTo(3 * TILE_PADDING, TILE_SIZE - 3 * TILE_PADDING); ctx.stroke(); } ctx.restore(); } } function drawTile(x, y, color) { if (!color) return; ctx.drawImage(osc, (color - 1) * TILE_SIZE, 0, TILE_SIZE, TILE_SIZE, x, y, TILE_SIZE, TILE_SIZE); } function drawBoard() { ctx.clearRect(0, 0, canvasW, canvasH); for (var i = 0; i < boardW; ++i) { for (var j = 0; j < boardH; ++j) { drawTile(i * TILE_SIZE, j * TILE_SIZE, board[j * boardW + i]); } } window.requestAnimationFrame(drawBoard); } function handleClick(e) { var rect = canvas.getBoundingClientRect(); var scaleX = canvasW / rect.width / TILE_SIZE; var scaleY = canvasH / rect.height / TILE_SIZE; var i = Math.floor((e.clientX - rect.left) * scaleX); var j = Math.floor((e.clientY - rect.top) * scaleY); if (clickable) floodRemove(i, j); } function shouldRemove(i, j, color, removed) { if (i < 0 || i >= boardW) return false; if (j < 0 || j >= boardH) return false; if (board[j * boardW + i] !== color) return false; return removed.indexOf(j * boardW + i) < 0; } function swapTiles(a, b) { var tmp = board[a]; board[a] = board[b]; board[b] = tmp; } function swapColumns(a, b) { for (var j = 0; j < boardH; ++j) { swapTiles(j * boardW + a, j * boardW + b); } } function compactColumn(i) { var sum = 0; for (var j = boardH - 1; j > 0; --j) { for (var k = 0; k < j; ++k) { if (board[k * boardW + i] && !board[(k + 1) * boardW + i]) { swapTiles(k * boardW + i, (k + 1) * boardW + i); } } sum += !!board[j * boardW + i]; } return sum + !!board[i]; } function compactColumns() { var columnSums = []; for (var i = 0; i < boardW; ++i) { columnSums.push(compactColumn(i)); } for (var i = boardW - 1; i > 0; --i) { for (var k = 0; k < i; ++k) { if (!columnSums[k] && columnSums[k + 1]) { columnSums[k] = columnSums[k + 1]; columnSums[k + 1] = 0; swapColumns(k, k + 1); } } } } function floodRemove(i, j) { var color = board[j * boardW + i]; if (!color) return; var q = [[i, j]]; var rq = [j * boardW + i]; while (q.length) { var currentTile = q.shift(); var ci = currentTile[0]; var cj = currentTile[1]; if (shouldRemove(ci - 1, cj, color, rq)) { q.push([ci - 1, cj]); rq.push(cj * boardW + ci - 1); } if (shouldRemove(ci + 1, cj, color, rq)) { q.push([ci + 1, cj]); rq.push(cj * boardW + ci + 1); } if (shouldRemove(ci, cj - 1, color, rq)) { q.push([ci, cj - 1]); rq.push((cj - 1) * boardW + ci); } if (shouldRemove(ci, cj + 1, color, rq)) { q.push([ci, cj + 1]); rq.push((cj + 1) * boardW + ci); } } if (rq.length <= 2) return; var scoreStep = rq.length - 2; clickable = false; (function removeTile() { if (rq.length) { var idx = rq.shift(); score += scoreStep; scoreCounter.innerHTML = score; board[idx] = 0; setTimeout(removeTile, 50); } else { compactColumns(); clickable = true; } })(); } prerenderTiles(); resetBoard(); canvas.addEventListener('click', handleClick); restartButton.addEventListener('click', resetBoard); window.requestAnimationFrame(drawBoard); </script> <container4> <canvas id="c" width="640" height="960"></canvas> <div id="score">0</div> <button id="restart" type="button">Play again</button> </container4> [/html]
Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Коворкинг: обмен вдохновением и опытом » Эксперименты Will O The Wisp