/ Адаптивность / Грамматика верстки шаблона

Грамматика верстки шаблона

HIT

Полезные моменты по селекторам CSS

1. Высоту задавать только в пикселях.

2. Атрибут position:absolute относителен родительскому блоку с атрибутом position: .

3. .class1_.class2 — класс2 внутри класса1, если без пробела, то правила распространяются при наличии у элемента обоих классов. Второй способ не предпочтителен, т.к. в development tools данный стиль не появляется.

4. Заголовки пишем всегда с заглавной буквы далее строчными — Заголовок. Все строчные мы можем сделать заглавными стилем — ЗАГОЛОВОК, обратно сложнее.

5. Для теней лучше использовать черный цвет с процентом прозрачнсти rgba(0, 0, 0, 0.5)

6. Плавное появление/исчезновение псевдоэлемента при наведении курсора (кроссбраузерно)

<span class="pic-url"><a href ="<?php echo get_attachment_link(); ?>"><i class="fa fa-pencil-square-o"></i></a></span>

.pic-url {position: absolute; left: 10px; top: 10px;}

.pic-url a .fa {color: #fff;}

.pic-url:after {
    opacity:0;
    content: "комментировать";
    color: #fff;
    transition: opacity .3s ease-in-out;
    -webkit-transition: opacity 0.3s ease-in-out 0s; 
}

.pic-url:hover:after {
    opacity:1;
    content: "комментировать";
    color: #fff;
}

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

8. Равномерное распределение колонок-блоков. Блоку контейнеру задаем свойства (кроссбраузерные):
-webkit-column-count: 5; -moz-column-count: 5; column-count: 5;
Число (5) — это необходимое количество колонок.
Содержащиеся в контейнере блоки должны быть со свойствами:
width: 100%; display: inline-block;

И еще один момент: при использовании свойства column-count в колонках (кроме первой) пропадают маркеры. Чтобы этого избежать, самим пунктам (li) нужно добавлять свойство list-style-position: inside;. Минусом является то, что маркеры некорректно выравниваются, если в пункте больше одной строки.

9. Создаем перечеркнутый круг вокруг изображения:

<div class="icon red"><div class="line-red"></div><img src="картинка" ></div>

.icon {position: relative;}

.line-red {
    width: 85%;
    border-bottom: 8px solid #ff5722;
    -webkit-transform: rotate(-35deg);
    position: absolute;
    margin-top: -4px;
    top: 50%;
    left: 0;
    margin-left: 15px;
}

.icon.red img {border: 8px solid #FF5722;}

.icon img {border-radius: 100px; width: 80%;}

10. Класс не должен начинаться с цифры!

11. При верстке сайта стараться делать margin вниз и направо.

12. Зачастую использование свойства display: inline-block более оправдано чем float: left. Например для меню, для иконок соц.сетей, для повторяющихся элементов. Между элементами со свойством display: inline-block появляется пробел. Есть 2 простых метода устранить это: первый, ставить элементы вплотную без пробелов. Второй способ: не закрывать тэг, этот способ подходит для определенных элементов (p, li, td и пр.).

Либо если тэги должны быть закрытыми (div), то расстояние между элементами должно быть заполнено комментированием:

<div><!-- //родительский div
     --><div> блок 1 </div><!--
     --><div> блок 2 </div><!--
     --><div> блок 3 </div><!--
--></div>

13. В верстке любого сайта следует руководствоваться практичностью использования того или иного элемента. Не должно быть ничего лишнего. Данный принцип особенно актуален при проектировании мобильных версий.

14. list-style-image с пользовательским изображением выравнивается по вертикали не корректно. Вместо этого лучше делать свойство background:

.area ul li, .area ol li {
    margin: 5px 0;
    padding-left: 20px;
    list-style-type: none;
    background: url(images/doth.gif) no-repeat left center;
}

15. Селекторы для специальных ссылок:

a[href^="mailto"] {  }
a[href^="tel"] { text-decoration: none !important; cursor: default; color: #000; }

16. Мутные (размытые изображения) исправляются свойством

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

12. Два и более transform прописываются в одно свойство: transform: rotate(15deg) translate(-20px,0px);

13. Пустой элемент (без какого либо содержимого) обозначается псевдоклассом :empty. Данный псевдокласс удобно также использовать и в jquery.

14. Использовать background, а не background-color.

15. Прописываем всем изображениям img {display: block;} тогда они будут плотно прижаты к низу.

16. Тень для png изображений:

-webkit-filter: drop-shadow(5px 5px 5px #222); 
filter: drop-shadow(5px 5px 5px #222);

17. Непереносимость текста (например телефона в шапке): white-space: nowrap;

18. Простой эффект обводки:

#news ul li {outline: transparent solid 4px;}
#news ul li:hover {outline-color: #fff;}

19. Ширина подпунктов меню. Если относительно родительского пункта пункты подменю получаются шире (длиннее текст) и начинают съезжать строки, то нужно подпунктам прописать свойство:

#site-menu ul.sub-menu li {width: 100%; white-space: nowrap;}

20. Если блок с position: fixed; ведет себя как position: absolute; то в родительском блоке есть стиль transform: translate, который влияет на это.

21. Предпоследний элемент. Свойство :nth-last-child() это свойство :nth-child() только с конца, т.е. :nth-last-child(2) — второй элемент с конца.

22. Блок контактов над картой. Чтобы карта была доступна для манипуляций мышкой, то над слоями над картой нужно установить свойство pointer-events: none; а на блоке с контактами свойство pointer-events: auto;

23. Если на первом экране делаем иконку прокрутки до следующего блока. Можно сделать универсальную ссылку на следующий невидимый блок, чтобы не привязывать к ID конкретного блока, который может быть разным на разных сайтах.

<a href="#toscroll"><img src="/wp-content/uploads/2021/01/scroll-mouse-light-b.gif"></a>

<div id="toscroll"></div>

24. text-overflow: ellipsis; Обрезанный oferflow: hidden текст в конце обрезается […].

25. Новые интересные селекторы CSS

Элемент p содержит элемент strong:

.menu-contacts p:has(strong) {
    margin-bottom: 30px;
}

Класс элемента содержит слово:

*[class*="cell"] img {
    width: 100%;
    display: block;
}

ID элемента содержит слово:

.product[id*='product'] {
    display: grid;

}

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Грамматика верстки шаблона
Выдвижной Footer
Рекомендации для васВыдвижной FooterOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.