Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 1, средняя оценка - 5.00
Taatshi
Администратор
11488 / 4957 / 253
Регистрация: 05.04.2011
Сообщений: 13,592
Записей в блоге: 2
#1

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

10.01.2013, 16:04. Просмотров 73432. Ответов 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
Просмотров: 13471

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

Ресурсы для практики новичкам - HTML, CSS
Доброго всем времени суток, форумчане. Постараюсь объяснить смысл заголовка этой темы. Я новичок в css&html, и пока что лишь изучил...

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

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

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

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

Полезные ресурсы - Программирование Android
Наткнулся на очень хороший набор ссылок на хабре Я думаю он полезен будет всем ЖМЯК хз ссылки на хабр можно постить :- ...

49
Вова101
21 / 13 / 4
Регистрация: 19.07.2014
Сообщений: 115
21.07.2014, 09:17 #31
http://css-sprit.es/ генератор спрайтов - ссылка не работает, не открывается просто грузится и не открывается, есть ли какие-то еще генераторы спрайтов? мне просто на сайт нужно
0
Taatshi
Администратор
11488 / 4957 / 253
Регистрация: 05.04.2011
Сообщений: 13,592
Записей в блоге: 2
21.07.2014, 13:34  [ТС] #32
Вова101, посмотрите тут
2
Вова101
21 / 13 / 4
Регистрация: 19.07.2014
Сообщений: 115
22.07.2014, 02:53 #33
http://shpargalkablog.ru/2011/07/transformaciya-css.html - вот тут есть статья по свойству transition в css3

Добавлено через 4 часа 52 минуты
http://habrahabr.ru/post/126207/ - как сделать разные фигуры блоков с помощью чистого!! без картинок!! css
0
Вова101
21 / 13 / 4
Регистрация: 19.07.2014
Сообщений: 115
23.07.2014, 07:17 #34
http://border-image.com/ - Генератор Border-image
http://www.lipsum.com/ - Генератор текста Lorem Ipsum
http://www.content-watch.ru/text/ - Проверка текста на уникальность
0
alexsamos33
594 / 574 / 192
Регистрация: 26.04.2014
Сообщений: 1,886
25.07.2014, 17:15 #35
responsinator: Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/
2
koza4ok
626 / 435 / 4
Регистрация: 19.09.2012
Сообщений: 1,633
03.10.2014, 20:37 #36
Удобный формат ....много полезного.

http://beaqn.in/frontend/
1
Bird wanderer
1 / 1 / 0
Регистрация: 06.10.2013
Сообщений: 6
09.11.2014, 17:44 #37
Маленькая и очень удобная программка для определения параметров цвета любого элемента на экране, типа Колормании. Показывает коды HEX, HTML, RGB, CMYK, HSV

http://www.nattyware.com/pixie.php
0
artiom4357
1 / 1 / 0
Регистрация: 13.05.2013
Сообщений: 14
22.03.2015, 12:58 #38
http://generat.16mb.com

Удобно. Начинающим должно помочь.
1
Vasya86
-16 / 2 / 0
Регистрация: 06.07.2015
Сообщений: 5
30.07.2015, 17:54 #39
http://codepen.io/ классный портал что бы потестить свой код и поделится с остальными
Вроде еще не было
0
whiteapps
398 / 362 / 172
Регистрация: 18.07.2014
Сообщений: 1,236
30.07.2015, 18:49 #40
https://babeljs.io/
es6 -> es5 компилятор

радостно юзаем классы, arrow function и прочие приятные мелочи
0
Амурский
20 / 20 / 6
Регистрация: 11.11.2014
Сообщений: 177
05.08.2015, 21:40 #41
Здравствуйте, ААфигенный сайт с иконками. Все форматы. Бесплатный http://www.flaticon.com
0
tolimadokara
743 / 405 / 61
Регистрация: 24.10.2012
Сообщений: 2,988
15.09.2015, 11:14 #42
Цитата Сообщение от Taatshi
В этой теме собираем все...не предлагать!
О цветовой схеме сайта. Здесь ссылки в основном на сервис роботы (если не ошибаюсь) по подбору цветовой схемы сайта. Готовой коллекции сочетающихся цветов не было. Меня вот что впечатлило:

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

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

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

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

Размер: 8.3 Кб

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

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

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

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

[52,56МБ] - ссылку не проверял - обязательно проверяйте архив Вашим антивирусным программным обеспечением
0
Creativeman
26 / 26 / 8
Регистрация: 26.12.2015
Сообщений: 93
08.01.2016, 23:23 #43
Минификация SVG SVGO, полезен после для чистки svg после редакторов вроде Illustrator или Inkscape
1
Htext
36 / 36 / 6
Регистрация: 08.01.2015
Сообщений: 492
14.03.2016, 13:18 #44
Подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения:
http://www.pearsonified.com/typography/
0
koza4ok
626 / 435 / 4
Регистрация: 19.09.2012
Сообщений: 1,633
19.06.2016, 14:34 #45
http://flexbox.help/
2
19.06.2016, 14:34
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
19.06.2016, 14:34
Привет! Вот еще темы с ответами:

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

Примеры и полезные ресурсы регулярных выражений - JavaScript
Полезные ресурсы русский http://regexpres.narod.ru/calculator.html не русские http://www.pagecolumn.com/tool/regtest.htm ...

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

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


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

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

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