Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 1, средняя оценка - 5.00
Taatshi
Администратор
11535 / 5032 / 256
Регистрация: 05.04.2011
Сообщений: 13,766
Записей в блоге: 2
#1

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

10.01.2013, 16:04. Просмотров 76823. Ответов 49
Метки нет (Все метки)

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


HTML

www.jsfiddle.net - песочница для веб-разработчиков. HTML, CSS, JavaScipt и результат.
http://csstemplater.com - генератор HTML+CSS шаблонов
http://www.phpform.org/ генератор форм
http://www.w3schools.com/ Справочник с возможностью редактирования кода
Все правильные doctype и запрещенные в них HTML теги
http://imagemap-generator.dariodomi.de/ - map генератор
uncss-online.com - Удаление неиспользуемых стилей + Shorthand

http://css3pie.com/documentation/getting-started/ - для работы некоторых свойств css3 в IE, не поддерживаемых по умолчанию PIE


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

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

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



Типовые макеты
http://htmlbook.ru/samlayout/tipovye-makety
http://blog.html.it/layoutgala/
http://www.dynamicdrive.com/style/layouts/category/C10/


CSS
http://jigsaw.w3.org/css-validator/#validate_by_upload онлайн валидатор. Не работают стили - вам сюда
http://procssor.com - форматирование CSS кода.
http://css3generator.com - CSS3 генератор
www.spritebox.net - нарезка картинки на CSS спрайты
http://css-tricks.com/examples/ButtonMaker/ сервис для генерации кнопок на css
http://dabuttonfactory.com/ сервис для генерации кнопок на css
http://www.colorzilla.com/gradient-editor/ Сервис для генерации градиентов на css
http://border-image.com/ Сервис для создания рамок для рисунков
http://css-sprit.es/ генератор спрайтов
http://bearcss.com/ генератор css для html
http://www.css3.me/ css3 генератор
http://csscomb.ru/ инструмент для сортировки CSS-свойств в нужном порядке
http://simpreal.org.ua/csssprites онлайн генератор css спрайтов
http://cssmenumaker.com/ онлайн генератор css стилей для меню
http://www.useragentman.com/IETransformsTranslator/ Трансформации для IE
http://css3button.net/ - генератор кнопок
http://css3gen.com/box-shadow/ генератор теней
http://www.cssmatic.com/box-shadow генератор теней
http://flexbox.help/ как будет выглядеть выравнивание и расположение блоков при различных вариантах использования свойства flex

http://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока.
Название: css-arrow-please.png
Просмотров: 13694

Размер: 8.0 Кб

Компрессия кода

CSS

http://www.homepage-performance.de/en/css-compressor-tool.html
http://isnoop.net/tools/css.php
http://www.pagecolumn.com/tool/css_compressor.htm
http://tools.pingates.com/
http://www.lotterypost.com/css-compress.aspx
http://mabblog.com/cssoptimizer/compress.html
http://www.cssoptimiser.com/
http://www.codebeautifier.com/
http://www.askapache.com/online-tools/compress-css/
http://iceyboard.no-ip.org/projects/css_compressor
http://compressor.ebiene.de/
http://tools.arantius.com/css-compressor
http://www.sevenforty.com/tools/csscompressor
http://www.phpinsider.com/compress_css.php
http://www.devtrench.com/css-formatter/css-optimiser.php
http://cssdrive.com
http://www.cleancss.com
http://www.excssive.com/
http://www.csscompressor.com/
http://www.cssportal.com/css-optimize/
http://www.artiss.co.uk/css-compression
http://www.creativyst.com/Prod/3/
http://www.generateit.net/css-optimize/


XHTML, HTML и CSS компрессор
http://www.peterbe.com/plog/blogitem-040406-1/compressor

JavaScript / CSS сжатие
http://www.refresh-sf.com/yui/


Расширение для Photoshop, умеющее конвертировать стили слоя в css3 код: http://css3ps.com

Понимает линейные градиенты, тени, обводки, радиусы фигур, размеры фигур, семейство шрифта и др. Пока воспринимает стили только в режиме Normal, но разработчики обещают над эти поработать.

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


Типографика, шрифты

fontello.com - Генератор иконочных шрифтов

http://www.fontsquirrel.com/fonts/list/language/cyrillic подборка кириллических шрифтов
www.blindtextgenerator.com - генератор текстов-рыб
http://cufon.shoqolate.com/generate/ Генератор Cufon шрифтов
http://www.typograf.ru/ Web типограф
http://fontstruct.com - создание шрифтов онлайн

http://www.fontsquirrel.com/fontface/generator Font-face Kit Generator - генерация наборов
http://www.font2web.com - конвертация шрифтов под web
http://www.freefontconverter.com/ - шрифт под web
http://everythingfonts.com/font-face - шрифт под web

Google Web Fonts - описание:
Google создал специальный онлайн сервис, где вы можете выбрать красивый шрифт для сайта, который вам больше всего понравится (количество доступных онлайн шрифтов постоянно увеличивается и среди них уже присутствуют кириллические).

На этом же сервисе Google вы можете получить все инструкции по подключению любого приглянувшегося вам красивого онлайн шрифта к сайту (все очень просто до банальности), а так же вы сможете провести полную настройку внешнего вида вашего будущего онлайн шрифта и получить полных набор CSS свойств, которые останется только добавить в файл стилей вашего сайта.
Сссылка:
Google Web Fonts
Пользование:
Getting Started
Красивые шрифты для сайта онлайн — как добавить в Html и CSS web шрифты через Google Font API
Google Web Fonts - нестандартные шрифты
Prosto в Google Web Fonts

Подборка ссылок на статьи о типографике:

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

3 примера сайтов с прекрасной типографикой:
www.yesnurse.co.uk
www.hausofdesign.co.uk
demo.fotosynthes.ru/designpile/


Дизайн

http://framebox.org - прототипирование веб-интерфейсов
http://lea.verou.me/css3patterns/ background паттерны на CSS3
http://subtlepatterns.com - обновляемая коллекция bg паттернов
www.tartanmaker.com - генератор тартан bg паттернов
www.stripemania.com - генератор паттернов из линий.
www.stripegenerator.com - ещё один генератор паттернов из линий
http://bgmaker.ventdaval.com - онлайн редактор для создания собственный фоновых паттернов
www.pixelknete.de/dotter/ - генератор точечных фонов
www.patterncooler.com - генератор/редактор фоновых паттернов. (весьма интересная штуковина)
http://bgpatterns.com - снова bg паттерны.
http://0to255.com подбор цвета.
http://colorschemedesigner.com - подбор цветовой палитры.
http://pictaculous.com - ещё один генератор цветовой палитры из изображения
http://kuler.adobe.com - подбор цветовой палитры
https://coolors.co - подбор цветовой палитры
http://pixlr.com/editor/ - Растровый онлайн редактор
http://favicon.ru - редактор fav-иконки для сайта
http://colorscheme.ru/ Сервис для подборки цветовых схем
http://favigen.com/ Сервис для генерации фавиконок для сайта
http://colllor.com/ подбор цвета тени
http://kraken.io/ онлайн оптимизация изображений
http://3d-pack.com/ - генератор 3D изображений для коробки
http://www.roundpic.com/ скругление углов изображения
http://weavesilk.com - создание красивых обоев на основе одного эффекта
http://lorempixel.com - генератор картинок-рыб (по аналогии с текстом-рыбой)
http://thenounproject.com Бесплатные иконки
http://www.iconsearch.ru/ - Поиск иконок по ключевым словам
http://www.iconfinder.com/ - Поиск иконок по ключевым словам
http://labs.tineye.com/multicolr/ - Поиск фотографий по цветовой гамме
http://www.punypng.com/ - Оптимизация изображений
http://www.colorsontheweb.com/colorwizard.asp Подбор гармоничных цветов
http://patterns.ava7.com/ - паттерны
https://cloudconvert.com/eps-to-svg - конвертация фотошоп файлов eps в svg
SVGO минификация SVG , полезен после для чистки svg после редакторов вроде Illustrator или Inkscape

http://image2base64.wemakesites.net/ сервис перевода картинок в base64 вариант


JavaScript

http://microjs.com - набор минимизированных javascript скриптов. Очень много


Генераторы прелоадеров

http://www.ajaxload.info/
http://preloaders.net/
http://cssload.net/
http://www.chimply.com/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://mentalized.net/activity-indicators/
http://www.sanbaldo.com/wordpress/1/ajax_gif/

Проверка на валидность и совместимость

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

https://chrome.google.com/webstore/d...okffboaccidbal - Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера

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

http://www.quirksmode.org/ - информация о совместимости браузеров с некоторыми вещами CSS и JS. Тестовые страницы по каждому пункту.
В частности:http://loads.in - насколько быстро грузится ваш сайт

Проверяйте свои творения, прежде чем это сделает за вас посетитель вашего сайта .

W3C Markup Validation Service
W3C CSS Validation Service
XML Validation



Разное

http://getcover.ru - генератор "рамок" браузера или телефона. примечателен кнопкой "Забацать"
http://css-tricks.com/downloads/ множество симапатичностей
http://popinbuilder.icoder.com/ Сервис для генерации popup баннеров
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/ - генератор каруселей
https://www.browserstack.com/responsive - Online mobile tester
http://mobiletest.me/ - Online mobile tester
unicode-table.com - Таблица символов Юникода


Коды от Стью Николса
http://www.cssplay.co.uk/
http://www.stunicholls.com
Внимательно читайте по авторским правам - для использования на коммерческих ресурсах для многих кодов donate обязателен!

http://html5boilerplate.com/ - HTML/CSS/JS шаблон

Обзор онлайн-сервисов для веб-разработки и дизайна

50 ресурсов для веб-разработчиков за 2012 год


Интересные сайты

http://www.dejurka.ru - сайт, посвященный дизайну
http://dribbble.com - в поисках вдохновения. "Твиттер" для дизайнеров
http://designers.mx - вдохновение для дизайнера
http://cvparade.com - вдохновение типографика

Вдохновляжки
http://noteandpoint.com
http://bookcoverarchive.com
http://creattica.com/retouch/latest-designs
http://revision.ru русский
http://www.awwwards.com
http://www.typographyserved.com ещё одна вдохновлялка, на этот раз типографическая


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

http://www.cyberforum.ru/html/thread645336.html

43
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.01.2013, 16:04
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Полезные ресурсы для web - мастера (HTML, CSS):

HTML язык сервера - нужны ресурсы для изучения
я создаю собственное приложение и мне нужно это изучить какие ссылки, ссайты,...

Посоветуйте ресурсы для самостоятельного освоения HTML/CSS
Какие посоветуете курсы для освоения WEB-разработки? Что скажете о Разобрался...

Создание пошагового мастера
Добрый день! Как можно реализовать пошаговый мастер (Wizard) для заполнения...

Мастера, подскажите новичку пожалуйста
Приветствую форумчане. Буквально месяц назад начал изучать html и css абсолютно...

полезные ресурсы
Доброго времени суток. Недавно начал изучать с++ и хочу поинтересоваться у...

49
Амурский
25 / 25 / 10
Регистрация: 11.11.2014
Сообщений: 233
05.08.2015, 21:40 #41
Здравствуйте, ААфигенный сайт с иконками. Все форматы. Бесплатный http://www.flaticon.com
0
tolimadokara
745 / 411 / 91
Регистрация: 24.10.2012
Сообщений: 3,017
15.09.2015, 11:14 #42
Цитата Сообщение от Taatshi
В этой теме собираем все...не предлагать!
О цветовой схеме сайта. Здесь ссылки в основном на сервис роботы (если не ошибаюсь) по подбору цветовой схемы сайта. Готовой коллекции сочетающихся цветов не было. Меня вот что впечатлило:

Оптимальные сочетания цветов
В помощь дизайнеру: оптимальные сочетания цветов

Если верно понял, то эти группы-квадраты в которых по шесть разно цветных полос это и есть гармонирующие цвета. Компьютерный алгоритм, программа, имхо не способна на создание не большой базы данных гармонирующих цветов. Здесь только ручная работа человека. Кстати, здесь огромная работа - дизайнер составил 200 блоков с гармонирующими цветами. В каждом блоке представлены по шесть сочетаемых цветов. Может быть это фейк, хз. Но я верю, что это правильная подборка сочетаемых цветов - сразу видно что эти цвета сочетаются. Очень классные сочетание цветов.

Если кто не понял как этим пользоваться. Выбираем любой квадрат с цветами. К примеру вот этот:

Название: 0_a8745_8198d5ac_S.jpg
Просмотров: 333

Размер: 8.3 Кб

Здесь шесть цветов (слева на право)
1.грязно-синий
2.бледно-синий
3.насыщенно-синий
4.ярко-коричневый
5.бледно-серый
6.белый

Вот, используя только эти ^ шесть цветов и составляем цветовую схему вашего сайта. К примеру цвет ссылок на сайте это будет №4 цвет. Фон сайта это №5 цвет. Цвет текста №2 цвет. И так далее.

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

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

[52,56МБ] - ссылку не проверял - обязательно проверяйте архив Вашим антивирусным программным обеспечением
0
Creativeman
26 / 26 / 9
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:23 #43
Минификация SVG SVGO, полезен после для чистки svg после редакторов вроде Illustrator или Inkscape
1
Htext
134 / 53 / 14
Регистрация: 08.01.2015
Сообщений: 672
Записей в блоге: 1
14.03.2016, 13:18 #44
Подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения:
http://www.pearsonified.com/typography/
0
koza4ok
626 / 435 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
19.06.2016, 14:34 #45
http://flexbox.help/
2
Александр1970
0 / 0 / 0
Регистрация: 17.11.2015
Сообщений: 1
29.08.2016, 22:29 #46
Генератор каруселей. http://www.comslider.com/
0
koza4ok
626 / 435 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
07.10.2016, 13:05 #47
online mobile tester

https://www.browserstack.com/responsive

http://mobiletest.me/
1
mrtoxas
Модератор
Эксперт HTML/CSS
2548 / 1885 / 1177
Регистрация: 12.07.2015
Сообщений: 5,091
Записей в блоге: 3
04.11.2016, 18:20 #48
unicode-table.com - Таблица символов Юникода
uncss-online.com - Удаление неиспользуемых стилей + Shorthand
fontello.com - Генератор иконочных шрифтов
https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ - Бесплатные виртуальные машины с Windows для тестирования сайтов на различных версиях IE (v.8-Edge).
rawgit.com - Получение прямой ссылки на файлы с GitHub.
colorme.io - Visualize The CSS Color Function.
html-tree - Генератор HTML-дерева.
document.online-convert.com - Конвертер документов Office в HTML.
3
lex28
0 / 0 / 0
Регистрация: 01.02.2017
Сообщений: 1
01.02.2017, 20:32 #49
Спасибо за такое огромное количество полезной инфы
0
Freeze_Breeze
180 / 215 / 81
Регистрация: 12.01.2016
Сообщений: 1,274
20.04.2018, 00:18 #50
Cервис с иконками на чистом css http://cssicon.space/#/
0
20.04.2018, 00:18
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.04.2018, 00:18
Привет! Вот еще темы с решениями:

Полезные ресурсы
Наткнулся на очень хороший набор ссылок на хабре Я думаю он полезен будет всем...

Примеры и полезные ресурсы регулярных выражений
Полезные ресурсы русский http://regexpres.narod.ru/calculator.html не...

Какие бесплатные ресурсы можете посоветовать для изучения Python в плане Web?
Доброго времени суток, формчане. Какие бесплатные ресурсы можете посоветовать...

перестала работать Web-camera, Bluetooth, и другие полезные девайсы
Приветствую всех форумчан! У меня такая проблема, чуть меньше года назад я...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
50
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru