Разбор CSS3

Поделиться122-08-2012 05:25:19

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

С переходом на более новую версию Каскадной Таблицы Стелей, появились множество инноваций, которые могут помочь приукрасить ваш стиль. Ниже предложены свойства, которые можно задавать любым кодам CSS3, дабы получить различные эффекты.
Границы
Закругленные углы

Код:

.border_rounded {
background-color: #ddccb5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #897048;
padding: 10px;
width: 310px;
}

DEMO

Градиентные границы

Код:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

DEMO

Тени

Код:

.border_shadow {
-webkit-box-shadow: 10px 10px 5px #888;
padding: 5px 5px 5px 15px;
width: 300px;
}

DEMO

Изображения на границах

Код:

.border_image {
-webkit-border-image: url(border.png) 27 27 27 27 round round;
}

DEMO

Тень блока

Код:

span {
   box-shadow: 0.2em 0.2em 5px #CCC;
}

DEMO

Текстовые эффекты в CSS3
Тень от тектса

Код:

.text_shadow {
color: #897048;
background-color: #fff;
text-shadow: 2px 2px 2px #ddccb5;
font-size: 15px;
}

DEMO

Использование своих шрифтов

Код:

@font-face {
font-family: 'Имя вашего шрифта';
src: url('font.ttf');
}

Отредактировано winter ` (22-08-2012 05:25:38)

+3

Поделиться222-08-2012 05:40:16

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Анимация в CSS3

Еще одна замечательная возможность третьей версии CSS - анимация. Здесь довольно много нюансов, поэтому начнем с самого начала.

Самый простой вид анимации - "transition", то бишь "переход". Суть его состоит в том, что можно заставить элемент, при смене какого-то css-свойства, меняться не мгновенно, а в соответствии с какой-то временной функцией.

"transitions" определяются следующими свойствами:

• transition-property - Какое свойство элемента мы анимируем - например, "opacity".
• transition-duration - Время, которое будет продолжаться анимация.
• transition-timing-function - Функция от времени, определяющая типа изменения - например: liner, ease-in, и т.п.
• transition - Возможна короткая запись трех предыдущих свойств.

Вот простой пример:

Код:

div {
   opacity: 1;
   -webkit-transition: opacity 1s linear;
}
div:hover {
   opacity: 0;
}

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

Моменты, важные для понимания "переходов":

• Transitions - это неявные анимации. Скрипты и остальные стили могут быть обычными, и анимирование будет происходить неявно во время смены значений у свойств.
• Эти свойства абсолютно не критичны. Браузеры, не поддерживающие их, просто не покажут анимацию - остальной код и стили будет работать как обычно.

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

transition-property
доступные значения: none | all | <property>
по умолчанию (в случае отсутствия значения) стоит: all
описание: Указывает какое css-свойство подвергается анимации. Если указано значение 'none' - анимации не будет. Значение 'all' значит, что каждое свойство будет анимировано, если такое возможно. В остальных случаях значением будет определенное css-свойство.
transition-duration
доступные значения: <time>
по умолчанию (в случае отсутствия значения) стоит: 0
описание: Определяет продолжительность (время) изменения значения свойства.
transition-timing-function
доступные значения: default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)

Пояснения

• linear - Линейная функция возвращает неизмененное полученное значение.
• default - Функция по умолчанию эквивалентна cubic-bezier(0.25, 0.1, 0.25, 1.0)
• ease-in - cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - cubic-bezier(0.42, 0, 0.58, 1.0)
• cubic-bezier - Задает кривую Безье третьего порядка с точками P0 и P3 в (0,0) и (1,1) соответственно. Четыре параметра задают координаты точек P1 и P2 в таком порядке: (x1, y1, x2, y2).

по умолчанию (в случае отсутствия значения) стоит: default

+2

Поделиться322-08-2012 14:36:55

Автор: супернатурал.
Blood Like Lemonade
Зарегистрирован: 13-04-2011
Приглашений: 0
Сообщений: 8181
Уважение: +3233
Позитив: +482
Пол: Мужской
Провел на форуме:
1 месяц 24 дня
Последний визит:
25-05-2020 00:36:15

Мне кажется, что это лучше в ВСЕ ДЛЯ ДИЗАЙНА

0

Поделиться422-08-2012 15:26:10

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

супернатурал.
Извиняюсь, не обратил внимание на это)
Если перенесёте, буду вам благодарен)

0

Поделиться526-09-2012 23:40:36

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Декорация текста (простая)
Собственно, благодаря CSS вы можете сделать довольно-таки легкие украшения для текстов вашего форума. К примеру, если в строке ссылки при наведении (a:hover) задать text-decoration: underline;, то ссылка будет подчёркиваться при наведении. Собственно, самые распространённые декорации текста:

blink — устанавливает мигающий текст;
line-through — создает перечеркнутый текст;
overline — линия проходит над текстом;
underline — устанавливает подчеркнутый текст;
none — отменяет все заданные по умолчанию эффекты;
inherit — значение наследуется у родителя.

0

Поделиться625-06-2014 17:16:54

Автор: Mixer
Даже судьба за то , что буду Королём ада навечно!
Зарегистрирован: 23-07-2013
Приглашений: 0
Сообщений: 85
Уважение: +25
Позитив: +5
Пол: Мужской
Провел на форуме:
2 дня 6 часов
Последний визит:
13-08-2014 15:45:40

morgan
Я, честно, туплю. Куда вставлять это? Объясните пожалуйста.

0

Поделиться725-06-2014 19:02:31

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Mixer
Что именно "это"?)

0

Поделиться825-06-2014 19:03:43

Автор: Mixer
Даже судьба за то , что буду Королём ада навечно!
Зарегистрирован: 23-07-2013
Приглашений: 0
Сообщений: 85
Уважение: +25
Позитив: +5
Пол: Мужской
Провел на форуме:
2 дня 6 часов
Последний визит:
13-08-2014 15:45:40

morgan

Код:

.border_gradient {
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
padding: 5px 5px 5px 15px;
width: 300px;
}

0

Поделиться925-06-2014 19:05:02

Автор: morgan
главный по горшкам
Зарегистрирован: 27-07-2012
Приглашений: 0
Сообщений: 4222
Уважение: +1775
Позитив: +1413
Пол: Мужской
Провел на форуме:
2 месяца 25 дней
Последний визит:
12-03-2019 02:02:54

Mixer
Тому селектору, который вам нужен. Скажем, для цитаты это будет так:

Код:

.punbb .quote-box{
border: 8px solid #000;
-moz-border-bottom-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-top-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-left-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;
-moz-border-right-colors: #897048 #917953 #a18a66 #b6a488 #c5b59b #d4c5ae #e2d6c4 #eae1d2;}

0