+7(982) 597-7179

CSS сниппеты

0 мин. на прочтение

Сниппет (англ. snippet — отрывок, фрагмент) — фрагмент исходного текста или кода программы, применяемый в: поисковых системах, текстовых редакторах и средах разработки.

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

 

// выбираем все ссылки на zip-файлы (нечувствительно к регистру)
a[href$=".zip" i] { }

// сделаем красными ссылки на google.com
[href*="google.com"] { color: red; }

Этот приём может оказаться полезным при отладке, например, для выделения всех элементов img с пустым атрибутом alt:
img:not([alt]) {
 border: 2px dashed red;
}
img[alt=""] {
 border: 2px dashed red;
}

когда имеется множество элементов одного вида, между которыми должен быть отступ, причём, после последнего элемента такого списка отступ не нужен:

li + li {
 margin-top: 1rem;
}
// вместо
li {
 margin-bottom: 1rem;
}
li:last-of-type {
  margin-bottom: 0;
}

//Убрать оранжевую рамку в Chrome
input, textarea {outline:none;}  
input:active, textarea:active {outline:none;} 
:focus {outline:none;}  

//Запрет на изменение размеров форм
textarea {resize:none;}  
textarea {resize:vertical;}  
textarea {resize:horizontal;} 

//Например, чтобы все ссылки, ведущие на Facebook, были синего цвета, используем:

a[href*="facebook"] {
   color: blue;
}

//Если вы хотите выбрать все контейнеры кроме футера, используйте:
div:not(.footer) {
   margin-bottom: 40px;
}

 //Чтобы убрать границу у первого пункта меню и отступы у последнего, необходимо:
ul li:first-child {  
   border: none;  
}     
ul li:last-child {  
   margin-right: 0px;
}



//методикa вертикального выравнивания, называемой «douchebag vertical align»:
.element {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

Показывает интерактивное всплывающее меню при наведении указателя мыши

//html
<div class="reference">
  <div class="popout-menu">
    Popout menu
  </div>
</div>

//css
.reference {
  position: relative;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
}
.reference:hover > .popout-menu {
  visibility: visible;
}

Читайте также:

Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0