Разработка


Как улучшить CSS код

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

В ходе разработки, мне довольно-таки часто приходиться сталкиваться с разным исходным CSS кодом. Совсем недавно столкнулся с таким вот нерациональным написанием:

.class {
  margin-top: 15px;
  margin-bottom: 5px;
  margin-right: 10px;
  margin-left: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: #cc0000;
  font-family: Verdana, Helvetica, Arial;
  font-size: 14px;
  font-weight: bold;
}

Зачем городить такую кучу, если можно сделать проще:

.class {
  margin: 15px 10px 5px 5px;
  border: 5px solid #333333;
  font: bold 14px Verdana, Helvetica, Arial;
}

Поля и отступы

.class {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 12px;
  margin-left: 7px;
}

Более «правильный» вариант:

.class {
  margin: 10px 5px 12px 7px;
}

Стоит отметить, что компактная форма записи margin: 10px 5px 12px 7px дается строго в определенной последовательности: первое значение — отступ сверху (top), второе — отступ справа (right), третье — нижний отступ (bottom) и четвертое — отступ слева (left).

margin

Запоминается это очень даже легко. Представьте себе...


CSS3 навигация с эффектами

HTML5 и CSS3 навигация с эффектами

Безумно люблю какие-то изящные и интересные способы реализации разных менюшек, навигационных панеляк. Сегодня мы с вами сделаем навигационное меню (примерчик) с эффектами для сайта, которое очень здорово смотрится на любом сайте. :-)

Смотрится очень просто и интересно, но сделать такое меню еще проще, чем кажется на первый взгляд. Все что нам понадобится — дак это чистый CSS3 и HTML.

HTML код для навигация с эффектами

В меню используем типовую разметку с элементом HTML5 nav:

<nav>
  <ul>
    <li><a href="#">Домой</a></li>
    <li><a href="#">Разработка</a><span class="dropBottom"></span>
      <ul>
        <li><a href="#">Дизайн</a><span class="dropRight"></span>
          <ul>
            <li><a href="#">Фотошоп</a></li>
            <li><a href="#">Иллюстратор</a></li>
            <li><a href="#">Веб дизайн</a><span class="dropRight"></span>
              <ul>
                <li><a href="#">XTHML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Статьи</a></li>
        <li><a href="#">Интервью</a></li>
      </ul>
    </li>
    <li><a href="#">О сайте</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

CSS код для навигация с эффектами

CSS код тоже достаточно простой:

  nav {
    display:table;
    margin:50px auto;
    box-shadow:0px 2px 0px #023333;
  }
  ul {
    margin:0;
    padding:0;
    list-style:none;
  }
  ul ul {
...

Скриптец для добавления ссылочки на источник материала

Сегодня захотелось рассказать о скрипте, который помогает защищать сайты блоги от воровства контента и копирования материалов сайта. Данный скрипт после копирования какого-либо текста с сайта, добавляет ссылку на источник материала, которая в свою очередь подскажет поисковым системам, где настоящий источник материала, а где вор.

Такой метод спасает от машинных и автоматических копирований текста, материалов Ваших сайтов, блогов. К примеру, если Вы захотите скопировать, украсть контент с моего бложека. Чуть ниже появится примерно следующий текст:

Источник: http://evgmoskalenko.com/development/skript-dobavleniya-ssylki-na-istochnik-materiala-pri-kopirovanii-kontenta.html
© Блог Евгения Москаленко

Скрипт для WordPress:

Для cms вордпресс все очень просто. Надо открыть файлик functions.php и добавить туда код:

function evgmoskalenko_copyright() { ?>
  <script>
    document.oncopy = function () {
      var bodyElement = document.body;
      var selection = getSelection();
      var href = document.location.href;
      var copyright = "<br><br>Источник: <a href='"+ href +"'>" + href + "</a><br>© Блог Евгения Москаленко";
      var text = selection + copyright;
      var divElement = document.createElement('div');
      divElement.style.position = 'absolute';
      divElement.style.left = '-99999px';
      divElement.innerHTML = text;
      bodyElement.appendChild(divElement);
     ...