Блог Рины Стоцкой http://rinas.org.ua/ ru Блог Рины Стоцкой DataLife Engine Как создать эффект Кена Бернса с CSS http://rinas.org.ua/raznoe/web/css/156-kak-sozdat-effekt-kena-bernsa-s-css.html http://rinas.org.ua/raznoe/web/css/156-kak-sozdat-effekt-kena-bernsa-s-css.html


Эффект Кена Бернса является популярным для создания панорам и масштабирования. Данный эффект используется в видео-продукции. Название происходит от использования популярной техники американского документалиста Кена Бернса.

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

]]> rinas Mon, 20 Feb 2012 12:45:10 +0200 Текстовые эффекты в css с использованием text-shadow http://rinas.org.ua/raznoe/web/css/155-tekstovye-effekty-v-css-s-ispolzovaniem-text-shadow.html http://rinas.org.ua/raznoe/web/css/155-tekstovye-effekty-v-css-s-ispolzovaniem-text-shadow.html CSS на основе текстовых эффектов


В следующем примере все созданы с использованием живого текста и текста CSS тени собственности.Помимо Letterpress эффект, все следующие примеры используют несколько теней, и, таким образом будет работать только на следующих браузеров.

  • Firefox 3.1 + (Mac / Win / Lin)
  • Safari 4 + (Mac / Win)
  • Chrome (Mac / Win)
  • Opera 9.5 + (Mac / Win / Lin)

К сожалению, Internet Explorer (6/7/8) не поддерживает текстовые тени собственности.

Если вы не знакомы с текстом тени собственности вот пример и объяснение:

h1 { Текст тени:-2px 2px 3px # ff2d95; }

 

]]> rinas Mon, 20 Feb 2012 10:56:03 +0200 Позиционирование элементов http://rinas.org.ua/raznoe/web/css/154-pozicionirovanie-elementov.html http://rinas.org.ua/raznoe/web/css/154-pozicionirovanie-elementov.html

При помощи CSS-позиционирования вы можете разместить элемент точно в нужном месте страницы. Вместе с поплавками (см. Урок 13) позиционирование даёт вам большие возможности для создания точного и навороченного дизайна.

В этом уроке мы обсудим следующее:

]]> rinas Mon, 20 Feb 2012 08:48:01 +0200 Всплывающие элементы (поплавки) http://rinas.org.ua/raznoe/web/css/153-vsplyvayuschie-elementy-poplavki.html http://rinas.org.ua/raznoe/web/css/153-vsplyvayuschie-elementy-poplavki.html

Элемент может "всплывать" вправо или влево с помощью свойства float. То есть бокс с его содержимым может всплывать вправо или влево в окне документа (или содержащего бокса) (см. в Уроке 9 описание боксовой модели). Принципы показаны на рисунке:

A left-floating box

]]> rinas Mon, 20 Feb 2012 08:35:17 +0200 Группирование элементов (span и div) http://rinas.org.ua/raznoe/web/css/152-gruppirovanie-elementov-span-i-div.html http://rinas.org.ua/raznoe/web/css/152-gruppirovanie-elementov-span-i-div.html

Элементы <span> и <div> используются для структурирования документа, часто совместно с атрибутами class и id.

В этом уроке мы подробно рассмотрим, как использовать <span> и <div>, поскольку эти элементы HTML имеют важнейшее значение в CSS.

  • Группирование с помощью <span>
  • Группирование с помощью <div>

Группирование с помощью <span>

Элемент <span> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <span> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

]]> rinas Mon, 20 Feb 2012 08:33:25 +0200 Наслоение с помощью z-index (Слои) http://rinas.org.ua/raznoe/web/css/151-nasloenie-s-pomoschyu-z-index-sloi.html http://rinas.org.ua/raznoe/web/css/151-nasloenie-s-pomoschyu-z-index-sloi.html

CSS оперирует в трёх измерениях - высота, ширина и глубина. Мы работали в двух измерениях на протяжении всех предшествующих уроков. В этом уроке мы научимся создавать слои/layers. Коротко говоря - упорядочивать элементы так, чтобы они перекрывались.

Для этого вы можете присвоит каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Скажем, мы играем в покер и у нас - royal flush. Наша "рука" должна быть представлена так, чтобы каждая карта имела z-index:

Royal Flush

]]> rinas Mon, 20 Feb 2012 08:29:56 +0200 Кроссбраузерный text-shadow эффект с помощью CSS http://rinas.org.ua/raznoe/web/css/148-krossbrauzernyy-text-shadow-effekt-s-pomoschyu-css.html http://rinas.org.ua/raznoe/web/css/148-krossbrauzernyy-text-shadow-effekt-s-pomoschyu-css.html Посещая разные интернет ресурсы на некоторых вы наверно видели эффект отбрасывания текстом тени, или эффект вдавленного текста. Возможно на некоторых сайтах текст представляет собой картинку, а эффект отбрасывания тени сделан в фотошопе. Но уверен что точно такого эффекта можно добиться с помощью CSS стилей и прочитав эту статью вы узнаете кроссбраузерное решение этой задачи.
Главное занимаясь украшательством блога помните про ошибки в дизайне которые ни в коем случае нельза допускать

]]> rinas Sun, 19 Feb 2012 22:17:00 +0200 Эффекты наведения в CSS … http://rinas.org.ua/raznoe/web/css/147-effekty-navedeniya-v-css-.html http://rinas.org.ua/raznoe/web/css/147-effekty-navedeniya-v-css-.html

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

Ранее для создания подобных эффектов было необходимо использовать javascript, но того же самого можно добиться и при помощи одного CSS, используя селектор псевдокласса :hover.

Нужно отметить, что браузер Internet Explorer 6 (и ниже) не поддерживает селектор :hover для элементов, отличных от гиперссылки, поэтому на этом уроке мы сконцентрируемся на эффектах наведения для текстовых и графических ссылок.

Хорошие новости: в IE 7 селектор :hover можно применять к любым элементам.

 

]]> rinas Sun, 19 Feb 2012 22:15:30 +0200 Фон для сайта (свойство CSS background) http://rinas.org.ua/raznoe/web/css/146-fon-dlya-sayta-svoystvo-css-background.html http://rinas.org.ua/raznoe/web/css/146-fon-dlya-sayta-svoystvo-css-background.html

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

background-color – задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

/* черный фон сайта */
body {
 background-color: #000;
}
 
/* черный фон заголовка, белый цвет шрифта */
h1 {
 color: #fff; 
 background-color: #000;
}

]]> rinas Sun, 19 Feb 2012 22:13:00 +0200 Рамки в css http://rinas.org.ua/raznoe/web/css/145-ramki-v-css.html http://rinas.org.ua/raznoe/web/css/145-ramki-v-css.html

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

Толщина рамки [border-width]

Толщина рамки определяется свойством border-width, которое может иметь значения thin, medium и thick, или числовое значение в пикселах. На рисунке показана эта система:

Examples of border-width

]]> rinas Sun, 19 Feb 2012 22:10:15 +0200