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


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

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

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

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

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

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

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

И прописать 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; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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