Топ полезных CSS онлайн-сервисов и приложений

Здравствуйте, вот список бесплатных CSS онлайн-сервисов и приложений, на которые вы можете поставить закладки, так как рано или поздно они вам понадобятся!


Скачать исходники для статьи можно ниже

1. Красивая CSS анимация

Сайт онлайн-сервиса: «bennettfeely.com/cssynth/»

onlinecss5

Можно откорректировать анимацию на CodePen сервисе!

onlinecss6

Вот, например, чтобы создать вот такой разноцветный квадратик в сайдбаре в wordpress:

MN
OGO
BL
OG

Нужно в админке зайти в пункт «Внешний вид», выбрать виджет «Текст», перенести его в сайдбар, вставить в него следующий код:

<div class="container">
	<div class="item">MN</div>
	<div class="item">OGO</div>
	<div class="item">BL</div>
	<div class="item">OG</div>
</div>

onlinecss7

И прописать CSS стили в файле стилей style.css — для это в админке wordpress заходим в пункт «Внешний вид», подпункт «Редактор» и у нас открывается файл стилей — style.css, далее, можно в самом низу данного файла, разместить следующий код:

.container {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	overflow: hidden;
}

.item {
	float: left;
	width: 50px;
	height: 50px;
	background: #E7E6DD;
	-webkit-animation: disco 2s infinite both;
	animation: disco 2s infinite both;
}
.item:nth-of-type(2) {
	-webkit-animation-delay: 150ms;
	animation-delay: 150ms;
}
.item:nth-of-type(3) {
	-webkit-animation-delay: 300ms;
	animation-delay: 300ms;
}
.item:nth-of-type(4) {
	-webkit-animation-delay: 450ms;
	animation-delay: 450ms;
}


@-webkit-keyframes disco {
	from, to { background: purple; }
	20% { background: red; }
	40% { background: gold; }
	60% { background: limegreen; }
	80% { background: dodgerblue; }
}

@keyframes disco {
	from, to { background: purple; }
	20% { background: red; }
	40% { background: gold; }
	60% { background: limegreen; }
	80% { background: dodgerblue; }
}

onlinecss8

2. Изображения в base64

Сайт онлайн-сервиса: «duri.me»

DataURI конвертер, превращает изображения в base64 закодированные строки, которые затем могут быть вставлены непосредственно в HTML и CSS файлы.

onlinecss1

onlinecss2

Например, чтобы протестировать данный код, можно вставить его, на wordpress сайтах, в текстовой виджет:

onlinecss3

3. Генератор CSS3 кода

Сайт онлайн-сервиса: «createcss3.com»

Позволяет создавать CSS3 градиенты, тени, закругления, повороты и многое другое.

onlinecss4

4. CSS анимация:

Сайт онлайн-сервиса: «coveloping.com/tools/css-animation-generator»

Более 50 эффектов анимации: исчезновения, повороты, прыжки, покачивания, дрожание и др.

onlinecss9

После выбора нужной анимации нажимаем на ссылку «Code» и получаем HTML и CSS код анимации:

onlinecss10

onlinecss11

5. Онлайн-сервис по переводу SVG иконок в CSS иконки:

Сайт онлайн-сервиса: «iconizr.com».

onlinecss12

Для примера, SVG иконки можно скачать здесь — «mnogoblog.ru/krasivye-besplatnye-ikonki-dlya-sajta-ikonki-socialnyx-setej»

6. Пиксель арт:

Сайт онлайн-сервиса: «kushagragour.in/lab/picssel-art/»

Позволяет создать картинки с помощью пикселей и перевести их в CSS код.

onlinecss13

7. Онлайн конструктор фронтенд-кода:

Сайт онлайн-сервиса: «layoutit.com»

Конструктор имеет простой и удобный Drag & Drop интерфейс. Вот ссылка на видео о данной конструкторе «layoutit.com/home/video».

onlinecss14

8. Фибоначчи макеты для сайта:

Сайт онлайн-сервиса: «maxsteenbergen.com/fibonacci/»

onlinecss15

9. Онлайн сервис, помогающий понять CSS3 Flexbox (система компоновки элементов):

Сайт онлайн-сервиса: «demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/»

onlinecss16

Здесь же можно зайти на сервис для генерации flexbox кода — «bennettfeely.com/flexplorer/»

10. SVG паттерны:

PatternBolt — это коллекция SVG паттернов, упакованных в один CSS/SASS файл.

Сайт онлайн-сервиса: «buseca.github.io/patternbolt/»

onlinecss17

11. Генератор CSS градиента:

Сайт онлайн-сервиса: «gradient-animator.com/»

12. Генератор кода цвета:

Сайт онлайн-сервиса: «flatuicolors.com/»

flat-ui-colors

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий