ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

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

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


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог гайдов, уроков, подборок » Урок: Объемные границы форума (границы форума картинкой) CSS


Урок: Объемные границы форума (границы форума картинкой) CSS

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

1

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

Некоторые дизайнеры для этого рисуют общий фон сразу вместе с этими границами (как упомянуто в уроке Создание фона для форума. Урок 1 - Статический фон.), но я вас научу выполнять этот трюк без создания гигантской картинки. Это позволит вам:

  • различным образом экспериментировать с задним фоном (делать его не повторяющимся или наобарот, статичным или прокручивающимся);

  • делать форум существенно "легче";

Итак разбираем стиль по кусочкам:

Шаг 1: Задний фон

на задник мы ставим то, что нам угодно. любой фон. объемные границы не будут иметь к нему отношения.

Код:
<style>
html, body {
background: #ffffff url(http://картинка) no-repeat; 
background-position: bottom right; 
background-attachment: fixed;}
</style>

подробнее о том, как настраивается фон, читайте здесь: Фон форума.

Шаг 2: добавляем нарисованные объемные границы
Рисуем в фотошопе наши границы. выглядеть она должны как-то так:

и вставляем их на форум:

<style>
#pun {
  width: 920px;
  position: relative;
background: transparent url(http://картинка) repeat-y; background-position: top center;
  }
</style>

красное - ширина картинки

Шаг 3: делаем границы форумные таблиц уже, чем наша картинка

<style>
.punbb {
  float: left;
  height: auto;
width: 896px;
padding-left: 12px;
padding-right: 12px;

  }
</style>

красное - ширина форумных таблиц
синее - ширина нарисованной границы

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+10

2

Герда
Спасибо, тоже весьма полезный урок  http://i.smiles2k.net/aiwan_smiles/good.gif

0

3

У меня фотошоп на английском, я и в нем лохо разбираюсь. Не могли бы вы мне сделать границы? Это почти такиеже, только ветви дикой розы, оплетающие этот самый форум.

0

4

А у меня весь форум почему то съехал влево(  http://i.smiles2k.net/aiwan_smiles/sad.gif

0

5

Дафна де Лорена
оформляйте заказ в соответствующем разделе

Красный туман
ссылку на форум

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

6

у меня тоже влево съехал. Тык

0

7

Victorica

нашла ошибки в коде, который наколякала.
статья подправлена, теперь ничего не уедет. http://i.smiles2k.net/aiwan_smiles/smile3.gif

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

0

8

теперь нормально.

Герда
спасибо большое ^ ^

0

9

а как закрыть эти рамочки объемные?
чтобы был прямоугольник?

0

10

а у меня вправо съехал оО
http://teta.rusff.ru/

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."


Вы здесь » ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка » Каталог гайдов, уроков, подборок » Урок: Объемные границы форума (границы форума картинкой) CSS