CSS3

Очень простой и наглядный визуальный генератор кнопок.
Бегунки, выбор шрифта для текста на кнопке. Все на одной странице.
В конце жмем на кнопку и получаем код.

Жмем Generate и получаем случайный фон из разноцветных треугольничков. Цвета подобраны в тон. Можно прокрутить ниже и уже выбрать самому, задать размер и взять код нашего фона.

Круглые яркие кнопки с текстом.
При нажатии, кнопка увеличивается не сдвигая ничего рядом, начинает крутится, меняя текст.

На сайте показан анимированный загрузчик, выполненный в CSS3.
Жмем стрелочку и смотрим другой и т.д.
Понравилось? Жмем Sourse и берем код.

Валидатор от W3C (The World Wide Web Consortium - Консорциум Всемирной паутины).
Есть русская версия. Но объяснения по ошибкам на английском.

Раз уж здесь стоит валидатор, значит, если ваш CSS устроит его, то он будет корректно работать везде. Сайт то официальный.

Я было сгенерировал большой файл CSS, а там какая-то ошибка. В таком большом файле искать ошибку довольно сложно. Дал ссылку этому сервису и он сразу показал мне что делать.

Можно дать ссылку на файл, закачать файл CSS или ввести в форму код.

Он немного подумает и расскажет, что тут не так.

Перетаскиваем в поле картинки или выбираем нажав кнопку Choose files.
В результате получаем картинку спрайта в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

CSS3 редактор.
Иначе и не скажешь, просто заходим и ощущение, что это не простенький генератор, который делает пару функций, а попали на что-то типа Фотошопа.
Все интуитивно понятно. В конце внизу жмем и получаем код HTML и CSS.

Сервис от Projectfondue, генератор CSS спрайтов.

Как это работает

1. Собираем требуемые картинки в папку (ну так лично мне удобнее).
2. Жмем на сайте синенький пункт меню CLEAR, чтобы убрать существующие там иконки для примера.
3. Настраиваем:
   • Вы задаете расстояние между картинок, и до края. Они предложили сразу 50, но это много. Ноль не прошел, потом мы выставили 1, что вполне достаточно.
   • Можно задать цвет фона или сделать прозрачным.
   • Имена переменным будут присвоены по именам картинок в архиве. В форме вы можете добавить ко всем именам префикс или суффикс, ну или оставить поле пустым.
   • Можно сделать картинку компактной, вертикальной или горизонтальной.
   • Картинку можно встроить конвертируя в Base64 в CSS файл.
4. Перетаскиваем файлы из нашей папки в это поле.
5. Как только ваши иконки стали четкими, а не бледными и мерцающими, как вначале, спрайт готов.
6. Жмем зеленую кнопку Download, а затем появившиеся зеленые кнопки Spritesheet и Stylesheet.
7. Полученный текст корректируем под наш сайт.

Офлайн

Вывод, станица не требует перезагрузки, значит используется Javascript, то есть обработка процесса происходит в браузере, интернет не требуется. Важно, чтобы была загружена страница.

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

Перетаскиваем в поле картинки или выбираем нажав кнопку Выбрать.
Ждем пока они неспешно подгрузятся.
Тут мы ждем еще добавить или удалить ненужные.
Затем жмем создать и скачиваем архив: папка с нашими картинками (непонятно зачем), спрайт в .PNG и CSS код, который очевидно стоит самому допилить, потому что вы получите для каждой картинки отдельно полный код.

Очень простой и наглядный визуальный генератор кнопок.
Все на одном месте, не надо собирать код по нескольким генераторам.
Код генерируется вместе с картинкой, отдельно CSS и ссылка.

Генератор стилей CSS3.

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

Визуальный генератор загрузчика на CSS3, без картинки.
Построен на бегунках.
Это круговые палочки. Настраиваем длину, вплоть до квадратиков или закруглим углы и до кружочков.
Настраиваем количество и скорость вращения. Прозрачность и направление движения.
Код забираем прокрутив страницу.

Хороший генератор CSS3.
По сути тут несколько генератор, один работает с углами, другой с градиентом, тени для текста и тени для блока, анимация, ротация.
В целом больше функций, чем у большинства генераторов.
В конце код можно забрать или скачать.

Коллекция анимированных SVG иконок.
Можно зайти, попробовать, что произойдет при нажатии.
Жмем Back to the Codrops Article и скачиваем код сразу на все. Ищем свое.

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

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