Цветовыделение ников при помощи CSS (без Javascript)

Я предлагаю вам вариант цветовыделения ников при помощи чистого css, на этот раз способ чуть потяжелее, вам придется поработать над ним, но поверьте, оно того стоит! Данный вариант выделяет ники нужных пользователей абсолютно везде!
Код выглядит вот так:

/*администраторы*/
a[href$="/profile.php?id=2"] {color: red !important;} 
a[href*="javascript:to('C3La-NS')"] {color: red !important;}
a[href$="/profile.php?id=25"] {color: red !important;} 
a[href*="javascript:to('Рома')"] {color: red !important;}
a[href$="/profile.php?id=37"] {color: red !important;} 
a[href*="javascript:to('Seo')"] {color: red !important;}
/*модераторы*/
a[href$="/profile.php?id=52"], a[href$="/profile.php?id=82"], a[href$="/profile.php?id=546"] {color: #00b4ff !important;}
a[href*="javascript:to('Fakin')"], a[href*="javascript:to('AirMax')"], a[href*="javascript:to('Хатико')"] {color: #00b4ff !important;}

В принципе, цветовыделение готово. Но если вы сохраните в таком виде, то заметите существенные проблемы, а именно: профиль в самом верху форума окрасится, а так же под аватаркой в сообщениях профиль тоже будет цветным.
Некрасиво, согласитесь?
Благо, при помощи всё того же css можно все исправить. )

#pun-navlinks li a[href$="/profile.php?id=2"] {color: #fff !important;}
.punbb .pl-email a{color: rgb(0, 51, 102) !important;}

Добавляем этот код. Значения меняем под дизайн вашего форума.
Но, к сожалению, у нас опять возникнут проблемы: после наведения на пункт профиль в заголовке форума, он не станет активен (в нашем случае он должен стать светло-голубым).
Опять неприятность... и опять css спасает.
Если вы используете свой стиль, то зажмите комбинацию клавиш Ctr + F и введите это: #pun-navlinks.
Немного полистав вы наткнетесь на такой пункт: #pun-navlinks a:hover. Именно это нас интересует.
Лично у меня этот код выглядит так:

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #9bc4ce;
  text-decoration: underline
  }

Нам нужно к цвету просто добавить значение !important
То есть код будет выглядеть так:

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #9bc4ce !important;
  text-decoration: underline
  }

Готово!
Тот же самый !important можно и добавить для

/* CS3.3 */
#pun-navlinks a {
  color: white;
  text-decoration: none
  }

Дабы избавится от строчки

#pun-navlinks li a[href$="/profile.php?id=2"] {color: #fff !important;}

Автор кода: Romych

Чтобы доказать вам, что возможности css безграничны, я пожалуй, расскажу как окрасить в другой цвет отдельно взятую ленту названия категории форума MYBB.
Если вы уже обладаете определенными навыками css, то наверняка знаете, что все категории подчиняются одному и тому же свойству.
Чтобы окрасить только одно ленточку, но при этом не задев остальные, то придется включить фантазию.
Немного поэкспериментировав я все же нашел как это сделать, а сделать оказалось куда проще чем я думал.

#pun-category9 h2 {
background:  цвет;
}

Где 9 это номер нашей категории.
Номер вашей категории вы можете узнать разделе категории в админке вашего форума.
Цифра соответствует номеру категории. Если у вас там все по нулям, то укажите цифры от 1 до последней вручную, а затем нужную цифру подставьте в код.

Когда воруют уникальный материал, над которым Вы работали долгое время и очень старались - ситуация не из приятных. Очень часто, для предотвращения плагиата люди используют всевозможные коды на JavaScript или jQuery. Но данный способ очень дырявый и обойти его сможет любой желающий простым выключением модуля JavaScript.
Назревает вопрос: "а есть ли что-то более надежное"?
Что же, можно попробовать соорудить своего рода "защиту" от несанкционированного копирования через стили сайта, то есть методами CSS.
Используем этот простой код CSS:

-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none

Что он делает?
Этот код всего-навсего блокирует выделение текста мышкой. Если выделение не работает, то и скопировать ничего нельзя.
Как адаптировать этот код под форумы (MYBB) ?
Пример использования:

<style>
body {-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none}
</style>

Тем самым мы запретим выделение текста на всем форуме.
Вместо body конечно же можно прописывать и свои отдельные элементы.
* Стоит отметить, что если кому действительно нужно скопировать что-то у Вас - он скопирует. Методы обхода такой защиты есть - например, отключение CSS в браузере. Но многие начинающие о нем не знают.

Если случилось так, что вам нужно размыть какой-нибудь элемент дизайна, то больше не надо обращаться к JavaScript. Отныне это умеет и CSS.
Как сделать?
Код выглядит вот так:

filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    -webkit-filter: blur(2px);

То есть, если вам необходимо размыть весь форум то ставим такой код:

<style>
body {  filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    -webkit-filter: blur(2px);}
</style>

Никто и никогда обычно не использует вертикальный текст: Возможно мало кто знает о нем, возможно он не всегда попросту нужен.
Но все же это очень необычное css свойство и о нем просто обязательно нужно рассказать.
Все реализуется очень просто

<div style="-webkit-transform: rotate(90deg); transform: rotate(90deg);">пример</div>

Обычно галерею приходится делать с помощью Javascript или jQuery. И хотя эти языки довольно неплохи, но у них есть два значительных недостатка. Во-первых, скорость загрузки JS файла всегда ниже, чем того же HTML или CSS. Во-вторых, сценарии JS легко обходятся выключением.
Вместе эти две проблемы дают составить один неутешительный вывод: при создании сайта использовать JavaScript или jQuery нерационально и даже опасно.
Что тогда делать? Я думаю лучше использовать CSS!

Код:

<style>
.element1 {
 vertical-align: middle;
 width: 30em;
 height: 10em;
 display: inline-block;
 overflow: hidden;
 white-space: nowrap;
 word-wrap: normal;
}

.element1 img {
 transition: .5s;
 -webkit-transition: .5s;
 width: 10em;
 height: 7em;
}

label[for="left1"], 
label[for="left2"], 
label[for="right1"], 
label[for="right2"] {
 font-weight: 600;
 font-size: 3em;
 cursor: pointer;
}

#right1:checked ~ label[for="right2"], 
#right1:checked ~ #right2:checked ~ label[for="left2"] { display: inline; }

#left1, 
#left2, 
#right1, 
#right2, 
label[for="left2"], 
label[for="right2"],
#right2:checked ~ label[for="left1"],
#right1:checked ~ label[for="right1"] { display: none; }  /* убираем лишние элементы, в том числе чекбоксы и пару стрелок с обоих сторон (всего их четыре) */

label[for="left1"], #right2:checked ~ label[for="right2"] { visibility: hidden; }  /* чтобы вся форма не сдвигалась в результате исчезновения стрелки, делаем первую и последнюю стрелочки прозрачными. opacity для этих целей не подходит, поскольку в случае его применения курсор не меняет свой внешний вид и на пустом пространстве имеет форму руки */
#right1:checked ~ label[for="left1"] { visibility: visible; }

#right1:checked ~ .element1 img {transform: translateX(-10em); -webkit-transform: translateX(-10em);}
#right2:checked ~ .element1 img {transform: translateX(-20em); -webkit-transform: translateX(-20em);}
</style>
<center>
<input type="radio" id="left2" name="raz1"/><input type="radio" id="left1" name="raz"/><input type="radio" id="right1" name="raz"/><input type="radio" id="right2" name="raz1"/>

<label for="left2">〈</label> <label for="left1">〈</label> 
<div class="element1">
  <img src="http://s4.uploads.ru/odCNP.jpg" alt=""/>
  <img src="http://s5.uploads.ru/HZwU1.jpg" alt=""/>
  <img src="http://s5.uploads.ru/izYXj.jpg" alt=""/>
  <img src="http://s5.uploads.ru/5MPNc.jpg" alt=""/>
  <img src="http://s4.uploads.ru/zO9Hf.jpg" alt=""/>
</div>
<label for="right1">〉</label> <label for="right2">〉</label>
</center>

Еще один маленький урок расскажет и покажет вам возможности современного CSS и HTML.  Сразу хочется сказать что данные коды очень новы и по-настоящему поддерживаются лишь в новых браузерах. Скорее всего в старых версиях данные примеры просто работать не будут.
Итак, сегодняшняя тема - это вкладки на чистом CSS! Да! Теперь это возможно и без JavaScript.
Все реализуется вполне простым и понятным кодом, а именно:

Код:

<style>
.korpus > div, .korpus > input { display: none; }

.korpus label { padding: 5px; border: 1px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; background: #fff; }
.korpus input[type="radio"]:checked + label { border-bottom: 2px solid #fff; }

.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 1px solid #aaa; }
</style>

<div class="korpus">
  <input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">Слайд 1</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">Слайд 2</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">Слайд 3</label>
  <div>первая вкладка</div>
  <div>вторая вкладка</div>
  <div>третья вкладка</div>
</div>