Кот

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

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

Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.

Заострённые уши.

Страница:   1 2 3 4 5 6  

Сообщений 11 страница 20 из 59

1

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36

http://uploads.ru/i/k/s/p/kspng.png

Привет Лиза, очень приятно с тобой познакомиться. И надеюсь, что научу тебя многому. Я Тая, рада, что ты выбрала именно меня в учителя.

Твой тестовик - http://in.9bb.ru
Связь с тобой - скайп - lizziespring

И так приступим.
Чему именно хочешь научиться, какая структура дизайна, может примеры дизайнов?
Если уже что-то знаешь рассказывай.)

Дневник:


Урок №1 - 5-
Урок №2 - 5+
Урок №3 -


Был забыт сменен фон шапки и меню форума.
Работа выполнена идеально.

Отредактировано slastnicova (2012-08-29 16:08:08)

0

11

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36

завтра напишу новый.

0

12

  • Автор: Ветвь
  • эльфёныш
  • Ветвь
  • Зарегистрирован: 2012-07-09
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: +0
  • Позитив: +2
  • Пол: Женский
  • Возраст: 28 [1996-03-05]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-09-28 18:02:34

Спасибо) Вы так быстро всё проверяете^^

0

13

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36

Следующий блок CS2 Border colours, он отвечает за границы на форуме.
По скольку их в последнее время никто не использует, то мы ставим во всех селекторам к свойству таблиц значение transparent - невидимость.
Если необходимо прописать границы для цитат и кодов, то пункт

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #D1D1D1 #FFFFFF #FFFFFF #D1D1D1;
  }

изменяем на:

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border: 1px solid #D1D1D1;
  border-radius: 10px 0px 10px 0px;
-moz-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;
border-shadow: 0px 0px 5px #FFFFFF;
-moz-border-shadow: 0px 0px 5px #FFFFFF;
-webkit-border-shadow: 0px 0px 5px #FFFFFF;
  }

Разберем этот код:

border: 1px solid #D1D1D1;

толщина границы, стиль границы (сплошная), цвет границы.

border-radius: 10px 0px 10px 0px;
-moz-border-radius: 10px 0px 10px 0px;
-webkit-border-radius: 10px 0px 10px 0px;

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

border-shadow: 0px 0px 5px #FFFFFF;
-moz-border-shadow: 0px 0px 5px #FFFFFF;
-webkit-border-shadow: 0px 0px 5px #FFFFFF;

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

Задание:
Убрать границы форума.
Границы для цитат и кодов:
Сделать в 1px двойной линией любого цвета - верхнюю, нижнюю и правую.
Левую границу - в 5px сплошной любого цвета.
Скругленность сделать вернего правого и нижнего правого угла на 15px.
Тень по желанию.

Отредактировано slastnicova (2012-08-28 09:34:16)

0

14

  • Автор: Ветвь
  • эльфёныш
  • Ветвь
  • Зарегистрирован: 2012-07-09
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: +0
  • Позитив: +2
  • Пол: Женский
  • Возраст: 28 [1996-03-05]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-09-28 18:02:34

http://htmlbook.ru/css/border-image - Насчет обтягивания чего-то рамкой. Наверное, примерно это я имела ввиду http://uploads.ru/i/J/I/W/JIW1b.png

Опять у меня всё работает не так, как должно.
Что я прописала:

Код:
/* Цитаты и коды*/
/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-top: 1px double #ffffff;
  border-right: 1px double #ffffff;
  border-bottom: 1px double #ffffff;
  border-left: 5px solid #ff0000;
  border-radius: 0px 15px 15px 0px;
-moz-border-radius: 0px 15px 15px 0px;
-webkit-border-radius: 0px 15px 15px 0px;
border-shadow: 2px 1px 3px #0000FF;
-moz-border-shadow: 2px 1px 3px #0000FF;
-webkit-border-shadow: 2px 1px 3px #0000FF;
  }

А на самом деле не меняются тип линий, толщина. И тени не видно.

0

15

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36
Ветвь написал(а):

тени не видно.

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

box-shadow: 0 0 10px #000000;
  -moz-box-shadow: 0 0 10px #000000;
  -webkit-box-shadow: 0 0 10px #000000;

Ветвь написал(а):

не меняются тип линий, толщина.

попробуй прописать так:

border-style: double double double solid;
border-width: 1px 1px 1px 5 px;

и цвета аналогично:

border-color: верхняя, правая, нижняя, левая;

Отредактировано slastnicova (2012-08-29 15:40:03)

0

16

  • Автор: Ветвь
  • эльфёныш
  • Ветвь
  • Зарегистрирован: 2012-07-09
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: +0
  • Позитив: +2
  • Пол: Женский
  • Возраст: 28 [1996-03-05]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-09-28 18:02:34

Тень появилась, остальное не работает.

Код:
/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ffffff #ffffff #ffffff #ff0000;
  border-style: double double double solid;
  border-width: 1px 1px 1px 5 px;
  border-radius: 0px 15px 15px 0px;
  -moz-border-radius: 0px 15px 15px 0px;
  -webkit-border-radius: 0px 15px 15px 0px;
  box-shadow: 1px 1px 10px #0000ff; 
  -moz-box-shadow: 1px 1px 10px #0000ff; 
  -webkit-box-shadow: 1px 1px 10px #0000ff;
  }

Отредактировано Ветвь (2012-08-29 15:44:54)

0

17

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36
Ветвь написал(а):

т

и снова моя вина, совсем забыла.
в первом окне найди это:

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 1px;
  }

и замени на это:

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  }

0

18

  • Автор: Ветвь
  • эльфёныш
  • Ветвь
  • Зарегистрирован: 2012-07-09
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: +0
  • Позитив: +2
  • Пол: Женский
  • Возраст: 28 [1996-03-05]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-09-28 18:02:34

Готово http://uploads.ru/i/L/R/O/LROtq.gif Спасибо.

0

19

  • Автор: slastnicova
  • я странное слово-мама
  • slastnicova
  • Откуда: Москва
  • Зарегистрирован: 2012-06-02
  • Приглашений: 0
  • Сообщений: 496
  • Уважение: +31
  • Позитив: +3
  • Пол: Женский
  • Возраст: 31 [1993-10-20]
  • Провел на форуме:
    4 дня 21 час
  • Последний визит:
    2015-06-13 07:49:36

Следующий блок CS3 Links, этот блок отвечает за ссылки на форуме.

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #993366;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #FF3300

отвечает за все ссылки на форуме без наведения. Прописывать оба значения одним цветом.

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #FF33FF;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

все ссылки на форуме при наведении

/* CS3.3 */
#pun-navlinks a {
  color: #CC00CC;
    border-bottom: 0px none #000;
  text-decoration: none;

  }

главное меню без наведения.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #FF33FF;
  font-weight: normal;
font-style: normal;
  border-bottom: 0px none #000;
  text-decoration: none;

  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  color: #FF33FF;
  }

главное меню при наведении, прописываем оба значения одним цветом.

Так же моно прописать тень ссылкам, для это добавляем к нужному селектору следующее:

text-shadow: 0px 0px 0px #cccccc;

смещение по горизонтали, смещение по вертикали, размытие и цвет тени.

Задание:
Поменять цвета ссылок на форуме, добавить тень со смещениями 1 и 1 без размытия белого цвета.
Поменять цвет ссылок меню с тенью при наведении без смещений с размытием 3 белого цвета.

И заодно сразу разберем иконки сообщений. Это сразу делаем, как дополнительное задание.
Следующий блок CS4 Post status icons, он отвечает за иконки новых/старых/выжных/закрытых сообщений/тем.
Его мы заменяем на следующее:

div.icon {border-color: transparent}
       tr.iredirect div.icon {border-color: transparent}
       div.inew {border-color: transparent}

       Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.inew Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.isticky Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }
       TR.iclosed Div.icon {
              background-image : url(КАРТИНКА);
              background-repeat: no-repeat;
              }

0

20

  • Автор: Ветвь
  • эльфёныш
  • Ветвь
  • Зарегистрирован: 2012-07-09
  • Приглашений: 0
  • Сообщений: 50
  • Уважение: +0
  • Позитив: +2
  • Пол: Женский
  • Возраст: 28 [1996-03-05]
  • Провел на форуме:
    1 день 3 часа
  • Последний визит:
    2012-09-28 18:02:34
slastnicova написал(а):

Поменять цвета ссылок на форуме, добавить тень со смещениями 1 и 1 без размытия белого цвета.
Поменять цвет ссылок меню с тенью при наведении без смещений с размытием 3 белого цвета.

Тень к обычным ссылкам делать при наведении, в обычном положении, или и так, и так? Я пока что её везде сделала.
А ещё с иконками что-то у меня неправильно получается. Отображается только последняя картинка.

Код:
/* CS4 Post status icons
 -------------------------------------------------------------*/
div.icon {border-color: transparent}
       tr.iredirect div.icon {border-color: transparent}
       div.inew {border-color: transparent}
       Div.icon {
              background-image : url(http://s1.uploads.ru/i/19Dry.jpg);
              background-repeat: no-repeat;
              }
       TR.inew Div.icon {
              background-image : url(http://s1.uploads.ru/i/AsC1Q.jpg);
              background-repeat: no-repeat;
              }
       TR.isticky Div.icon {
              background-image : url(http://s1.uploads.ru/i/1ZMXs.jpg);
              background-repeat: no-repeat;
              }
       TR.iclosed Div.icon {
              background-image : url(http://s1.uploads.ru/i/Gt5UP.jpg);
              background-repeat: no-repeat;
              }

0

Страница:   1 2 3 4 5 6  

Вы здесь » Кот » Архив обучения от 03.12 » Заострённые уши.

Рейтинг форумов | Создать форум бесплатно