Очередной блог фрилансера » css

Обзор CSS-свойства vertical-align

dreamhelg — Fri, 23 Dec 2011 06:27:55 +0000

Довольно часто от веб-разработчиков можно услышать возмущенный возглас: “vertical-align не работает!”. Несмотря на то, что назначение этого свойства следует из его названия, на практике, начинающие разработчики, равно как и многие ветераны CSS, часто испытывают трудности с его применением. В сегодняшней статье, я постараюсь раскрыть все непонятные моменты этого CSS-свойства.

Чего не делает vertical-align

Наиболее распространенное заблуждение относительно свойства vertical-align состоит в том, что оно влияет на вертикальное выравнивание всех дочерних элементов контейнера, к которому применяется. Например, если мы применим к контейнеру свойство vertical-align: top, предполагается, что все содержимое контейнера будет выровнено по верхнему краю контейнера. Это напоминает мне старые, добрые времена табличной верстки: [css] Содержимое ячейки.. [/css] В этом примере табличной ячейки, свойство valign (сейчас уже запрещенное в HTML5), действительно прижмет все содержимое ячейки к верхнему краю. Возможно исходя из этого, CSS-разработчики ожидают похожего эффекта, от применения свойства vertical-align. Но свойство vertical-align так не работает.

Как на самом деле работает vertical-align

Свойство vertical-align можно разделить на три простых правила:

Оно применяется только к элементам со свойствами display: inline; и display: inline-block;
Оно влияет на положение самого элемента, а не его содержимого (за исключением табличных ячеек)
Когда оно применяется к табличной ячейке, то влияет на содержимое ячейки, а не на саму ячейку.

Другими словами, следующий код не будет иметь никакого эффекта: [css] div { vertical-align: middle; /* эта строка не будет работать */ } [/css] Почему? Потому что

- это блочный элемент. Конечно, если вы измените у дива свойство display, на inline, или inline-block, vertical-align сразу заработает. Правильное использование свойства vertical-align, поможет выровнять строчный элемент относительно других строчных элементов на странице. Насколько высоко или низко расположится элемент по вертикали, будет зависеть от размера соседних строчных элементов, или от свойства line-height, заданного для этой строки. На картинке ниже, представлен пример того, как ведут себя строчные элементы, когда вы применяете свойство vertical-align:

Значения свойства – ключевые слова

Свойство vertical-align может принимать следующие значения:

baseline (значение по умолчанию)
bottom
middle
sub
super
text-bottom
text-top
top

Большинство из них вам скорее всего не понадобятся, но всегда хорошо знать из чего можно выбрать. Например, на демо-странице, текстовому полю назначено свойство vertical-align: top, благодаря чему, оно выровнено относительно самого высокого элемента в строке (большой картинки). А если вы не хотите располагать элемент относительно изображений или других строчных элементов, можно использовать значения text-top или text-bottom, чтобы ваш элемент позиционировался относительно текста, расположенного в строке.

О значении “middle”

К сожалению, vertical-align: middle; не расположит строчный элемент по центру самого большого элемента в строке, как этого можно было бы ожидать. Вместо этого, значение middle расположит элемент относительно гипотетической строчной “x” (также называемой “x-высотой”). По-хорошему, это значение следовало бы назвать “text-middle”, для правильной идентификации его механизма. На этой демо-странице, размер текста специально увеличен, чтобы вы могли посмотреть, как именно выравниваются элементы, при значении middle. По всему выходит, что это значение, вам будет нужно гораздо реже, чем остальные.

Цифровые значения свойства

Возможно вы не знали, но vertical-align в качестве значения может принимать абсолютные и процентные значения, все приведенные ниже примеры будут правильными: [css] input { vertical-align: 100px; } span { vertical-align: 50%; } img { vertical-align: -300px; } [/css] В чем разница между абсолютными значениями и ключевыми словами, можно почитать в CSS-спецификации, или (что на мой взгляд гораздо полезнее) самостоятельно попробовать различные варианты. Перевод статьи “Understanding CSS’s vertical-align Property”, автор Louis Lazaris

Кое-что интересное о CSS-свойстве border

dreamhelg — Wed, 06 Apr 2011 07:57:11 +0000

Несмотря на годы веб-разработки и чтения тематических блогов и книг по CSS, я по-прежнему сталкиваюсь с неизвестными возможностями давно знакомых CSS-свойств. Возможно это моя вина, я человек привычки, и никогда не рассматирваю подробно вещи, которые мне давно знакомы. Так, во время чтения книги Smashing Book 2, в главе Кристиана Хейлмана был приведен пример следующего CSS-кода: [css] #pagetitle { border-color: black white white black; } [/css] Первое, о чем я подумал: «Это какая-то ошибка. С каких пор свойство border-color позволяет в сокращенной форме указывать цвет для каждой границы блока?». А затем, я вспомнил, что за 10 лет разработки, я использовал это свойство один или два раза, следовательно, что я могу о нем знать? Плюс, я думаю что Кристиан, как опытный разработчик, знает о чем говорит. Фактически, каждый раз, когда мне нужно было указать цвет границы, я использовал сокращенную версию свойства border, вот так: [css] #pagetitle { border: solid 1px black; } [/css] Редко когда мне действительно приходится использовать свойства типа: border-color, border-style, border-left-style или любые другие версии этих длинных свойств. В 99% случаев, свойство border реализует все, что мне требуется. В CSS-справочнике на sitepoint.com сказано:

Сокращенная запись свойства border-color, устанавливает цвет границы для всех четырех сторон элемента, используя от одного до четырех, указанных значений. Каждая граница может иметь собственное значение.

Следовательно, точно так же как для свойств margin и padding, цвет для каждой границы задается в следующем порядке: верхняя граница, правая граница, нижняя граница, левая граница (по часовой стрелке, начиная сверху).

Стиль и ширина границы

Это правило работает также для свойств border-style и border-width, так что вы можете указать разную толщину и стиль границы для каждой из сторон элемента. Ну и конечно, вы можете сокращать свойства, при необходимости: [css] #pagetitle { border-width: 2px 1px; border-style: solid dashed; } [/css] Снова, также как у margin и padding, мы указываем только первые два значения, а остальные просто наследуются от первых.

Запомните

Нельзя использовать эту технику мульти-объявления для сокращенного CSS-свойства border (несмотря на то, что это кажется вполне логичным). Оно применяется только к трем, указанным выше, свойствам, так что следующий код будет неправильным: [css] #pagetitle { /* THIS IS INVALID! */ border: solid dashed 1px 2px black white white black; } [/css] Еще, такой метод не получится применить к свойствам outline-width, outline-style и outline-color. Перевод статьи «Here’s Something Interesting About CSS Borders», автор Louis Lazaris

Изучаем CSS-позиционирование за 10 шагов

dreamhelg — Wed, 16 Feb 2011 13:56:56 +0000

Позиционирование — одно из ключевых понятий в блочной верстке. Разобравшись с ним, вам многое станет понятно, а верстка из шаманства превратится в осмысленный процесс. Итак, речь в статье пойдет о [...]

23 полезных CSS-приема для разработчика

dreamhelg — Thu, 12 Aug 2010 04:00:52 +0000

CSS, без сомнения, является одним из самых важных языков разметки, которые мы используем. И хотя HTML описывает структуру документа, ее поведение может быть непредсказуемым, в зависимости от версии браузера. CSS – это тот инструмент, который позволит нам исправить все несоответствия в отображении страницы, а также оформить ее внешний вид. Далее приведен список из двадцати трех различных CSS-приемов, которые будут полезны как начинающим, так и опытным разработчикам.

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку. [css] h1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; } [/css]

Стилизация ссылок в зависимости от формата файла

Этот пример направлен на улучшение пользовательского интерфейса. Зачастую в интернете, мы переходим по ссылкам, абсолютно не зная куда они ведут. Следующий фрагмент кода используется для отображения небольших иконок рядом со ссылками. Такие картинки будут подсказывать пользователю, что это внешняя ссылка, электронный адрес, pdf-файл, картинка и т.д. [css] /* внешняя ссылка */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* электронная почта */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } [/css]

Удаляем полосы прокрутки многострочного поля в IE

Internet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода: [css] textarea{ overflow:auto; } [/css]

Буквица

На сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах. [css] p:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; } [/css]

CSS-прозрачность

Прозрачность – это свойство, которое разным браузерам, назначается по-разному. С помощью следующего фрагмента кода, вы сможете назначить прозрачность всем браузерам сразу. [css] .transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } [/css]

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве. [css] html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } [/css]

Предзагрузчик картинок

Иногда бывает полезно предварительно загрузить ваши картинки, с тем чтобы исключить задержку и мерцание при доступе к нужному элементу. [css] div.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left:-10000px; } [/css]

Простой css-спрайт для кнопки

Наличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon, на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение. [css] a { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; } [/css]

Google Font API

Не так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать здесь. [css] Inconsolata:italic|Droid+Sans"> [/css] [css] body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; } [/css]

Хаки для различных браузеров

Иногда бывает полезно исправить баг у конкретного браузера, и условные комментарии не всегда являются лучшим решением для этого. Этот список браузерных хаков от Криса Койера, поможет вам назначить нужные свойства для определенных браузеров, посредством простого css. [css] /* IE 6 */ * html .yourclass { } /* IE 7 */ *+html .yourclass{ } /* IE 7 and modern browsers */ html>body .yourclass { } /* Modern browsers (not IE 7) */ html>/**/body .yourclass { } /* Opera 9.27 and below */ html:first-child .yourclass { } /* Safari */ html[xmlns*=""] body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } } [/css]

Фиксированный подвал

Возможно, вы подумаете, что создать подвал, всегда приклеенный к низу экрана, это сложная задача. Однако, это совсем не сложно, если вам нужен простой подвал. Здесь нам придется использовать небольшой хак для IE6, но в остальном, это очень легко. [css] #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); } [/css]

Поворот изображения

Вращение картинки может оказаться весьма полезным, особенно если его можно использовать вместо загрузки новой, предварительно развернутой картинки. Предположим, вы хотите использовать только одну картинку для стрелки, но у вас на странице их несколько, причем развернутых в разные направления. Вот решение вашей проблемы: [css] img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } [/css]

Clearfix

Не так давно, кто-то решил, что пришло время очищать поток от флоатов, не добавляя дополнительной разметки к документу. В результате этого решения, был создан класс, который можно применять к контейнеру, содержащему плавающие элементы, для их очистки. Это очень удобный, и широко распространенный способ на сегодняшний день. [css] .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */ [/css]

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9. [css] .round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ } [/css]

Переопределение стилей

Меня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях. [css] p{ font-size:20px !important; } [/css]

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face. [css] @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); } [/css]

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто. [css] .wrapper { width:960px; margin:0 auto; } [/css]

Min-height в IE

Этот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг. [css] .box { min-height:500px; height:auto !important; height:500px; } [/css]

Загрузка картинки

Этот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок. [css] img { background: url(loader.gif) no−repeat 50% 50%; } [/css]

Вертикальное центрирование

Это небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align. [css] .container { min-height: 10em; display: table-cell; vertical-align: middle; } [/css]

Создаем врезы

Для начала, давайте разберемся, что же такое врез? Врезы обычно встречаются на новостных ресурсах и сайтах-журналах, в виде небольшого блока текста, расположенного внутри статьи, иногда в них размещаются мнения людей или цитаты. Вы будете рады узнать, что их очень легко сделать, и при правильном использовании, врезы могут значительно улучшить восприятие статьи пользователем. [css] .pullquote { width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; } [/css]

Выделение текста

Не все знают о том, что существует возможность изменить цвет выделенного в браузере текста. Для этого потребуется всего два селектора. [css] ::selection { color: #000000; background-color: #FF0000; } ::-moz-selection { color: #000000; background: #FF0000; } [/css]

Добавляем разрыв страницы

Этот пример, снова направлен на улучшения пользовательского интерфейса, при выводе на печать. Например, при печати статьи, возможно будет полезно отделить комментарии от текста статьи, и перенести их на отдельную страницу. Если добавить класс .page-break к блоку комментариев, то все комментарии, при печати, будут выведены на отдельной странице. И вообще, этот класс можно использовать в любом месте вашего сайта. [css] .page-break{ page-break-before:always; } [/css] Перевод статьи “25 Incredibly Useful CSS Snippets for Developers”, автор Matthew Corner

Обзор CSS-свойства white-space

dreamhelg — Mon, 21 Jun 2010 10:00:31 +0000

Немногие, начинающие CSS-кодеры знакомы с таким полезным свойством как white-space. Вы вполне можете обходиться без этого свойства долгое время, но однажды, узнав о нем, вы найдете его очень удобным, и будете возвращаться к нему снова и снова.В сегодняшней статье, мы рассмотрим возможные значения свойства white-space, а также способы их применения.

Небольшое HTML-введение

При вставке текста в (X)HTML, независимо от того, сколько пробелов вы поставите между словами, при выводе страницы в окне браузера, все эти пробелы, по умолчанию, будут сокращены до одного. Это довольно удобно, поскольку мы легко можем форматировать текст в коде, с тем чтобы улучшить его читаемость, при этом, не создавая дополнительных пробелов и ненужных разрывов строк. Однако, если же вы хотите отобразить все пробелы и переносы строк – вам поможет тэг

. Весь текст внутри тэгов  (если он не заключен в дополнительные тэги), будет выведен точно также, как он отформатирован в коде. При этом, даже если в разметке нет ни одного разрыва строки, тэг  все равно добавит одну строчку, для создания дополнительно отступа. Следовательно, вы можете использовать вышеуказанный тэг для переопределения дефолтного подведения HTML.

Кроме того, в (X)HTML есть возможность использовать неразрывный пробел ( ), который используется для создания множественных пробелов. Ранее, для этих целей использовался, устаревший на сегодняшний день, тэг .

Свойство white-space – это CSS-аналог всех вышеперечисленных (X)HTML-методов управления пробелами.
Описание и возможные значения
С помощью набора возможных значений, свойство white-space, позволяет нам управлять поведением браузера, при обработке множественных пробелов.

Далее представлен список различных значений свойства white-space, вместе с визуальной демонстрацией их действия.
Значение: normal
Это дефолтное значение, при котором текст отображается обычным способом. Значение normal следует использовать только в одном, единственном случае – если вы уже назначили тексту другой способ обработки, и теперь хотите переопределить его для какого-то фрагмента.



Значение: nowrap

Это наиболее распространенное значение свойства white-space, поскольку оно полностью идентично значению normal, за исключением одной особенности. Значение nowrap полностью игнорирует переносы строк, независимо от того, были ли они проставлены в коде, или же появились при обработке текста, за счет ограниченного контейнера.

Элемент, которому назначено свойство white-space: nowrap, вместо того, чтобы переносить текст или другие строчные элементы на новую строку, расширит границы родительского блока, до тех пор, пока содержимое не уместится в одну строку. В дополнение, множественные пробелы будут сокращены до одного, также как при значение normal.


Значение: pre
Значение pre, полностью соответствует вашим ожиданиям –  вы получаете ровно то форматирование, которое видите в коде. Учитываются все пробелы и переносы строк, как если бы текст был заключен в тэги . Кроме того, если в коде, вы разместили текст без переносов, то границы родительского контейнера будут расширены, для размещения текста в одну строку.


Значение: pre-line
Это значение работает точно также как дефолтное значение normal, за исключением одной детали: при обработке будут учитываться переносы строк. Так что, множественные пробелы будут как обычно проигнорированы, но если в вашей разметке есть переносы строк, то все они появятся при выводе в браузере.

Поддержка этого свойства браузерами, оставляет желать лучшего, а именно:

	Internet Explorer – начиная с версии 7
	Firefox – начиная с версии 3.0
	Opera  - начиная с версии 9.2


Значение: pre-wrap
Это значение практически тоже самое что и pre, за исключением того, что текст выводится в границах своего родительского элемента. Следовательно, текст не будет вытягиваться в одну строку для имитации форматирования в коде, но множественные пробелы и переносы строк будут учтены.

Поддержка браузерами:

	Internet Explorer – начиная с версии 7
	Firefox -  начиная с версии 3.0


Примеры использования
Наиболее часто, свойство white-space, используется для устранения нежелательных переносов строки. Взгляните на картинку:



В состав ссылки “read more” входит символ » (кавычка), перенесенный на другую строку в связи с нехваткой свободного пространства. Эту ситуацию легко можно исправить, применив свойство white-space в значении nowrap. Благодаря этому, ссылка будет целиком перенесена на новую строку как единый объект.

Этот пример еще раз иллюстрирует тот факт, что свойство white-space действует только на содержимое элемента, к которому оно применяется. Поэтому, несмотря на то, что ссылка была перенесена на другую строку, текст внутри ссылки не был разделен переносом строки.
Заключение
Чтобы исключить возможное появление проблем, при использовании свойства white-space, следует помнить главное: область его действия распространяется только на строчные элементы контейнера, к которому применяется свойство.

Как уже упоминалось выше, наиболее полезным из всех возможных значений свойства white-space – является значение nowrap. В связи с отсутствием в Internet Explorer полной поддержки значений pre-line и pre-wrap, они используются не так часто, хотя тоже могут принести немало пользы, если получат более широкую поддержку.

Перевод статьи “The CSS white-space Property Explained”, автор Louis Lazaris

Эффект неонового текста с помощью CSS и JQuery

dreamhelg — Wed, 09 Jun 2010 05:00:07 +0000

В сегодняшней статье, вы узнаете как создать красивый эффект неонового свечения текста, средствами JQuery и CSS, и совсем немного фотошопа. Результат, как обычно можно посмотреть заранее.

Шаг 1 – Дизайн

Первым делом, для достижения такого эффекта, нам нужно создать фоновое изображение, содержащее две, слегка отличающиеся версии текста. jQuery будет плавно переключаться между этими изображениями, создавая красивый эффект свечения. Итак, открываем фотошоп и создаем новый документ, 650х300 пикселей, в качестве фонового цвета указываем #141414. Для заголовка используйте свой любимый шрифт, в приведенном примере – это Century Gothic, размер 60px. После этого, Ctrl + клик по иконке текстового слоя в палитре слоев, для выделения всего текста. Используйте инструмент прямоугольного выделения, зажав Shift + Alt, для того, чтобы ограничить выделение текста одним словом. Далее, сохраняя выделение, создайте новый слой под названием “gradients”, и кликните по нему, для активации. Теперь, возьмите инструмент градиента и раскрасьте каждое слово, поочередно переключая выделение между отдельными словами. Выделение отдельных слов требуется для ограничения области действия градиента, к тому же мы предварительно активировали слой “gradients”, с тем, чтобы все изменения были сохранены на нем. После того, как вы раскрасите весь заголовок, дублируйте слой, расположив его ниже основного, и примените другой набор градиентов. В результате, у нас получилась картинка, с двумя разноцветными заголовками, так что мы легко сможем переключаться между ними, путем простого изменения свойства background-position в CSS. Вы найдете psd-файл данного изображения, в архиве с приведенным примером.

Шаг 2 – XHTML

XHTML-разметка очень простая, вам понадобится только контейнер (#neonText H1), который будет содержать две версии фона. [html]

Neon Text Effect With jQuery & CSS.

[/html] Слой layer1, постепенно уменьшая свою прозрачность, создает плавный эффект неонового свечения, за счет того, что он расположен поверх слоя layer2. Исходя из соображений поисковой оптимизации, мы также создадим текст, соответствующий надписи на картинке, который будет скрыт с помощью отрицательного значения свойства text-indent.

Шаг 3 – CSS

Стили, используемые для этого эффекта – также очень простые. Два элемента span, которым назначено одинаковое фоновое изображение, с разницей в позиционировании. Один элемент показывает только верхнюю часть картинки, а второй, только нижнюю. [css] /* The two text layers */ #neonText span{ width:700px; height:150px; position:absolute; left:0; top:0; background:url('img/text.jpg') no-repeat left top; } span#layer1{ z-index:100; } span#layer2{ background-position:left bottom; z-index:99; } /* The h1 tag that holds the layers */ #neonText{ height:150px; margin:180px auto 0; position:relative; width:650px; text-indent:-9999px; } [/css] Контейнер #neonText позиционирован относительно, с тем, чтобы внутренние элементы span, располагались точно один над другим. Кроме того, обратите вниманием на свойство text-indent, которое скрывает текстовое содержимое нашего контейнера.

Шаг 4 – jQuery

Последнее, что нам осталось сделать – создать анимацию переключения блоков. Поскольку мы используем jQuery (предварительно подключив его на страницу тэгом script), в нашем распоряжении есть два удобных метода fadeIn и fadeOut, которые мы используем в следующем коде. [javascript] $(document).ready(function(){ setInterval(function(){ // Selecting only the visible layers: var versions = $('.textVersion:visible'); if(versions.length<2){ // If only one layer is visible, show the other $('.textVersion').fadeIn(800); } else{ // Hide the upper layer versions.eq(0).fadeOut(800); } },1000); }); [/javascript] Функция, расположенная внутри выражения setinterval, выполняется каждую секунду, отображая/скрывая слой с первым контейнером span. Скачать архив с примером. Перевод статьи “Neon Text Effect With jQuery & CSS”, автор Martin

Анимированный ландшафт с помощью CSS и JQuery

dreamhelg — Tue, 01 Jun 2010 14:00:31 +0000

С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery.

Шаг 1. Подготовка файлов

Для начала, нам необходимо подготовить все файлы, необходимые для этого примера, затем создать один HTML-файл, один CSS-файл и папку, которая будет содержать все наши картинки. Прежде, чем мы начнем, посмотрите демо.

Шаг 2. HTML-страница

Теперь, создадим HTML-разметку, которая будет содержать контейнер с фиксированной высотой и шириной, а внутри него будет еще один блок, содержащий все элементы нашей страницы. В результате, у нас получилась вот такая разметка: [html]

[/html] Полная версия: [html] Animated Landscape Using CSS and jQuery

[/html]

Шаг 2. CSS-стили

Далее добавим немного CSS-стилей, без которых просто нельзя обойтись. Здесь следует обратить внимание на два момента – это свойство overflow: hidden, которое обязательно должно быть установлено для блока #inner, и абсолютное позиционирование, для всех, двигающихся картинок. На данном этапе, мы вынесем наши движущиеся изображения (облака и лодку) за пределы контейнера, путем установки отрицательных полей, с тем чтобы в дальнейшем, с помощью JQuery, получить красивый эффект. Далее CSS-код, необходимый для нашего примера: [css] #wrapper { width:800px; height:600px; /* main background image with sky, sun, river and ground */ background-image:url(images/Untitled-3.jpg); background-repeat:no-repeat; margin-top:10px; margin-left:auto; margin-right:auto; border: 10px solid #666; } #inner { position:relative; overflow:hidden; width:800px; height:600px; margin:0px; } #cloudone { position:absolute; margin-top:2px; margin-left:-200px; filter:alpha(opacity=80); /* CSS3 standard */ opacity:0.8; } #cloudtwo { position:absolute; margin-top:80px; margin-left:-300px; filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.6; } #cloudthree { position:absolute; margin-top:60px; margin-left:-600px; filter:alpha(opacity=70); /* CSS3 standard */ opacity:0.7; } #boat { margin-top:360px; position:absolute; margin-left:800px; } [/css]

Шаг 4. jQuery

Прежде всего, нам необходимо подключить jQuery, к нашей странице: [html] [/html] Здесь, мы дважды будем использовать функцию .animate, для анимирования облаков и лодки. Кроме того, мы создадим специальную функцию для того, чтобы облака и лодка двигались по кругу. Смотрите пример ниже. [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } [/javascript] В приведенном коде происходит следующее: с помощью первой функции .animate, мы двигаем объект #cloudone вправо, на 1200 пикселей, причем объект будет двигаться со скользящим эффектом, в течении 10 секунд. Далее, вторая функция .animate возвращает объект на исходную позицию, с интервалом 0 секунд. Для того, чтобы снова запустить анимацию, нам необходимо суммировать временные интервалы обоих функций .animate, и с помощью функции setTimeout, мы сможем снова запустить цикл вращения картинки. Таким образом, можно анимировать все картинки. Далее приведен код, для анимации остальных изображений: [javascript] function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ //This time we need to move boat to left side so we put the margin to 1000px $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Теперь, нам нужно запустить всю нашу анимацию (cloudone(), cloudtwo(), cloudthree), сразу после того, как загрузится страница. Это делается следующим образом: [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); [/javascript] Весь код, будет выглядеть вот так. [javascript] $(document).ready(function() { setTimeout("cloudone()",10); setTimeout("cloudtwo()",10); setTimeout("cloudthree()",10); setTimeout("boat()",10); }); function cloudone(){ $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0) setTimeout("cloudone()",10000); } function cloudtwo(){ $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0) setTimeout("cloudtwo()",15000); } function cloudthree(){ $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0) setTimeout("cloudthree()",20000); } function boat(){ $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0) setTimeout("boat()",20000); } [/javascript] Перевод статьи “Animated Landscape Using CSS and jQuery”, автор Vikas Ghodke

Что такое inline-block?

dreamhelg — Tue, 27 Apr 2010 06:48:27 +0000

Если вы работаете с CSS не первый день, то наверняка знакомы со значением inline-block, свойства display. Наиболее часто эту связку используют для устранения проблем в IE6. Попробую вкратце объяснить о чем идет речь. Если вы назначаете float элементу и одновременно задаете margin с той же стороны, то в IE6 margin (странным образом) удвоится. Проблему можно исправить, применив хак специально для IE6, в котором можно указать значение margin в половину меньше от оригинала, или же вы можете назначить элементу свойство display в значение inline-block. Это разрешит проблему в большинстве, если не во всех случаях. Однако, решение проблемы с двойными полями в IE6, далеко не единственное применение значения inline-block, оно может принести гораздо больше пользы, если хорошо его изучить.

Определение

Далее представлены несколько описаний для значения inline-block, взятые из разных источников: CSS-справочник Sitepoint

Значение inline-block генерирует блочный элемент, с поведением строчного элемента

QuirksMode

Строчный блок располагается в той же самой строке, что и соседний контент, но при этом ведет себя как блок

Роберт Нэйман:

В основном, это способ сделать элементы строчными, при этом сохранив его блочные возможности, такие как указание ширины и высоты, верхних и нижних отступов, паддингов и др.

Я думаю определение Роберта Нэймана самое лучшее, поскольку сразу объясняет практический смысл значения.

Демонстрация

Нижеприведенное изображение демонстрирует значение inline-block в действии:

Как его можно использовать?

Есть несколько ситуаций, с которыми вам поможет справиться inline-block:

для исправления двойных полей у плавающих элементов в IE6 (как уже говорилось выше)
для позиционирования блочных элементов в одной строке без использования float
для указания ширины и высоты строчному элементу, без изменения его поведения
для указания строчному элементу полей и отступов.

То, что следует запомнить

При использовании значения inline-block, следует помнить о некоторых факторах и недостатках. Элемент, с назначенным inline-block, является чувствительным к пробелам. То есть, если вы применяете это значение к маркированному списку (например для создания навигации), то каждый элемент списка будет иметь дополнительное пустое пространство на стыке двух элементов. Для того, чтобы этого избежать, необходимо удалить любые пробелы, разделяющие элементы

, в HTML-разметке. Следовательно, ваш HTML-код будет выглядеть следующим образом: [html]

Item One
Item Two
Item Three
Item Four
Item Five

[/html] Или еще хуже: [html]

Item One
Item Two
Item Three
Item Four
Item Five

[/html] Есть и другое решение этой проблемы – можно назначить font-size: 0, для элемента

. Но это не очень хорошее решение, в данном случае, лучше отказаться от использования inline-block. Кроме того, если у вас на странице предполагается наличие нескольких элементов, с разной высотой и значением inline-block, вам следует указать им дополнительное свойство vertical-align: top, для того, чтобы предотвратить расположение блоков в шахматном порядке. На этой странице можно ознакомиться с различными примерами расстановки элементов, с назначенным значением inline-block. Ну и наконец, во время многочисленных экспериментов, выяснилось, что inline-block, ведет себя не вполне обычно, когда он применяется к элементу внутри текста, заключенного в элемент параграфа.
Поддержка браузерами
Думаю вы не удивитесь, узнав, что inline-block работает во всех браузерах, кроме IE6 и IE7. Но имитировать работу этого значения не так уж сложно. Для того, чтобы применить к элементу значение inline-block в IE6 и IE7, нужно всего лишь установить свойство display в значение inline, а затем назначить элементу layout. Главное, убедитесь, что значение inline, появляется после значения inline-block в CSS-файле, и не забудьте спрятать inline от других браузеров. Перевод статьи “What is Inline-Block?”, автор Louis Lazaris

Создание прототипа с помощью CSS-фреймворка Grid 960

dreamhelg — Mon, 26 Oct 2009 10:55:06 +0000

Grid 960 - это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты. Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа. Как обычно, можете сразу взглянуть на результат. Представьте, что вы получили дизайн, и вам нужно сверстать его для клиента. Из этой статьи вы познакомитесь с основами Grid, проектированием сетки дизайна и кодированием прототипа. Мы будем использовать довольно простой дизайн, использующий большинство возможностей Grid 960, который поможет вам получить основную базу знаний для дальнейшей работы. После того, как вы ознакомитесь с представленным ниже дизайном, давайте начнем изучение принципов работы Grid 960.

Создание Сетки

Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

60px
140px
220px
300px
380px
460px
540px
620px
700px
780px
860px
940px

Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок. Давайте немного рассмотрим сам код. Вот как можно создать сетку из двух строк в 12-ти колоночном контейнере. Здесь первая строка шириной 940 пикселей, и вторая строка содержит две одинаковых колонки. [html]

940px

460px

[/html] Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Макет

Визуализировать сетку дизайна довольно легко. Будет одна строка для картинки заголовка, строка для навигации, строка с двумя колонками для статьи заголовка и постера, разделитель, 4 колонки, затем подвал, состоящий из трех колонок.

После визуализации, вы должны понимать, как создать сетку макета. Используя значения ширины в имени класса, из приведенного списка, давайте вместе составим код. Помните, что необходимо добавлять очищающий div в конце каждой строки. Не забудьте включить CSS-файлы, входящие в состав Grid 960. [html]

[/html] Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка. [css] div.spacer { background-color: #8FC73E; height: 1em; } div#navbar { background-color: #8FC73E; padding: 10px 0; } [/css] Применение классов для корректировки блоков grid_12 и установка ID [html]

[/html] Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала. [html] [/html] [css] div#footer { background-color: #e5e5e6; } [/css] Прекрасно! Теперь у подвала есть заливка однородным цветом, и вы можете указать размеры колонок, если это необходимо. Добавим немного текста для колонок подвала и перейдем к панели навигации. Навигация выполнена в виде простого маркированного списка Добавим немного ссылок и соответствующих стилей. [html]

Articles
Topics
About
Editors
Contact

[/html] [css] div#navbar ul { list-style: none; display: block; margin: 0 10px; } div#navbar ul li { float: left; margin: 0 1.5em; font: bold 1em Arial; } [/css] Замечательно. Страница скоро будет готова. Все что нам нужно сделать, это создать эффекты блока в верхней секции. Это не так просто, как кажется. Прежде чем мы начнем, вы должны кое-что понять о Grid 960 и CSS-фреймворках в целом.

Дизайн и верстка эластичного макета

dreamhelg — Tue, 06 Oct 2009 06:56:39 +0000

В сегодняшней статье, мы создадим дизайн и сверстаем простую страницу в стиле блога. При этом особое внимание, мы уделим созданию тянущегося макета с использованием только XHTML и CSS. Эта статья [...]