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

HTML, CSS

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

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

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

Размер: 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
42
Лучшие ответы (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
simpreal
05.03.2013, 13:34 #16
Цитата Сообщение от Taatshi Посмотреть сообщение
simpreal, посмотрела Ваш ресурс - интересно, понятно и удобно. Оттестируйте в IE 8-10 и Opera и отпишитесь.
Извиняюсь, если у кого-то мой сервис работал не корректно. На данный момент я исправил некоторые печальные ошибки и протестировал в Опере. Но в IE поддержка FileAPI начинается только с 10 версии, так что пока не могу протестировать в IE. В Safari поддержка FileAPI начинается с 6-й версии, которая существует только под мак.
Также, скоро будет офлайн версия для Windows. Буду рад любым замечаниям и предложениям
Taatshi
Администратор
11481 / 4948 / 253
Регистрация: 05.04.2011
Сообщений: 13,595
Записей в блоге: 2
15.03.2013, 23:13  [ТС] #18
simpreal, добавила. Ждем оффлайн версию)
1
Wahlberg
70 / 70 / 2
Регистрация: 26.11.2010
Сообщений: 371
04.04.2013, 00:24 #19
Подборка цвета, очень важно для начинающих и дальтоников!

https://kuler.adobe.com/
http://colorschemedesigner.com/
0
Taatshi
Администратор
11481 / 4948 / 253
Регистрация: 05.04.2011
Сообщений: 13,595
Записей в блоге: 2
04.04.2013, 09:35  [ТС] #20
Wahlberg, уже оба есть. Но спасибо за попытку.
0
illya_pritex
5 / 2 / 1
Регистрация: 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
Дзен-программист
119 / 84 / 5
Регистрация: 10.04.2013
Сообщений: 253
16.04.2013, 13:48 #22
Can I use... - очень полезный сайт: в удобном виде представлено, какой функционал поддерживают разные браузеры и их версии.
5
Бабуля
71 / 71 / 17
Регистрация: 10.08.2012
Сообщений: 202
14.06.2013, 00:58 #23
Иконки для сайта - приятный сайт, сделан для людей, огромный выбор иконок, распределенных по категориям, скачивание с Яндекс диска.

Шапки для сайта - все шапки разбиты на категории, разные размеры, скачивание с Яндекс диска.
2
koza4ok
625 / 434 / 4
Регистрация: 19.09.2012
Сообщений: 1,633
12.09.2013, 15:37 #24
Очень был шокирован
Трансформации для IE http://www.useragentman.com/IETransformsTranslator/
4
newJS
2390 / 1063 / 98
Регистрация: 23.06.2011
Сообщений: 3,323
24.10.2013, 12:07 #25
Жаль только, что криворукие читать это не будут....
Все правильные doctype и запрещенные в них HTML теги
2
EPMAK
tribal dance
166 / 150 / 10
Регистрация: 03.09.2009
Сообщений: 822
Записей в блоге: 17
08.01.2014, 17:08 #26
Nе большой CSS респонсивный фрэймворк. (мини версия твиттер бутстрапа и похожих фв).
Kube
1
monochromer
405 / 367 / 144
Регистрация: 03.01.2013
Сообщений: 961
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 / 76
Регистрация: 04.11.2012
Сообщений: 638
23.05.2014, 07:05 #29
Parfait - очень удобный сервис для верстальщиков. Позволяет очень быстро и легко "нарезать" и сохранить PSD-макет, определяет css-свойства каждого элемента макета по клику на нем, расстояния между элементами и многое другое. Отличная замена Photoshop-у.
К примеру, раньше я резал и разбирал макет в фотошопе где-то час-два, с этим сервисом на всё про всё уходит минут 10...
Разрабы этого сервиса пишут, что сервис адекватно работает только с хромом, но я его на фаерфоксе юзаю - никаких проблем.
0
Вова101
21 / 13 / 4
Регистрация: 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
20.07.2014, 06:14
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.07.2014, 06:14
Привет! Вот еще темы с ответами:

полезные ресурсы - 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 сообственно...


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

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

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