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

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

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

В этой теме собираем все, что может понадобиться для работы 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
Просмотров: 13793

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

Ресурсы для практики новичкам
Доброго всем времени суток, форумчане. Постараюсь объяснить смысл заголовка...

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

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

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

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

52
illya_pritex
5 / 2 / 0
Регистрация: 05.04.2013
Сообщений: 19
07.04.2013, 12:42 #21
Недавно наткнулся на интересное расширение для Google Chrome:
Resolution Test — основной функционал плагина обозначен уже в самом его названии. Resolution Test для Google Chrome позволяет эмулировать изменение разрешение монитора за счет изменения размеров окна браузера.
Это означает, что не изменяя реального разрешения вашего монитора, Вы можете увидеть как будет отображаться сайт под другим разрешением.
В перечне доступных присутствуют практически все потенциально возможные разрешения, а в том случае, если требуется какое-либо нестандартное — его можно ввести в поле «Custom».
Также можно отметить галочками все требуемые разрешения и эмуляции будут открыты в новых окнах.

https://lh4.googleusercontent.com/Y2...0-h400-e365-rw

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

Надеюсь кому-то поможет
2
xenohunter
Дзен-программист
120 / 85 / 16
Регистрация: 10.04.2013
Сообщений: 253
16.04.2013, 13:48 #22
Can I use... - очень полезный сайт: в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.
5
Бабуля
71 / 71 / 29
Регистрация: 10.08.2012
Сообщений: 202
14.06.2013, 00:58 #23
Иконки для сайта - приятный сайт, сделан для людей, огромный выбор иконок, распределенных по категориям, скачивание с Яндекс диска.

Шапки для сайта - все шапки разбиты на категории, разные размеры, скачивание с Яндекс диска.
2
koza4ok
626 / 435 / 67
Регистрация: 19.09.2012
Сообщений: 1,633
12.09.2013, 15:37 #24
Очень был шокирован
Трансформации для IE http://www.useragentman.com/IETransformsTranslator/
4
newJS
2396 / 1069 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
24.10.2013, 12:07 #25
Жаль только, что криворукие читать это не будут....
Все правильные doctype и запрещенные в них HTML теги
2
EPMAK
tribal dance
167 / 151 / 36
Регистрация: 03.09.2009
Сообщений: 821
Записей в блоге: 17
08.01.2014, 17:08 #26
Nе большой CSS респонсивный фрэймворк. (мини версия твиттер бутстрапа и похожих фв).
Kube
1
monochromer
409 / 371 / 163
Регистрация: 03.01.2013
Сообщений: 966
27.02.2014, 15:59 #27
CSS Hat - приложение для конвертации стилей слоев Photoshop в стили CSS.
Плагин платный.
Статья о приложении.
0
lt
0 / 0 / 0
Регистрация: 21.05.2014
Сообщений: 3
21.05.2014, 23:03 #28
Сервис для генерации красивых уголков на css3 border-radius
http://finego.ru/tools/border-radius-generator
0
Vladislav WebDev
324 / 214 / 97
Регистрация: 04.11.2012
Сообщений: 638
23.05.2014, 07:05 #29
Parfait - очень удобный сервис для верстальщиков. Позволяет очень быстро и легко "нарезать" и сохранить PSD-макет, определяет css-свойства каждого элемента макета по клику на нем, расстояния между элементами и многое другое. Отличная замена Photoshop-у.
К примеру, раньше я резал и разбирал макет в фотошопе где-то час-два, с этим сервисом на всё про всё уходит минут 10...
Разрабы этого сервиса пишут, что сервис адекватно работает только с хромом, но я его на фаерфоксе юзаю - никаких проблем.
0
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
20.07.2014, 06:14 #30
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/technogrette/js/gradient-text/
как сделать плавные переходы при наведении на блок - http://shpargalkablog.ru/2011/07/transformaciya-css.html

большинство этих программок я использую и все они являются бесплатными
1
Вова101
21 / 13 / 6
Регистрация: 19.07.2014
Сообщений: 115
21.07.2014, 09:17 #31
http://css-sprit.es/ генератор спрайтов - ссылка не работает, не открывается просто грузится и не открывается, есть ли какие-то еще генераторы спрайтов? мне просто на сайт нужно
0
Taatshi
Администратор
11709 / 5052 / 257
Регистрация: 05.04.2011
Сообщений: 13,804
Записей в блоге: 2
21.07.2014, 13:34  [ТС] #32
Вова101, посмотрите тут
2
Вова101
21 / 13 / 6
Регистрация: 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 / 6
Регистрация: 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
618 / 598 / 325
Регистрация: 26.04.2014
Сообщений: 1,968
25.07.2014, 17:15 #35
responsinator: Вёрстка для мобильных устройств, как сайт будет выглядеть на разных разрешениях экрана
http://www.responsinator.com/
2
koza4ok
626 / 435 / 67
Регистрация: 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
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
30.07.2015, 18:49 #40
https://babeljs.io/
es6 -> es5 компилятор

радостно юзаем классы, arrow function и прочие приятные мелочи
0
30.07.2015, 18:49
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
30.07.2015, 18:49

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

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

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


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

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

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