Статьи

Как создать иконку календаря в HTML5 и CSS3

Октябрь 26, 2018

Вы видели недавнюю статью Симоне Сала, Как создать иконку приложения календаря в Photoshop ? Он выглядит великолепно, идеально подходит для приложения-календаря для смартфонов и очень актуален в 2014 году.

значок календаря

Можно ли создать подобный значок в HTML5 для использования и повторного использования на любой веб-странице? Конечно, это было бы … иначе я бы не написал эту статью!

Просмотрите демонстрацию иконки календаря HTML5 и CSS3 (наведите курсор на элемент, чтобы получить хороший эффект!)

Варианты

Несколько лет назад нам потребовалось изображение в формате PNG или GIF. Вы все еще можете сделать это, но их нелегко изменить, они не могут быть проиндексированы поисковыми системами и не масштабируются. Лучшим вариантом будет масштабируемая векторная графика (SVG); это позволило бы больше гибкости, но нам это не обязательно нужно.

Поэтому я собираюсь использовать малоизвестный элемент time Его единственная цель состоит в том, чтобы представлять дату и / или время — возможно, для события или годовщины. Базовый элемент использует следующий синтаксис для 9.01 вечера 20 сентября 2014 года: 

 <time>2014-09-20T21:01:00Z</time>

Вы можете определить только день: 2014-09-202014-092014 Финальная буква «Z» представляет всемирное координированное время (UTC). Вы можете заменить его собственным часовым поясом, например, +01: 00, -06: 00 и т. Д.

Хотя контент является машиночитаемым, для людей это не особенно легко. Таким образом, вы можете поместить определение даты / времени в атрибут datetime 

 <time datetime="2014-09-20T21:01:00+08:00">9:01pm, Saturday September 20<sup>th</sup>, 2014</time>

Вы обязательно должны учитывать элемент timeмикроданных и микроформатов .

Значок календаря HTML

Наш значок календаря будет использовать следующий HTML-код: 

 <time datetime="2014-09-20" class="icon">
  <em>Saturday</em>
  <strong>September</strong>
  <span>20</span>
</time>

Элементу time

Я использовал emstrongspan Это встроенные элементы без строгого семантического значения, поэтому даже без стилизации дата читаема. Однако при необходимости вы можете использовать разные элементы.

Значок календаря CSS

Сначала мы определим внешний стиль иконки: 

 time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: 7em;
  background-color: #fff;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
}

Высота и ширина иконки установлены на 7em. Поэтому мы можем изменить шрифт на любой размер, который нам нравится, и значок будет соответственно масштабирован. Попытайся!

Эффект страницы в нижней части значка применяется с использованием нескольких стилей box-shadow Первоначально я рассмотрел использование псевдоэлементов, но они не будут работать, потому что мы определили overflow: hidden

Обратите внимание, что мы установили относительную позицию, чтобы можно было располагать внутренние элементы. Давайте применим их основные стили: 

 time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

Универсальный селектор (*) применяет одинаковые стили к любому элементу в значке. Это, вероятно, будет хорошо, но, если у вас были разные макеты календаря, вы можете быть более точным.

Месяц оформляется с использованием следующего кода: 

 time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: #fd9f1b;
  border-bottom: 1px dashed #f37302;
  box-shadow: 0 2px 0 #fd9f1b;
}

Это помещает баннер в верхней части значка и создает перфорацию, используя пунктирную границу. Так как баннер больше, чем перфорированный край, я использовал еще одну box-shadow

День расположен у нижнего края: 

 time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: #fd9f1b;
}

Большое число даты изменяется и применяется базовое позиционирование: 

 time.icon span
{
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

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

Посмотреть демонстрацию значков календаря HTML5 и CSS3 …

Значок работает во всех современных браузерах, включая IE9 и выше (анимация работает на IE10 +). Эффект изящно ухудшается в IE8 и ниже, хотя вы должны увидеть разумный эффект, если примените прокладку HTML5 к своим страницам. Тем не менее, я обнаружил необычную ошибку анимации Webkit / Blink при разработке демонстрации — но я оставлю это для другой статьи.

Получайте удовольствие, используя код для ваших собственных эффектов значков календаря.

43
Share: