Leaderboard
Popular Content
Showing content with the highest reputation on 04/14/2016 in all areas
-
events:{ 'click' : 'createGraph' }, как я понял, ты создаешь элемент. ну и указываешь просто событие, а то что ты указал - используется вслучае если нужно сделать делегирование на внутренний элемент. backbone прост) хоть я и впервые его вижу1 point
-
Всем спасибо за помощь. Итог такой: 1) удаление неиспользуемых элементов: Аддон для FireBug - https://addons.mozilla.org/en-US/firefox/addon/css-usage/ отдельный плагин Dust-Me Selectors - https://addons.mozilla.org/ru/firefox/addon/dust-me-selectors/ 2) чистка правил, компоновка - http://css.github.io/csso/csso.html1 point
-
Вникайте https://habrahabr.ru/post/131848/ Там куча примеров с кодом похожих на то, что Вы ищите.1 point
-
https://jsfiddle.net/0yh8751v/1/ переменна ctx объявлена локально, и в настройках jsfiddle для javascript нужно выбрать Load type: No wrap - in <head>1 point
-
https://addons.mozilla.org/en-US/firefox/addon/css-usage/ https://unused-css.com/1 point
-
А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый JS. Но не писать же "Hello World" в конце концов - не спортивно это как-то. Да и хочется создать что-то более-менее полезное для сообщества. Мы верстальщики, конечно ни разу не дизайнеры, но я стал за собой замечать, что частенько поучаю дизайнеров делать так а не эдак. И вот подумал как-то раз: дай-ка я для коллег замучу чо-нить полезное. Короче, давайте уже без лишних слов делать гриды, а? Значит так, первым делом нам надо заиметь Photoshop CC, потом нам нужно будет выполнить самую скучную часть работы, а именно прочитать документацию. Согласен - "БУЭ!" - сам терпеть не могу это дело. Причём, нам даже две (!) книжки прочитать придётся! Но иначе как научиться то? Значит первым делом читаем Scripting Guide(PDF): там написано как вообще писать скрипты для Photoshop CC, и как в частности сделать тот самый "Hello World" (хе-хе). А после того как вы замутите свой первый скрипт можно начинать мутить магию. Для магии нам понадобится справочник(PDF). Целиком его читать не будем, а только то, что нас интересует. Теперь определимся с тем, что будет делать наш скрипт. А будет он работать так: 1) Открываем новый документ или юзаем уже открытый 2) Спрашиваем какую ширину колонки хочет наш дизайнер 3) Спрашиваем какое расстояние между колонками (в инглише - gutter) хочет наш дизайнер 4) Создаём гайдлайны поверх открытого макета или в новом файле. 5) Все дизайнеры радуются и благодарят нас 6) Мы прохажываемся туда-сюда такие важные Открывайте ваш любимый текстовый редактор (я открыл Atom), создавайте новый файл с расширением .js и погнали писать код: // Первым делом получаем ссылку на документ с которым работаем var currentDocument = app.activeDocument; // Дальше лезем в справочник, нажимаем CTRL+F и ищем "guides". // Угу нашли, получаем сылку на интерфейс гайдов var guides = currentDocument.guides; // Получаем ширину и высоту открытого документа var docWidth = currentDocument.width; var docHeight = currentDocument.height; // Функция, которая будет делать основную работу за нас function createGrid(colSize, colGutter, rowSize, rowGutter) { if (colSize !== 0) { // запомним ширину колонки вместе с отступом var colTotalSize = colSize + colGutter; // посчитаем сколько всего колонок поместится в документе var cols = docWidth / colTotalSize; // нас интересует только целая часть - полумеры для слабаков! cols = parseInt(cols); // интересно, а какая ширина у всех колонок? var totalColWidth = cols * colTotalSize; // а сколько нам от края надо отступить, чтобы всё это дело по центру встало? var offsetLeft = (docWidth - totalColWidth) / 2; // цикл... // // Раз подругу посадил на мотоцикл, // У неё от страха прекратился цикл for (var i = 0; i <= cols; i++) { // первый гайд рисовать не надо (он всё равно за пределами документа может оказаться) if (i > 0) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) - parseInt(colGutter / 2)); } // последний гайд тоже не рисуем, т.к. он с другой стороны тоже вылезет за пределы документа if (i < cols) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) + parseInt(colGutter / 2)); } } } if (rowSize !== 0) { // запомним высоту строки вместе с отступом var rowTotalSize = rowSize + rowGutter; // посчитаем сколько всего строк поместится в документе var rows = docHeight / rowTotalSize; // нас интересует только целая часть - полумеры для слабаков! rows = parseInt(rows); // интересно, а какая высота у всех строк? var totalRowHeight = rows * rowTotalSize; // а сколько нам сверху надо отступить, чтобы всё это дело по центру встало? var offsetTop = (docHeight - totalRowHeight) / 2; // эта... кхм for (var i = 0; i <= rows; i++) { // ну, как и ранее, первая и последняя полосочка нас мало волнует if (i > 0) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) - parseInt(rowGutter / 2)); } if (i < rows) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) + parseInt(rowGutter / 2)); } } } } // запустим функцию и спросим у товарища юзера какую он сетку хочет собссно createGrid( parseInt(prompt('Друг, введи ширину колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по ширине, а', 10)), parseInt(prompt('Друг, введи высоту колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по высоте, а', 10)) ); Далее я загуглил себе хомячка для опытов, а именно подумал какую я сетку хочу попробовать замутить. Выбор пал на iPhone 4... а вот потому что я ща под мобилки верстаю. Ну и просто по приколу (потому кстати значения по умолчанию 30 и 10 в коде). Вот зверёк: Там 60 и 20, но мы то знаем, что во всём коварная ретина виновата! Так что не верим ей и уменьшаем всё в 2 раза. Двухмегабайтная гифка процесса! Простите, ужимал как мог. Всем спасибо за внимание1 point
This leaderboard is set to Kiev/GMT+02:00
-
Upcoming Events
No upcoming events found -
Сообщения форума
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-