День, когда стандарт CSS3 будет официально утвержден, а все популярные браузеры начнут его отображать приблизит нас, верстальщиков, к нашему же «раю верстальщиков» в несколько раз. Пока же заглянем в будущее и узнаем, как можно создать псевдо-3D блок используя только css и html.
Выглядеть блок будет так:
Это давно известная проблема. У этой проблемы существуют 1000 решений, правда все они используют в конечном счёте один и тот же, проверенный AlphaImageLoader. Я, скорее всего, не открою Америку, а лишь хочу рассказать вам об expression'е, которым с недавних пор пользуюсь и которого достаточно в 99% случаев, а также объясню как, почему и зачем я его написал.
В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.
В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.
Я создал css файлик, который в теле документа будет отображать или скрывать div'ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.
Несмотря на бесконечные нападки противников Internet Explorer (или вопреки им), говорящих о полном несоответствии IE современным веб-стандартам, компания Microsoft продолжает медленно, но верно реализовывать поддержку утвержденных спецификаций.
Даных в сети становится больше и веб-разработчикам приходится все чаще сталкиваться с задачей их отображения.
Blueprint - довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE. Со страницы проекта на Google Code скачиваем архив. В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:
В связи с участившимися сообщениями о том, что в CSS хотят добавить переменные, анимацию, трансформацию и прочая, хотелось бы немного отстраненно порассуждать на эту тему. CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году - Уровень 2.1.
Что-то мне кажется, что в этот раз с идеями внедерения новых правил разработчики перестарались… Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с течением времени и ввести css-переменные.
О причине реализации возможности создания анимации они пишут:
Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки. Мы обратили свой взгляд на наиболее интересные и полезные техники CSS кодинга и перечислили их в этой статье. Также мы включили некоторые базовые техники, используемые многими в каждом проекте, но которые трудно найти, когда они нужны.
Закругленные углы, одна из популярнейших тенденций в современном веб-дизайне.
Есть множество вариантов их реализации часто, заключающихся в размещении
изображений по углам контейнера, в худших случаях используются теги img,
в лучших свойство background, для некоторых браузеров есть
специфические решения, например -moz-border-radius для FireFox, но
их полезность сомнительна. Простой и удобный способ скругления уголков без
использования изображений или малораспространенных свойств был бы очень полезен.
Цель данной статьи заключается в том, чтобы реализовать возможность создания превью для изображения, размеры которого можно устанавливать самостоятельно. Бывает так, что у нас нет свободного места на странице, чтобы показать превью картинки полностью. Но и делать из картинок обрезки не хочется. Трюк, приведенный в статье, позволит создать нужные нам размеры превью и отображать полный его размер при наведении курсора на превью.
MoreCSS — небольшая библиотека JavaScript, весом всего 14кб, для решения повседневных задач, таких как создать всплывающие окна, сделать вкладки меню, таблицы и списки с оформлением «зебра»-стиль… и т.д. С помощью этой библиотеки Вы сможете это делать средствами обычного css.
Пример:
a:active {
target:popup;
target-width:640px;
target-height:640px;
}
Большинство дизайнов ориентировано на использование фиксированных значений
при верстке: ширина и высота блоков, размер шрифта. Это позволяет
сверстанному шаблону «не разваливаться» при изменении масштабов просмотра и
сохранять свойство кроссбраузерности.
Последние комментарии