CSS

Интересные материалы.

https://caniuse.com — Проверка на кроссбраузерность
http://css.yoksel.ru — Фишки
https://csscompressor.com — Компрессор кода
http://nisnom.com — Библиотека анимаций
https://uigradients.com — Генератор градиента
http://grid.malven.co/ — css grid
https://www.fontsquirrel.com/tools/webfont-generator — форматирование шрифта в woff и woff2
https://transfonter.org/ — форматирование шрифта в woff и woff2
https://www.pngtosvg.com/

https://store.steampowered.com/hwsurvey/ — разрешения экранов steam

Разрешения по ширине || ширина сетки || название класса:

1280px || 1170px || h [huge]

1024px || 970px ||  b [big]

768px || 750px || m [medium]

320 — 375px  || 100% || s [small]

Ньюансы

Если буквы белым цветом и фон темным цветом, то лучше сделать заглушку background-color: #ddd. Зачем: если скорость интернета на устройстве низкая, то фон прогрузится не сразу и буквы будут видны сразу.

Справочник для верстальщика.

* {margin:0; padding:0;} — Сброс стилей
transform: rotateY(15deg); — Поворот по оси y на 180 градусов
letter-spacing: 1.6px; — Расстояние между буквами
overflow-wrap: break-word; — Перенос строк в скролле
:after :before — Доп элементы перед и после элемента
pointer-events: none; — Запрет перехода по ссылке
display: none — Исчезновение блока
input [type=submit]:hover — Изменение стиля при наведении
padding — Это пространство между содержимым внутреннего элемента и бордэром.
h1, p — Селекторы
bottom — Дно
top — Верх
link — Сылка
floats- Плавает
align — Выравнивать
width — Ширина
value — Значение атрибут в INPUT
opacity — Прозрачность задается в css значение от 0 до 1
background: rgba(0, 0, 0,  0.7); — Прозрачность без затрагивания внутренних элементов
z-index — Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.
:first-child — Первый элемент и «last-child» — последний
box-shadow: 0px(горизонталь) 0px(вертикаль) 0px(размытие) #000; — Тени
border-radius: — Радиус закругления
display: block: — Преобразовать строчный элемент в блочный
border: 1px solid #fff; — Пример рамки
box-siring: border-box; — Высота без плюсования паддинга
line-heght: 1.3em; — Межстрочный интервал.
overflow: hidden; — Решение, когда элемент выходит за пределы блока и и появляется скрол
для прозрачности блока без элементов делай подложку
line-height: 60px; — Выравнивание текста в кнопке
@font-face{ font-family: ‘Intro’; src: url (‘../fonts/Intro.otf’); font-weight: normal; } — Подключение шрифта с сервера
width: 100vw;  — Ширина экрана
transform: rotate(45deg); — Повернуть элемент на 45 градусов
line-height — Расстояние между строчками
outline: none; — Без обводки элементы формы
list-style: none; — Убирает кружочки и цифры в списке
letter-spacing: 5px; — Расстояния между буквами
text-transform: uppercase; — Буквы в верхнем регистре
text-decoration: none; — Ссылка без подчеркиваний
font-weight: 700/400; — Жирность текста
no-repeat — Изображение не повторяется, свойство на фоне
text-indent: -300px; — Сдвинуть текст влево или вправо(+)
font: italic; — Шрифт курсивом
opacity — Прозрачность
a:hover — Ссылка при наведении
a:visited — Ссылка по которой уже проходили

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *