Создаем иконку с помощью CSS3

В данном уроке мы создадим иконку документа с использованием свойств CSS3. Для нее потребуется только один элемент HTML. 

План действий

1.Создаем прямоугольник.
2.Округляем углы.
3.Используем псевдо-элемент для создания загнутого уголка.
4.Создаем иллюзию текста с помощью полосок градиента.

Начнем!

Шаг 1. Создаем прямоугольник

Начнем с добавления единственного элемента HTML: тега ссылки. Большинство иконок работают как ссылки.

Code
<a class="docIcon" href="#">Иконка документа</a>


В нашем примере иконка будет иметь размер 40x56px. В реальном проекте его можно уменьшить. Также нужно использовать свойство display: block, потому что тег ссылки является строчным элементом по умолчанию.

Code
.docIcon {
  background: #eee;
   
  background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
  background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   
  border: 1px solid #ccc;
  display: block;
  width: 40px;
  height: 56px;
  position: relative;
  margin: 42px auto;
}


Обратите внимание, что мы установили позиционирование содержания, чтобы упростить работу с псевдо-элементами.

Далее, добавим прелести с помощью теней CSS. Чтобы скрыть текст мы используем свойство text-indent.

Code
.docIcon
{
  ...
  -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
  -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
  box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
   
  text-indent:-9999em;
}


Вот что у нас получилось:

 

Шаг 2. Скругленные углы.

Теперь округляем углы:

Code
.docIcon
{
  ...
  -webkit-border-radius:3px 15px 3px 3px;
  -moz-border-radius:3px 15px 3px 3px;
  border-radius:3px 15px 3px 3px;
}


Передавая четыре значения мы определяем радиусы закругления для углов начиная с левого верхнего и далее по часовой стрелке.

 

Шаг 3. Загибаем один уголок.

Для создания иллюзии загнутого уголка мы будем использовать псевдо-элемент.

Сначала добавим к нашей иконке :before. В нашем случае никакого текста не требуется. Но нужно создать квадрат с размером стороны 15px и использовать для него градиент в качестве фона.

Code
.docIcon:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  background: #ccc;
   
  background: -webkit-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
  background: -moz-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
  background: -o-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
  background: -ms-linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
  background: linear-gradient(45deg, #fff 0, #eee 50%, #ccc 100%);
   
  -webkit-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  -moz-box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
  box-shadow: rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px;
   
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}


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

Code
...
-webkit-border-radius:0px 15px 0px 0px;
-moz-border-radius:0px 15px 0px 0px;
border-radius:0px 15px 0px 0px;


 

Шаг 4. Добавляем строчки текста.

Теперь будем использовать псевдо-элемент :after, чтобы добавить несколько штрихов, представляющих текст на странице. Устанавливаем ширину 60% и значения свойств margin-left и margin-right 20% (что дает в итоге 100%). Затем задаем высоту и позиционирование как 0 и 0.

Code
.docIcon:after
{
  content:"";
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:60%;
  margin:22px 20% 0;
  height:15px;
}


Создание набора строк потребует использования трюка. Если хорошенько подумать, то для получения эффекта можно использовать градиенты CSS. Сначала разделим высоту на пять, и для каждого блока зададим заполнение. Смотрите на ниже приведенную картинку.

 

Code
.docIcon:after
{
  ...
  background:#ccc;
  background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  background: -o-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  background: -ms-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
  background:linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%);
}


Готово!

  • FalleN

  • 11468

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!