Текст в футере - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

Правила раздела

Здесь обсуждаются вопросы оформления форумов IPB 3.x.
Пожалуйста, не оффтопьте, если зашли сюда случайно, и обратите внимание на соседние разделы.
Оформление форумов IPB 2.x.
Настройка форумов, включая установку и техническую настройку скинов.
Размещение рекламы на форумах.
SEO оптимизация форума.
Техническая поддержка наших скинов и модов.

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

Текст в футере

#1 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 24 Март 2015 - 20:33

Как сделать полоску под текстом ?

Содержимое css
	#copyright {
		color: #848484;
		text-align: right;
		line-height: 22px;
		float: right;
                height: 1px;
                background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
                background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
                background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
                background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
	}


Сам скрин:

Вложений

  • Вложение  193428.jpg (5,93К)
    Количество загрузок: 17

0

#2 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 24 Март 2015 - 22:52

Тут градиент задан через бэкграунд самого элемента, и высота ему задана 1px - отсюда и иллюзия, что это этакая линия.
Чтобы сделать снизу... (я так понимаю, сверху и снизу такая линия должна быть одновременно?)


1) проделать то же самое с псевдоэлементом :after

что-то вроде этого:
#copyright:after {
  display:block;
  content:"";
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
 }

результат: http://embed.plnkr.co/FgfrCb

2) создать этот эффект не через бэкграунд, а через бордер

пример: http://embed.plnkr.co/Vf5U3n

html примера:
<div class="box">пример рамки</div>
css примера:
.box{
text-align: center;
width: 300px;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
-webkit-border-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image: linear-gradient(to left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image-slice: 1;
}

2

#3 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 24 Март 2015 - 22:59

Нет, мне только снизу.
С новым div'ом не получится, так как это уже будет новый блок.
0

#4 Пользователь не на сайте   Viktar83 ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 120
  • Регистрация: 10-Декабрь 14
  • Репутация: 71
  • Откуда:РБ
  • IPB version:3.4.x
 

Отправлено 24 Март 2015 - 23:08

Просмотреть сообщениеVetalDX 24 Март 2015 - 22:59 сказал(а):

Нет, мне только снизу.
С новым div'ом не получится, так как это уже будет новый блок.

Тогда по первому варианту: удалить лишний код из #copyright, оставив только в #copyright:after
 #copyright {
  color: #848484;
  text-align: right;
  line-height: 22px;
  float: right;
  }
 #copyright:after {
  display:block;
  content:"";
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0)); 
  background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,187,255,1), rgba(0,0,0,0));
 }


По второму: оставить только нижнюю границу
.box{
text-align: center;
width: 300px;
border-width:0;
border-bottom: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
-webkit-border-image: -webkit-linear-gradient(left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image: linear-gradient(to left, #FFFFFF 0%, #00CCFF 50%, #FFFFFF 100%);
border-image-slice: 1;
}

1

#5 Пользователь не на сайте   VetalDX ответил: »

 
 
  • Advanced
  • ***
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 225
  • Регистрация: 14-Ноябрь 12
  • Репутация: 0
  • Откуда:Донецк
  • IPB version:3.4.x
 

Отправлено 25 Март 2015 - 08:27

спасибо
0

Сообщить об этой теме:


Страница 1 из 1
  • Вы не можете создавать новые темы
  • Вы не можете отвечать в этой теме

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2016 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна