Блог веб разработчика

09.02.2018

Добавить шрифты в css

Обычно шрифты подключаются из fonts.google.com. Однако, часто в PSD макетах для верстки используются шрифты, отсутствующие там. В таком случае приходится искать шрифты в других местах и скачивать архив с ними. Для подключения новых шрифтов в файле стилей необходимо прописать следующее:

@font-face {
  font-family: 'AvenirNextCyr-Bold';
  src: url('../fonts/AvenirNextCyr-Bold.eot');
  src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {

font-family: 'AvenirNextCyr-Bold';

src: url('../fonts/AvenirNextCyr-Bold.eot');

src: url('../fonts/AvenirNextCyr-Bold.eot#iefix') format('embedded-opentype'), url('../fonts/AvenirNextCyr-Bold.woff') format('woff'), url('../fonts/AvenirNextCyr-Bold.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

09.02.201809.02.2018

Увеличить изображение при наведении

Необходимо, чтобы при наведении мыши на картинку, она увеличивалась. Сделать это можно с помощью следующего css кода:

img:hover{
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform:scale(1.1) ;
  -o-transform: scale(1.1);
  transform:scale(1.1) ;
}

img:hover{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform:scale(1.1) ;

-o-transform: scale(1.1);

transform:scale(1.1) ;

}

07.02.201807.02.2018

Где брать шаблоны оформления элементов сайта

Очень часто заказчик хочет чтобы его сайт выглядел красиво и эффектно и при этом сам не знает как. В таком случае можно посмотреть примеры оформления на следующем сайте: atuin.ru/blog/

Там можно найти красивое и нестандартное оформление:

Списков
Таблиц
Иконок
Видео
И многое другое

Скопировать код в верстку очень просто, html код добавляется на страницу, а css свойства дописываются в файл стилей.