Обновил дизайн моего блога 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. 24

    интересный пост

  15. 25

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

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

  16. 27

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

  17. 29

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

  18. 30
    @

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

  19. 31

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