Tamaz
Умник
10 правил CSS Каждый веб-дизайнер должен знать
Через опыт работы в качестве веб-дизайнеров мы запоминаем все виды синтаксиса кода, хаки и фрагменты. С помощью CSS, в частности, есть ряд правил и заявлений, которые могут реально помочь превратить ваш веб-сайт дизайн и открывают новые возможности, когда по сравнению со старыми методами. Это сообщение раундов до 10 заявлений и советы, что каждый веб-дизайнер должен иметь в наличии в их арсенале CSS.
@ СМИ
@ СМИ экран (максимальная ширина: 960px) {
}
@ СМИ правило, не только позволяет определить стиль для вашего веб-страницы при печати. В эти дни запросы средств массовой информации более связанных с созданием реагировать или адаптивный дизайн сайта. Создание запроса с использованием средств массовой информации такие свойства, как мин ширина настроить ваш дизайн в соответствии с размером окна пользователя.
фон размера
тело {
Справочная информация: URL (image.jpg) не повторять;
фон, размер: 100%;
}
Прохладным и чрезвычайно полезным свойством CSS3, которая теперь получила всестороннюю поддержку браузера фоне размеров . В один момент сделать фон масштаба размер родительской требуется некоторое право возиться, но теперь только одной строки кода, все, что вам нужно. Используйте этот фрагмент для достижения все более популярным полный экран фоновое изображение эффекта.
@ Шрифт лицу
@ Шрифт лицу {
семейство шрифтов: Blackout;
SRC: URL ("активов ДОНБАССИНВЕСТГРУП / blackout.ttf») формата ("TrueType");
}
Один CSS3 свойство, которое действительно помогло преобразовать веб в последние годы, @ шрифт лицу . Ранее мы были все виды ограничений в отношении шрифта лицензирования, которая сдерживает это свойство, но теперь есть ведро нагрузок шрифты на выбор и широкий спектр услуг, которые основываются на основных @ шрифт лицу кода. Использование @ шрифт лицу вручную с помощью свободно доступных шрифтов, или с помощью сторонних сервисов, таких как Google или WebFonts Typekit.
разницы: 0 авто;
# {Контейнер
разницы: 0 авто;
}
Умный разницы: 0 авто; декларация является одним из первых фрагментов вы узнаете при получении в борьбу с CSS. Удивительно, что никаких конкретных заявление для центрирования блока элемент всегда добавляется к CSS спецификации, но вместо того, чтобы мы все привыкли полагаться на обойти край авто. Добавить разницы: 0 авто; в центре любого блока элемента в его родителя.
переполнения: скрытый
. Контейнер {
переполнения: скрытый;
}
Там все виды листового очистки растворов и хаки там, но чистый и простой способ очистить поплавки, чтобы просто использовать переполнение: скрытый; заявление на упаковке вашей плавающих элементов. Это не добавляет нагрузки мусор ваш стиль и получает работу в 90% ситуаций.
. Clearfix
. Clearfix: после {
содержания: ";".
Дисплей: блок;
ясно: то и другое;
видимость: скрытый;
высота строки: 0;
Высота: 0;
}
Для тех ситуаций, поплавок поляну, где переполнение: скрытый, не работает, лучшей альтернативой является метод Clearfix. Помните, что вы не должны использовать название Clearfix класса, ваши могут быть ориентированы на этот код, чтобы любой из ваших HTML-элементов в отдельности.
Цвет: RGBA ();
. BTN {
Цвет: RGBA (0,0,0,0.5);
}
PNG изображений, используемых для, необходимые для создания любых эффектов прозрачности в веб-дизайне, а благодаря другому прогресс в транспарентности CSS теперь могут быть созданы с помощью цветовой режим RGBA. Использование RGBa вместо шестнадцатеричное значение позволяет выбрать цвет, используя красный, зеленый и синий каналы, а также создание альфа-уровня, таких как 0.5 для 50% непрозрачности.
вход [тип = "текст"]
вход [тип = "текст"] {
Ширина: 200px;
}
Вход [тип = "текст"] Выбор и современные селекторы в целом большое за то ваш CSS навыков от промежуточных до эксперта. Селекторы атрибутов, в частности, являются чрезвычайно полезными для укладки элементов без необходимости в дополнительных классов. Что об использовании селекторов атрибутов целевой версии отправки на вход элемента или добавить значок, чтобы внешние ссылки?
transform: rotate (30deg);
. Название {
transform: rotate (30deg);
}
Если я честно говоря я еще найти применение CSS свойства преобразования в реальных проектов, но и умение манипулировать HTML-элементы, без Javascript так здорово это делает эти свойства стоит помнить! Комбинат свойствами преобразования с переходами CSS, чтобы создать некоторые забавные эффекты анимации.
{контура: нет;}
{контура: нет;}
Ничто не может испортить дизайн более чем видеть огромный пунктирная линия охватывает всей страницы при нажатии на ссылку элемента. {Контура: нет;} заявление будет удалить, но для доступа, не забудьте также добавить : внимание государства к ссылкам. Если вы не прочь увидеть пунктирную границу, но жаль, что это не охватывают весь экран, просто добавьте {переполнение: авто;} с таблицей стилей, а не.
вот orginal link
Через опыт работы в качестве веб-дизайнеров мы запоминаем все виды синтаксиса кода, хаки и фрагменты. С помощью CSS, в частности, есть ряд правил и заявлений, которые могут реально помочь превратить ваш веб-сайт дизайн и открывают новые возможности, когда по сравнению со старыми методами. Это сообщение раундов до 10 заявлений и советы, что каждый веб-дизайнер должен иметь в наличии в их арсенале CSS.
@ СМИ
@ СМИ экран (максимальная ширина: 960px) {
}
@ СМИ правило, не только позволяет определить стиль для вашего веб-страницы при печати. В эти дни запросы средств массовой информации более связанных с созданием реагировать или адаптивный дизайн сайта. Создание запроса с использованием средств массовой информации такие свойства, как мин ширина настроить ваш дизайн в соответствии с размером окна пользователя.
фон размера
тело {
Справочная информация: URL (image.jpg) не повторять;
фон, размер: 100%;
}
Прохладным и чрезвычайно полезным свойством CSS3, которая теперь получила всестороннюю поддержку браузера фоне размеров . В один момент сделать фон масштаба размер родительской требуется некоторое право возиться, но теперь только одной строки кода, все, что вам нужно. Используйте этот фрагмент для достижения все более популярным полный экран фоновое изображение эффекта.
@ Шрифт лицу
@ Шрифт лицу {
семейство шрифтов: Blackout;
SRC: URL ("активов ДОНБАССИНВЕСТГРУП / blackout.ttf») формата ("TrueType");
}
Один CSS3 свойство, которое действительно помогло преобразовать веб в последние годы, @ шрифт лицу . Ранее мы были все виды ограничений в отношении шрифта лицензирования, которая сдерживает это свойство, но теперь есть ведро нагрузок шрифты на выбор и широкий спектр услуг, которые основываются на основных @ шрифт лицу кода. Использование @ шрифт лицу вручную с помощью свободно доступных шрифтов, или с помощью сторонних сервисов, таких как Google или WebFonts Typekit.
разницы: 0 авто;
# {Контейнер
разницы: 0 авто;
}
Умный разницы: 0 авто; декларация является одним из первых фрагментов вы узнаете при получении в борьбу с CSS. Удивительно, что никаких конкретных заявление для центрирования блока элемент всегда добавляется к CSS спецификации, но вместо того, чтобы мы все привыкли полагаться на обойти край авто. Добавить разницы: 0 авто; в центре любого блока элемента в его родителя.
переполнения: скрытый
. Контейнер {
переполнения: скрытый;
}
Там все виды листового очистки растворов и хаки там, но чистый и простой способ очистить поплавки, чтобы просто использовать переполнение: скрытый; заявление на упаковке вашей плавающих элементов. Это не добавляет нагрузки мусор ваш стиль и получает работу в 90% ситуаций.
. Clearfix
. Clearfix: после {
содержания: ";".
Дисплей: блок;
ясно: то и другое;
видимость: скрытый;
высота строки: 0;
Высота: 0;
}
Для тех ситуаций, поплавок поляну, где переполнение: скрытый, не работает, лучшей альтернативой является метод Clearfix. Помните, что вы не должны использовать название Clearfix класса, ваши могут быть ориентированы на этот код, чтобы любой из ваших HTML-элементов в отдельности.
Цвет: RGBA ();
. BTN {
Цвет: RGBA (0,0,0,0.5);
}
PNG изображений, используемых для, необходимые для создания любых эффектов прозрачности в веб-дизайне, а благодаря другому прогресс в транспарентности CSS теперь могут быть созданы с помощью цветовой режим RGBA. Использование RGBa вместо шестнадцатеричное значение позволяет выбрать цвет, используя красный, зеленый и синий каналы, а также создание альфа-уровня, таких как 0.5 для 50% непрозрачности.
вход [тип = "текст"]
вход [тип = "текст"] {
Ширина: 200px;
}
Вход [тип = "текст"] Выбор и современные селекторы в целом большое за то ваш CSS навыков от промежуточных до эксперта. Селекторы атрибутов, в частности, являются чрезвычайно полезными для укладки элементов без необходимости в дополнительных классов. Что об использовании селекторов атрибутов целевой версии отправки на вход элемента или добавить значок, чтобы внешние ссылки?
transform: rotate (30deg);
. Название {
transform: rotate (30deg);
}
Если я честно говоря я еще найти применение CSS свойства преобразования в реальных проектов, но и умение манипулировать HTML-элементы, без Javascript так здорово это делает эти свойства стоит помнить! Комбинат свойствами преобразования с переходами CSS, чтобы создать некоторые забавные эффекты анимации.
{контура: нет;}
{контура: нет;}
Ничто не может испортить дизайн более чем видеть огромный пунктирная линия охватывает всей страницы при нажатии на ссылку элемента. {Контура: нет;} заявление будет удалить, но для доступа, не забудьте также добавить : внимание государства к ссылкам. Если вы не прочь увидеть пунктирную границу, но жаль, что это не охватывают весь экран, просто добавьте {переполнение: авто;} с таблицей стилей, а не.
вот orginal link
Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!
Последнее редактирование: