У Вас отключён javascript.
В данном режиме, отображение ресурса
браузером не поддерживается
24. 05. 12. Так как заказ стилей закрыт, вы можете оставить ваши заявки в теме Стили на очередь!, которые будут выполняться по мере возможностей дизайнеров!
22. 07. 12. Наконец у нас новый дизайн! В котором как вы успели заметить - учтены ваши пожелания! Ваши отзывы и предложения вы можете высказать в ДАННОЙ ТЕМЕ

Калейдоскоп аватар

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

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


Вы здесь » Калейдоскоп аватар » АРХИВ ТЕМ » Группа 1. ➠ "CSS специализация"


Группа 1. ➠ "CSS специализация"

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

1

Обязательно к прочтению для тех кто хочет научиться создавать стили!!!
Конечно желательно иметь под рукой тестовик, чтобы потом наглядно мы смогли все изменить!
Начнем мы с Цвета style_cs.css!
Ищем это окошко в Администрировании - Стиль, не забываем ставить галочку на "Да" - что мы хотим использовать свой стиль!

Первый пункт, он отвечает за фон, цвет фона, будет ли он фиксированным или неподвижным

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

} 

#pun { 
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}

Разберем по порядку

Код:
html, body {
background: #цвет фона url(адрес картинки);
background-repeat: no-repeat;
background-position: top center;
background-attachment: no-fixed;

}

Пункт отвечает за основной цвет фона и за фоновую картинку (если ты будешь делать шапку совмещенную с фоном)
background: #цвет url(адрес картинки); - вместо "цвет" вставляешь цвет фона, вместо адрес - http изображения! Если у тебя не будет картинки, а просто цвет, убираешь пункт - url(адрес картинки)!
background-repeat:
no-repeat; - фон не повторяется
repeat; - фон будет повторяться.
background-position:позиция форума
top center; - по центру
left - слева
right - справа
background-attachment: - будет ли фон фиксированным или прокручивающимся
no-fixed; - прокручивающийся (для совмещеных шапок с фоном)
fixed; - фиксированный фон


Код:
#pun { 
background-color: none;
background-image: url(адрес картинки);
background-repeat: repeat;
}

.lastedit {
display: none;
}

пункт отвечает за фон форумных таблиц
background-color: - цвет фона
none; - без цвета
#0000 - цвет фона
background-image: если вместо цвета хотим видеть картинку
url(адрес картинки); - вставляем адрес картинки
background-repeat: - отвечает, будет ли наш фон повторяться(для изображения) или не будет
repeat; - повторяется
no-repeat; - не повторяется

0

2

Дорогие мои, создаем себе тестовики у кого их еще нет!!!
Переносим в Администрирование-Стиль все то что у вас есть на ваших существующих форумах - на основе этого и будем менять, создавать новый диз!!!

Параллельно с уроками по CSS мы будем изучать и создавать элементы из которых будет состоять наш диз!
Если у вас возникнут какие-либо вопросы - смело задаем по ходу дела!

0

3

Tunguska
я всё поняла и сделала новый тестовик. что дальше?

0

4

Tunguska
Я тоже создала тестовик и перенесла тот стиль, что у меня стоит на своем форуме.
Ждем дальнейших указаний)

0

5

Katerinka
Основа у тебя есть (которую мы делали), теперь продолжай по уроку)))


Итак друзья, перейдем к созданию того что мы будем вставлять в тот пункт который описан выше!!!
Рассмотрим создание шапки слитной с фоном (на данный момент это актуально)!
Она состоит из:
- цвета фона;
- фоновой картинки;
- шапки;
- фона таблиц.
Для начала обдумайте на какую тему будет создан диз, продумайте цветовую гамму, подберите качественные исходники желательно с большим разрешением (это важно)!!

Открыть|Закрыть

Шаг 1
Открываем в  PS новый документ размером 1400*800 (приблизительный стандарт, почему 800 в высоту - потому что снизу у нас будет однотонный цвет и этой высоты на данный момент нам достаточно)!
Заливаем цветом соответствующим цветовой гамме нашего диза, у меня это черный!
Одну картинку я выбрала основной, она будет как-бы фоном для всех остальных, переносим на наш слой с заливкой - трансформируем по размеру (CTRL+T)
Открываем все остальные картинки,  располагаем на фоне как мы хотим их видеть в последующем!
Не поленитесь подгонять, трансформировать, крутить!
Не забывайте о том, что у нас еще будет фон форумных таблиц - который, если вы расположите картинки на всю высоту их закроет!!
Не забывайте об этом и располагайте изображения в верхней части нашего фона (ну те которые вы не хотите чтобы скрылись)
http://savepic.org/1662458m.png
Теперь начнем обрабатывать. Вы можете использовать любые методы объединения картинок (мы уже это проходили, поэтому повторяться не буду). Мне подходит просто изменение "Режима наложения слоя", я изменила его на ,Перекрытие - для картинок 2,3 первую оставила не тронутой!
http://savepic.org/1679869m.png
Как видите у нас видны края изображения! Берем мягкий ластик большого диаметра (200пикс) и стираем все лишнее.
Вот теперь все гармонично
http://savepic.org/1647101m.png
Можем сохранить нашу фонову картинку в PNG!
Шаг 2.
Создаем фон таблиц!
Берем инструмент "Прямоугольное выделение" и задаем фиксированный размер
(ширину - какой ширины у вас будет форум, высоту - ставим высоту нашего файла)
http://imagepost.ru/images/2/01/2011-04-19_15.21.23.png
Для того чтобы расположить объект по центру  - нам нужно включить "Линейки" (Просмотр (View) > Линейки(Rulers), или просто сочетание клавиш Ctrl+R).
Слева и сверху у нас появятся направляющие, также появится пунктирная направляющая - двигающаяся вместе с курсором!
Маленько математики -если ширина фона 1400, а таблиц 900 то
1400-900=500 и делим на 2!
Устанавливаем направляющую на 250 и кликаем, у нас получается выделенная область четко по центру и нужного нам размера!
http://imagepost.ru/thumbs/2/01/2011-04-19_15.43.34.png
Создаем новый слой и заливаем цветом каким мы хотим видеть форумные таблицы, снимаем выделение (CTRL+D)
Шаг 3.
Теперь нам нужно сделать верхнюю окантовку форума, пример ниже
http://imagepost.ru/thumbs/2/01/2011-04-19_15.51.55.png
Опять берем "Прямоугольное выделение", выставляем размер: ширину оставляем, а вот высоту ставим какая вам нужна шапка - я выставила 550 пикс!
Опять кликаем (ориентируясь на направляющие) на 250 !
Дублируем выделенную область CTRL+J!
Отключим глазик у фона таблиц!
Вот что мы имеем
http://imagepost.ru/thumbs/2/01/2011-04-19_15.59.15.png
Теперь делаем с этим слоем все что хотим:
- можем убрать верхушку мягким ластиком большого диаметра (получится фон переходящий в шапку)
http://imagepost.ru/thumbs/2/01/2011-04-19_16.02.19.png
- можем взять ластик любой формы и сделать узорное окончание, добавив кисть
http://imagepost.ru/thumbs/2/01/2011-04-19_16.09.13.png
- можете сделать рваные края или просто скруглить уголки! Все зависит от вашей фантазии!
Теперь такой нюансик, если мы включим фон таблиц мы увидим такую картину
http://imagepost.ru/thumbs/2/01/2011-04-19_17.16.36.png
Для этого мы и создаем отдельно шапочку!
Отключим видимость двух верхних слоев.
Объединяем слои с картинками (только если вы не собираетесь больше ничего менять!
http://imagepost.ru/thumbs/2/01/2011-04-19_17.20.25.png
Создаем выделение размером нашей шапочки (900*550, как мы делали до этого) и дублируем выделенную область со слоя который мы только что объединили
http://imagepost.ru/images/2/01/2011-04-19_17.31.48.png
Переносим этот слой под слой с окантовкой
http://imagepost.ru/images/2/01/2011-04-19_17.33.30.png
Включаем видимость всех слоев, результат
http://imagepost.ru/thumbs/2/01/2011-04-19_17.34.54.png
Теперь напишем название форума (если надо), не забываем что шрифт должен соответствовать картинке (ну и цвет тоже конечно)
http://imagepost.ru/thumbs/2/01/2011-04-19_17.52.09.png
Создаем выделение слоя с шапочкой, идем Изображение-Кропировать
и сохраняем нашу шапку в PNG!
Редактировать-Шаг назад, все вернулось на свои места!!!
Сохраните вашу работу, на всякий случай в PSD-формате!
Теперь у нас есть :
- фоновая картинка
- цвет фона
- шапка
- цвет форумных таблиц!

Приступайте, после того как вы все это сделаете - мы вставим все это в наш создающийся диз!
Если что-то не понятно, ждем ваших вопросов!

0

6

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

Основа у тебя есть (которую мы делали), теперь продолжай по уроку)))

А у меня она нормальная теперь? Я ж там вчера переделывала..

0

7

Tunguska
у меня такой простенький дизайн бо блин я в них не шарю
http://testovick.rusff.ru/

0

8

Такс, ну вот мой фон и шапка.
http://imagepost.ru/images/k/xw/kxwtfnyjngoxhoytugygicamdozqjy.png
http://imagepost.ru/images/l/bz/lbziyqvntwcshuyldypqtrxjhwxdzf.png
Знала б ты какими способами я это делала, наверное, убила бы сразу)))

0

9

Heart
Проявляй фантазию!!! Текстурки разные применяй!
Итак по шапке:
http://imagepost.ru/thumbs/h/yf/hyfth_2_1.jpg
Цвета мне нравятся.
Шрифт тоже хорошо и стиль шрифта подобрала в тему!
Что исправить:
- очень большое и пустое расстояние между названием форума и меню (форум и т.д), его надо сократитьь;
-переходы под цифрами 1 некрасиво смотрятся, как будто немного обрублено и размыто, попробуй более мягкий переход сделать;
- Альба (цифра 2) - плохого качества - мутная, из-за этого портится все впечатление;
- под цифрой 3, тоже переходы резковаты! Возьми ластик диаметром где-то 250 пикс с прозрачностью 50% и пройдись еще раз снизу!


Katerinka
http://imagepost.ru/thumbs/k/xw/kxwtfnyjngoxhoytugygicamdozq_1.png
Зай, можно было переход фоновой картинки пониже опустить (поменьше стереть), а окантовку фона таблиц наоборот повыше чтоб был (побольше оставить) - чтобы они небыли почти на одном уровне!
Название покрупнее и более яркое, а то его почти незаметно.



Теперь вставляем все это в пункт который описан выше в окошко Цвета style_cs.css

0

10

Tunguska
хорошо я те завтра тогда кину итог мучений)

0

11

Я переделала и поставила, но шапку не знаю как ставить, поэтому у меня там такая фигня)
http://imagepost.ru/thumbs/y/wn/ywnhslhxweilarwvnthgquqbkytpxc.png

0

12

Продолжим!!!
По ходу дела меняйте и добавляйте в свой диз, при это показывайте и задавайте вопросы если нужно!
Далее идет пункт отвечающий за : цвет колонок сообщений и тем в форумной таблице, статистика, приветствие, меню форума.

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: transparent;
  color: #58564d;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: transparent; - фон будет прозрачным
color: # - цвет текста в этих пунктах


Пункт отвечающий за: цвет фона и шрифта в колонке названий форумов и последних сообщений

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: none;
  color: #58564d;
  font-style: Times;
}

background-color: # - цвет этих ячеек
background-image: url(http://Адрес картинки); - можно также вставить картинку
background-color: none; - фон будет прозрачным
color: # - цвет текста в этих пунктах
font-style: Times; - можно изменить шрифт текста (если он не меняется, этот пункт можно убрать)


Пункт отвечающий за категории форума

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
background-image: url();
  color: #dadcdb;
  font-weight: normal;
font-style: normal;
text-align:center;
font-size: 15px;
  font-family: "Arial";
height: 40px;
padding-top: 25px!important;
  }

background-color: - цвет фона категорий
background-image: url(); - можно вставить картинку
color: - цвет шрифта
font-weight: -начертание шрифта:
normal - нормальный
bold - жирный
font-style: - стиль шрифта:
normal -нормальный
italic - курсив
text-align: - расположение текста:
center, left, right - по центру, слева, справа
font-size: - размер шрифта в пикселях
font-family: - можно менять шрифт текста
height: - высота ячейки
padding-top: 25px!important; - выравнивания текста в зависимости от высоты ячейки

Завтра расскажу как создать картинки в категории!

0

13

Tunguska
http://testovick.rusff.ru/
ну вот как диз смотрится
фон:
http://imagepost.ru/images/d/cg/dcg_2.jpg
шапка:
http://savepic.org/1654931.jpg
я тут коне-что изменила

0

14

Ань, а как шапку поставить или нам еще ее не трогать? А то я мучаю-мучаю, а оно что-то вообще ничего не получается с той шапкой... [взломанный сайт]

0

15

Katerinka
шапка - следующий пункт!)))


Создаем картинку в категории
Откройте одновременно в другом окне ваш PSD с фоном и шапкой, чтобы наши цвета везде совпадали - будем с этого исходника брать пипеткой соответствующие цвета!
Создаем новый документ: в ширину - размером нашего форума, в высоту - на свое усмотрение.
У меня например 900*80.
Объясню как создать разделенные блоки.
Заливаем наш слой цветом !ОСНОВНОГО ФОНА! - у меня это черный.
Берем инструмент "прямоугольная область" задаем фиксированный размер 900 * высота примерно 30пикс.
Создаем новый слой, кликаем - создаем выделенную область и заливаем цветом ФОРУМНЫХ ТАБЛИЦ (пипеткой кликаем на нашем ПСД файле, чтобы взять нужный цвет).
Скругляем уголки
http://imagepost.ru/thumbs/2/01/2011-04-20_21.10.31.png
Дублируем этот слой (CTRL+J),
Идем "Правка-Трансформировать-Отразить по вертикали" и перетаскиваем к нижнему краю
http://imagepost.ru/thumbs/2/01/2011-04-20_21.13.47.png
Применяем кисть, текстуру или все что хотите, можете оставить просто в таком виде!
Я решила добавить кисть
http://imagepost.ru/thumbs/2/01/2011-04-20_21.18.42.png
Вставляем нашу картинку в /* CS1.3 */ - background-image: url(адрес картинки);
Если нам нужно изменить высоту в большую или меньшую сторону, меняем значение в пункте height:



Пункт отвечающий за шапку форума

Открыть|Закрыть

/* CS1.4 */
#pun-title, #pun-title .container {
  background-image: url(http://savepic.net/761240.png);
  margin:  0 auto 0 auto;
  width: 900px;
  background-color: transparent;
  }
 
.punbb .modmenu .container {
  margin:  0 auto 0 auto;
  width: 900px;
  background-color: transparent;
  }

background-image: - изображение
width: - ширина шапки
background-color: - цвет фона:
если шапка картинкой пишем transparent


Если меняешь размер шапки, одновременно нужно меня высоту и ширину в верхнем окне  Структура style.css
Цифры выделенные красным, меняем на свои значения ширины

/* A5.1 */
#pun {
  margin: auto;
  width : 900px;
  padding: 0px 0px 0px 0px;
  border: none;
  border-top: none;
}

/* A5.2 */
.punbb {
  float: center;
  width: 900px;
  height: auto;
  }

Здесь цифры отвечающие за высоту

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #50210d;
  width: 498px;
  margin: 5px 0;
  }

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 498px;
  margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: 498px;
  width: 100%;

0

16

Ну, вот что у меня получилось в конце концов. http://testrainbow.mybb.ru/
Только я не смогла поменять высоту, там в самом последнем о шапке. Я найти этого не могу...

0

17

Katerinka
Умничка, только вот видишь край не сошелся?
http://imagepost.ru/thumbs/2/01/2011-04-21_18.59.03.png
И цвет шрифта в категориях потемней - чтобы не сливался)

0

18

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

Умничка, только вот видишь край не сошелся?

Я тоже посмотрела на это, но подумала, что то мне уже кажется)

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

И цвет шрифта в категориях потемней - чтобы не сливался)

Это тоже пробовала, но в конце-концов плюнула и пошла спать)) Сейчас пойду переделывать..)

0

19

Вот переделала. Только мне кажется, что оно все равно немного заметно. http://testrainbow.mybb.ru/

0

20

Tunguska
ну вот как у меня вышло
http://testovick.rusff.ru/

Отредактировано Heart (2011-04-22 16:03:22)

0


Вы здесь » Калейдоскоп аватар » АРХИВ ТЕМ » Группа 1. ➠ "CSS специализация"