Разделы: HTML | CSS | PHP | Design | Color | Art | All |
Страницы: 1 2 Следующая
14 | 14.07.2010
Тенденции развития web-дизайна в эпоху ценности контента
Каковы современные тенденции в веб-дизайне, или даже правильнее сказать именно в дизайне? Вопрос на первый взгляд не столь очевидный. Но изменения налицо, и посему всегда стоит держать руку на пульсе прогресса в сфере информационных технологий. Дизайн веб-страниц - неотъемлемый элемент современной жизни, составляющий гештальт восприятия мировой информационной сети у человека имеющего к ней непосредственное отношение или простого пользователя.Итак, что же даёт нам современный мир дизайна и юзабилити? Вот основные направления дизайнерской мысли в купе с работой разработчиков веб-приложений:
- Просторный дизайн. Повсеместно приветсвуется, широко применяется и активно внедряются дизайнерско-типографические схемы с визуально чётко-выраженными удалёнными друг от друга блоками контента на инертном просторном фоне, что позволяет пользователю, сосредоточится исключительно на чтении, наслаждаться получением интересной для него информации и не отвлекаться на посторонний зачастую второстепенный контент. Тоже правило широко применяется и для блоков навигации. Современный дизайн шагнул в сторону достаточно широких отступов между контентными элементами страницы и с каждым годом они становятся всё больше и более приближаются к пропорциям золотого сечения.
- Чистота дизайна. Всё большую популярность приобретает дизайн не пестрящий мелкими деталями с высоким насыщением разноплановой палитры, а чистый, однотонный - всё большую ценность имеет контентная составляющая, а не инкрустация веб-страницы.
- Минимальное количество элементов. Путь дизайнеров извилист, и сейчас идёт процесс укрупнения визуальных и логических блоков представления информации. Это не только прихоть мастеров дизайна, но и сложная работа контент менеджеров с постоянно накапливающимся опытом в структурировании контента и юзабилити в его подаче.
- Дизайн форумов. Да, это действительно важное направление в современном сайтостроительстве, виной тому - стремление компаний и разработчиков их веб-приложений к большей интеграции пользователей в информационную среду сегмента предоставления услуг. К тому же, форум - это одна из форм построения информационных социальных сетей. Так что же представляют современные форумы (в особенности специализированные) в плане их дизайнерских особенностей? Вот небольшой список глобальных направлений в развитии форумной части Интернета:
- Преобладание стандартных тем. Как было описано в этой статье выше, наибольшую ценность для современных пользователей (и даже для блондинок:)), представляет контент и с каждым днём, с ростом информационной массы и повышением уровня сложности поиска нужной информации, этот фактор становится всё более и более весомым. Посему, очень часть веб-разработчики не утруждают себя в интегрировании какой либо иной авторской дизайнерской темы в структуру форума, вместо этого они предпочитают использовать стандартные темы, изменяя лишь логотип. И это не удивительно, ведь разработчики форумов также следуют тенденциям и дизайн их продуктов с каждым следующим релизом становится всё более дружелюбным к пользователю.
- Фирменный стиль. Фирменный стиль в дизайне форумов, не какое-либо исключение, а настоящая волна. Использование фирменного стиля, чаще всего связано с целями, из-за которых данный форум и был запущен. А иногда вместо корпоративного блога, компании предпочитают развивать сайт в форме форума, который фактически становится их представительством в глобальной информационной паутине.
- Цели работы форумов. Это важный пункт, хоть и глубокий по вложенности. Цели с которыми используются форумы - это серьёзный фактор для дизайнера. Итак, какие бывают цели у корпоративных или просто информационных форумов, самостоятельных ресурсов, или привязанных к определённым сайтам:
- Узкоспециализированные. Длинное и сложное слово:), однако, в данном случае дизайн имеет минимальное значение, основной упор делается на предоставляемый контент. Примером такого форума может служить тот же php.su.
- Служба поддержки. Очень многи компании, в качестве системы службы поддержки, используют форум или систему форумов, и наличие фирменного стиля в дизайне страниц форума (а не только логотипа), придают пользователю чувство причастности, весомости компании-хозяина (которую представляет форум) и уверенности в компетентности модераторов.
- Антиномия остальным сайтам. Смысл всех новостных сайтов, как в принципе и всех остальных - является получение прибыли, а источник дохода у них один - реклама. Но для получения прибыли с рекламы, необходимы пользователи, а для их привлечения нужен контент, огромная масса контента для поискового индекса. Что в погоне за прибылью у большенства подобных сайтов, сводит на нет всю заботу о пользователях (из-за клонирования новостных ресурсов, упор делается на привлечение поискового трафика, а не на постоянных читателей) и юзабилити интерфейсов.
- Чрезмерная визуальная загрузка страниц. Это настоящий бич для пользователя ищущего информацию в сети. Основные проблемные факторы:
- Высокая информационная загруженность. Контентные блоки на страницах, отличаются высокой плотностью расположения, слабой структурированностью и относительно небольшими размерами, что ведёт к их низкой логической контентной ценности для конечного пользователя. Главные страницы подобных веб изданий, фактически превращаются в каталог ссылок на такие же относительно небольшие по размеру новости, и при этом зачастую клонированные с какого-либо другого новостного ресурса.
- Высокая плотность рекламных блоков. Так как для новостных изданий - реклама это "всё", то каждый свободный клаптик пространства незанятый поисковым контентом, используется для размещения рекламных блоков, реже текстовых, чаще атрактивных графических, превращая страницу в перенасыщенную элементами мигающую доску объявлений. На такой странице случайно зашедшие из поисковиков пользователи редко задерживаются больше минуты, просто бегло прочитав заголовки. Это тупиковый формат дизайна веб-страниц, пусть даже и детально продуманный с технической стороны, информационно представительный, и выдерживающий корпоративный стиль.
- Ориентация дизайна страниц под дисплеи высокопортативных гаджетов. На нынешнем этапе организации массового доступа к информации в сети Интернет, всё большую популярность приобретают нетбуки и мобильные комунникаторы. Если для сайтов неновостной направленности, разработчики предпочитают создавать мобильные версии, то для новостной индустрии это малоприемлемо, ведь необходимо откручивать большие рекламные баннеры, и им нечем компенсировать отток пользователей на мобильные устройста. Как итог, всё больше и больше новостных иданий умышленно сужают визуальную ширину контентных блоков, при этом совершенно не заботясь о "резиновом" дизайне для всех остальных пользователей с большими разрешениями мониторов. Страница превращается в узкую полоску контента плотно облепленную полноразмерными рекламными блоками.
- Исходя из вышеперечисленных тенденций, куда стремяться дизайнеы? Серьёзные к "просторному и чистому", сторонники функционального дизайна - даже не заостряют на этом внимания, те кого интересует только быстрый доход с одноразового пользователя - вообще не придают значение хоть каким бы то нибыло тенденциям и моде (там господствует простаю вёрстка).
- Безусловно, сайты с плотной структурой элементов дизайна, ожидает только падене популярности и как итог - финансовый крах. Примеров масса, а также и масса примеров учёта дизайнерами и маркетологами крупных популярных изданий современных тенденций. Ярким примером могут выступать такие ресурсы как msdn.com, yahoo.com, страницы социальных сетей.
- Акцентирую ваше внимание господа - Красота Спасёт Мир!
Автор: Lasckorn | Комментарии [0] | Раздел: design
13 | 23.06.2010
Возобновление работы этого блога
И вот настал по прошествии трёх лет тот долгожданный момент, когда меня вновь посетило вдохновение и появилось весьма ощутимое желание возобновить работу над этим проектом. Есть огромное желание работать, и надеюсь - оно не исчезнет и на страницах этого блога появится много полезной информации.Автор: Lasckorn | Комментарии [0] | Раздел: art
12 | 01.04.2008
Послеобраз - скрытые возможности
Итак, послеобраз. Свиду, довольно понятная концепция, но вот как правильно её использовать?Когда после рассматривания каких-либо цветных поверхностей взгляд падает на белую поверхность, она кажется не белой, а окрашенной и воспринимается в "дополнительном цвете" к рассматривавшейся вначале цветной поверхности. Это явление носит название "послеобраз" и связано оно с инерцией зрения.
Вот основные результирующие последовательности цветов, которые бы не мешало использовать в web-дизайне:
- Жёлтый - синевато-фиолетовый
- Жёлто-оранжевый - ультрамариновый
- Оранжевый - васильково-синий
- Красно-оранжевый - зеленовато-голубой
- Красный - сине-зеленый
- Пурпурно-красный - зелёный
- Пурпурно-фиолетовый - жёлтовато-зелёный
- Фиолетовый - зеленовато-жёлтый
- Синевато-фиолетовый - жёлтый
- Ультрамариновый - жёлто-оранжевый
- Васильково-синий - оранжевый
- Зеленовато-голубой - красно-оранжевый
- Сине-зелёный - красный
- Зелёный - пурпурно-красный
- Желтовато-зелёный - пурпурно-фиолетовый
- Зеленовато-жёлтый - фиолетовый
Также важное замечание - если на глаз воздействует периодическая смена света и темноты, то зрительное восприятие такого раздражителя зависит от частоты смены света и темноты. При достаточно большой частоте глаз будет воспринимать свет постоянной яркости. Число прерываний света в секунду, при котором достигается ощущение неизменной яркости, называется критической частотой прерывания (об этом в следующих постах). Отсюда быстрый вывод - не стоит увлекаться излишней чересполосицей (подробнее об этом в предыдущем посте).
Именно эти особенности устройства и работы человеческого глаза (инерция зрения)накладывают определённые требования web-мастеру в разработке стиля дизайна сайта, предназначенного для успешного продвижения того или иного проекта.
Чем меньше цветов используется при оформлении дизайна сайта, тем легче добиться определённого воздействия (цветовой ассоциации) на посетителя сайта.
Весь смысл вышесказанного, можно очень просто подытожить - чем меньше контрастность и плавней переходы в цветовом оформлении сайта, тем с большей вероятностью можно предугадать цветовое воздействие на посетителя сайта и негласно влиять на его дальнейшие действия по отношению к вашему web-ресурсу.
Сюда же, можно отнести и использование плавных градиентных рисунков и фонов, вместо контрастных изображений и всякого рода мозаичных текстур в фоне страницы, поскольку это более предпочтительно с точки зрения акцентирования внимания на контенте.
Дерзайте!
Автор: Lasckorn | Комментарии [0] | Раздел: design
11 | 16.12.2007
Физиологическая размерность элементов web-страниц
Размернсть элементов на экране, а точнее размеры элементов веб-страниц и расстояния между ними, являются, как ни странно, сильным аттрактивным элементом в веб-дизайне. И заложено это отнюдь не в сложенных за время блуждания по сети стереотипах. Причиной тому физиологические особенности нашего зрения, и наши инкстинкты. В видеоэкологии, есть такие базовые понятия, как агрессивная и гомогенная визуальные среды, каждая из которых, качественным образом, влияет на работу зрительного аппарата человека.Видимая среда, в которой рассредоточено большое количество одинаковых элементов называется агрессивной средой. Гомогенная видимая среда - это такая среда, в которой либо совсем отсутствуют видимые элементы, либо число их резко снижено. Обе эти крайности визуальных сред, являются негативными в плане созерцания.
В студенческие годы:), была у меня магистрская работа, как раз по видеоэкологии. И там, вывел я несколько методик (кому интересно, могу поделиться), что в последующем, очень пригодилось мне на поприще веб-дизайна, когда даже обычная сетка таблицы, превращалась в шедевр, на который можно было любоваться часами.
В кратце, суть основной методики, составляло определение расстояния до объекта, при котором, негативное воздействие данного объекра на зрительный аппарат нивелировалось.
Cag = Ф/0,0350
Cho = Ф/0,2634
где: Ф - размер видимого элемента дизайна веб-страницы;
Cag - минимальное расстояние от объекта до наблюдающего, при кото-ром объект не создаёт агрессивной визуальной среды для человека;
Cho - максимальное расстояние от объекта до наблюдающего, при котором объект не создаёт гомогенной визуальной среды для человека.
Для расчёта Ф – необходимо руководствоваться условием исходных формул расчёта коэффициентов агрессивности и гомогенности (лень мне здесь всё писать, интересно, спрашивайте), то есть при расчёте Cag необходимо брать минимальное расстояние от нижней (или пер-вой по счёту боковой) границы объекта из одинаковой серии расположенной на одной линии (прямой) до третьей такой же границы. А при рас-чёте Cho - максимальную протяжённость гомогенных пустых площадей на элементах веб-страниц.
Минимальное безопасное (так считается, и во всех умных книжках пишеться) расстояние от монитора компьютера до глаз, должно составлять не менее 50 см. Стало быть, при расстоянии 50 см, высота, тех же повторяющихся строк в таблице, окрашенных к примеру в несколько цветов чересполосицей (агрессивная визуальная среда по определению), должна составлять не менее 1,75 см и не более 13,17 см. Если перевести полученные значения в пиксели, то получиться соответственно 73px и 549px, или 50pt и 376pt. Вычисляйте среднее расстояние от глаз до экрана и вперёд!
Конечно, вы сразу же могли заметить нереальность компановки строк таблицы с высотой 73px, с размерами экрана, особенно, если строк много (хотя для столбцов, это очень актуально, так как агрессивные свойства проявляются в большей степени в горизонтальном направлении):
| 1 Ваш контент |
| 2 Ваш контент |
| 3 Ваш контент |
| 4 Ваш контент |
| 1 Ваш контент | 2 Ваш контент | 3 Ваш контент | 4 Ваш контент |
| 5 Ваш контент | 6 Ваш контент | 7 Ваш контент | 8 Ваш контент |
| 9 Ваш контент | 10 Ваш контент | 11 Ваш контент | 12 Ваш контент |
| 13 Ваш контент | 14 Ваш контент | 15 Ваш контент | 16 Ваш контент |
Но в таком случае, выиграшную позицию можно занять увеличив длину (протяжённость по горизонтали:)) таблицы.
Думаю, далее уже все поняли, с чем надо эксперементировать.
Автор: Lasckorn | Комментарии [0] | Раздел: design
10 | 10.12.2007
Что не любят браузеры
Что не любят браузеры, а точнее что они не воспринимают? Этот вопрос неоднозначен, поскольку браузеров как известно - много. А воспринимать или нет, они могут только код. Всё до крайности бонально.Речь пойдёт о CSS, так как это самая наболевшая проблема. Вот бывает торопишься, пытаешся сокращать код до минимума, классы и идентификаторы, сокращаешь до 1 - 2 знаков. А потом, вытирая пот со лба, нажимаешь Ctrl+s Alt+Tab F5, и о ужас! Далее наверное комментировать не нужно, у любого вебмастера сразу всё падает. Это естественный рефлекс. Но всегда ли так бывает? Нет не всегда, а когда используешь, что-нибудь типа браузера Firefox и ему подобных! Так что же может не понравиться этим монстрам в деле обозревания Интернета? Есть несколько загвоздок, из-за чего браузерная совместимасть сайтов, превращается в настоящую головную боль для лубого верстальщика.
Вот загвоздка первая! Прочитайте пост http://xstyle.info/?show=7, вам сразу станет заметна проблема. Пример в том посте не отображается правильно в Firefox и Netscape, и вместо скруглённых углов, мы видим прямые. Ошибка в коде CSS, для этих браузеров, заключается в том, что идентификаторы заданы цифрами. Чтобы исправить ошибку, необходимо поменять названия идентификаторов. И всё. Пусть будет не 1 или 2, а primer1 или primer2, и даже pri1mer, тоже пойдёт, Но вот пускать просто цифры и цифры в начале имени идентификатора или класса не стоит, проверено горьким опытом.
Итак, правильным будет:
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
Неправильно:
<style type="text/css">
#1qwerty{ваши правила}
#4{ваши правила}
.3{ваши правила}
.3qwerty{ваши правила}
</style>
И так далее! Простое правило, которого следует избегать при вёрстке.
Второй и также немаловажной вещью для указанных браузеров, является правильность поочерёдности расстановки элементов страниц в теле документа и в коде CSS. Кажется немного бредом, но факт, который при том очень часто портит кровь. Что нужно делать!? Всё просто. Необходимо добиться соответствия поочерёдности расположения указанных элементов.
<head>
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
</head>
<body>
<div id="qwerty1">Ваш контент</div>
<div id="qwer1ty">Ваш контент</div>
<div class="qwerty3">Ваш контент</div>
<div class="qwer3ty">Ваш контент</div>
</body>
А не так:
<head>
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
</head>
<body>
<div class="qwerty3">Ваш контент</div>
<div id="qwer1ty">Ваш контент</div>
<div id="qwerty1">Ваш контент</div>
<div class="qwer3ty">Ваш контент</div>
</body>
Иногда, случается такое, что перестановки, требуют не отдельные идентификатоды, а их блоки, при том как в самих блоках, их положение может быть произвольным.
<style type="text/css">
/* 1 block */
#qwerty1{ваши правила}
#qwer3ty{ваши правила}
.qwerty3{ваши правила}
.qwer1ty{ваши правила}
/* 2 block */
#qwerty4{ваши правила}
#qwer4ty{ваши правила}
.qwerty2{ваши правила}
.qwer2ty{ваши правила}
/* 3 block */
#qwerty7{ваши правила}
#qwer6ty{ваши правила}
.qwerty6{ваши правила}
.qwer7ty{ваши правила}
</style>
</head>
<body>
<!-- 1 block -->
<div id="qwerty1">Ваш контент</div>
<div class="qwer1ty">Ваш контент</div>
<div class="qwerty3">Ваш контент</div>
<div id="qwer3ty">Ваш контент</div>
<!-- 2 block -->
<div class="qwerty2">Ваш контент</div>
<div class="qwer2ty">Ваш контент</div>
<div id="qwerty4">Ваш контент</div>
<div id="qwer4ty">Ваш контент</div>
<!-- 3 block -->
<div class="qwerty6">Ваш контент</div>
<div id="qwer6ty">Ваш контент</div>
<div id="qwerty7">Ваш контент</div>
<div class="qwer7ty">Ваш контент</div>
</body>
Практика делает чудеса! Этой фразой никого не удивишь. Со временем, начинаешь привыкать к такому построению страниц и к подобным капризам браузеров от различных производителей. Будем надеяться, что когда-нибудь, всё изменится, все друг друга купят и в приказном порядке договорятся до единых стандартов.
Автор: Lasckorn | Комментарии [0] | Раздел: css
9 | 22.11.2007
Выбор приемлемых шрифтов при разработке дизайна web-страницы
Итак, шрифты. Если подходить к данной проблеме, с позиции веб-дизайна, то выходит полная сумятица, полный хаос - на вкус и цвет, товарища нет, а программное обеспечение, даёт возможность видеть тот шрифт, какой захочет пользователь, или который ему больше нравится, и в размере, который он предпочитает или хорошо видит. И что тогда!? А тогда, всё очень просто, особенно, для веб-дизайнера - использовать тот шрифт, и того размера, который ему нравится самому (немножко неправильный подход, но всё же).Но возможен и другой вариант, когда пользователь, реально полный user, нормальный user конечно, вообще не трогает настройки своих браузеров, и видит, то что есть, то есть - те шрифты, которые прописаны на веб-странице, при условии, что они установленны у него в системе, в противном случае - шрифт по умолчанию в его браузере (например Times New Roman). Стало быть, необходимо подстраиваться под пользователя. Но как известно, и мне тоже, и другим веб-программистам, что очень тяжело подбирать шрифты под фоновый дизайн, намного проще и эффективней, подбирать их по тематике сайта, степени его оффициальности, а сам фон - под уже имеющийся шрифт. Вот так!
Для эффективной работы, дизайнер, должен выбрать набор собственных часто используемых им шрифтов, и тогда успех ему гарантирован.
Как всегда, у веб-дизайнера, есть собственный любимый шрифт, или несколько, с определённым любимым размером, и все свои работы, он воспринимает и неосознанно подстраивает под него. Причём, самые лучшие работы, получаются, когда вебмастер следует своему правилу "по умолчанию".
Автор: Lasckorn | Комментарии [0] | Раздел: design
8 | 19.11.2007
Ахроматическая цветовая схема дизайна web-сайта
Всем известна цветовая схема RGB. А что подобрать для своего сайта, чтобы он был приятен всем - опять же, какую-нибудь схему из этого самого RGB. Но какую!? Этот вопрос задают многие.Существует ряд принципиально отличных цветовых схем для веб-страниц, это:
1. Нейтральная.
2. Основная.
3. Дополнительная.
4. Терциарная.
5. Аналоговая.
6. Ахроматическая.
7. Дисгармоничная.
8. Дополнительная.
9. Монохромная.
(это не моя классификация, где-то когда-то это вычитал).
Но не суть дело. Обо всех этих схемах и их применении в веб-дизайне, я раскажу в следующих постах. Сейчас - наиболее универсальная для всех времён и народов цветовая схема. Не так давно, я уже описывал подобные цветовые композиции, но это был лишь набор цветов, для того или иного целевого восприятия сайта и привлечение постоянной целевой аудитории. А вот схема цветов, которая, вне зависимости от предпочтений и целевых установок, распологала бы к себе посетителя. Одно из правил при выборе - больше чистоты, второе - завершённость световой схемы. Чистый цвет - это понятно, а вот где взять "завершённость", или точнее сказать замкнутость, придающую элегантность и уют. Цветовая схема должна состоять из двух крайних цветов и их средних оттенков. А это, если вспомнить общенациональный триколор (красный - чёрный - белый), будут как раз - чёрный и белый. Такая цветовая схема в дизайне, называется "ахроматической". Пример, перед вашими глазами, или здесь.
Эта схема, имеет потрясающую популярность, и вместе с тем, каждый подобный проект, отличается уникльностью в восприятии посетителя web-страницы. Как известно, чистые цвета, благоприятствуют обострению внимания. Вспомните белоснежный лист формата A-4 с напечатанным в чистом чёрном цвете текстом и в противовес - старую пожелтевшую книжку с затёртыми страницами и посеревшим (а лучше сказать "пошкарябанным") текстом. Разница на лицо!
Даже если у вас будет только часть страницы, иметь ахроматическую схему, но только разумеется визуально целостная часть, то это будет безпроиграшное решение. И если хотите акцентировать внимание посетителя страницы на чём то серьёзном, сделайте такую вставку, либо сделайте оформленную в ахроматической схеме всю страницу.
Автор: Lasckorn | Комментарии [0] | Раздел: color
7 | 14.11.2007
Создаём скруглённые углы
Одна из проблем с которой рано или поздно сталкивается каждый HTML верстальщик - это оформление несодержательных в плане контента элементов веб-страницы. Если вам доводилось создавать визуальные блоки с закруглёнными углами, всегда возникала проблема, с тем, что нужно было рисовать эти самые углы.Конечно самый простой способ - это нарисовать эти самые углы и вставить их в таблицу. либо в отдельные блоки. Но в любом случае их нужно рисовать, и в добавление ко всем файлам на вашем сайте, будут лежать ещё и графические файлы ваших элементов оформления.
Как уже было сказано, можно делать так:
<table>
<tr>
<td background="corner_left_top.gif"></td>
<td></td>
<td background="corner_right_top.gif"></td>
</tr>
<tr>
<td></td>
<td>Ваш контент< /td>
<td></td>
</tr>
<tr>
<td background="corner_left_bottom.gif"></td>
<td></td>
<td background="corner_right_bottom.gif"></td>
</tr>
</table>
или
<table>
<tr>
<td><img src="corner_left_top.gif"></td>
<td></td>
<td><img src="corner_right_top.gif"></td>
</tr>
<tr>
<td></td>
<td>Ваш контент</td>
<td></td>
</tr>
<tr>
<td><img src="corner_left_bottom.gif"></td>
<td></td>
<td><img src="corner_right_bottom.gif"></td>
</tr>
</table>
А можно более продвинуто, избегая использования рисунков, например применяя JavaScript, или CSS. При этом, использование JavaScript, влечёт за собой применение довольно больших и тяжёлых скриптов, так, что уж лучше даже использовать изображения скруглённых углов. А вот CSS - представляет довольно много возможностей с минимальными затратами построить нужную форму объекта.
Для того, чтобы создать закруглённый угол с помощью CSS, необходимо использовать ряд независимых в плане разметки веб-страниц объектов. Ими могут выступать div, span, b, i и многие другие объекты, которые не имея внутри себя никакого контента, не подчиняются никакому правилу "по умолчанию" и не отображаются на странице.
Возьмём div объект и попытаемся создать округлую форму, используя только правила CSS.
По умолчанию, каждый элемент имеет определённую высоту, в зависимости от типа вашего браузера. А посему, очень важное для нас свойство приобретает правило overflow, и для запрета отображения размерности контейнера, ему следует придать значение hidden.
Итак, что можно сделать:
<style type="text/css">
#block{width:200px}
#1{margin:0}
#2, #3, #4, #5, #6, #7, #8, #9{height:1px;overflow:hidden;background:#0099cc}
#2, #9{margin:0 5 0 5px}
#3, #8{margin:0 3 0 3px}
#4 ,#7{margin:0 2 0 2px}
#5, #6{margin:0 1 0 1px}
#content{padding:5px;background:#0099cc;font:11px Verdana;color:#000}
</style>
<div id="block">
<div id="1">
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="5"></div>
</div>
<div id="content">
Ваш контент
</div>
<div id="1">
<div id="6"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
</div>
</div>
И получается следуещее:
Ваш контент
(Если Вы используете браузер Firefox или Netscape Navigator, то скорее всего примера не увидите, поскольку блоку не заданы отдельные параметры, но примером выступает само оформление блога, для просмотра именно этого примера, откройте страницу в другом браузере)
Как видно - всё очень просто, простое использование правил в CSS и результат на лицо, безо всяких рисунков.
Здорово, правда!? Вот она сила CSS. В оформлении данного блога, используется тот же принцип, если присмотритесь к углам блоков.
Пользуйтесь на здоровье.
Автор: Lasckorn | Комментарии [2] | Раздел: css
6 | 08.11.2007
Основное преимущество блочной структуры веб-страницы
В HTML используются две основные модели структуры разметки на веб-странице.Первая - это табличная структура со структурой:
<table>
<tr>
<td>
Ваш контент
</td>
</tr>
</table>
< table> - таблица, < tr> - строка, < td> - столбец. При этом строк и столбцов внутри одной таблицы может быть сколько угодно, но это всё элементарно. Таблицы не обеспечивают гибкости элементов на страницах. Их, в любом раскладе прямоугольная сетка, не даёт возможности свободного позиционирования элементов. Даже при использовании CSS и наложении одних таблиц на дргуие, их внутренняя структура также подчинена правилам таблиц. Но главный минус - слишком объёмный код.
Вторая модеь - это блочная модель, состоящая из универсальных независимых элементов < div>, < span>, < b> и других.
С использованием CSS, есть возможность совершать всё что вздумается. Так что использование блочной стркутуры - более предпочтительней, хотя и требует больших навыков. Но как всегда, не стоит её идеализировать, поскольку таблицы тоже иногда бывают очень полезны, но об этом позже.
Автор: Lasckorn | Комментарии [0] | Раздел: html
5 | 05.11.2007
CSS - оптимизация структуры
CSS (Cascading Style Sheets) - каскадные таблицы стилей - технология оформления веб-страниц. Это уже фактически язык программирования, хотя это личное субъективноё. CSS используется для оформления главным образом документов с HTML и XML структурой, представляя собой списки правил, для отображения того или иного элемента на web-странице. Таблица стилей состоит из списка набора правил. Каждое правило, состоит из одного или нескольких селекторов, разделённых запятыми и блока определений. Блок определений - сектор списка, обрамляённый фигурными скобками, и состоящий из набора свойств и их значений.Схематически CSS, можно представить так:
selector(1), selector(2), selector(...), selector(n) {
property:value;
property(1):value;
property(2):value
}
Довольно простая схема, особенно, если выстроить всю конструкцию на одной строке (вот мой вредный совет):
selector{property:value;property(1):value}
Где-то так, причём можно опускать пробелы между символами, а после последнего правила внутри фигурных скобок не ставить закрывающую точку с запятой. Хоть это и не совсем валидно, но на самом деле, всем браузерам сине-фиолетово по факту и они всё прекрасно читают, а Вы плюс ко всему получаете существенное уменьшение "веса" документа (у меня иногда выходило на 40-50Kb и более).
Отображать CSS в теле документа можно по разному. Можно создавать их в отдельном файле с расширением ".css", а затем размещать ссылку на странице (< link rel="stylesheet" type="text/css" href="style.css" > или < style type="text/css" media="all" >@import "style.css";< /style >), или размещать в "шапке" (головной части) документа, используя тег "style" (конструкция 1) или свойсво "style", для элементов документа (конструкция 2).
Конструкция 1
<style type="text/css">
body{color: red}
</style>
Конструкция 2
<p style="font-size:11px;color:blue">Ваш текст</p>
или
<div style="background:#44ff00;color:blue">Ваш текст</div>
Если использовать ссылку на CSS файл, то необходимо задать для элементов страницы идентификаторы: "id" или "class". Причём в самом CSS файле id-селектор, задаётся с помощью символа "#", а class-селектор, с помощью точки. Выглядит это примерно так:
<----------style.css---------->
#qwerty{width:125px;height:300px;background:#000;border:2px solid #990000}
.qwerty{font:12px Verdana; color:#fff}
.asd{font:14px Tahoma; color:#0000cc}
<----------style.css---------->
<----------body---------->
<div id="qwerty">
<span class="qwerty">Ваш текст</span>
<span class="asd">Ваш текст1</span>
</div>
<----------body---------->
Но лучше всего использовать один id-селектор, так как он короче и с точки зрения созерцания - более заметен.
В этом посте, главная премудрость - сжатие структуры CSS, для оптимицации под Пользователя.
Автор: Lasckorn | Комментарии [0] | Раздел: css
Архив 'Life online' | Сообщения по дате | Главная
При публикации контента данного ресурса, ссылка на сайт обязательна!
NETTUNO - Nettuno in Cina - NETTUNO - E-mail: Amministrativo
перевозки сборных грузов мультимодальные перевозки mobi-center.ru
Майки светящиеся футболки платья, юбки, топики и белье
Разделы:
Общение с HTML и последствия
Приёмы с CSS, высший пилотаж
PHP в web-дизайне | (архив статей)
Дизайнерские решения
Цветовые решения
Мой Art
Главная
Мой новостной обзор
Live
Статьи | (архив статей)
Коллекция
