Обновил дизайн моего блога 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-сервисов, которые сегодня существуют в Рунете. Для лучшего результата разумнее использовать их в комплексе.
Смотрите также
10 фиксов, решающих проблемы Internet Explorer 6
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, ...
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала ...
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную ...
Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3. Я, конечно, понимаю, последние стандарты это круто и все такое. Но ...
Комментарии (31)
Красиво, но очень уж тормозит (при скролинге особенно сильно заметно). :-)
согласен. тормозит жутко….при том что компьютер у меня не 5-ти летней давности
Тоже это хотел написать. Неоправданные красивости, тормоза напрягают и вызывают отторжение сайта на самых глубоких психических уровнях )
Согласен, в Fx 3.6 притормаживает. Это из-за
box-shadowу больших блоков. На днях тоже делал редизайн, от теней отказался.
Да, в FF выглядит отстойно. Такой уже браузер.
Хм, у меня 4-ка, выглядит очень красиво. И не тормозит.
CSS3 хорош но нужно учитывать что еще не многие могут позволить мощные компы, а тем более ставить все самое последние из ПО, сделав что-то новое можно оттолкнуть других…
кстати Димох подскажи плиз где бы раздобыть похожий шаблончик который сейчас у тебя на этом блоге стоит ?
Без понятия.
P.S. Не Димох, а Димокс.
Дизайн норм, почаще в нём пиши.
О, симпотышно, спасибо :)
Но, как сказали выше, пиши лучше чаще :) Твои статьи – мощь и польза, а уж дизайн мы как-нибудь любой переживем ;)
Чаще не получается, к сожалению.
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 ничего не тормозит, а логотип въезжающий в шапку просто МЕГА! круть
Мне дизайн понравился! Сразу на ум одно слово пришло – Чисто. Нет “мусора” который отвлекает от сути Статей. Круто и тормозов не заметил. Может из-за того что инет нормальный…