Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Среда, 13.12.2017
Главная » Справочник CSS3


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


Всего материалов в каталоге: 204
Показано материалов: 1-10
Страницы: 1 2 3 ... 20 21 »

Процентная запись чаще всего применяется для указания заведомо не известных значений. Это более гибкий подход в тех местах где могут произойти изменения нарушающие нормальную работу тех или иных элементов. Дело в том что абсолютные числовые значения не имеют свойства переорентировать изменения в разрешении и хотя бы в этом процентная запись может быть очень полезной. Возьмём к примеру фон сайта,если указать фиксированные числовые значения которые будут адекватно смотрется на вашем мониторе,то это небудет говорить о том что у всех именно такое разрешение экрана монитора,не говоря уже о нестандартных медиа устройствах. Так же полезно применять проценты там где просходят наследования элементами значений указанных родительскому элементу,сопоставляемые значения в процентах помогут избежать непредвиденных встречных и противоположных результатов. Как ни крути без возможности применения процентной записи было бы намного сложнее проанализировать гипотетический результат тех или иных событий. Поэтому если у Вас есть выбор в применении постоянных значений или процентных,советую выбирать процентные,запас перед неизвестностью не должен навредить. Желаю удачи!

Типы значений | Просмотров: 502 | Добавил: IZOTOP | Дата: 03.04.2012 | Комментарии (0)


Варианты цветовых типов применяемых вебмастером

► Кроссбраузерные названия цветов

Кроссбраузерные цвета имеют в общем много названий. Словосочетания названий могут дополнятся числовыми параметрами,создающими оттенок основному цвету. Стандартные,кроссбраузерные цвета включают названия - aqua (голубой),black (черный),blue (синий),fuchsia (розовый),grey(серый),green (зеленый),lime (салатный),maroon (малиновый),navy (темно-синий),olive (оливковый),purple (сиреневый),red (красный),silver (светло-серый),teal (бирюзовый),white (белый) и yellow (желтый). Остальные цвета имеют более расширенное представление о цвете,для указания в шрифтах не советовал бы использовать подобный тип значений ( кроме стандартных ).

► Шестнадцатеричные коды цветов HEX

Шестнадцатеричные цвета составляются после символа ( # ) и включают в себя шестизначный набор цифр или трёхзначный ( сокращённый ),например чёрный ( #000000 ) - ( #000 ). Шестизначный цвет это скомпонованая палитра распределяющаяся на три основных цвета #RRGGBB,где RR (красный),GG (зеленый) и BB (голубой). Можно применять и буквенные значения,аналогично после символа ( # ),например белый ( #FFFFFF ) - ( #FFF ) . Трёхзначный цвет так же включает в себя три основных цвета #RGB,где R (красный),G (зеленый) и B (голубой). Понять распределение цветовой палитры можно на глаз,по имеющемуся коду,например возьмём любой код ( #250000 ),даже не прибегая к поиску в таблице можно понять что число указывается в зоне красного диапазона ( red red | green green | blue blue),тоесть в первой двойке имеющей отношение к красному цвету. Именно таким образом и формируется цветовая гамма,это самый распространённый способ установить значение цвета,такие значения будут понятны любому браузеру.

► RGB коды цветов

RGB цвета указываются в формате rgb(красный,зеленый,голубой),при этом к каждому отдельному цвету могут применятсья от одного до трёх значений с минимальным значением 0 и максимальным трёхзначным числом 255,например rgb(0,11,222). Можно указать значения в процентном соотношении,порядок написания аналогичный,но со знаком ( % ),например rgb(0%,10%,100%) где 100% значение будет равно 255. Таким способом можно указать до 16 000 000 цветов ( 255х255х255 ),такой способ установки цветовой палитры будет понятен всем распространённым браузерам

► RGBA коды цветов

RGBA это расширенный способ указать цветовую палитру цветового типа RGB,с дополнительной возможностью указания плотности видимого цвета. Это происходит за счёт добавления параметра A ( альфа ) предназначенного для установки прозрачности цветовой гамме. Способ записи аналогичен типу RGB,с добавлением параметра для A ( алфа ) в пределах от 0.0 до 1.0,где значение 0.0 будет устанавливать полную прозрачность цвету. Вот пример использования полной плотности цвета,без эффекта прозрачности rgba(0,11,222,1.0),для предыдущих типов цветов можно так же создать эффект прозрачности применяя свойство CSS opacityДовольно полезное свойство,не забудьте посмотреть!. Подобный тип указанного цвета будет поддерживатся только обновлёнными браузерами,я имею в виду старых ослов и певцов,а в общем можно смело применять.

► HSL коды цветов

Этот тип цветовых значений предназначен для установки тональности цвета,имеет название от слов hue ( тон ),saturation ( насыщенность ) и lightness ( яркость ). Процесс установки аналогичен последовательности самого названия и имеет схожесть с типами RGB и RGBA,прописывается как и они hsl(тон,насыщенность,яркость). Для установки тона используется значения в градусах угла цветового круга ( от 0 до 360 ),для насыщенности следует использовать процентную запись,как и для указания яркости.Выглядит сама запись вот так hsl(180,50%,100%),и Вы можете посмотреть на действие этого цветового типа нажав кнопку Rainbow на этой странице.

► HSLA коды цветов

Аналогичен типу HSL  с дополнительной возможностью указания плотности видимого цвета как в RGBA. Запись производится по тому же принципу и выглядит так hsla(тон,насыщенность,яркость,плотность) - hsla(180,50%,100%,1.0).

Типы значений | Просмотров: 3843 | Добавил: IZOTOP | Дата: 21.05.2012 | Комментарии (0)

Псевдокласс :active устанавливает стиль ссылке при нажатии на него курсором мышки.Существует строгий порядок установки подобных псевдоклассов для ссылок,придерживаться последовательности стоит только при условии наличия других псевдоклассов.Но это имеет отношение только к ссылкам,для остальных комбинаций соблюдение последовательности не актуально.
Порядок последовательности.
a:link {
Свойство ( а ).
}
a:visited {
Свойство ( а ).
}
a:hover {
Свойство ( а ).
}
a:focus {
Свойство ( а ).
}
a:active {
Свойство ( а ).
}
Псевдокласс применим к ссылкам,создан в версии CSS1 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 1422 | Добавил: IZOTOP | Дата: 30.05.2012 | Комментарии (0)

Псевдоэлемент :after генерирует заранее установленный в свойстве  content и добавляет его в конец элемента. При этом генерируемым может быть любой элемент ( кроме форм ),например картинка. Свойство применимо ко всем элементам ( кроме элементов форм ),создано в версии CSS2 но проходит валидацию согласно версии CSS3.

Псевдоэлементы | Просмотров: 1229 | Добавил: IZOTOP | Дата: 07.04.2012 | Комментарии (0)

Псевдоэлемент :before генерирует заранее установленный в свойстве  content и добавляет его в начало элемента.При этом генерируемым может быть любой элемент ( кроме форм ),например картинка.Свойство применимо ко всем элементам ( кроме элементов форм ),создано в версии CSS2 но проходит валидацию согласно версии CSS3.

Псевдоэлементы | Просмотров: 925 | Добавил: IZOTOP | Дата: 07.04.2012 | Комментарии (0)

Псевдокласс :checked устанавливает стиль элемента для последующей активации. Активируются переключатели ( checkbox ) или флажки ( radio ),переключение происходит с помощью атрибута :checked,тегов <input> и <option> или самим пользователем. На момент создания статьи псевдокласс работал только в браузере Opera. Свойство применимо к элементам управления тегов <input> и <option>,создано в версии CSS3 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 1328 | Добавил: IZOTOP | Дата: 31.05.2012 | Комментарии (0)

Псевдокласс :default устанавливает стиль элемента выделенного по умолчанию,но находящегося в группе аналогичных элементов.Таким образом можно выделить отдельный элемент придав ему отдельный вид с применением свойств CSS.Псевдокласс применим к элементам управления,создан в версии CSS3 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 1130 | Добавил: IZOTOP | Дата: 31.05.2012 | Комментарии (0)

Псевдокласс :disabled устанавливает стиль неактивных элементов управления запрещая добавление в форму ввода. Такие формы не могут получить фокус,быть нажатыми или активированы,а в текстовых полях нельзя вписывать текстовые знаки. Применяя этот псевдокласс можно изменить стиль неактивного поля. Псевдокласс применим к элементам управления,создан в версии CSS3 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 1625 | Добавил: IZOTOP | Дата: 31.05.2012 | Комментарии (0)

Псевдокласс :empty устанавливает стиль пустому элементу,без пробелов (   ) и символов,например ( ® ).Свойствами CSS можно создать любое заполнение пустому элементу,всё зависит от Вашего воображения,вместо пустующего элемента появится заменяемый стиль подготовленный свойствами.Псевдокласс применим к элементам управления,создан в версии CSS3 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 785 | Добавил: IZOTOP | Дата: 31.05.2012 | Комментарии (0)

Псевдокласс :enabled устанавливает стиль активных элементов управления,например форму ввода. Применяя этот псевдокласс можно изменить стиль активного поля применяя свойства CSS.На неактивные формы,находящиеся под воздействием псевдокласса :disabled,заданный стиль не будет действовать. Псевдокласс применим к элементам управления,создан в версии CSS3 и проходит валидацию согласно версии CSS3.

Псевдоклассы | Просмотров: 868 | Добавил: IZOTOP | Дата: 31.05.2012 | Комментарии (0)



Русские шрифты