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)

Сообщений 21 страница 30 из 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

21

то что нужно, спасибо

0

22

DollyWolf aka Ю-ю
уже все поняли... :suspicious:

0

23

У меня получилось, но на других разрешениях не идёт.

0

24

Маи Хоши
дай ссыль, давай разберемся.

0

25

Как избавится от лишней картинки:
http://afcn.anihub.ru/

0

26

Скажите пожалуйста, а есть где-нибудь более подробный урок? Я-то в скриптах и дизайне ничерта не понимаю, а научиться хочется. Из упрямства. *обиженно тычет в шапку*

0

27

Pokemoshka написал(а):

Как избавится от лишней картинки:
http://afcn.anihub.ru/

я, кажись, припоздала...
проблема уже решена?

Джанга
подробный урок может появиться только здесь и не без вашей помощи.
задавайте вопросы - они помогут дополнить статью. (например про границы мы дописывали в статью после того, как нас тут спросили как их убрать)
телепатически мы не сможем узнать, что мы забыли упомянуть. http://i.smiles2k.net/aiwan_smiles/smile3.gif

0

28

Герда
Так. Тогда у меня подоспела первая пара вопросов, явно не совсем того характера х)
Можно ли под цифрами 1 и 3 делать не заливку, а замостить эти области текстурой или картинкой?
Область под цифрой 2 должна включать в себя фон таблицы (3), как в этом уроке?

0

29

Герда
нет проблема есть до сих пор.

0

30

Джанга
Простите за флуд, но мне кажется вы имеете ввиду что-бы выложили урок рисования шапки переходящей в фон?

+1