29.08 Чиби пришла, чтобы проститься и передать свою корону в надежные руки урсы. Всех люблю и буду скучать, котики ♥

30.06 В связи с отсутствием Чибимун примерно до сентября, главной по тарелочкам пока будет урса (⁄ ⁄•⁄ω⁄•⁄ ⁄) Так что функционируем в обычном режиме, не забывая про тему исправлений!

12.01 С новым годом, ребятки! немного юбилеев, новых крутых дизайнов и мандаринок в ваш дом ヽ(・∀・)ノ

17.10 Чибимун тут болела серьезно, периодами училась и впадала в реальную жизнь, а на ролевых все так же ничего не меняется. Но вы не теряйте, котики!

27.08 Новый дизайн, спасибо великолепной полтергейст ♥

18.08 Чиби уходит в отпуск до 24 числа (даже заходить не будет возможности), так что не грустите и новые ролочки не делайте :")

07.05 Светло, розово (и немного непривычно), но все по-старому футурно, не переживайте! А за дизайн спасибо большое cannibals circus. Надеюсь, он растопит ваши холодные сердца и подарит чуточку тепла и весны вам, господа любители посплетничать ♥

02.04 Стряхну пыль с колонки новостей (тут должна быть шутка про то, что какая активность на аниме сообществе, такие и мы), напомню неравнодушным про тему исправления в каталоге, где Чибимун горячо желает видеть ссылки на новые форумы, поскольку сама не успевает все отслеживать. Спасибо, что остаетесь с нами, ребятки, даже в такие тяжелые времена. Всех люблю, не стесняйтесь писать, обращаться с вопросами и проявлять признаки жизни ♥

Futura: каталог аниме форумов

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

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


Вы здесь » Futura: каталог аниме форумов » CSS, HTML, скрипты » Украшение и дизайн


Украшение и дизайн

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

1

2

Замена форум, участники и т.д на картинки
by Lazary

в style_cs.css

Код:
#pun-navlinks a {
display: inline-block;
height: 20px;
width: 70px;
margin-left: 10px;
}

#navindex a {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a {background: url(адрес_изображения) no-repeat top center;}
#navsearch a {background: url(адрес_изображения) no-repeat top center;}
#navprofile a {background: url(адрес_изображения) no-repeat top center;}
#navpm a {background: url(адрес_изображения) no-repeat top center;}
#navadmin a {background: url(адрес_изображения) no-repeat top center;}
#navlogout a {background: url(адрес_изображения) no-repeat top center;}
#navlogin a {background: url(адрес_изображения) no-repeat top center;}
#navregister  a {background: url(адрес_изображения) no-repeat top center;}

#navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
#navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
#navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
#navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
#navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
#navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
#navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
#navregister a:hover {background: url(адрес_изображения) no-repeat top center;}

#pun-navlinks a span {display: none;}

если вы не хотите, чтобы при наведении картинка менялась, убираете вторую часть кода от #navindex a:hover до #navregister a:hover
Настройка

#pun-navlinks a -  настройка общего вида
height: 20px; - высота изображений.

width: 70px; - ширина изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для a:hover ширину указывать не нужно. Свойство наследуется.

margin-left: 10px; - расстояние между ссылками.

ссылки
#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navrules a - Правила
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.
#navawards - Награды

a:hover - соотв. картинке при наведении.

#pun-navlinks - скрывает текстовые надписи


Оставляем цифру Новых сообщений
html-низ

Код:
<script><!--Оставляем цифру Новых сообщений. -->
var clr=($("#navpm a").css("color"));var chng="&nbsp;(";
var subs="</span><span style=\"color:"+clr+";\" id=\"news_messag\">(";
$("#navpm a").html($("#navpm a").html().replace(chng,subs));
$("#news_messag").appendTo("#navpm");
</script>

+1

3

Сворачивание информации под N-кнопок в профиле топика
by Deff

http://s2.uploads.ru/gVCmQ.png

html-верх

Код:
<!-- HTML верх -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<style>img.post-img-Sp {margin:6px 3px;}
div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner{font-size:11px;letter-spacing:1px;}
</style>
<script type="text/javascript" src="http://forumfiles.ru/files/0010/b4/f8/57844.js"></script>

html-низ

Код:
<!-- HTML низ -Cпойлер cкрытия Инфы под N-кнопок в Профиле Топика -->
<script>
var a1 = 1	// 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1	// 0 - Скрытие первой вкладки; 1 - Показ первой вкладки; 
var a3 = 1 // Резкость Открытия: 0 - Плавно; 1 - Резко;
var LiArr=new Array(
//При наличии двух косых => // в начале пункта, - пункт не скрывается.
//"pa-author",     //Ник-Нейм
//"pa-avatar",     //Аватар
//"pa-title",      //статус
// 1 кнопка - ссылка на Картинку
//В квадратных скобках, прямо к ссылке можно добавить своё описание (по желанию)
"http://s3.uploads.ru/nk0pT.png[о пользователе]",
"pa-posts",      //Кол-во сообщений:
"pa-respect",    //Уважение:
"pa-from",       //Откуда
"pa-reg",        //Зарегистрирован
"pa-invites", //Приглашений
"pa-sex",        //Пол
"pa-age",        //Возраст
"pa-positive",   //Позитив
"pa-icq",        //Аська
"pa-ip",         //IP Юзера
"pa-time-visit", //Провел на форуме:
"pa-last-visit", //Последний визит:
//"pa-online",     //Пользователь online - Не засовываем в спойлеры
// 2 кнопка- ссылка на Картинку
"http://s2.uploads.ru/5YoSC.png[о персонаже]",
"pa-fld1",       //Доп.Поле.1
// 3 кнопка- ссылка на Картинку
"http://s2.uploads.ru/f5IdO.png[награды]",
"award",      //Награды(только для rusff и ork)
//"gift",         //Подарки(только для rusff и ork)
//Конец Списка,
"_End"); SetProvilSpoil(a1,a2,a3);
</script>
<!--Конец//=Cпойлер cкрытия Инфы под N-кнопок в Профиле Топик-->

Настройка
var a1 = 1 // 0 - спойлер-аккордеон, 1 - вертикальный спойлер; 3 - обычный спойлер
var a2 = 1 // 0 - Скрытие первой вкладки; 1 - Показ первой вкладки;
var a3 = 1 // Резкость Открытия: 0 - Плавно; 1 - Резко;

Все пояснения, в принципе, есть в самом скрипте. Ссылку на картинку и описание можно менять.
В скрипте пункты расположены так же, как и по умолчанию на форумах mybb, пункты в списке можно переставлять; не зависит от их начального положения.

Пункт активен - //"pa-online" сейчас вытащен из спойлеров.
Для этого необходимо было поставить перед ним  две косых //.(Это для последующих установок, к примеру скриптов: офлайн - онлайн картинкой, (аналогично можно вытащить из участия в спойлере и любой другой пункт:
//"award",      //Награды
//"gift",         //Подарки

Для дизайнеров
Селектор для стиля вкладки ul.post-ul-Sp
Селектор для картинки-кнопки .post-img-Sp
Селектор aктивной кнопки .post-img-Sp.active
Селектор кнопки при наведении .post-img-Sp:hover
Селектор подсказки при наведении на кнопку div.tipsy.tipsy-s.Sp-imgSp-img .tipsy-inner

0

4

Скрыть название поля профиля
by Fover

html-низ

Код:
<script type="text/javascript">
var F = [1,2,3,4,5];
for(i in F) {$('.post-author li.pa-fld'+F[i]).each(function(){$(this).html($(this).html().replace(/(.*?):(?: |<br>)/,''));});}
</script>

var F=[1,2,3,4,5] - номер поля
Можно через запятую, если нужно несколько

0

5

Аватар по умолчанию

html-низ

Код:
<script type="text/javascript">
    var DefAvtr="ссылка на картинку";
    var s='<li class="pa-avatar item2"><img class="defavtr" src="'+DefAvtr+'" alt="Аватар"/></li>';$("li.pa-title").each(function(){if (($(this).parent("ul").find("li.pa-avatar").html())==null){$(this).after(s);};});
    </script>

+1

6

Всплывающее окно с подсказкой
http://i.imgur.com/aUqaiFF.png

в окно css стиля:

Код:
.tooltip {
  border: none; 
  text-decoration: none;
  position: relative;}
.tooltip span {
  margin-left: -999em;
  position: absolute;}

.tooltip:hover span {
  position: absolute;
  left: 7px;
  top: 10px; 
  z-index: 99;
  margin-left: 0;}

.top {
  z-index: 200;
  position: absolute;
  background-color: #E3E3E3;
  color: #181A13;
  border: none;
  box-shadow: 0px 0px 4px #161616;
  padding: 5px;
  width: 180px;
  text-align: center;}

.tooltip:hover span - настройка расположения всплывающего окна
  left: 7px; - двигает вправо/влево
  top: 10px; - двигает вниз/вверх

.top - внешний вид всплывающей подсказки
  background-color: ##E3E3E3; - фоновый цвет окна
  color: ##181A13; - цвет шрифта
  border: none; - рамка
  box-shadow: 0px 0px 4px #161616; - тень
  padding: 5px; - расстояние текста от края окна
  width: 180px; - ширина всплывающего окна
  text-align: center; - выравнивание текста

ссылка с подсказкой должна выглядеть так (несколько вариантов)

<a href="ссылка" class="tooltip">текст<span class="top">всплывающая подсказка</a>
<a href="ссылка" class="tooltip"><img src="картинка"><span class="top"><b>ник</b><br>описание</span></a>

0

7

Убрать надпись "отредактировано"

в html-вверх

Код:
<style>
.lastedit{display:none;}
</style>

или в свой стиль

Код:
.lastedit{display:none;}

0

8

Смена стилей

html-вверх

Код:
<script type="text/javascript">
var linkStyles='<link rel="stylesheet" type="text/css" href="';
function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
function clearSet(L){if(L){setcookie("changeStyle",L,30);$("link[rel='stylesheet']:first").replaceWith(linkStyles+L+'"/>')}};var Lmem=getcookie("changeStyle");clearSet(Lmem);
</script>

сами стили и переключалка, ставится следом.

Код:
<style>#changeStyle img{border:solid 2px transparent;}
.STYLselect {border-color:#BD3333!important;}
</style>
<div id="changeStyle" style="top:0; left: 3px; position:fixed!important;">
<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>
<br>
<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>
</div>

<script>$("#changeStyle img[alt='"+Lmem+"']").addClass("STYLselect");$('#changeStyle img[alt]').click(function(){L=$(this).attr("alt");$('#changeStyle img[alt]').removeClass("STYLselect");$(this).addClass("STYLselect");clearSet(L);window.location=document.URL.replace(/#.\d+$/img,"");});</script>

строку

<img src="картинка_кнопки" title="описание" alt="ссылка на стиль"/>

можно размножать.

.STYLselect {border-color:#BD3333!important;} - кнопка после нажатия. просто меняем номер цвета, если нужно.

Дополнения
Дополнительные Контейнеры для HTML контента, подключаемые только к Определенному выбираемому Стилю

Код:
<style alt="стиль" class=OnlyThisStyle>

....

</style>
<div style="display:none;"><script>var L=$("link[rel='stylesheet']:first").attr('href');var V=$("style.OnlyThisStyle[alt='"+L+"']");if(V.html()!=null){var V1=V.html().replace(/^\/\*([\s\S]*)\*\//img,"$1");V.replaceWith(V1);}</script></div>

вместо многоточия ставится скрипт. советуем не злоупотребоять подобным, а коды стараться по возможности размещать в CSS файлах стиля.
<style alt="стиль" class=OnlyThisStyle> - ссылка на нужный вам стиль.

Файл стиля
Файл своего стиля можно написать в обычном блокноте, однако потом обязательно смените расширение файла с txt на css!
Первым идет все, что находится в нижнем окошке - цвета css.
Второе - структура css.
во время помещения удалите пункт

/* A1.1 */
@import url();

полностью.
Залить файл можно прямо на форум, в раздел Файлы.

0

9

Полоса прокрутки (скролл)

Свой стиль - Цвета CSS

Код:
::-webkit-scrollbar {width: 12px; height: 8px;}  
::-webkit-scrollbar-track {background-color: #цвет фона под прокруткой;} 
::-webkit-scrollbar-thumb {background-color: #цвет ползунка;}
::-webkit-scrollbar-thumb:active {background: #цвет ползунка при нажатии мышкой;}

width: 12px - ширина прокрутки
height: 8px - ширина горизонтальной прокрутки

0

10

Стрелки вверх-вниз

в html-верх

Код:
<div style="position:fixed; right:0.5%; bottom: 45%;">
<a href=#top onClick="scrollTo(0,0); return false;" title="Вверх страницы">
<img src="КАРТИНКА" alt="Вверх страницы" ></a>
<br/>
<a href=#top onClick="scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы">
<img src="КАРТИНКА" alt="Вниз страницы" ></a> 
</div>

вместо слова КАРТИНКА вставляем ссылку на изображение.

<div style="position:fixed; right

есть написать left вместо выделенного, то они окажутся (внезапно!) слева.


Плавные стрелки вверх-вниз

HTML-низ

Код:
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
  else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
  else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

свой стиль

Код:
.go-up, .go-down {
 display: none;
 position: fixed; /*позиционирование*/
 z-index: 9999; /*поверх все элементов на странице*/
 right: 5%; /*положение на странице, если слева - left*/
 cursor: pointer;
 opacity: .5;
 padding: 3px;
 margin-bottom: 5px;
 width: 64px;
 height: 31px;}
.go-up { bottom: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;}

HTML-верх

Код:
<div class="go-up" title="Вверх" id='ToTop'><img src="КАРТИНКА ВВЕРХ"></div>
<div class="go-down" title="Вниз" id='OnBottom'><img src="КАРТИНКА ВНИЗ"></div>

0

11

Плавная смена картинок при наведении курсора
by Deff

DEMO

в style_cs.css или между тегами <style type="text/css"> </style> в html-верх

Код:
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;}

.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */}

.image.UP:hover {
   opacity:0.00;}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;}

код картинки (обязательно изображения одинаковых размеров):

Код:
<div  class=ImgWrap>
<img class="image UP" src="http://uploads.ru/i/i/n/D/inDOK.png"/>
<img class="image Down" src="http://uploads.ru/i/3/E/W/3EWuB.png"/>
</div>

0

12

Своя картинка в каждую категорию

в html-низ

Код:
 <script type="text/javascript"><!--Своя картинка в каждую категорию -->
    $(document).ready(function(){
    myarray=new Array(
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Статистика форума", "ссылканакартинку" //Последний элемент без запятой!  
)
 $("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
    for(q=0;q<myarray.length;q++){

    var cssObj = {
       "height":"46px",
       "background-color": "transparent",
       "background-image":"url("+myarray[q+1]+")",
       "background-position":"50% 50%",
       "background-repeat":"no-repeat"       //Последний элемент без запятой!
    }

            if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
            q++}
        });
    });
    </script>

в этой части кода

"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Название", "ссылканакартинку",
"Статистика форума", "ссылканакартинку"

прописываются  названия категорий и ссылка на картинку, ее заменяющую

в "height":"46px" нужно установить высоту картинок

в стиль добавляем код, чтобы скрыть буквенные названия категорий

Код:
.punbb h2 span {
display: none; }

0

13

Замена форум, участники и т.д на свой текст с помощью css

На месте жирного текста можно написать любой свой текст

#pun-navlinks #navindex>a>span, #navuserlist>a>span, #navrules>a>span, #navsearch>a>span, #navprofile>a>span, #navpm>a>span, #navadmin>a>span, #navregister>a>span, #navlogin>a>span, #navlogout>a>span{display:none;}

#pun-navlinks #navindex a:after{content:"форум";}
#pun-navlinks #navuserlist a:after{content:"участники";}
#pun-navlinks #navrules a:after{content:"правила";}
#pun-navlinks #navsearch a:after{content:"поиск";}
#pun-navlinks #navprofile a:after{content:"профиль";}
#pun-navlinks #navpm a:after{content:"сообщения";}
#pun-navlinks #navadmin a:after{content:"админка";}
#pun-navlinks #navregister a:after{content:"регистрация";}
#pun-navlinks #navlogin a:after{content:"вход";}
#pun-navlinks #navlogout a:after{content:"выход";}

0

14

Панель с данными пользователя в любом месте
by Герда

http://s2.uploads.ru/t/tGxlC.jpg http://sg.uploads.ru/t/Ksn6k.png

Там, где будет отображаться панель, нужно вставить код

Код:
<div id="u-panel"></div>

Затем в html-низ (или за кодом) сам скрипт:

<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
while(arr ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>содержимое панели</div>"+name
}i++}
</script>


Заполнение содержимого панели
Для начала, два правила:
1. Нельзя использовать двойные кавычки, их можно заменить апострофом ('). Исключения - коды с данными пользователя, которые даны ниже.
2. Код содержимого должен быть в одну строчку. Если сложно из-за этого ориентироваться, сначала сделайте код отдельно, а потом убирайте переносы и вставляйте в скрипт.

Обычно в качестве кода панели используется таблица из двух или трех столбцов. А вот заставить отображать аватарки, дату рождения и другие данные пользователя можно при помощи определенных кодов.

Общие данные
"+UserLogin+" - ник
"+UserAvatar+" - аватарка
"+UserTitle+" - статус
"+GroupTitle+" - группа пользователя
"+UserPosts+" - количество сообщений
"+UserAge+" - возраст
"+UserBirthDate+" - день рождения пользователя
"+UserName+" - отображает имя пользователя, которое он вписал в Профиль
"+UserRespectPlus+"  количество плюсов в уважении
"+UserRespectMinus+" - количество минусов в уважении
"+UserPositivePlus+" - количество плюсов, которые поставил юзер
"+UserPositiveMinus+" - количество минусов которые поставил юзер

Персональные ссылки
Большинство ссылок можно получить с помощью кода "+UserID+" - он отображает идентификатор пользователя, который вы можете увидеть, зайдя на страницу своего профиля.
<a href='/profile.php?id="+UserID+"'>Профиль</a>
<a href='/profile.php?section=personal&id="+UserID+"'>Профиль > Персональный</a>
<a href='/profile.php?section=messaging&id="+UserID+"'>Профиль > Общения</a>
<a href='/profile.php?section=avatar&id="+UserID+"'>Профиль > Аватар</a>
<a href='/profile.php?section=signature&id="+UserID+"'>Профиль > Подпись</a>
<a href='/profile.php?section=display&id="+UserID+"'>Профиль > Отображения</a>
<a href='/profile.php?section=privacy&id="+UserID+"'>Профиль > Приватность</a>
<a href='/profile.php?section=fields&id="+UserID+"'>Профиль > Дополнительно</a>
<a href='/profile.php?section=invites&id="+UserID+"'>Профиль > Приглашения</a>
<a href='/respect.php?id="+UserID+"'>Уважение</a>
<a href='/positive.php?id="+UserID+"'>Позитив</a>

http://i.imgur.com/DDufaMl.png

Пример Простенькая панель из двух столбцов
Слева - аватар, справа - ник, количество сообщений и ссылка на профиль

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
while(arr ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option><table cellpadding='5px'><tr><td><a href='/profile.php?section=avatar&id="+UserID+"' title='change avatar'><img src="+UserAvatar+"></a></td><td valign='top'><div style='margin-top: 10px; color: #000000; font-size: 14px; font-family: Arial; font-weight: bold;'>"+UserLogin+"</div>"+UserPosts+"<br><a href='/profile.php?id="+UserID+"'>it's me</a></div></td></tr></table></div>"+name
}i++}
</script>

Оформление
С помощью CSS

#option {тут ваши коды}

там же можно задать этой панельке расположение
  position: relative;
  top: 243px; - двигать вверх/вниз
  margin-left: 840px; - двигать влево/вправо

Дополнительно
Как поставить пользователю аватарку по умолчанию? Прописываем в начале скрипта ссылку на картинку

<script type="text/javascript">
if (UserAvatar == ""){UserAvatar = "КАРТИНКА"}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-panel") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>тут будет наше содержимое</div>"+name
}i++}
</script>


Скрипт для гостей
Могут понадобиться ссылки
<a href='login.php'>Вход</a>
<a href='register.php'>Регистрация</a>

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="u-panel" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option>тут будет наше содержимое</div>"+name
}i++}
</script>

http://i.imgur.com/l3jh4Ai.png

Пример Панель из двух столбцов
Слева - аватар, справа - ник, ссылка на вход и регистрацию

Код:
<script type="text/javascript">
var arr=document.getElementsByTagName("div")
i=0
str=document.URL
while(arr[i] ){
if(arr[i].id=="u-panel" && GroupID == "3") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<div id=option><table cellpadding='5px'><tr><td><img src="+UserAvatar+"></td><td valign='top'><div style='margin-top: 10px; color: #000000; font-size: 14px; font-family: Arial; font-weight: bold;'>guest</div><a href='login.php'>login</a><br><a href='register.php'>registration</a></div></td></tr></table></div>"+name
}i++}
</script>

0

15

Фильтры для изображений
Могут понадобиться, например, в таблице, если вам нужно сделать картинки черно-белыми.
Для начала нужно узнать селектор того места, где мы будем извращаться над картинками. В случае дополнительных блоков все просто - его название в css и есть нужный нам селектор. Если данные манипуляции будут проводиться в другом месте, заранее узнайте селектор.

Основные фильтры
-webkit-filter: grayscale(100%); - черно-белое изображение
-webkit-filter: sepia(100%); - сепия
-webkit-filter: brightness(50%); - яркость 50%
-webkit-filter: blur(5px); - эффект размытия
-webkit-filter: opacity(60%); - прозрачность изображения
-webkit-filter: hue-rotate(120deg); - меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

Пример
Есть некий блок в шапке #tabl, картинки в котором нам нужно сделать черно-белыми. Тогда код будет иметь следующий вид:

#tabl a img {-webkit-filter: grayscale(100%);}
#tabl a:hover img {-webkit-filter: grayscale(1%);}

#tabl a img - применяется для обычной картинки
#tabl a:hover img - для картинки при наведении курсора

0


Вы здесь » Futura: каталог аниме форумов » CSS, HTML, скрипты » Украшение и дизайн


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC