Галерея шаблонов CSS3
Галерея шаблонов CSS3- Щелкните шаблон, чтобы развернуть его
- Текстовые поля доступны для редактирования
- Поддержка браузера
- Отправить новый
- Репозиторий Github
- Наслаждайтесь!
name»/>Поддержка браузера
Сами шаблоны должны работать на Firefox 3.6+ , Chrome , Safari 5.
1 , Opera 11.10+ и IE10+ .
Однако ограничения реализации могут привести к тому, что некоторые из них не будут отображаться правильно даже в этих браузерах (например, на момент написания Gecko довольно глючил с радиальными градиентами).
Кроме того, эта галерея не будет работать в Firefox 3.6 и IE10, хотя они и поддерживают градиенты, из-за ограничений JavaScript.
Руководство по отправке
Если у вас есть новый шаблон для отправки, отправьте запрос на извлечение. Однако, пожалуйста, имейте в виду, что я не могу принять все материалы, извините за это. Для принятия шаблона учитываются следующие факторы (в порядке убывания важности):
- Представляет ли он новую технику?
- Стоит ли эффект от количества градиентов и цветовых остановок? Весь смысл этих шаблонов в том, чтобы ускорить загрузку страниц за счет уменьшения размера файла и HTTP-запросов без нечитаемой тарабарщины, которую URI данных добавляют в наши таблицы стилей.
Например, если вашему шаблону требуется код размером 2 КБ (который становится 10 КБ при использовании в рабочей среде из-за всех префиксов), то это не очень полезно, за исключением того, что служит доказательством концепции. - Насколько распространен шаблон?
- Красиво выглядит?
Например, если вашему шаблону требуется код размером 2 КБ (который становится 10 КБ при использовании в рабочей среде из-за всех префиксов), то это не очень полезно, за исключением того, что служит доказательством концепции.В чем разница между ними?
Основное различие между свойством CSS background и background-color заключается в том, что свойство background является сокращением всех свойств фона. С другой стороны, свойство background-color является подмножеством свойства background, используемого для установки цвета фона. Более того, наши опытные разработчики сравнивают и описывают различия между этими двумя свойствами в этой статье.
Итак, продолжайте читать, чтобы получить подробные сведения о использование, различия и преимущества использования этих двух свойств.
Содержание
- Сравнительная таблица
- Свойство CSS Background и свойство Background-color
- – Сравнение функциональности
- – Сравнение диапазона операций Самый простой в использовании?
- — Разница в коде между свойством CSS Background и Background-color
- – Разница в значениях
- Свойство фона CSS: индивидуальный просмотр
- – Характеристики свойства:
- Свойство цвета фона: индивидуальный просмотр
- – Характеристики свойства:
- – Определение цвета фона по ключевому слову Значение цвета
- — определите цвет фона, используя шестнадцатеричное значение
- — определите цвет, используя значение «RGB»
- — определите цвет, используя значение «HSL»
- Заключение
Сравнительная таблица
| Свойство фона CSS | Свойство цвета фона | |
| Функциональность | Задает все свойства фона | Задает цвет фона |
| Рабочий диапазон | Работает для всех свойств фона | Используется только для цвета фона |
| Сброс | Сбрасывает все предыдущие настройки фона | Сбрасывает только предыдущий цвет фона |
| Комплект | Суперсет | Подмножество |
| Простой в использовании уровень | Легко, когда вам нужно установить цвет вместе с другими настройками | Легко, когда нужно задать единственный цвет фона |
| Код | Сократите код при использовании многих свойств фона | Следуйте стандартному синтаксису, как и другие свойства фона |
Свойство CSS Background и свойство Background-color
Основное различие между background и Background-color CSS заключается в том, что свойство фона CSS является сокращенным свойством всех свойств фона.
В то же время background-color — это свойство, которое используется для указания цвета фона.
– Сравнение функциональности
Победитель: свойство CSS background
Свойства CSS background и background-color различаются по своей функциональности. Поскольку свойство фона CSS является сокращенным свойством, его можно использовать для любого свойства. Таким образом, вы можете назначать свойства background-color, background-image, background-attachment, background-repeat и background-position при использовании сокращения фона.
Для сравнения, свойство background-color используется только для указания цвета фона, когда оно не влияет ни на какие другие характеристики элемента, кроме его цвета.
– Сравнение диапазона операций
Победитель: свойство фона CSS
Поскольку свойство background является сокращенным свойством , имеет широкий диапазон операций. Вы можете настроить таргетинг на любую функцию элемента, такую как вложение, повторяющееся поведение, позиционирование элемента, добавление изображения в фоновом режиме и цвет фона.
Свойство CSS background-color является просто простым свойством и может быть нацелено только на одну функцию элемента, которая является цветом.
— Сравнение возможности сброса свойств CSS Background и Background-color
Победитель: свойство CSS background-color
В CSS значение будет изменено или сброшено , когда вы назначите какое-либо конкретное значение и повторите это свойство для того же элемент с другим значением. Если вы использовали свойства фона, такие как background-position или background-image , а затем используйте сокращенное свойство background, сокращенное свойство сбросит предыдущее значение.
Если сначала использовать сокращенное свойство background, а затем использовать свойство background-color, будет изменен только цвет, а остальное, определенное вами в сокращенном свойстве , останется без изменений . Поэтому, если вам нужно установить только цвет фона, избегайте использования сокращенного свойства background и используйте свойство background-color.
– Какой проще всего использовать?
Победитель: свойство фона CSS
Оба свойства очень важны для использования , но свойство фона CSS имеет небольшое преимущество, когда дело доходит до использования всех свойств фона. Фон CSS позволяет вам установить другие свойства вместе с цветом фона ; таким образом, становится легко назначать все функции с помощью одного свойства.
Однако, когда вы пишете длинный код и на веб-странице много элементов, или если вы не привыкли к , использующий стенографию, , использующий сокращенный фон, может создать для вас загадку. В этом случае вы можете использовать все свойства по отдельности .
— Разница в коде между свойствами CSS Background и Background-color
Победитель: свойство CSS background
Оба эти свойства отличаются с точки зрения кода. Кроме того, оба следуют стандартному синтаксису кода , но поскольку свойство фона CSS является сокращенным свойством, вы можете добавить более одного значения для более чем одного свойства фона, поэтому оно становится немного длиннее в одной строке.
В то время как, с другой стороны, свойство background-color принимает только одно значение для этого цвета фона, поэтому здесь код становится немного короче.
Пример кодирования свойства CSS Background
| body{ background: red url(«image_cat.png») no-repeat right top; } |
Здесь мы использовали сокращенную форму и добавили значения для цвета фона. Мы добавили URL-адрес фонового изображения, а затем установили поведение повтора; затем ключевые слова «право» и «вверху» являются значениями свойств позиции, которые определяют, где должно быть размещено изображение.
В результате вы увидите, что изображение появится в правом верхнем углу, на заднем плане появится красный цвет, и изображение не будет повторяться, так как мы установили значение «не повторять». ”
Мы также можем добавить несколько других значений свойств в стандартном порядке.
Обратите внимание, что все трюки со свойствами фона
Пример кодирования свойства цвета фона CSS
| h2{ Цвет фона: синий; } |
Здесь мы использовали значение ключевого слова «синий» для синего цвета, и в результате мы получили синий фон. Вы также можете использовать любой другой метод для определения синего цвета, используя шестнадцатеричный код или значение «RGBA» .
Однако, если вы не используете несколько фоновых свойств в сокращении, длина кода и синтаксис свойств почти одинаковы .
– Разница в значениях
Победитель: CSS background-color
Оба свойства сильно различаются по значениям . Свойство фона CSS принимает много значений для многих свойств, поэтому значение зависит от того, какое свойство вы используете.
Убедитесь, что вы присваиваете значения в правильном порядке; в противном случае вы можете не получить ожидаемых результатов. Порядок следующий:
- Цвет фона
- Фоновое изображение
- Повтор фона
- Фон-приложение
- Фоновое положение
Хотя свойство background-color принимает различные значения для указания цвета, вы можете назначить цвет, используя любое значение ключевого слова, шестнадцатеричное, RGBA или HSLA.
Свойство фона CSS: индивидуальный просмотр
— Характеристики свойства:
- Сокращенное свойство
- Используется для назначения нескольких свойств фона
- Принимает различные значения для различных свойств
- Сокращает код
- Необходимо соблюдать правильный порядок
- Значения зависят от используемых свойств
При работе со стилем фона в CSS, вы используете разные свойства для каждой функции фона. Назначать разные свойства для каждой функции — это старомодно, отнимает много времени и непрофессионально, особенно при отдельном использовании большинства свойств фона.
Сокращенное свойство фона — это очень простое в использовании свойство CSS, которое позволяет назначать несколько свойств в одном свойстве. Вы также можете использовать свойство background в любом конкретном элементе, таком как элемент
или элемент
Наконец, свойство фона CSS — это лучшее решение для сокращения кода и облегчения понимания и устранения неполадок. Вы можете использовать сокращенное свойство, даже если вам не нужно использовать все свойства фона. Итак, если вы просто хотите добавить цвет фона CSS и изображение , вы также можете использовать сокращенное свойство.
Однако при присвоении значений вы все равно должны следовать правильному стандартному порядку.
Свойство цвета фона: индивидуальный обзор
— Характеристики свойства:
- Подмножество сокращенного свойства фона
- Используется для назначения цвета фона
- Принимает значения в ключевых словах, RGBA, HSLA или шестнадцатеричной форме
Цвет различных элементов определяется по-разному . Для цвета текста используется свойство цвета CSS, тогда как для цвета границы используется свойство цвета границы. Для сравнения, свойство background-color используется в основном для определения CSS для цвета фона. Свойство background-color позволяет вам , чтобы установить цвет фона без участия в каких-либо других функциях фона элемента.
У вас есть несколько вариантов назначения значения; вы можете установить значение ключевого слова , шестнадцатеричный формат, формат RGBA или HSLA.
– Определите цвет фона, используя значение цвета ключевого слова
Если вам нужен только фиксированный известный цвет, вы можете использовать значение ключевого слова и сэкономить время.
Для значения ключевого слова вы можете использовать цветовые ключевые слова, такие как «красный», «зеленый» или «синий».
Пример кодирования присвоения значения ключевого слова свойству цвета фона
| h2{ Background-color: blue; } |
— определение цвета фона с использованием шестнадцатеричного значения
Вы также можете назначать значения в шестнадцатеричном формате , используя «#», за которым следует шестизначный код. Кроме того, каждый цвет имеет определенный шестнадцатеричный код, который мы можем использовать здесь. Первые две цифры шестнадцатеричного кода представляют красный цвет, третье и четвертое значения представляют зеленый цвет, а последние две цифры представляют синий цвет. Вот как разные цвета формируются разными значениями красного, зеленого и синего на экране.
Если вы не хотите использовать этот шестизначный шестнадцатеричный код, вы можете сократить код до трехзначного кода.
Первая цифра обозначает красный цвет; вторая цифра представляет зеленый цвет, а последняя цифра представляет синий цвет. Если вы используете значение «0» для всех цветов, в результате вы получите черный цвет, а если вы используете самое высокое значение для всех цветов, то есть «f», вы получите белый цвет фона. .
Пример кодирования присвоения шестнадцатеричного значения свойству цвета фона
| h2{ Цвет фона: #A020F0; } |
— определение цвета с помощью значения «RGB»
Третий способ определения цвета — использовать значение RGB , где нам нужно определить значения красного, зеленого и синего по их конкретный номер. Вы также можете добавить четвертое значение альфы, которое означает прозрачность. Наименьшее значение — «0», а максимальное значение — «255» для каждого цвета; если вы используете «0» или самые высокие значения для всех трех цветов, вы получите черный или белый фон соответственно.
Вы также можете использовать альфа-значение от «0» до «1», где «1» вернет чистый цвет фона.
Пример кодирования присвоения значения RGB свойству цвета фона
| h2{ Background-color: #800080; } |
– Определение цвета с помощью значения «HSL»
Вы можете использовать значение «HSL» или «HSLA» , определив значения цвета красного, синего и зеленого для той же цели. В «HSL» вы можете указать только значения красного, зеленого и синего цветов, а в значении «HSLA» вы можете определить значение цветов, используя альфа-значения.
Заключение
Основное различие между свойством background и background-color CSS заключается в том, что свойство background является сокращенным свойством, используемым для одновременного назначения нескольких свойств фона. В то же время свойство background-color является подмножеством сокращенного свойства background, используемого для указания цвета фона.