Несмотря на то, что CSS3 переопределил внешний вид Интернета с помощью функций, упрощающих создание визуально привлекательных сайтов, изучение всех свойств и синтаксиса может занять много времени. Если вы хотите быстро начать использовать новые функции, используйте генератор CSS3.
Введение в CSS3
Прежде чем приступить к использованию генератора кода, полезно получить общее представление о новых функциях. Один из самых простых способов получить это — онлайн-уроки.
- W3Schools : это основной источник всего контента, связанного со стандартами Интернета, и CSS3 не является исключением. Сайты предлагают уроки по всем свойствам CSS, но выделяют курс по CSS3. В их курсе из 11 уроков вы узнаете о переходах, анимации, текстовых эффектах, нескольких столбцах и многом другом. Каждый урок включает примеры, и вы можете использовать их инструмент Try-It Editor, чтобы манипулировать кодом, чтобы убедиться, что вы понимаете концепцию.
- CSS3.info : Этот простой в использовании сайт содержит ссылки на все новые функции и свойства CSS3. Когда вы щелкаете имя атрибута, вы перенаправляетесь на страницу, которая даст вам определение свойства, пример, фрагмент кода и объяснение того, как работает функция. Это отличный источник информации, и, как и W3Schools, он бесплатный и позволяет вам учиться в своем собственном темпе.
Типы генераторов
Когда вы будете готовы поэкспериментировать с CSS3, генераторы станут отличным средством обучения, поскольку они позволяют создавать код, манипулировать им и выяснять, как он работает в «реальном мире». В широком смысле генераторы CSS3 делятся на две категории: те, которые предназначены для конкретной задачи, и те, которые пытаются охватить все новые стандарты.
Генераторы текста и кнопок
- 3D CSS Text : Этот инструмент в основном использует функцию text-shadow CSS3 для создания 3D-эффекта с текстом. Генератор прост в использовании: просто выберите шрифт, цвет и цвет фона, чтобы начать. Однако настоящее веселье начинается, когда вы начинаете регулировать угол, градиент высоты и непрозрачность тени, и вы видите, как оживает 3D-эффект. Закончив настройку, скопируйте код, расположенный под инструментом, и вставьте его в свою таблицу стилей.
- CSS-трюки : этот удобный инструмент позволяет быстро создавать кнопки прокручивающегося типа за несколько простых шагов. Используя сочетание ползунков, цветовых колес и раскрывающегося меню для параметров текста, вы можете создавать кнопки, которые меняют цвет при наведении на них указателя мыши, имеют сплошной или градиентный фон и настраивают округлость углов кнопок. Единственным недостатком этого инструмента является ограниченное количество доступных шрифтов .
- Лучший генератор кнопок CSS : этот генератор поставляется с хорошим набором настраиваемых шаблонов кнопок. После выбора шаблона вы выбираете настройки шрифта из семи вариантов и меняете цвета, что характерно для большинства создателей кнопок. Однако с помощью этого генератора вы можете включить параметры CSS3, такие как тень блока для кнопки, тень текста для шрифта или настроить округлость углов кнопки.
Генераторы для анимации и перехода
- CSS 3D Transforms : это отличный инструмент для создания и понимания того, как работает функция перехода. С этим генератором вы можете контролировать практически каждый аспект творческого процесса. Вы можете изменить размер текста и изменить форму и размер поля, но действительно интересным аспектом является изучение того, как вращать, наклонять и анимировать свое творение. Код отображается внутри генератора прямо под вашим объектом — просто скопируйте и вставьте его в свою таблицу стилей.
- CSS Animate : это то же самое, что и CSS 3D Transforms, но приятной дополнительной функцией этого генератора являются встроенные примеры. Вы нажимаете на пример, который хотите попробовать, а затем нажимаете кнопку воспроизведения, чтобы увидеть, как он работает на мониторе. Настройте его реакцию, щелкнув ключевой кадр в верхней правой части страницы и отрегулировав соответствующую стрелку в рабочей области. Код таблицы стилей создается непосредственно под вашей анимацией.
- Animate.CSS : Хотя этот вариант не так удобен для пользователя, как два других (поскольку вы не можете просмотреть готовый проект), в нем есть много готовых примеров. Вы можете щелкнуть каждый пример, чтобы понять, какой будет анимация, а затем щелкнуть пользовательскую сборку, чтобы создать свой собственный. Страница пользовательской сборки представляет собой ряд флажков, которые можно установить или снять, в зависимости от типа анимации, которую вы хотите создать. Вы также можете установить продолжительность анимации на этой странице. После того, как вы создали анимацию, нажмите кнопку «Создать» внизу страницы, и таблица стилей будет автоматически создана для вас.
Генераторы для всех функций
- CSS 3.0 Maker : простая навигация в верхней части этого генератора позволяет выбрать любую из функций CSS3, которую вы хотите использовать. После того, как вы выбрали функцию, внесите изменения в свое творение, используя инструменты, расположенные в левой части страницы. После того, как вы закончите свой дизайн, скопируйте код, расположенный в правой части страницы, и вставьте его на свой сайт.
- CSS3Gen : возможно, это самый визуально привлекательный из генераторов CSS3. Инструмент организован таким образом, что позволяет одним щелчком мыши получить доступ к любой из его основных функций CSS3. После того, как вы выберете функцию, которую хотите создать, появится инструмент, позволяющий внести необходимые корректировки. Кодирование отображается прямо под вашей работой. Единственным недостатком сайта является то, что после нескольких движений он отображает всплывающее окно с просьбой «лайкнуть» приложение на Facebook.
- CSS3 Playground : первая привлекательная особенность этого генератора — возможность перемещать ваше творение внутри рабочей области. Слева от холста находятся все функции и инструменты для их настройки. Кодирование таблицы стилей отображается под рабочей областью. Генератор также выводит интересный дополнительный блок информации — текст, показывающий, как стиль читается браузером.
Использование фрагментов кода
Несмотря на то, что генераторы являются отличными инструментами, иногда все, что вам действительно нужно, это кодирование без всей работы. Если вы окажетесь в такой ситуации, вы можете использовать фрагменты CSS . Если вы потратите время на изучение и манипулирование фрагментами, вы все равно сможете получить хорошее представление о том, для чего предназначена функция и как она работает.
Проверка браузера
Поскольку не все новые стандарты были приняты основными браузерами, рекомендуется еще раз проверить, работает ли конкретная функция в браузере, установленном на вашем компьютере, прежде чем приступать к созданию и тестированию кода.