|
Почетный модератор
|
|
Полезные ресурсы для web-мастера10.01.2013, 16:04. Показов 122860. Ответов 67
Метки нет (Все метки)
Справочники 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://cssarrowplease.com/ - генератор CSS кода декоративной стрелки у блока. 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
|
|
(| 10.01.2013, 16:04 | |
|
Ответы с готовыми решениями:
67
Q: полезные ресурсы ОН-ЛАЙН для оптимизатора Полезные ресурсы полезные ресурсы |
| 15.09.2015, 11:14 | ||
Оптимальные сочетания цветов В помощь дизайнеру: оптимальные сочетания цветов Если верно понял, то эти группы-квадраты в которых по шесть разно цветных полос это и есть гармонирующие цвета. Компьютерный алгоритм, программа, имхо не способна на создание не большой базы данных гармонирующих цветов. Здесь только ручная работа человека. Кстати, здесь огромная работа - дизайнер составил 200 блоков с гармонирующими цветами. В каждом блоке представлены по шесть сочетаемых цветов. Может быть это фейк, хз. Но я верю, что это правильная подборка сочетаемых цветов - сразу видно что эти цвета сочетаются. Очень классные сочетание цветов. Если кто не понял как этим пользоваться. Выбираем любой квадрат с цветами. К примеру вот этот: Здесь шесть цветов (слева на право) 1.грязно-синий 2.бледно-синий 3.насыщенно-синий 4.ярко-коричневый 5.бледно-серый 6.белый Вот, используя только эти ^ шесть цветов и составляем цветовую схему вашего сайта. К примеру цвет ссылок на сайте это будет №4 цвет. Фон сайта это №5 цвет. Цвет текста №2 цвет. И так далее. Кстати, эту коллекцию оптимального сочетания цветов можно использовать не только для создания цветовой схемы сайта, а - везде-везде-везде. Даже для плетения наручных разноцветных браслетов, оформления цветовой схемы вашей кухни. Может быть другие веб мастера-художники дополнят этот список своими примерами сочетающихся цветов. [52,56МБ] - ссылку не проверял - обязательно проверяйте архив Вашим антивирусным программным обеспечением
0
|
||
Сообщение от Taatshi
|
28 / 28 / 9
Регистрация: 26.12.2015
Сообщений: 93
|
|
| 08.01.2016, 23:23 | |
|
Минификация SVG SVGO, полезен после для чистки svg после редакторов вроде Illustrator или Inkscape
1
|
|
| 14.03.2016, 13:18 | |
|
Подбор размера шрифта, междустрочного интервала и ширины контента на основе золотого сечения:
http://www.pearsonified.com/typography/
0
|
|
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
|
|
| 19.06.2016, 14:34 | |
|
2
|
|
|
0 / 0 / 0
Регистрация: 17.11.2015
Сообщений: 1
|
|
| 29.08.2016, 22:29 | |
|
Генератор каруселей. http://www.comslider.com/
0
|
|
|
632 / 440 / 67
Регистрация: 19.09.2012
Сообщений: 1,632
|
|
| 07.10.2016, 13:05 | |
|
2
|
|
  
|
|
| 04.11.2016, 18:20 | |
|
unicode-table.com - Таблица символов Юникода
uncss-online.com - Удаление неиспользуемых стилей + Shorthand fontello.com - Генератор иконочных шрифтов https://developer.microsoft.co... 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
|
|
|
0 / 0 / 0
Регистрация: 01.02.2017
Сообщений: 1
|
|
| 01.02.2017, 20:32 | |
|
Спасибо за такое огромное количество полезной инфы
0
|
|
278 / 272 / 106
Регистрация: 12.01.2016
Сообщений: 1,666
|
|
| 20.04.2018, 00:18 | |
|
Cервис с иконками на чистом css http://cssicon.space/#/
0
|
|
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
|
|
| 02.09.2018, 17:32 | |
|
1
|
|
|
^
425 / 50 / 16
Регистрация: 23.07.2014
Сообщений: 301
|
|
| 14.09.2018, 19:14 | |
|
Генератор CSS-спрайтов - https://spritegen.website-performance.org/
0
|
|
|
0 / 0 / 0
Регистрация: 03.09.2021
Сообщений: 1
|
|
| 03.09.2021, 04:18 | |
|
Спасибо!
0
|
|
|
Молодой техлид)
|
|
| 04.09.2021, 17:29 | |
|
В копилку web кодеру
https://tympanus.net/codrops/category/playground/ - очень крутые примеры https://codepen.io/ https://html5css.ru/ https://www.w3schools.com/howto/ https://www.codeply.com/ - 40,000 code snippets, по моему немного меньше кодов чем в кодепен, но тоже неплохо https://codyhouse.co/library - Effects, Navigations, Templates, UX Patterns https://littlesnippets.net/ - сборник интересных примеров, не написано сколько примеров, написано только что сайт с примерами на движке joomla https://webdevtrick.com/ - статьи и примеры html js bootstrap https://codemyui.com/ - интересный ресурс с большим количеством примеров, есть препросмотр, код примеров в codepen. нет поиска и фильтра, но есть рубрикатор https://css-tricks.com/snippets/ - сайт со статьями, в общем отличный ресурс если хочешь посмотреть как че сделать. https://angrytools.com/css/animation/ - удобный и гибкий генератор CSS анимации, есть примеры анимации, которые можно загрузить и изучить Также на сайте есть генератор компоновки flex, grid, css gradient Статьи на сайте www.w3.org https://css-playground.com/ - интересные примеры и генераторы css для различных свойств
1
|
|
|
3 / 2 / 0
Регистрация: 06.08.2021
Сообщений: 2
|
|
| 27.11.2021, 15:03 | |
|
Центрирование
http://howtocenterincss.com 2 Коллекция ховеров для ссылок, кнопок, лого, свг http://ianlunn.github.io/Hover/ 3 Документация для разработчиков на человеческом языке https://doka.guide 4 Neumorphism https://neumorphism.io/ 5 https://caniuse.com https://border-radius.com генератор бордеров https://specificity.keegan.st Калькулятор специфичности https://html5please.com https://css3please.com 6 Кодировщик RGB http://hex2rgba.devoth.com 7 Генератор CSS гранитов https://www.colorzilla.com/gradient-editor/ 8 https://squoosh.app 9 https://uigradients.com/#50ShadesofGrey 10 The Ultimate Guide To iPhone Resolutions https://www.paintcodeapp.com/n... esolutions 11 https://www.mydevice.io 12 Словари по фронтенду https://github.com/web-standards-ru/dictionary 13 Слова, часто используемые в CSS-классах https://github.com/yoksel/common-words#readme 14 Словарь терминов Git и GitHub https://github.com/win-win-io/... ain/git.md 15 HTML & CSS: как не надо https://yoksel.github.io/bad-practices/ 16 Простой CSS https://yoksel.github.io/easy-css/ 17 Простые правила разметки http://yoksel.github.io/easy-markup/ 18 Стиль кода Академии HTML https://codeguide.academy/html-css.html#formatting 19 Flexbugs https://github.com/nikolai-shabalin/flexbugs 20 Простое руководство по HTML-элементам в <head> https://github.com/htmlacademy... ый-минимум 21 Clippy — CSS clip-path maker https://bennettfeely.com/clippy/ 22 A simple guide to HTML <head> elements https://htmlhead.dev/#recommended-minimum 23 https://cssreference.io 24 Create Beautiful SVG Shapes https://www.softr.io/tools/svg-shape-generator 25 https://keyframes.app 26 Contrast Checker https://webaim.org/resources/contrastchecker/ 27 https://htmlreference.io Grid Песочница https://tpverstak.ru/grid/ https://flukeout.github.io — ответы подсмотреть здесь или тут Кликните здесь для просмотра всего текста
# https://flukeout.github.io/ #
01. plate 02. bento 03. #fancy 04. plate apple 05. #fancy pickle 06. .small 07. orange.small 08. bento orange.small 09. plate, bento 10. * 11. plate * 12. plate + apple 13. bento ~ pickle 14. plate > apple 15. orange:first-child 16. plate apple:only-child, plate pickle:only-child 17. .small:last-child 18. plate:nth-child(3) 19. bento:nth-last-child(3) 20. apple:first-of-type 21. plate:nth-of-type(even) 22. plate:nth-of-type(2n+3) 23. plate apple:only-of-type 24. orange:last-of-type, apple:last-of-type 25. bento:empty 26. apple:not(.small) 27. *[for] 28. plate[for] 29. bento[for="Vitaly"] 30. *[for^="Sa"] 31. *[for$="ato"] 32. bento[for*="obb"] https://cssgridgarden.com/#ru https://alialaa.github.io/css-grid-cheat-sheet/ https://griddy.io https://yoksel.github.io/grid-cheatsheet/ https://cssgrid-generator.netlify.app Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал A Complete Guide to Grid https://learncssgrid.com https://grid.malven.co Flex http://flexbox.help Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал Flex FLEXBOX DUCKY Кто не любит лягух, вот вам ути) https://courses.cs.washington.... xboxducky/ https://cssgradient.io https://9elements.github.io/fancy-border-radius/# https://mastery.games/flexboxzombies/ Css 3.0 maker https://www.toptal.com/develop... index.html https://snippet-generator.app - snippet-generator Итак, вашему вниманию CSS Speedrun. Кажется, в объяснении не нуждается https://css-speedrun.netlify.app/ Ответы к css-speedrun.netlify.app
0. li:first-child
1. p:not(.foo) 2. li:nth-child(2n+3) 3. div > * 4. span[data-item] 5. p ~ span 6. form > *:enabled 7. #one, #two, #five, #six, #nine 8. a + span 9. #foo > .foo 10. div > div > span + code:not(.foo) The HEARTED 2021 codepen года https://codepen.io/2021/popular/pens/1 Среди новичков (да и не только) зачастую отсутствует понимание того, как же всё-таки выглядят вообще все HTML-теги. Но это-то ладно. А вот для чего нужен normalize? sanitize? reset? bootstrap? Что происходит-то вообще? Почему нельзя просто на одной странице всё наглядно показать и сравнить?! Так можно! HTML5 Kitchen Sink. Всё в кучу! https://github.com/dbox/html5-kitchen-sink/ https://codepen.io/dbox/pen/gMbeYw?editors=1100 Заходим, переключаем, сравниваем. Разрабатываем своё. Интерактивные руководства: https://codewars.com/ (задачи по программированию) [требуется регистрация] https://edabit.com/ (задачи на JavaScript) https://learngitbranching.js.org/ (руководство по Git) https://regexcrossword.com/ (регулярные выражения) https://sqlzoo.net/ (SQL) https://vim-adventures.com/ (освоение редактора VIM в режиме игры) Cheat Sheet - Emmet Documentation https://docs.emmet.io/cheat-sheet/ https://htmlcheatsheet.com https://htmlcheatsheet.com/css/ https://htmlcheatsheet.com/js/ https://html-css-js.com/html/tags/ https://cssbattle.dev/ https://epixx.github.io/emmet/ - Основы: Как работает Emmet Генератор CSS border-radius https://developer.mozilla.org/... _generator Генератор CSS Grid сеток https://grid.layoutit.com Генератор CSS-анимаций https://animista.net w3 http://www.w3schools.com/ - справочник с возможностью редактирования кода ВЫ УЖЕ ЗНАЕТЕ, классный, на англ. Вот вам на русском копия Например про CSS Селекторы. Справочник https://w3schoolsrus.github.io... #gsc.tab=0 https://schoolsw3.com/cssref/css_selectors.php https://w3schoolsrus.github.io https://www.w3schools.com/howto/ https://schoolsw3.com/howto/ CSS Selector tester Use our CSS Selector Tester to demonstrate the different selectors. https://www.w3schools.com/cssref/trysel.asp Горячие клавиши Visual Studio Code https://nikomedvedev.ru/other/... tkeys.html https://www.colorion.co
2
|
|
|
3 / 2 / 0
Регистрация: 06.08.2021
Сообщений: 2
|
|
| 17.02.2022, 15:48 | |
|
База шрифтовых файлов: https://webfonts.pro/
Генератор шрифтовых файлов: https://transfonter.org/ https://www.flaticon.com/ru/ 12 бесплатных игр для изучения CSS https://techrocks.ru/2019/11/2... -learning/ https://active-vision.ru/icon/box-shadow/ https://css-tricks.com/the-shapes-of-css/
0
|
|
|
Молодой техлид)
|
|
| 26.06.2022, 22:50 | |
|
https://runebook.dev/ - переводы документации на разные библиотеки в одном месте
1
|
|
|
Молодой техлид)
|
|
| 13.07.2022, 16:11 | |
|
Огромное количество сравнений различных библиотек www.educba.com/.../top-differences-tutorial
1
|
|
|
Молодой техлид)
|
|
| 17.07.2022, 15:06 | |
|
https://livebook.manning.com/ - технические книжки можно читать бесплатно как написано ограниченное время в день и исходники качать можно еще книги продают в твердом переплете, книг реально много и современные вплоть до 2022
1
|
|
|
Молодой техлид)
|
|
| 30.10.2022, 12:48 | |
|
Очередной сборник с примерами на html css js jq bs etc: https://freefrontend.com/
0
|
|
|
Молодой техлид)
|
|
| 08.12.2022, 12:47 | |
|
https://hcdev.ru/ - Справочник HTML и CSS, также есть справочники с переводом на русский: Typescript, Angular, React, Node.js, Python 3, XSLT
1
|
|
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
| 08.12.2022, 12:47 | |
|
Помогаю со студенческими работами здесь
60
Полезные материалы/ресурсы/программы/библиотеки по Qt Примеры и полезные ресурсы регулярных выражений Какие бесплатные ресурсы можете посоветовать для изучения Python в плане Web? web мастера Ищу Web-мастера/контента Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Гайд, как ворваться в вайб-кодинг в мае 2026
Noname2331 17.05.2026
Простите за получившееся полотно текста, я даже не знаю, как его разбить на главы. Тут, что называется, ни добавить ни убавить, одна сцена одним дублем.
На моих глазах недавно случилось чудо. Как. . .
|
[golang] Алгоритм «Хак Госпера»
alhaos 17.05.2026
Алгоритм «Хак Госпера»
Хак Госпера (Gosper's Hack) — алгоритм нахождения следующего по величине числа с тем же количеством установленных бит.
Придуман Биллом Госпером в 1970-х, опубликован в. . .
|
Рисование бинарного древа до 6-го колена на js, svg.
russiannick 17.05.2026
<svg width="335" height="240" viewBox="0 0 335 240" fill="#e5e1bb">
<style>
<!]>
</ style>
<g id="bush">
</ g>
</ svg>
function fn(){
let rost;/ / высота древа
let xx=165,yy=210,w=256;
|
FSharp: interface of module
DevAlt 16.05.2026
Интерфейс модуля F# позволяет управлять доступностью членов,
содержащихся в реализации модуля. По-умолчанию все члены модуля доступны:
module Foo
let x = 10
let boo () = printfn "boo"
. . .
|
|
Хитросплетение родственных связей пантеона греческих богов.
russiannick 14.05.2026
Однооконник, позволяющий узреть и изучить отдельных героев древней Греции.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible". . .
|
[golang] Угол между стрелками часов
alhaos 12.05.2026
По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов.
import "math"
func angleClock(hour int, minutes int) float64 {
. . .
|
Debian 13: Установка Lazarus QT5
ВитГо 09.05.2026
Эта инструкция моя компиляция инструкций volvo
https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html
и его же старой инструкции по установке Lazarus с gtk2. . .
|
Нейросеть на алгоритме "эстафета хвоста" как перспектива.
Hrethgir 06.05.2026
На десерт, когда запущу сервер.
Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .
|
Наверх