Вёрстка HomeWork *
Шрифт
наклонный шрифт font-style: italic; | normal;
заглавные буквы font-variant: small-caps; | lowercase; | uppercase; | none;
толщина шрифта font-weight: normal; | bold; | bolder; | lighter;|normal;|100;|200;|300;|400;|500;| 900;
размер шрифта font-size: 25px;
выравнивание text-align: left; | center; | right; | justify;
оформление шрифта text-decoration: line-through; | underline; | overline; | none; (там где подчёркнуто всегда должна быть ссылка)
отступ в начале параграфа (красная строка) text-indent: 25px;
первый символ каждого слова заглавный text-transform: capitalize;
переносы запрещены white-space nowrap; | pre;
интервал между словами word-spacing: 20px;
интервал мужду буквами letter-spacing: 2px;
интервал между строчками line-height: 1.5;
импорт шрифта в начале файла стиля:
@import url(‘https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display’);
там где используется шрифт:
font-family: ‘Sedgwick Ave Display’, cursive;
FONT2WEB
Google Fonts
Фон
цвет фона background-color: hex; | red; | rgb(a); | transparent;
градиент background: linear-gradient(to top, #dd4422, #552288);
импорт градиента http://www.colorzilla.com/gradient-editor/
рисунок или градиент фона background-image: url; | none;
фон, который не скролится background-attachment: fixed; | scroll;
повторение фона background-repeat: no-repeat; | repeat; | repeat-x; | repeat-y;
позиция фона background-position: left; | center; | right; | bottom; | %; | px;
вложить изображение background-size: cover; | contain;
Двойной фон (слева и справа):
body { background:
url(images/pattern-left.png) repeat-y,
url(images/pattern-right.png) 100% 0 repeat-y;
margin: 10px 100px; }
Colorzilla — сервис генерации градиентов фона
Autoprefixer — поможет с префиксами для animations, transition, transform, grid, flex, flexbox
Иконки
Perfect Pixel
ColorZilla
Web Developer
Photoshop CS6 + установить плагины для фотошопа: ‘CSS Hat’, ‘PNG Hat’
Gulp
Gulp.js — это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer’ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза. Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.
admin
Coding Home Work