24/08/15 Открыта запись на обучение вёрстки для майбба - ссылка на тему

Избранные уроки Photoshop


Вверх
Вниз

COLOR MATE

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » COLOR MATE » Уроки CSS|JS » Добавляем дизайну плюшки


Добавляем дизайну плюшки

Сообщений 1 страница 6 из 6

1

Собственно, в эту тему я буду предлагать вам интересные способы придать вашему сайту изящество и красоту, используя хтмл и ксс. Будьте осторожны, пользуясь предоставленными скриптами и читайте все пояснения, чтобы не возникали вопросы. Просьба не засорять тему флудом и вопросами - если у вас возникла проблема, пишите мне в ЛС, я обязательно вам помогу.

Отредактировано winter ` (03-09-2012 06:54:36)

+3

2

Как подделать флеш анимацию в навигации

Вы видели когда-то интересный приём на сайтах - наводишь на ссылку а она светится потом гаснет? Ну, или что-то другое. Это флеш-анимация, которую пока-что нельзя перенести на ксс и хтмл, но вполне можно подделать. Демонстрации этого эффекта у меня нету, т.к. сам я им пользовался довольно-таки давно. В чём суть:
используя скрипт замены картинки при наведении, вы можете создать гифку с красивым эффектом.
Пример: в обычном состоянии картинка просто стоит, при наведении - текст постепенно становится ярче, или же под ним рисуется линия. Сам скрипт выглядит так:

Код:
    <script><!--Свои картинки в панель навигации со сменой картинки по наведению курсора" -->
       navlinks=new Array(

      "navextra1",    // Дополнительный пункт меню 1
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navextra2",    // Дополнительный пункт меню 2
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navextra3",    // Дополнительный пункт меню 3
    "Ссылка на картинку","Ссылка на картинку при наведении",

      "navindex",    // Форум
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navuserlist", // Участники
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navrules",    // Правила
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navsearch",    // Поиск
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navprofile",    // Профиль
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navpm",    // Сообщения
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navadmin",    // Администрирование
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navregister", // Регистрация
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navlogin",    // Войти
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navlogout",    // Выход
    "Ссылка на картинку","Ссылка на картинку при наведении"  // !ПОСЛЕДНИЙ элемент без запятой
    )
    var s0,s1,s2,s3,i; for (i=0; i < navlinks.length; i++){s0=navlinks[i+1];s1="onmouseover=\"this.src='"+navlinks[i+2]+"'\""; s2="onmouseout=\"this.src='"+s0+"'\"";s3='<img class="navlinks" src="'+s0+'" '+s1+' '+s2+' border="0" />';$("#"+navlinks[i]+" a").html("<span>"+s3+"</span>");i++;i++; }
    </script>

Первые три пункта можно убрать, если у вас нету доп. кнопок в меню.
Если используем скрипт информирующий о новых сообщениях, ставим его раньше данного скрипта.

+1

3

Подделка флеш анимации "новая тема", "новые опрос", "Ответить" "Профиль" "ЛС" и тд

Тот же самый эффект для других ссылок. Скрипт такой:

Код:
    <script><!--Свои картинки вместо:Новая тема;Новый опрос;Ответить;Профиль;ЛС;и т.д. -->
       pstlnk=new Array(

      ".postlink","Новая тема",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".postlink","Новый опрос",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".postlink","Ответить",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-email","Профиль",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-email","ЛС",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-email","E-mail",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-website","Вебсайт",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-delete","Удалить",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-edit","Редактировать",
    "Ссылка на картинку","Ссылка на картинку при наведении",

      ".pl-quote","Цитировать",
    "Ссылка на картинку","Ссылка на картинку при наведении" // !ПОСЛЕДНИЙ элемент без запятой
    )
    function find_and_replace(value){var s0,s1,s2,s3,i; for (i=0; i < pstlnk.length; i=i+4){s0=pstlnk[i+2];
      s1="onmouseover=\"this.src='"+pstlnk[i+3]+"'\"";s2="onmouseout=\"this.src='"+s0+"'\"";
      s3='<img class="pst_lnk" src="'+s0+'" '+s1+' '+s2+' border="0" />';
      var str=$(value).find(pstlnk[i]+":contains('"+pstlnk[i+1]+"')").html();
      if (str!=null) {str=str.replace(pstlnk[i+1],s3);
    $(value).find(pstlnk[i]+":contains('"+pstlnk[i+1]+"')").html(str);};};}
    $("#pun-viewforum .linkst,#pun-viewforum .linksb,#pun-viewtopic .linkst,#pun-viewtopic .linksb,#pun-viewtopic .post .post-links").each(function(){find_and_replace(this);;});
    </script>

Хтмл-низ.

+1

4

Легенда иконок

Популярный скрипт на борде, на майббе редко встречаешь. Собственно, отображает внизу форума исконки форума (нет сообщений, есть сообщения, закрыто или важно). Скрипт можно менять, добавляя различные эффекты.

Код:
<script type="text/javascript">
if ((location.href[location.href.length-1] == '/') || (document.URL.indexOf("viewforum") != -1)) 
document.getElementById("pun-main").innerHTML += '<div class="container" style="padding: 0.5em; margin-top: 1em;"><table style="width: 20%; float: left; border-style: none; vertical-align: middle;"><tbody><tr><td style="border-style: none;" align="center"><div class="icon"><!-- --></div> - нет новых сообщений</td></tr></tbody></table><table style="width: 20%; float: left; border-style: none; vertical-align: middle;"><tbody><tr class="inew"><td style="border-style: none;" align="center"><div class="icon"><!-- --></div> - новые сообщения</td></tr></tbody></table><table style="width: 20%; float: left; border-style: none; vertical-align: middle;"><tbody><tr class="isticky"><td style="border-style: none;" align="center"><div class="icon"><!-- --></div> - важно</td></tr></tbody></table><table style="width: 20%; float: left; border-style: none; vertical-align: middle;"><tbody><tr class="iclosed"><td style="border-style: none;" align="center"><div class="icon"><!-- --></div> - закрыто</td></tr></tbody></table><table style="width: 20%; float: left; border-style: none; vertical-align: middle;"><tbody><tr class="iredirect"><td style="border-style: none;" align="center"><div class="icon"><!-- --></div> - ссылка</td></tr></tbody></table></div>';
</script>

Пример

+2

5

Прокрутка страниц

Собственно, скрипт позволяет прокручивать страницы и выбрать ту, которая нужна. Настройка внешнего вида полностью зависит от самого стиля. Скрипт начинает работать после набора 4 страниц, то бишь с пятой.

Код:
<script src="http://hostjs-mybb2011.narod.ru/js/mybbpaginator.js"></script>

Пример
Добавляете в хтмл-верх.

Прокрутка страниц v2

Хтмл-низ:

Код:
<script type="text/javascript">
<style>
#paginator {
  opacity: 0.9;
  position: absolute;
  left: 55px;
  z-index: 1000;
  filter: alpha(opacity=90);
  text-shadow: 0 1px 0 #000;
  background-color: #61bde7; /* фон блока пагинатора */
  border: 2px solid #59add4; /* цвет границы блока */
  table-layout: auto !important;
  width: auto !important;
  background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  -moz-border-radius: 4px;
  border-radius: 4px;
  khtml-border-radius:4px;
  -webkit-border-radius:4px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

#paginator td {
  padding: 0.1em;
  border-style: none;
}

#pnav:hover {
  background: black; /* фон цифры при наведении курсора */
  color: lime; /* цвет цифры при наведении курсора */
  -moz-border-radius: 9000em;
  border-radius: 9000em;
  khtml-border-radius:9000em;
  -webkit-border-radius:9000em;
}
</style>
<script type="text/javascript">
$('.linkst .pagelink a:not(.next):last').map(function () {
text = $(this).html();
text2 = $(this).attr('href');
ssylk = /(.*?)\/viewtopic\.php\?id=(\d+)\&p=(\d+)/g;
pId=(text2.replace(ssylk, '$2'));
Max=text;
var paginator='<div id="pagenav" style="display:none"><table id="paginator"><tr>';
for (p=1; p<=Max; p++) {
paginator += '<td><a id="pnav" style="text-decoration:none;" href="/viewtopic.php?id='+pId+'&p='+p+'">&nbsp;'+p+'&nbsp;</a></td>'; 
if (p%10 == 0) paginator += '</tr><tr>';
 } 
paginator += '</tr></table></div>';
$('#pun-viewtopic .pagelink').append(paginator);
}); 
$('div.pagelink').hover(function(){
$(this).find('#pagenav').toggle();
});
</script>

Пример
Настройки внешнего вида в первой части кода.

Отредактировано winter ` (03-09-2012 07:06:05)

+2

6

Падающие снижинки для форума. Добавляем в хтмл-низ.

Код:
<script>
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/

// количество снежинок (больше 30 - 40 не рекомендуется)
var snowmax=45

// цвет снежинок, можно устанавливать сколько угодно цветов
var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5")

// шрифт, которым будет отображаться снежинки
var snowtype=new Array("Times")

// символ снежинок (рекомендуется: * )
var snowletter="*"

// скорость снежинок (рекомендуется от 0.3 до 2)
var sinkspeed=1

// максимальный размер снежинок
var snowmaxsize=35

// минимальный размер снежинок
var snowminsize=8

// выбираем зону для снежинок
// 1 для снежинок по всей странице, 2 для левой стороны
// 3 для центральной зоны, 4 для правой стороны
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}
</script>

0


Вы здесь » COLOR MATE » Уроки CSS|JS » Добавляем дизайну плюшки