Обновил дизайн моего блога 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)
Красиво, но очень уж тормозит (при скролинге особенно сильно заметно). :-)
согласен. тормозит жутко… при том что компьютер у меня не 5-ти летней давности
Тоже это хотел написать. Неоправданные красивости, тормоза напрягают и вызывают отторжение сайта на самых глубоких психических уровнях)
Согласен, в Fx 3.6 притормаживает. Это из-за
box-shadowу больших блоков. На днях тоже делал редизайн, от теней отказался.
Да, в FF выглядит отстойно. Такой уже браузер.
Хм, у меня 4-ка, выглядит очень красиво. И не тормозит.
CSS3 хорош, но нужно учитывать что еще не многие могут позволить мощные компы, а тем более ставить все самое последние из ПО, сделав что-то новое можно оттолкнуть других…
кстати Димох подскажи плиз где бы раздобыть похожий шаблончик который сейчас у тебя на этом блоге стоит?
Без понятия.
Дизайн норм, почаще в нём пиши.
О, симпотышно, спасибо :)
Но, как сказали выше, пиши лучше чаще :) Твои статьи — мощь и польза, а уж дизайн мы как-нибудь любой переживем ;)
Чаще не получается, к сожалению.
css3pie не пробовали? для оперы можно svg использовать, реализуется это так
Пробовал, конечно.
Спасибо за ссылку, не знал об этом. Надо будет как-нибудь потестировать.
все эти генераторы конечно клево! но опять картинки картинки картинки =)
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>
На хроме тоже тормозит.
У меня тоже тормоза, аж жутко его хочется закрыть =)
Мне кажется это из-за картинки, которая перемещается…
Или нет?)
Симпатично, только облако тегов внизу очень тяжёлое. Оно было бы красивее обычными ссылками и по центру.
Хотелось наоборот сделать его необычным.
В хроме не заметен эффект стекла и при прокрутке контент идет вверх рывками, а вот в IE9 rc1, все нормально и быстренько прокручивается. Хром явно box-shadow не понимает.
В хроме box-shadow отключил, чтобы меньше тормозило.
в опере тоже тормозит
но выглядит отлично
Хорошо смотрится. В Хроме тормоз фактически неощутим. А вот что касается сайдбара внизу — на мой взгляд не очень. Идея сохранения места правильная, но теперь пока дойдешь до этого сайдбара нужно как минимум 6 раз прокрутить колесико.
Да действительно в мозиле тормозит
интересный пост
Новый дизайн нравится однозначно больше чем старый, по поводу торможения, Mac OS Firefox4 отлично все работает.
Кто бы мне такую красоту навел на блоге :))
Так не сложно же такое сотворить =)
На Сафари притормаживает, но самую малость. Дизайн мне зело глянулся — Димокс, Вы молодчина!
Спасибо ;)
Отличный дизайн, хорошая работа. Лично у меня ничего не тормозит, где бы не побывал заходить. За CSS 3 будущее и чем раньше все это поймут, тем будет лучше и легче жить создателям сайтов. С юбилеем. Продолжай в том же духе!!!
отличный дизайн. я сначала не оценил, но потом, дочитав статью!, понял как все круто1 ничего не тормозит, а логотип въезжающий в шапку просто МЕГА! круть
Мне дизайн понравился! Сразу на ум одно слово пришло — Чисто. Нет «мусора» который отвлекает от сути Статей. Круто и тормозов не заметил. Может из-за того что инет нормальный…