Pull to refresh

«Сделайте мне красиво!» Выпуск №26

Lumber room
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:


Наши ссылки: RSS и лента на rpod.ru
Total votes 4: ↑3 and ↓1 +2
Views 479
Comments 0

Улучшаем юзабилити за 5 минут

Website development *
Tutorial
Translation
В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.

1. Отображайте нажатия кнопок и кнопкоподобных ссылок


Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

.mybutton:active {
   position: relative;
   top: 1px;
   left: 1px;
}

Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

2. Плавные переходы (CSS3 transitions)


Читать дальше →
Total votes 206: ↑179 and ↓27 +152
Views 7.2K
Comments 45

Предлагаются лёгкие кнопки «Дальше» (оптом, недорого)

Web design *
Поначалу введение кнопок, заметно выпадающих из дизайна по своим размерам, встретила массу осуждений в топике, посвящённом обновлению сайта 22 мая. Представитель Хабра Boomburum вполне с этим согласен и предлагает дизайн кнопки отправлять ему на личное сообщение. Однако, красивость одного решения, которое созрело в течение дня, предлагаю оценить всем.

Картинка для привлечения внимания:


А ведь бывают еще кнопки с пользовательским текстом, которые выглядят тем громоздче, чем больше текста в них, в то время как стилями решается и этот вопрос. Впрочем, лучше один раз увидеть
Total votes 128: ↑82 and ↓46 +36
Views 2.9K
Comments 98

Анимации, плавные переходы, преобразования и градиенты CSS3 будут беспрефиксными в Firefox 16

Firefox Website development *CSS *
Translation
В браузере Firefox 16 мы лишаем префикса:


Также и calc() может остаться без префикса (баг 771678).
Total votes 23: ↑18 and ↓5 +13
Views 2.8K
Comments 9

Hover-эффекты для круглых элементов с использованием CSS Transitions

Website development *CSS *
Translation

Сегодня я хочу познакомить вас с замечательными примерами hover-эффектов от Mary Lou. Многим понравились её примеры с hover-эффектами для меню и на этот раз она решила порадовать нас не менее замечательными примерами для круглых элементов. Поскольку сейчас у нас есть возможность использовать свойство border-radius, мы можем создавать круглые формы, и они все чаще появляются в качестве элементов дизайна на веб-сайтах. Один из вариантов использования, который мне более всего нравится, это круглые миниатюры, которые выглядят гораздо интереснее, чем обычные, прямоугольные. И сейчас мы собираемся создать несколько необычных эффектов при наведении на такие элементы!
Читать дальше →
Total votes 74: ↑69 and ↓5 +64
Views 32K
Comments 23

CSS слайдер

Website development *CSS *HTML *
С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии



Под катом пошаговое описание реализации
Total votes 58: ↑48 and ↓10 +38
Views 147K
Comments 45

CSS анимации на реальном проекте

Одноклассники corporate blog CSS *HTML *


Всё чаще среди веб-разработчиков поднимается тема возможностей CSS анимаций (transition/animation), практически на каждой конференции по клиентской разработке можно услышать о потрясающих преимуществах новой технологии.

Производительность и гибкость CSS анимаций позволяет творить удивительные вещи, но можно ли уже использовать эти новые возможности в силу их нестабильности и незрелости на реальных больших проектах?

В этом посте мы расскажем, почему так важно начинать использовать новые технологии клиентской разработки уже сегодня и о трудностях, которые могут ждать вас на пути.
Читать дальше →
Total votes 95: ↑87 and ↓8 +79
Views 91K
Comments 66

HINT.css — всплывающие подсказки средствами CSS

Website development *CSS *

Что


Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript.

Библиотека использует атрибут data-*, псевдоэлементы, свойство content и CSS3 transitions для вывода всплывающих подсказок.
Читать дальше →
Total votes 41: ↑36 and ↓5 +31
Views 32K
Comments 32

Красивое меню на CSS3

Website development *CSS *
Sandbox
Чуть меньше года назад Snickersmix публиковал статью "Меню с плавной инверсией цвета". В данной статье описывается меню, сделанное на JavaScript. Днём ранее он мне показывал сайт, на котором он делал это меню, и я, как поклонник NoScript, возмутился: «Это меню можно сделать на CSS!»

Красивое меню на CSS3

Я, конечно, погорячился, ибо сделать можно похожее меню, а не именно такое. Однако, обычный пользователь, особенно тот, который не в курсе дел, не заметит разницы. В том числе и я сразу не понял фишки этого меню. Хотя я поклонник всяких мелких деталей и нюансов при создании чего-либо, ибо из этих мелких деталей и нюансов строится общее впечатление о проекте.

Итак, предлагаю реализацию похожего меню на CSS3.

Чтобы сразу ты, уважаемый читатель, увидел отличия приведу финальную демку меню на CSS3 и демку меню от Snickersmix на JS

Теперь постараюсь вкратце рассказать про процесс создания

Читать дальше →
Total votes 38: ↑30 and ↓8 +22
Views 30K
Comments 8

Effeckt.css от команды HTML5 Boilerplate: избранные эффекты и переходы на CSS

Website development *CSS *Development of mobile applications *
Effeckt.css — это постоянно пополняемая подборка эффектов для оформления веб-приложений. Один из главных плюсов этой библиотеки эффектов — достаточно жёсткие критерии включения. Это не куча-мала, в которую сваливают всё подряд, каждый эффект должен соответствовать ряду критериев: эффекты должны быть практичными, их назначение — не демонстрировать возможности технологий, а облегчать и украшать жизнь пользователя, они должны работать быстро и плавно, они должны быть полностью совместимыми с мобильными технологиям.


Читать дальше →
Total votes 37: ↑31 and ↓6 +25
Views 18K
Comments 6

«backgroundImageTransition», плавная анимация фоновых изображений

CSS *JavaScript *HTML *
Tutorial
Sandbox


Во время создания front-end составляющей веб приложения, часто приходится сталкиваться с созданием так называемых hover-эффектов. Когда при наведении указателя мыши на DOM элемент меняется цвет ссылки, размер текста или иконка у пункта меню. С такой технологией, как CSS3 Transition, появилась возможность применять анимационные эффекты для DOM-элементов, без использования javascript-кода. Меня эта возможность сразу заинтересовала и я стал применять ее, без лишних усилий создавая плавные переходы.
Познать истину
Total votes 14: ↑10 and ↓4 +6
Views 26K
Comments 10

Презентация с помощью impress.js – просто и элегантно

TheOnlyPage corporate blog Working with 3D-graphics *
Tutorial
image
impress.js — популярный фреймворк предназначенный для создания неординарных, искрящихся профессиональным блеском презентаций, которые демонстрируются просто в браузере*.

В опубликованной несколько дней назад статистике GitHub impress.js занимает 2-е место по количеству звездочек среди проектов, созданных одним автором. Совсем небольшой фреймворк, главный прикол которого заключается в том, что он служит не для создания слайдов, а для отображения переходов между слайдами и, очень часто, для отображения сразу нескольких слайдов в трехмерном пространстве.

3D трансформации между слайдами делают игру.
Читать дальше →
Total votes 27: ↑25 and ↓2 +23
Views 26K
Comments 33

Интерфейс программирования презентаций на impress.js

Website development *
Tutorial
image
impress.js – популярный фреймворк предназначенный для создания впечатляющих презентация просто в браузере. Правда браузер для этого должен поддерживать CSS3 3d трансформации.

Подробный разбор моментов связанных с построением презентации и отображением отдельных слайдов был проведен в предыдущей публикации. Тогда за пределами нашего внимания остались возможности управления презентацией через API фреймворка. Для тех, кому мало получаемых «из коробки» возможностей impress.js, разберем его простой и компактный API.
Читать дальше →
Total votes 8: ↑6 and ↓2 +4
Views 6.1K
Comments 2

CSS3 hover effects. Пошаговый туториал

CSS *HTML *
Tutorial
Sandbox
При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.

Демо материалы лежат здесь.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:

<div class="effect>
  <img src="img/ef1.jpg" alt="Effect #1" />
  <div class="caption">
    <h4>Title is Here</h4>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p>
    <a class="btn" href="#" title="View More">View More</a>
  </div>
</div>

Читать дальше →
Total votes 23: ↑21 and ↓2 +19
Views 100K
Comments 8

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 1

Website development *CSS *HTML *
Tutorial
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Вторая часть. Третья часть.

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Подготовка к работе.

Для создания эффектов понадобится такая дефолтная html-структура. Вместо .eff в коде каждого конкретного эффекта будет использоваться класс .eff-n, где n — номер эффекта:

  <div class="eff">
    <img src="img/ef1.jpg" alt="Effect #1" />
     <div class="caption">
        <h4>Title is Here</h4>
        <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
         </p>
          <a class="btn" href="#" title="View More">View More</a>
        </div>
    </div>


Читать дальше →
Total votes 11: ↑4 and ↓7 -3
Views 14K
Comments 0

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 2

Website development *CSS *HTML *
Tutorial
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Третья часть.

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Читать дальше →
Total votes 13: ↑10 and ↓3 +7
Views 12K
Comments 0

Intermediate CSS3 Hover Effects. Пошаговый туториал. Часть 3

Website development *CSS *HTML *
Tutorial
Эта статья является логическим продолжением моей предыдущей статьи, посвященной основам CSS3 transitions и, если в ней я показывала принципы работы этих основ на простых примерах, сейчас я хотела бы перейти к более сложным, красивым и интересным эффектам.

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

Демо материалы лежат здесь. Все префиксы проставлены в демо, здесь же я не буду на них акцентировать.

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

Читать дальше →
Total votes 13: ↑10 and ↓3 +7
Views 14K
Comments 2

А если без JavaScript?

CSS *HTML *
Sandbox
В нашем мире без JavaScript никуда! Куча фреймворков, библиотек и прочей радости! jQuery плотно вошел в нашу жизнь. React с Angular пробивают дорогу к светлому будущему. Да и не за горами поддержка браузерами ES6 без Babel.

Но если тема заходит об обычном сайте со стандартным функционалом, не редки случаи, когда JavaScript начинают “злоупотрелять”. И все, в принципе, нормально… Но порой задаешься вопросом: «А если без JavaScript?».
Total votes 90: ↑76 and ↓14 +62
Views 68K
Comments 131

Easing Functions – функции плавности для CSS-анимации и переходов

Skillbox corporate blog Website development *CSS *HTML *Mathematics *
Translation

Функции плавности меняют восприятие анимации, влияя на скорость воспроизведения и частоту кадров. Мы живые люди, и привыкли к естественному, нелинейному движению. Использование настраиваемых функций улучшает впечатление пользователей. В этой статье мы погрузимся в функции плавности, рассмотрим возможности их применения для создания потрясающей естественной анимации. Материал адаптирован на русский язык совместно с Максимом Васяновичем, ментором курса «Профессия Frontend-разработчик с нуля до PRO» в Skillbox.

Узнать больше
Total votes 7: ↑7 and ↓0 +7
Views 12K
Comments 0