Полезные ресурсы для web-мастера

В этой теме собираем все, что может понадобиться для работы web-мастера. Платные ресурсы - не предлагать!

Справочники
http://www.w3schools.com/ - справочник с возможностью редактирования кода
https://html5css.ru/ - справочник
https://hcdev.ru/ - Справочник HTML и CSS, также есть справочники с переводом на русский: Typescript, Angular, React, Node.js, Python 3, XSLT
https://runebook.dev/ - переводы документации на разные библиотеки в одном месте

Песочницы
https://codepen.io/ - html/css/js
https://onlinephp.io/ - php

HTML
http://www.phpform.org/ - генератор форм
https://www.w3schools.com/tags/ref_html_dtd.asp - все правильные doctype и запрещенные в них HTML теги
uncss-online.com - удаление неиспользуемых стилей + Shorthand

Программа для генерации кода сложных таблиц. Спасибо за разработку newJS
Вопросы и пожелания по программе - озвучиваем здесь.
Table_Generator_2.0.7z

Линейки для вебмастера
Экранные линейки.zip

http://www.blacksunsoftware.com/colormania.html - color mania - программа для выбора цвета на экране
ColorManiaSetup.zip

Типовые макеты
http://htmlbook.ru/samlayout/tipovye-makety
http://www.dynamicdrive.com/st... egory/C10/

CSS
http://jigsaw.w3.org/css-valid... _by_upload онлайн валидатор. Не работают стили - вам сюда
http://css3generator.com - CSS3 генератор
http://css-tricks.com/examples/ButtonMaker/ сервис для генерации кнопок на css
http://dabuttonfactory.com/ сервис для генерации кнопок на css
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://bearcss.com/ генератор css для html
http://www.useragentman.com/IE... ranslator/ Трансформации для IE
http://www.cssmatic.com/box-shadow генератор теней
http://flexbox.help/ как будет выглядеть выравнивание и расположение блоков при различных вариантах использования свойства flex
https://protocoder.ru/css/strokeTextGen обводка текста на css3

http://lea.verou.me/css3patterns/ - background-паттерны на CSS3
http://subtlepatterns.com - обновляемая коллекция bg-паттернов


Компрессия кода
CSS
http://www.cleancss.com
http://www.cssportal.com/css-optimize/
http://www.generateit.net/css-optimize/
http://www.homepage-performanc... -tool.html
http://www.pagecolumn.com/tool/css_compressor.htm
http://www.lotterypost.com/css-compress.aspx
http://www.codebeautifier.com/
http://www.askapache.com/onlin... press-css/
http://tools.arantius.com/css-compressor
http://www.phpinsider.com/compress_css.php
http://www.creativyst.com/Prod/3/

JavaScript
https://jscompress.com/
https://www.toptal.com/develop... -minifier/
https://refresh-sf.com/
https://www.digitalocean.com/c... ols/minify


Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: https://css3ps.com
Понимает линейные градиенты, тени, обводки, радиусы фигур, размеры фигур, семейство шрифта и др.

Онлайн генераторы CSS3 — в обойме инструментов web-разработчика


Типографика, шрифты
Google Web Fonts - Google Web Fonts
fontello.com - Генератор иконочных шрифтов
https://webfonts.pro/ - подборка шрифтов
https://grtcalculator.com/ - подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения
http://www.fontsquirrel.com/fo... e/cyrillic подборка кириллических шрифтов
www.blindtextgenerator.com - генератор текстов-рыб
http://www.typograf.ru/ Web типограф
http://fontstruct.com - создание шрифтов онлайн
http://www.font2web.com - конвертация шрифтов под web

Подборка ссылок на статьи о типографике:
Основы типографики
Типографика для веб
Типографика на Вебе


Дизайн
www.tartanmaker.com - генератор тартан bg паттернов
www.stripegenerator.com - генератор паттернов из линий
www.patterncooler.com - генератор/редактор фоновых паттернов
http://0to255.com - подбор цвета
https://paletton.com/ - подбор цветовой палитры
https://color.adobe.com/ru/create - подбор цветовой палитры
http://pixlr.com/editor/ - растровый онлайн редактор
http://colorscheme.ru/ - сервис для подборки цветовых схем
http://colllor.com/ - подбор цвета тени
онлайн оптимизация изображений
http://weavesilk.com - создание красивых обоев на основе одного эффекта
http://thenounproject.com - бесплатные иконки
http://www.iconsearch.ru/ - поиск иконок по ключевым словам
http://www.iconfinder.com/ - Поиск иконок по ключевым словам
http://labs.tineye.com/multicolr/ - поиск фотографий по цветовой гамме
http://www.colorsontheweb.com/colorwizard.asp - подбор гармоничных цветов
http://patterns.ava7.com/ - паттерны
https://cloudconvert.com/eps-to-svg - конвертация фотошоп файлов eps в svg
SVGO - минификация SVG , полезен после для чистки svg после редакторов вроде Illustrator или Inkscape


Генераторы прелоадеров
http://mentalized.net/activity-indicators/


Проверка на валидность и совместимость
http://www.responsinator.com/ - как сайт будет выглядеть на разных разрешениях экрана
https://www.browserstack.com/responsive - online mobile tester
https://chrome.google.com/webs... boaccidbal - Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера
Can I use... - в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии

Проверяйте свои творения, прежде чем это сделает за вас посетитель вашего сайта
W3C Markup Validation Service
W3C CSS Validation Service
XML Validation

Разное
http://getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
http://snippets.su/ - сниппеты
http://htaccess.madewithlove.be - .htaccess-тестер
www.asciiflow.com - создание ASCII таблиц
http://www.maschek.hu/imagemap/imgmap - генератор карт со сложными полигонами
http://word2cleanhtml.com/ - очистка текстов от стилей word перед вставкой в материалы
http://www.comslider.com/ - генератор каруселей
unicode-table.com - таблица символов Юникода
http://html5boilerplate.com/ - HTML/CSS/JS шаблон
Обзор онлайн-сервисов для веб-разработки и дизайна


Интересные сайты
https://drafts.csswg.org/ - черновики рекомендаций css с историей измнения
http://dribbble.com - в поисках вдохновения. "Твиттер" для дизайнеров
http://cvparade.com - вдохновение типографика
http://noteandpoint.com
http://bookcoverarchive.com
http://www.awwwards.com
http://www.typographyserved.com
https://tympanus.net/codrops/category/playground/
https://css-art.com - для вдохновения и обучения

51

Недавно наткнулся на интересное расширение для Google Chrome:
Resolution Test — основной функционал плагина обозначен уже в самом его названии. Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера.
Это означает, что не изменяя реального разрешения вашего монитора, Вы можете увидеть как будет отображаться сайт под другим разрешением.
В перечне доступных присутствуют практически все потенциально возможные разрешения, а в том случае, если требуется какое-либо нестандартное — его можно ввести в поле «Custom».
Также можно отметить галочками все требуемые разрешения и эмуляции будут открыты в новых окнах.



Установить расширение->

Надеюсь кому-то поможет

2

Can I use... - очень полезный сайт: в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.

5

Иконки для сайта - приятный сайт, сделан для людей, огромный выбор иконок, распределенных по категориям, скачивание с Яндекс диска.

Шапки для сайта - все шапки разбиты на категории, разные размеры, скачивание с Яндекс диска.

2

Очень был шокирован
Трансформации для IE http://www.useragentman.com/IE... ranslator/

4

Жаль только, что криворукие читать это не будут....
Все правильные doctype и запрещенные в них HTML теги

2

Nе большой CSS респонсивный фрэймворк. (мини версия твиттер бутстрапа и похожих фв).
Kube

1

CSS Hat - приложение для конвертации стилей слоев Photoshop в стили CSS.
Плагин платный.
Статья о приложении.

0

Сервис для генерации красивых уголков на css3 border-radius
http://finego.ru/tools/border-radius-generator

0

Parfait - очень удобный сервис для верстальщиков. Позволяет очень быстро и легко "нарезать" и сохранить PSD-макет, определяет css-свойства каждого элемента макета по клику на нем, расстояния между элементами и многое другое. Отличная замена Photoshop-у.
К примеру, раньше я резал и разбирал макет в фотошопе где-то час-два, с этим сервисом на всё про всё уходит минут 10...
Разрабы этого сервиса пишут, что сервис адекватно работает только с хромом, но я его на фаерфоксе юзаю - никаких проблем.

0

http://rolar.ru/view_download.php?id=61 - Линейка для веб-программиста.
http://www.blacksunsoftware.com/colormania.html - color mania -программа для выбора цвета на экране
мап генератор - http://imagemap-generator.dariodomi.de/
генератор градиента - http://css-helper.ru/gradients/
генератор кнопок - http://css3button.net/

это вот для работы бордер радиус в IE - http://css3pie.com/documentation/getting-started/ нужно скачать и кинуть в папку с сайтом а потом применить код который написан на этой странице в разделе №3.

здесь рассказывается как сделать внутренние тени с помощью css3 - http://habrahabr.ru/post/154211/
генератор теней - http://css3gen.com/box-shadow/
разновидные беграунды - http://patterns.ava7.com/
wordpress темы - http://yithemes.com/
как сделать градиент для текста - http://www.artlebedev.ru/tools... ient-text/
как сделать плавные переходы при наведении на блок - http://shpargalkablog.ru/2011/... a-css.html

большинство этих программок я использую и все они являются бесплатными

1

http://css-sprit.es/ генератор спрайтов - ссылка не работает, не открывается просто грузится и не открывается, есть ли какие-то еще генераторы спрайтов? мне просто на сайт нужно

0

Вова101, посмотрите тут

2

http://shpargalkablog.ru/2011/... a-css.html - вот тут есть статья по свойству transition в css3

Добавлено через 4 часа 52 минуты
http://habrahabr.ru/post/126207/ - как сделать разные фигуры блоков с помощью чистого!! без картинок!! css

0

http://border-image.com/ - Генератор Border-image
http://www.lipsum.com/ - Генератор текста Lorem Ipsum
http://www.content-watch.ru/text/ - Проверка текста на уникальность

0

responsinator: Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/

2

Маленькая и очень удобная программка для определения параметров цвета любого элемента на экране, типа Колормании. Показывает коды HEX, HTML, RGB, CMYK, HSV

http://www.nattyware.com/pixie.php

0

http://generat.16mb.com

Удобно. Начинающим должно помочь.

1

http://codepen.io/ классный портал что бы потестить свой код и поделится с остальными
Вроде еще не было

1

https://babeljs.io/
es6 -> es5 компилятор

радостно юзаем классы, arrow function и прочие приятные мелочи

0

Здравствуйте, ААфигенный сайт с иконками. Все форматы. Бесплатный http://www.flaticon.com

0