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

Объявление

☕ 7 вечеров с magia

Дата: с 27 февраля по 5 марта;
Хотите узнать, что таит в себе magia?
Присоединяйтесь к обсуждению и подготовьте вопросы!

Задать вопрос

ДОРАБОТАЕМ ВМЕСТЕ СКРИПТ ПЕРВОАПРЕЛЬСКИХ РОЗЫГРЫШЕЙ

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

Принять участие

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



УРОК: Шапка, переходящая в фон (CSS)

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

1

Есть вариант стиля, где шапка переходит в фон форума (вылазит за границы форумных таблиц) выглядит это приблизительно так:

# увеличивается по клику

Примеры такого стиля есть в нашем свободном каталоге: Фентези стиль для ролевого форума MyBB LastChance-2012, Дизайн Hentay School of Umineko (+ PSD) [6/8], Дизайн Seven Kingdoms (+ PSD) [5/8], Дизайн Лесное фэнтези [3/8]

В этом уроке мы "разберем" этот стиль на кусочки и продемонстрируем написание такого кода.

# увеличивается по клику

1. отмечено розовым

Основной фон залили красным цветом, вот такой код:

<style>
HTML, BODY {
background-color: #ad3a32;
}
</style>


2.  отмечено синим

Поверх основного фона размещена фоновая картинка (в формате png - чтобы края были полупрозрачными и плавно переходили в цвет основного фона), чтобы эта картинка правильно отображалась, надо ее оцентровать и сделать не повторяющейся.

<style>
HTML, BODY {
background-color: #ad3a32;
background-image: url("http://картинка");
background-repeat: no-repeat;
background-position: top center
}
</style>

красная строчка кода позволяет добавить картинку
синяя - делает картинку неповторяющейся
зеленая - делает картинку по центру (top - верх; center - центр)

3.  отмечено зеленым

Фон форумных таблиц сделан просто одноцветно. Делается это следующим образом:

<style>
#pun {
  background-color: #beb9a7;
  width: 800px;
}
</style>

Тут есть один существенный нюанс: необходимо заранее указать ширину форумных таблиц.


4. отмечено красным

Поверх всего вышеперечисленного идет шапка. (Она тоже сделана в формате png). Делать ее необходимо по образу и подобию основного фона, но с нюансами (например, указав высоту шапки).

<style>
#pun-title table {
background: url(http://катринка);
height: 295px;
background-repeat: no-repeat;
background-position: top center;
}

#pun-title .title-logo span {display: none;}
</style>

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

Далее - дело тонкого мастерства дизайнера, остается создать в фотошопе подходящие под такой код картинки.


Проблема
может возникнуть вот такие "полоски":

# увеличивается по клику

Это границы шапки форума. чтобы убрать их вставьте вот этот код:

Код:
<style>
#pun-title {
    border: none;
}
</style>

+7

2

Классно давно искала этот код)) Спасибо большое!!!
Только есть один маленький вопросик. Как я поняла это вставляется в HTML-верх, а если вставлять непосредственно в сам код css? Тогда как он(код) будет выглядеть?

0

3

Vivian Lille
точно так же но без тегов <style>

+2

4

хм, все равно не работает: "второй"фон с белым фоном, хотя формат png

0

5

Огромное спасибо за скрипт, очень давно его искал, да и форумчане просили.

0

6

Nani Ruh

это не скрипт, это css  http://i.smiles2k.net/aiwan_smiles/wink.gif

0

7

Герда
да мне всё равно  http://i.smiles2k.net/aiwan_smiles/tongue.gif
так, а теперь вопросы и проблемы. Как убрать вот эти полосы? С размерами картинок всё нормально вроде...

0

8

тьфу, блин, чтож не отредактировать сообщение-то? вот скрин:
http://s56.radikal.ru/i153/1105/88/d8b7fe2518c8t.jpg http://i.smiles2k.net/aiwan_smiles/smile3.gif

+1

9

Nani Ruh

попробуй добавить:

<style>
#pun {
border: 0px;
}
</style>

0

10

Герда
всё равно не фурычит  http://i.smiles2k.net/aiwan_smiles/cray.gif

0