Генератор тени – Генератор тени блока CSS box-shadow онлайн бесплатно

Подборка CSS3-генераторов для упрощения фронтэнд-разработки / Habr

CSS3 предоставляет много новых возможностей в мире фронтэнд-разработки. Это действительно великолепная вещь, но иногда трудно вспомнить некоторые параметры, особенно, если вы — веб-дизайнер, а не программист. Вот 10 удивительных CSS3-генераторов, которые помогут вам сэкономить время и силы (картинки кликабельны).

CSS3 Generator

Этот генератор, безусловно, один из моих любимых, так как позволяют создавать более10 различных CSS3-эффектов, таких как закругленные углы, тень для текста, плавные переходы и многое другое.
css3generator.com

CSS Gradient generator

CSS градиенты это круто, но писать их вручную довольно сложно. Этот генератор поможет вам создать идеальный CSS-градиент, без головной боли.
colorzilla.com/gradient-editor

CSS button generator

На мой взгляд, это самый продвинутый CSS3-генератор кнопок, из доступных в Интернете. Настройте параметры, скопируйте сгенерированный код, и все готово!
css3button.net

CSS3Gen

CSS3Gen — хороший генератор, который позволяет вам легко создавать полезные фрагменты CSS3 и копировать их прямо в ваши проекты. CSS3Gen заботится обо всех префиксах для различных браузеров.
css3gen.com

CSS3 Please

CSS3 Please является очень эффективным инструментом для тестирования CSS3-кода: просто измените CSS-стили с помощью редактора, и специальный блок будет мгновенно изменяться, так что вы мгновенно сможете увидеть сделанные вами изменения.
css3please.com

Layer Styles

Если вы знакомы с Photoshop, нет никаких сомнений, что вам понравится Layer Style, генератор CSS3, повторяющий внешний вид популярной программы от Adobe.
layerstyles.org

Border image generator

Как вы можете догадаться, этот инструмент поможет вам создать красивые границы для изображений. Просто и эффективно!

border-image.com

CSS3 Pie

Internet Explorer уже десять лет является кошмаром верстальщиков, и, к сожалению, это закончится не скоро. Тем не менее, такие инструменты, как CSS3 Pie могут определенно помочь в создании IE-совместимого кода. Этот очень полезный генератор создает стили для Internet Explorer 6-9, способные отображать несколько наиболее полезных «украшательств» CSS3.
css3pie.com

CSS Easing Animation Tool

С помощью этого инструмента, у каждого разработчика теперь есть простой способ для создания CSS-анимации. Префиксы поддерживается, поэтому вам не придется беспокоиться о совместимости с различными браузерами.
matthewlein.com/ceaser

Font-Face generator

Хотите использовать причудливые шрифты на вашем сайте? Просто загрузите его на Font Squirrel Font-Face generator, и получите ваш CSS код, а также шрифт во всех форматах, необходимых для различных браузеров. Эта программа хорошо помогла в последние два года.
fontsquirrel.com/fontface/generator

Upd. 1 Подсказали еще неплохой CSS-генератор: css3.me

habr.com

20 CSS3 генераторов которые облегчат жизнь дизайнеру

Здравствуйте, друзья. Хочу поделиться с Вами несколькими полезными CSS фишками. А именно сегодня тут Вы найдёте несколько CSS3 генераторов, которые существенно облегчат Вам жизнь если Вы дизайнер, верстальщик или же просто новичок в этом не простом деле. Здесь собраны генераторы на самую разнообразную тематику, Вы сможете сделать кнопки, закруглить углы квадратного блока, добавить разнообразные эффекты для текста, ну и ещё множество полезных вещей. Чтобы не потерять это всё добро, Вы можете сразу же добавить эту страницу в закладки.

Спасибо http://www.cssauthor.com так же рекомендую интересное:

CSS3 генератор теней, закруглённых углов, цвета и много го другого

Перейти

CSS3 генератор полезных вещей для дизайнера

Перейти

Генератор градиентов, теней и закруглённых углов на CSS

Перейти

Генератор для создания тени текста

Перейти

CSS3 генератор для создания 3D текста

Перейти

CSS генератор для создания градиентной заливки

Перейти

Генератор цветов

Перейти

Генератор CSS для чайников

Перейти

Генератор самых нужных свойств на CSS

Перейти

Генератор закруглённых углов для блока на CSS

Перейти

Генератор самых нужных CSS правил и свойств для дизайнера

Перейти

Генератор CSS спрайтов

Перейти

Генератор правильных CSS правил

Перейти

Создание меню с помощью простого CSS генератора

Перейти

Простой генератор кнопок на CSS

Перейти

Ещё один отличный генератор кнопок для сайта

Перейти

Градиентная заливка на CSS3

Перейти

CSS генератор круглых углов

Перейти

CSS генератор для создания лёгкого и чистого CSS — кода

Перейти

Многофункциональный CSS3 генератор для создания кнопок

Перейти

beloweb.ru

Генераторы, полезные онлайн-сервисы CSS

Опубликовано: 21 марта 2014 Обновлено: 12 июля 2018

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

Генераторы, онлайн-сервисы CSS

обновлено 05.04.2017

Pleeease — сервис для генерации браузерных префиксов и не только.

Перейти на сайт

COLORION — огромная коллекция цветовых палет, в том числе для создания материального и плоского дизайна.

Перейти на сайт

Color Supply — генератор цветовых схем.

Перейти на сайт

Автопрефиксер онлайн — добавляет нужные вендорные префиксы и удаляет ненужные в вашем CSS.

Перейти на сайт

Coolors — сервис для подбора цветовых схем для сайта, альтернативных теней, определение цветов по картинке.

Перейти на сайт

cssFilters — пользовательские фильтры и фильтры как в Инстаграмм для изображений.

Перейти на сайт

Type Scale — визуальный калькулятор для расчёта размера заголовков.

Перейти на сайт

TRANSPARENT TEXTURES — коллекция прозрачных бесшовных текстур для вашего сайта.

Перейти на сайт

Image Slider Maker — онлайн-сервис для создания адаптивного слайдера с картинками.

Перейти на сайт

Tridiv — 3D-редактор для создания объёмных моделей на чистом CSS.

Перейти на сайт

Web Code Tools — генератор кода для создания эффектов CSS, HTML-кода для различных элементов, карточек для Твиттера и других полезных вещей.

Перейти на сайт

HOW TO CENTER IN CSS — генератор стилей для центрирования (выравнивания) блока или текста с помощью различных приёмов. Также имеется поддержка различных версий Internet Explorer.

Перейти на сайт

img2css — инструмент, который преобразует изображения в CSS-код, он выдаёт вам один div с кодом, который вы можете использовать в своих проектах.

Перейти на сайт

CSS Apple Device Generator

— генератор разметки и стилей для устройств Apple. В поле Device Type можно выбрать тип устройства, с помощью Device Width — задать ширину, а также выбрать цвет экрана в поле Device Inner color.

Перейти на сайт

Web Colour Data — онлайн-сервис, позволяющий получить цветовую палитру любой веб-страницы.

Перейти на сайт

The Simpsons in CSS — коллекция любимых персонажей на чистом CSS.

Перейти на сайт

Mobile phone emulator протестирует, как выглядит сайт на экранах мобильных устройств.

Cell phone terminal — поле для выбора типа устройства, размера окна и ориентации, Website to terminal — поле для ввода url-адреса.

Перейти на сайт

CSS Load — отличная подборка индикаторов загрузки. Предусмотрено редактирование — можно изменить цвет, размер, скорость вращения, а после скачать получившийся код. Для переключения на русский язык нажмите значок флага в верхнем левом углу окна.

Перейти на сайт

Flexplorer — площадка для демонстрации возможностей модели Flexbox. Вы сможете задать свои параметры для блоков и увидеть пример в действии.

Перейти на сайт

Screenfly — данный сервис поможет протестировать, как будет выглядеть ваш сайт на экранах устройств различного разрешения. Чтобы воспользоваться сервисом, нужно ввести url-адрес в строку поиска, для выбора вида девайса воспользуйтесь верхним меню.

Перейти на сайт

Long shadows — сервис, позволяющий создавать так называемые «длинные тени» для блоков и для текста.

Перейти на сайт

CSS Lint — веб-приложение, проверяющее код CSS на ошибки. Результаты проверки выводятся в виде таблицы с указанием строчек ошибок, и пояснением. При проверке можно использовать разные параметры, определяя ее глубину.

Перейти на сайт

Responsive Grid System — CSS-фреймворк для создания гибкого макета на основе сетки (grid). Раздел Let’s Go to Work позволяет выбрать и скачать нужную разметку страницы, используя от 2-х до 12-ти колонок, а калькулятор в разделе Or Make Your Own поможет задать собственную разметку.

Перейти на сайт

CSS TEXT TO PATH GENERATOR сгенерирует html-код для текста, расположенного по кривой.

Перейти на сайт

3D Ribbon Generator поможет создать красивые 3D ленточки. Вам нужно выбрать вариант дизайна, а также задать цвет и размер элементов.

Перейти на сайт

Paletton — онлайн-сервис для подбора цветовой схемы для вашего сайта. Вкладка COLOR TABLES откроет палитру, а также различные комбинации цветов, а круглые переключатели под названием сервиса позволят выбрать количество сочетаемых цветов.

Перейти на сайт

CSS3 generator — онлайн-сервис, который позволяет без труда сгенерировать код CSS3 для определенных свойств, таких как:
border-radius, box-shadow, text-shadow, RGBA, @font-face, multiple columns, box resize, box sizing, outline, transition, transform, gradient. Вам всего лишь нужно выбрать свойство, которое вы хотите использовать в стилях вашего браузера, задать для него требуемые параметры, а затем скопировать полученный код в свой проект.

Перейти на сайт

CSS 3.0 Maker — сервис, аналогичный CSS3 generator, присутствует еще одна интересная возможность — Text Rotation.

Перейти на сайт

CSS Menu Maker — незаменимый сервис для создания панелей навигации на основе списков как на чистом CSS, так и с использованием jQuery. Помимо основной разметки предлагает готовые варианты стилей для вертикальных и горизонтальных панелей навигации.

Перейти на сайт

CSS Portal содержит большую коллекцию CSS-свойств, на сайте вы сможете найти всевозможные ресурсы и инструменты, которые позволят сделать ваш css-код идеальным.

Перейти на сайт

Border Image — онлайн-генератор CSS3 свойства border-image, позволяющий оживить границы блока с помощью картинок.

Перейти на сайт

CSStemplater — генератор HTML+CSS шаблонов. Благодаря этому ресурсу вы сможете без особого труда создать разметку страницы на основе блочной верстки. Большой плюс ресурса — вы сможете сделать макет как фиксированной, так и «резиновой» ширины, при этом не ломая голову над тем, как прижать «футер» к низу окна браузера. Всем начинающим верстальщикам рекомендуем!

Перейти на сайт

CSS3 Please! — очень удобный сервис для создания кроссбраузерного кода для таких CSS стилей, как border-radius, box-shadow, linear-gradient, transition и многих других. Задавая значения стилей в редакторе, вы сможете сразу же увидеть получившийся результат на примере блока, расположенного в окне справа.

Перейти на сайт

Ui LIVETOOLS — уникальная коллекция бесплатных онлайн-приложений для вашего творчества, с помощью которых вы сможете легко создавать собственные элементы пользовательского интерфейса, такие как ленточки с надписью, формы регистрации на сайте, иконки и кнопки.

Перейти на сайт

Генератор CSS спрайтов избавит вас от лишней работы при создании спрайтов для ваших веб-страниц.

Перейти на сайт

CSS3 Patterns Gallery предлагает вашему вниманию пример виртуозного использования возможностей CSS3. У вас появится возможность создать сложные бесшовные фоны для своего сайта. 37 образцов выполнены в различных стилях, и мы уверены, что вы найдёте образец себе по душе!

Перейти на сайт

CSS3 TEST предназначен для всех поклонников возможностей CSS3. Тест возвращает поддерживаемые атрибуты вашего браузера и, щелкнув каждое свойство, вы можете увидеть, есть ли значения, которые им не поддерживаются.

Перейти на сайт

html5book.ru

генератор тени объектов в CSS3

aliasall-scrollautocellcontext-menucol-resizecopycrosshairdefaulte-resizeew-resizegrabgrabbinghelpmoven-resizene-resizenesw-resizens-resizenw-resizenwse-resizeno-dropnonenot-allowedpointerprogressrow-resizes-resizese-resizesw-resizetextw-resizewaitzoom-inzoom-outinitialinheritКурсор

AutoInitialInheritpx em %Ширина объекта

AutoInitialInheritpx em %Высота объекта

Внутренний отступ

Padding сверху

Padding справа

Padding снизу

Padding слева

Ширина объекта

pxem%Единица ширины

Высота объекта

pxem%Единица высоты

Кайма

Прозрачная Цвет

SolidDashedDottedDoubleGrooveRidgeInsetOutsetHiddenNoneСтиль каймы

Ширина каймы

pxemЕдиница ширины

Цвет каймы

Фон

Прозрачный Цвет

Фон

Включить фоновое изображение

no-repeatrepeat-xrepeat-yrepeatПовторение

scrollfixedlocalinitialinheritПрикрепление

centerleftrightпозиция X

centertopbottomпозиция Y

autocovercontaininitialinheritдлина (px)процентШирина фона

autocovercontaininitialinheritдлина (px)процентВысота фона

Отступ X

Отступ Y

Ширина фона

Высота фона

Про генератор тени текста

Шрифт

НормальныйЖирныйКурсивЖирный курсивСтиль шрифта

Размер шрифта

pxemЕдиница размера

Цвет шрифта

CenterLeftRightJustifyInitialInheritВыравнивание

Тень текста

Цвет тени

Отступ слева (px)

Отступ справа (px)

Размытие (px)

Непрозрачность

О генераторе тени объекта
Warning: Cannot modify header information — headers already sent by (output started at /nfs/c08/h01/mnt/118020/domains/pr.csstool.net/html/index.php:156) in /nfs/c08/h01/mnt/118020/domains/pr.csstool.net/html/includes/box-shadow.php on line 2

Что такое генератор тени объекта в CSS3?

Этот инструмент позволяет создавать тень за или внутри объекта при помощи CSS3. Чтобы создать код тени просто установите желаемый горизонтальный и вертикальный отступ, радиус размытости, радиус распространения, цвет и непрозрачность тени и переключателем выберите внешнюю или внутреннюю тень.

Заметка: чтобы настройки генератора работали обязательно отметьте галочку справа от названия генератора.

Совместимость с браузерами

Значение
box-shadow	10.0+ 4.0+ -webkit-	4.0+ 3.5+ -moz-	10.5+	9.0+	5.1+ 3.1+ -webkit-	1.5+

Гор. отступ

Верт. отступ

Радиус размытия

Протяженность

Цвет тени

Непрозрачность

внутри

снаружи

icons8.com

генератор тени текста в CSS3

aliasall-scrollautocellcontext-menucol-resizecopycrosshairdefaulte-resizeew-resizegrabgrabbinghelpmoven-resizene-resizenesw-resizens-resizenw-resizenwse-resizeno-dropnonenot-allowedpointerprogressrow-resizes-resizese-resizesw-resizetextw-resizewaitzoom-inzoom-outinitialinheritКурсор

AutoInitialInheritpx em %Ширина объекта

AutoInitialInheritpx em %Высота объекта

Внутренний отступ

Padding сверху

Padding справа

Padding снизу

Padding слева

Ширина объекта

pxem%Единица ширины

Высота объекта

pxem%Единица высоты

Кайма

Прозрачная Цвет

SolidDashedDottedDoubleGrooveRidgeInsetOutsetHiddenNoneСтиль каймы

Ширина каймы

pxemЕдиница ширины

Цвет каймы

Фон

Прозрачный Цвет

Фон

Включить фоновое изображение

no-repeatrepeat-xrepeat-yrepeatПовторение

scrollfixedlocalinitialinheritПрикрепление

centerleftrightпозиция X

centertopbottomпозиция Y

autocovercontaininitialinheritдлина (px)процентШирина фона

autocovercontaininitialinheritдлина (px)процентВысота фона

Отступ X

Отступ Y

Ширина фона

Высота фона

Про генератор тени текста
Warning: Cannot modify header information — headers already sent by (output started at /nfs/c08/h01/mnt/118020/domains/pr.csstool.net/html/index.php:156) in /nfs/c08/h01/mnt/118020/domains/pr.csstool.net/html/includes/text-shadow.php on line 2

Что такое генератор тени текста в CSS3?

Генератор теней для текста создает тень сзади текста средствами CSS3. Чтобы предварительно просмотреть результат тени, нужно сначала настроить текст внутри своего объекта. Установив все в настройках над заголовком «тень текста» можете переходить к настрокам теней, которые включают в себя цвет тени, горизонтальный и вертикальный отступы, размытость и уровень непрозрачности тени.

Заметка: чтобы настройки генератора работали обязательно отметьте галочку справа от названия генератора.

Совместимость с браузерами

Значение
text-shadow	2.0+	3.1+	9.5+	9.0+	4.0+ 3.1+ Частичная поддержка	1.5+

Шрифт

НормальныйЖирныйКурсивЖирный курсивСтиль шрифта

Размер шрифта

pxemЕдиница размера

Цвет шрифта

CenterLeftRightJustifyInitialInheritВыравнивание

Тень текста

Цвет тени

Отступ слева (px)

Отступ справа (px)

Размытие (px)

Непрозрачность

icons8.com