Рубрика «css» - 95

    В один прекрасный день я обнаружил, что narod.ru, наше все в области истории рунета и неисчерпаемый кладезь вырвиглазных сайтов, продался! Ucoz купил его. Невелика беда, подумал я, после того как перерегистрировал все свои старые сайты под ucoz и на время забыл о проблеме. Но вот недавно узнав о существовании изобилия генераторов статических сайтов я принял решение сделать еще один сайт ни о чем. Какого же было мое удивление, когда выяснилось, что Ucoz.ru более не поддерживает загрузку файлов html, обрекая вас использовать его конструктор сайтов помимо воли.

    Конечно, можно купить хостинг за пару долларов в месяц, можно найти бесплатный хостинг с perl, php и mysql. Можно даже идти в ногу с достижениями времени и воспользоваться heroku или google app engine, получив в нагрузку еще и поддержку передовых языков программирования. Но все это не то. Нет души. Разве может сравниться ламповая закачка обновлений по FTP с бездушной публикацией нажатием одной кнопки в WordPress? Не может. Именно поэтому давайте посмотрим где и как сегодня можно сделать статический сайт.Читать полностью »

В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
Читать полностью »

Как-то раз, бороздя просторы интернета в поисках новых идей, я наткнулся на статью на Хабре Как мы написали helpdesk. В данной статье было описание системы очень похожей на ту, которую я создаю уже больше полугода. И я решил о ней написать.
Читать полностью »

С CSS 3D Transforms у вас есть безграничные возможности. Но могущество влечет за собой ответственность. Вы будете сталкиваться с ситуациями, когда вы сможете воспользоваться всеми трехмерными преимуществами CSS. Однако в большинстве проектов вы сможете лишь слегка приукрасить некоторые вещи.

Сегодняшнее сокровище – это эффект, который завоевывает все большую популярность и создается за счет 3D Transforms. Благодаря этому мы поместили несколько изображений на ось z, после чего использовали мышь в качестве ложной трехмерной камеры, таким образом, чтобы перспектива изменялась при передвижении курсора мыши. На самом деле в этом случае мы поворачиваем изображение в трехмерном пространстве в соответствии с положением мыши.

Демо
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №148 (16 — 22 февраля 2015) - 1
Читать полностью »

Самые нужные плагины для Grunt - 1

Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Grunt. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Grunt найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.

Читать полностью »

в 12:06, , рубрики: css, css3, html, sass

Компонент пагинации, дружественный к мобильным телефонам, который легко можно настроить при помощи CSS и Sass.

Пагинация — простой способ перемещения пользователя между контентом на вашим сайте. Другая альтернатива — бесконечная прокрутка, которая имеет как сильные так и слабые стороны. Я знаю что фреймворки, такие как Bootstrap, позволяют Вам создавать пагинацию в секундах, однако, 1) не все используют фреймворки или не могут использовать для каждого проекта и 2) я создал сниппет с предварительной установкой классов CSS, который немного легче настроить, при этом Вы экономите свое время.
Читать полностью »

голые пятницы

Здравствуй, дорогой читатель хабра!
Сегодня мы поговорим о «липких» блоках, новом свойстве для изображений object-fit, продвинутом использовании CSS-счетчиков, ключевом слове currentColor, и о том, есть ли анимация в z-index.
Читать полностью »

Предлагаю читателям «Хабрахабра» перевод публикации «Product Quick View» с сайта codyhouse.co.

Существуют некие паттерны в мире дизайна электронной коммерции, направленные на увеличение коэффициента конверсии за счет упрощения пользовательского опыта. Другие паттерны пытаются достичь той же цели путем предоставления дополнительной информации там, где это необходимо. Быстрый просмотр продукта относится ко второй категории.
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №147 (9 — 15 февраля 2015) - 1
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js