Согласно привычной бокс-модели (CSS) параметр width задавал ширину контента, чтобы вычислит реальную ширину надо было добавить padding+border+margin... Это написано в "CSS Box Model"..., а я еще вспоминаю про то, что недавно и в разных браузерах все было по-разному...
Вынужден поддерживать windows, linux, android, делать сайты с html,css, javascript, php, java. А сайты потом надо администрировать... Drupal, WP, Joomla, Moodle... И редактировать видео, и осваивать анимацию... И front-end приблудился недавно... Compass-scss, GULP, Jekyll, bootstrap, foundation... Куда же денешься... Здесь ЧЕРНОВИКИ !!!
вторник, 29 декабря 2015 г.
понедельник, 28 декабря 2015 г.
CSS3 Пример анимации с 20 мейнфреймами
Не могу сказать, что это лучший вариант, и здесь только код без комментариев... Но в целом ясно, как можно использовать notebook для добавления стилей
четверг, 24 декабря 2015 г.
CSS для формы обратного вызова на фоне анимации
Подбираем код для того, чтобы сместить форму в правый верхний угол, потом меняем фоны в форме, потом размышляем над вариантами background: linear-gradient,
понедельник, 21 декабря 2015 г.
Хаки модуля "Call me back" Joomla
Чтобы сделать из формы обратного вызова баннер оборачиваем ее в три дива. Сначала, естественно, создаем копию модуля /html/mod_itf_call_me_back/default.php, а потом добавляем туда теги. Первоначальный код почти не изменился, хотя вопросы и есть..., но здесь только код с двумя добавленными строчками и одним хаком скрытой ссылки.
четверг, 17 декабря 2015 г.
Находим самоучитель JavaScript и осваиваем Dev Tools и ScratchPad Firefox
Не путать эту консоль с консолью страницы... Ctrl+Shift+k
понедельник, 14 декабря 2015 г.
Sourcerer, или как добавлять разные стили и скрипты для разных страниц в Joomla
Самый правильный вариант - добавить соответствующий PHP-код. А можно запихивать фрагменты в HTML-модуль, а модуль прикрепить к нескольким пунктам меню (материалам). Но последний вармант - это нарушение стандартов W3C. Я попробовал нарушать, ...получилось, но не захотелось. Здесь ссылки на несколько модулей
Custom css, Custom HTML module, Flexi Custom Code, EasyScript. Пока я выбрал и успешно юзаю Sourcerer, он позволяет вставлять все... и везде, здесь php вставки для подгрузки скриптов и стилей в head страницы.
четверг, 10 декабря 2015 г.
CSS3 эксперименты с анимацией баннеров
Сделал две прозрачные картинки ("схему" и "тетку с быком"), вставил их в баннер, заставил двигаться по расписанию. В итоге наложил их друг на друга. Надо экспериментировать дальше. Здесь по сути попробовал только background-position, background-size, transform: skewX(60deg)
среда, 9 декабря 2015 г.
Снова Gimp и Imagick, и Graphic Design Stack Exchange
На этот раз мне понадорбилось делать фон прозрачным для сначала для одной (в Gimp), а потом для всех картинок в папке. Сделал все быстро, но записать не успед, о чем жалею..., а здесь только видео и ссылки... Первая ссылка на Graphic Design Stack Exchange - очень полезный ресурс... и почему эти программы так хорошо документированы?
четверг, 3 декабря 2015 г.
Полезные ссылки на примеры команд ImageMagic и Gimp
Понадобилось сделать аватарки и кнопки и иконки для сайта. И еще понадобятся скоро баннеры, да не простые, а "резиновые" (fluid or adaptive). Надо вспомнить, что у меня есть для работы с изображениями. Начал с Gimp, поставил ImageMagic, вспомнил, что недавно поставил Inkscape и в сентяюре надо было раскурочить какое-то видео, потому у меня есть ffmpeg. Все эти инструменты можно использовать для редактирования изображений. Здесь я конвертирую картинки в png и делаю для всех фон прозрачным. Для нескольких изображений это проще делать в ImageMagick
среда, 2 декабря 2015 г.
Joomla Template Protostar. Как вставить в footer (иди debug) карту сайта
Ясно было, что надо бы что-нибудь вставить в несколько колонок. В процессе поиска плагина прочитал, что "карта сайта в футере" - это хороший тон. Проникся, попробовал плагин "Joomla Footer Sitemap Menu". Не понравилось, как он сделан.
Я же форматировал лет пять назад плавающие блоки... Вспомнил, как это делается... не заглядывая в справочники.
Рецепт таков: к каждому блоку (обертывающему блочному элементу) добавляем класс (здесь .sed). А в custom.css добавляем 6 строчек со свойствами класса.
вторник, 1 декабря 2015 г.
CSS3 animations. Повтряем примеры из документации
Чтобы понять, как это использовать, надо это попробовать. Здесь ва примера и ссылки на все свойства и примеры из документации.