Обновил дизайн моего блога WPhacks.name

Благодаря технологии CSS3, сегодня можно творить потрясающие дизайнерские вещи, причем не прибегая даже к помощи Photoshop или других дизайнерских программ. В частности, в этом помогают такие замечательные CSS3-свойства, поддерживаемые современными браузерами, как text-shadow, box-shadow, border-radius и RGBA-цвета с альфа-прозрачностью.

На днях я обновил дизайн моего блога WPhacks.name о PHP-хаках для WordPress. При обновлении дизайна я хотел сделать акцент на использовании вышеуказанных свойств, и получилось, на мой взгляд, просто супер.

К примеру, обрамление основного блока с контентом приобрело эффект стекла, сделано это с помощью box-shadow и border-radius.

Градиенты в заголовках и в блоках с комментариями — с помощью box-shadow. Вообще-то для градиентов в стандарте CSS3 существует соответствующее свойство, но, поскольку Opera пока еще не поддерживает его, я делаю их через box-shadow, и, как видите, это неплохо получается.

Я решил отойти от стандартной концепции «контент + сайдбар» и вообще убрал сайдбар, перенеся все блоки из него в низ сайта. Раньше колонка с контентом была слишком узкой, а теперь стало просторно.

В нижней темно-серой части сайта используется RGBA-фон, через который, если приглядеться, просвечивается основной светло-серый фон страницы в виде шума.

Очень понравилось, как я сделал логотип WordPress — покрутите страницу вверх-вниз и посмотрите, как меняется изображение при переходе из серого фона в шапку. Ранее я где-то на англоязычных сайтах встречал подобные примеры и вот у себя решил воспользоваться этим эффектом. Как оказалось, делается очень просто — благодаря свойству background-attachment: fixed.

Еще хочу сказать пору слов про устаревшие, но популярные браузеры типа IE. Поскольку их пользователи либо по каким-то причинам не могут, либо просто не хотят установить современный браузер, поддерживающий последние веб-стандарты, то пусть довольствуются тем, что видят. Ведь на юзабилити сайта это никаким образом не сказывается, просто они не увидят тех красивостей, которые сделаны с помощью CSS3.

Касательно своих сайтов у меня принцип такой — смело применять CSS3-свойства, а если кто-то использует устаревший браузер при просмотре моих сайтов, я не виноват.

* * *

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

Комментарии (31)
  1. 1

    Красиво, но очень уж тормозит (при скролинге особенно сильно заметно). :-)

  2. 4
    @

    Согласен, в Fx 3.6 притормаживает. Это из-за

    box-shadow

    у больших блоков. На днях тоже делал редизайн, от теней отказался.

  3. 7

    CSS3 хорош но нужно учитывать что еще не многие могут позволить мощные компы, а тем более ставить все самое последние из ПО, сделав что-то новое можно оттолкнуть других…
    кстати Димох подскажи плиз где бы раздобыть похожий шаблончик который сейчас у тебя на этом блоге стоит ?

  4. 9
    Sarg

    Дизайн норм, почаще в нём пиши.

  5. 10

    О, симпотышно, спасибо :)
    Но, как сказали выше, пиши лучше чаще :) Твои статьи — мощь и польза, а уж дизайн мы как-нибудь любой переживем ;)

  6. 12
    Sergey

    css3pie не пробовали? для оперы можно svg использовать, реализуется это так

    • 13

      css3pie не пробовали?

      Пробовал, конечно.

      для оперы можно svg использовать, реализуется это так

      Спасибо за ссылку, не знал об этом. Надо будет как-нибудь потестировать.

    • 14
      Fint
      @

      все эти генераторы конечно клево! но опять картинки картинки картинки =)
      CSS


      .opera .b-doplerbox{
      background: #e14f35 url('data:image/svg+xml,<?xml version="1.0"?><svg xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="gr" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23e14f35"/><stop offset="1" stop-color="%23b62f17"/></linearGradient></defs><rect x="0" y="0" width="100%25" height="100%25" style="fill:url(%23gr)"/></svg>');
      }

      Jquery
      думаю понятно для чего

      <script type="text/javascript">
      if (window.opera && opera.version) {
      $('html').addClass('opera' + Math.floor(opera.version())).addClass('opera');
      }
      </script>

  7. 15
    daddy

    На хроме тоже тормозит.

  8. 16

    У меня тоже тормоза, аж жутко его хочется закрыть =)
    Мне кажется это из-за картинки, которая перемещается…
    Или нет?)

  9. 17

    Симпатично, только облако тегов внизу очень тяжёлое. Оно было бы красивее обычными ссылками и по центру.

  10. 19
    @

    В хроме не заметен эффект стекла и при прокрутке контент идет вверх рывками, а вот в IE9 rc1, все нормально и быстренько прокручивается. Хром явно box-shadow не понимает.

  11. 21
    WeBigma

    в опере тоже тормозит
    но выглядит отлично

  12. 22
    Nick

    Хорошо смотрится. В Хроме тормоз фактически неощутим. А вот что касается сайдбара внизу — на мой взгляд не очень. Идея сохранения места правильная, но теперь пока дойдешь до этого сайдбара нужно как минимум 6 раз прокрутить колесико.

  13. 23
    Максим

    Да действительно в мозиле тормозит

  14. 25

    Новый дизайн нравится однозначно больше чем старый, по поводу торможения, Mac OS Firefox4 отлично все работает.

    Кто бы мне такую красоту навел на блоге :))

  15. 27

    На Сафари притормаживает, но самую малость. Дизайн мне зело глянулся — Димокс, Вы молодчина!

  16. 29

    Отличный дизайн, хорошая работа. Лично у меня ничего не тормозит, где бы не побывал заходить. За CSS 3 будущее и чем раньше все это поймут, тем будет лучше и легче жить создателям сайтов. С юбилеем. Продолжай в том же духе!!!

  17. 30
    @

    отличный дизайн.. я сначала не оценил, но потом, дочитав статью!, понял как все круто1 ничего не тормозит, а логотип въезжающий в шапку просто МЕГА! круть

  18. 31

    Мне дизайн понравился! Сразу на ум одно слово пришло — Чисто. Нет «мусора» который отвлекает от сути Статей. Круто и тормозов не заметил. Может из-за того что инет нормальный…