Поиск по этому блогу

Показаны сообщения с ярлыком css. Показать все сообщения
Показаны сообщения с ярлыком css. Показать все сообщения

четверг, 26 января 2017 г.

Мне нужен беспалтный Хостинг CSS, JS, ...mp3, пока берем Dropbox

Предполагаю, что эти облачные сервисы Гугла занк того, что пора прикупить место у какого-нибудь хостера. На этот пост я угрохал два дня. Наконец, дошли руки до стилей этих блогов. Оказалосб, что Гугл с августа всем рекомендует Google cloud... Сначала по-быстрому залил css-файлы для этого блога на DropBox и порадовался, что все быстро решилось... Но с испугу решил поискать более надежный хостинг для моих аудио-файлов. И пришел к (неверному) выводу - использовать Dropbox... Здесь временное решение.

воскресенье, 4 декабря 2016 г.

CSS3 Multiple Backgrounds

Можно ли использовать стопку из нискольких картинок для фона. Здесь я попробовал одну картинку, но с разным увеличением и положением. А пример в самом низу с анимацией, так что смотреть сначала на него (анимацию не зациклил). Вполне можно использовать для того, чтобы показать разные участки одной большой картинки.

воскресенье, 20 ноября 2016 г.

Читаем Sass Best Practices: Tips And Tools For Developers

И находим ссылки на 10-ток статей, по темам: Aesthetic Sass, 11 Mixin Libraries For Sass Designers, HOW I STRUCTURE MY SASS PROJECTS, Understanding CSS Writing Methodologies, For, while, and each loops in Sass, Единицы измерения: "px", "em", "rem"

вторник, 30 августа 2016 г.

Посмотрел видео о классах "CSS - Who Wins?", а перед этим задумался об инструментах для CSS

Если стиль блока включает несколько классов, то какие "главнее"? Когда порядок объявления стилей в css файлах второстепенен? Эти вопросы особенно важны, когда у элемента разметки много классов (BEM). Как лучше использовать префиксы, оптимизаторы, json2html, Map HTML to JSON, beautifytools, CSS Optimizer, What is Modernizr? Best Free CSS Optimization Tools to Tune up Your Site, Bootstrap wrapper no conflict

воскресенье, 14 августа 2016 г.

Как склеивать, чистить, сжимать файлы css и javascript

Здесь я еще не знал, как вообще работать с этими файлами. Но уже занл про GULP плагины. Потому решил найти онлайн инструменты для быстрой склейки (например) CSS... Нашел много чего: PageSpeed Insights, What is the Closure Compiler..., jsmin, Разработка → Разгони свой сайт – автоматическая СКЛЕЙКА + GZIP...

суббота, 13 августа 2016 г.

Видео и презентация о CSS3 Flexible Box

Нашел статью на Хабре, потом видео (30 минут), свойства Flexbox надо использовать. Вспомнил, что недавно, просматривая учебник по CSS3, не обратил внимние..., вернее, не захотел вникать (без надобности) в новый подход к выравниванию html-блоков. Исправлюсь..., для тренировок буду испоьзовать примеры с **w3schools.com

Видео и презентация CSS3 Flexible Box

Нашел статью на Хабре, потом видео (30 минут), свойства Flexbox надо использовать. Вспомнил, что недавно, просматривая учебник по CSS3, не обратил внимние..., вернее, не захотел вникать (без надобности) в новый подход к выравниванию html-блоков. Исправлюсь..., для тренировок буду испоьзовать примеры с **w3schools.com

четверг, 28 апреля 2016 г.

Здесь я устанавливаю Foundation на локалку и обретаю понимание основ

Начинаю привыкать к установкам типа git clone https://github.com/zurb/foundation-sites-template projectname cd projectname npm install bower install. Более ранние установки foundation оказались "кривоватыми", поскольку не представлял, что какой софт делает... Такой период в конце апреля наступил, когда "тупо" ничего не устанавливается, везде надо хоть немного разбираться в том, что делаешь... А устанавливал, чтобы проще было изучать... Словом, Ruby-cтрдания "чайника"...

вторник, 22 марта 2016 г.

Что делает less.js в twitter bootsrap - компилирует все в css... может ли быть хуже?

Начинать надо с самых простых вариантов компиляции less --> css. Потому я вспомнил про less.js in the browser, опробовал этот вариант на экспорте bootstrap из Pingendo (он офрмирует сразу оба варианта: less и css). Оказалось, что результирующий код сss тупо записывается в заголовок html-файла.
Очевидно, что такой же компилятор в Atom должен работать куда быстрее. Установил несколько плагинов less, здесь описаны толко два (компилятора). В сочетании с плагином сервера (atom-live-server) все должно работать замечательно...

вторник, 8 марта 2016 г.

Как правильно задавать стили в css файлах? Знакомимся с методиками для CSS

Первые гуглопоиски вывели на страницы с BEM Yandex, Bootsytap, Compass, Foundation. Ссылки сохранил, а начал со статьи на Хабре. В статье дано краткое описание БЭМ •OOCSS •SMACSS •Atomic CSS •MCSS •AMCSS •FUN

четверг, 25 февраля 2016 г.

Склад (почти рассортированная свалка) 50 первых ссылок для frontend-разработчика

Началось все с того, что я подумал, что должны же быть какие-то аналоги bootstrap, и инструменты для подбора цветов, и редакторы для верстки, и методики для компиляции стилей и управления файлами...
Здесь несколько групп ссылок по темам: bootsrap, less, on-line editors, desktop... Brackets...

пятница, 12 февраля 2016 г.

Как лучше поместить видео в фон страницы

Действительно, как лучше разместить блок с видео. Берем плагин Video-Backgrounds-tubular и обнаруживаем, что разработчики использовали блок с параметрами position: fixed; z-index: 50; Здесь только ссылки на демо страницу (на хостинге tmweb.ru), на демо плагина ... и фрагменты кода плагина.

Обрывки кода. Как сплющить контейнер для видео так, чтобы он стал адаптивным

Пример кода и ссылка на статью, в которой разжевано про прием с контейнером height: 0; padding-bottom: 56.25%; Здесь же ссылка - напоминания о формировании моего презрения к Joomla (вместе с хаками стилей)

вторник, 5 января 2016 г.

CSS. Подбор вариантов фона с градиентом для кнопок главного меню Protostar Joomla

Здесь с десяток примеров кнопок. Я в итоге остановился на горизонтальном градиенте... Надеюсь, что этот черновик облегчит мне посторные процедуры подбороа фонов для кнопок или меню.

вторник, 29 декабря 2015 г.

Изменения в CSS3 Box Model - теперь есть box-sizing property

Согласно привычной бокс-модели (CSS) параметр width задавал ширину контента, чтобы вычислит реальную ширину надо было добавить padding+border+margin... Это написано в "CSS Box Model"..., а я еще вспоминаю про то, что недавно и в разных браузерах все было по-разному...

понедельник, 28 декабря 2015 г.

CSS3 Пример анимации с 20 мейнфреймами

Не могу сказать, что это лучший вариант, и здесь только код без комментариев... Но в целом ясно, как можно использовать notebook для добавления стилей

четверг, 24 декабря 2015 г.

CSS для формы обратного вызова на фоне анимации

Подбираем код для того, чтобы сместить форму в правый верхний угол, потом меняем фоны в форме, потом размышляем над вариантами background: linear-gradient,

понедельник, 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)

среда, 2 декабря 2015 г.

Joomla Template Protostar. Как вставить в footer (иди debug) карту сайта

Ясно было, что надо бы что-нибудь вставить в несколько колонок. В процессе поиска плагина прочитал, что "карта сайта в футере" - это хороший тон. Проникся, попробовал плагин "Joomla Footer Sitemap Menu". Не понравилось, как он сделан.
Я же форматировал лет пять назад плавающие блоки... Вспомнил, как это делается... не заглядывая в справочники. Рецепт таков: к каждому блоку (обертывающему блочному элементу) добавляем класс (здесь .sed). А в custom.css добавляем 6 строчек со свойствами класса.