CSS Hat, font, background

Наглядный пример

наклонный шрифт 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 и начните уже использовать по-настоящему быстрые вещи в своих проектах.

Раскрутка и продвижение сайта, оптимизация SEO

Что такое Django?

Discussions

  1. admin

    Coding Home Work

Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages
Filter by Categories
CSS
JavaScript
Word Press
www