CSS3
Обзор интернета - Lite Веб-мастеру Графика Игры, Спорт Программы Рецепты Время Рождество Библия
Соцаккаунты Контакты Теги Собственники Используются География Приложения

cat_top

CSS3



Онлайн-Генератор Кнопок CSS3 - dbmast.ru/files/buttonmaker/
Очень простой и наглядный визуальный генератор кнопок.
Подробнее

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

Trianglify - qrohlf.com/trianglify/
Жмем Generate и получаем случайный фон из разноцветных треугольничков.
Подробнее

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

Hover.css - ianlunn.github.io/Hover/#effects
Множество плоских кнопок, которые по-разному реагируют на нажатие.
Код берем рядом с название и там ищем свое.
Some Button Styles - codepen.io/blaketarter/pen/JGivD
Простые спокойные плоские кнопки, при наведении цвета становятся чуть ярче или появляется цвет в рамке, где его не было.
Some buttons... a pen by Ottis Kelleghan - codepen.io/cheeriottis/pen/inluv
Клацающие 3D кнопки с текстом.
Animated CSS3 buttons - codepen.io/creotip/pen/cfuAi
Анимированные объемные кнопки, что-то происходит при наведении и что-то при нажатии. Один код на все кнопки.
fade loading - codepen.io/diegopardo/pen/dGlfC
Текст идет волной, почти исчезая и вылазя в 3D.
Русский текст работает корректно.
Предложено 7 букв, лучше ориентировать на это количество, иначе эффект будет уже не тот.
Neat hover animations on buttons - codepen.io/Savantos/pen/mHIpt
Жмем на кнопку, пропадает фон и появляется стрелочка.
CSS3 Animated buttons. a pen by Seth Abbott - codepen.io/sethabbott/pen/FtuLz
Круглый яркие кнопки с текстом.
Подробнее

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

Hover Wipe Buttons - codepen.io/tpalmer75/pen/iImsJ
При наведении фон раздвигается о типу штор.
Pure CSS Loaders kit - codepen.io/viduthalai1947/pen/JkhDK
Представлен ряд оригинальных погрузчиков, рядом берем код сразу на все и ищем свое, как скульптор — удаляя лишнее. :).
Creative CSS3 Button Styles with cool hover effect - codepen.io/WordPressDev/pen/fxyqB
Простые плоские кнопки, при наведении вместо текста вскакивает стрелочка.
Flat UI - designmodo.github.io/Flat-UI/
На страничке стили кнопок, бегунков, шкалы, радио ….
SpinKit - tobiasahlin.com/spinkit/
На сайте показан анимированный загрузчик, выполненный в CSS3.
Подробнее

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

W3C CSS Validation Service - jigsaw.w3.org/css-validator/
CSS3 валидатор.
Подробнее

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

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

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

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

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

CSS Sprites Generator - toptal.com/developers/css/sprite-generat
Генератор CSS спрайтов.
Подробнее

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

EnjoyCSS - enjoycss.com
CSS3 редактор.
Подробнее

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

CSS Sprite Generator - draeton.github.io/stitches/
Генератор CSS спрайтов.
Подробнее

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

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

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

Офлайн

Возникла необходимость сделать 3 спрайта более 100 иконок каждый, но пропал интернет, успел создать только 1 спрайт.
Успел закинуть картинки на 2-й и сразу интернета не стало.
Тем не менее, 2-й спрайт был создан. Результат я благополучно скачал.
Решил попробовать 3-й, самый большой. Ведь страница уже открыта и перезагрузка не требуется, он тоже был создан штатно, то бишь как так и надо.

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

CSS3 Animated Loading Bar - leemunroe.com/css3-animated-loading-bar
Спокойных загрузчик.
Подробнее

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

Генератор CSS спрайтов - inettools.net/image/generator-css-sprayt
Генератор CSS спрайтов.
Подробнее

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

CSS3 Button - css3button.net
Очень простой и наглядный визуальный генератор кнопок.
Подробнее

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

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

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

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

Google Buttons - cssdeck.com/labs/google-buttons-2
Спокойные кнопки для меню, в стиле. Как используются на сервисах Google.
CSS Radio Buttons - cssdeck.com/labs/ldmtsmfk/
Из радио сделано вертикальное меню.
spin.js - spin.js.org
Визуальный генератор загрузчика на CSS3, без картинки.
Подробнее

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

CSSmatic - cssmatic.com
Хороший генератор CSS3.
Подробнее

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

Animated SVG Icons - tympanus.net/Development/AnimatedSVGIcon
Коллекция анимированных SVG иконок.
Подробнее

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

CSSPin - webkul.github.io/csspin/
Коллекция загрузчиков, скачивается вместе и потом выбираем, что нужно.
Elastic SVG Elements - tympanus.net/Development/ElasticSVGEleme
Кнопки на CSS3 при нажать раздуваются или сжимаются, живенький интересный эффект.
Animated Buttons with CSS3 Transitions and Animations - tympanus.net/Tutorials/AnimatedButtons/
Несколько вариантов кнопок, выбираем, что понравилось и берем, не редактор, потом правим сами.
Animate.css - daneden.github.io/animate.css
Скачиваем CSS с разного рода стилями.
Подробнее

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

Button Switches with Checkboxes and CSS3 Fanciness - tympanus.net/Tutorials/CSS3ButtonSwitche
Кнопки-выключатели с графикой, код берем на Back to the Codrops Article, сразу на все.
CSS buttons with pseudo-elements - tympanus.net/Tutorials/CSSButtonsPseudoE
Клацающие 3D кнопки с текстом, код берем на Back to the Codrops Article сразу на все.
Для тех, кто делает сайты - htmlbook.ru
Справочник и самоучитель основы веб-программирования.
Подробнее

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

ПОСТРОИТЕЛЬ САЙТОВ

Templated - templated.co
Коллекция около 1000 бесплатных шаблонов CSS и HTML5.

РАСКРУТКА

HTML5 UP - html5up.net
Адаптивные шаблоны HTML5 и CSS3.

Print Friendly and PDF





ВСЕ ТЕГИ
Связанные темы:
CSS HTML5 HTML JavaScript Веб-мастеру Код Генератор CSS спрайтов Сайты Карта сайта robots.txt Ajax Java HTTPS