Материалы с тегом «CSS3»

• @font-face. Нестандартный шрифт средствами CSS.

  Как внедрить нестандартный шрифт без использования картинок, javascript и flash? Т.е. использовать только последние достижения в CSS. Ответ — CSS правило @font-face.

• Box-sizing: переключаем блочную модель

  CSS3 свойство box-sizing позволяет выбирать принцип расчета размеров блока. Как же это можно использовать на практике?

• CSS 3D лента

  Реализуем ленту с эффектом 3D на чистом CSS. Для этого придется воспользоваться целой комбинацией приемов, но результат того стоит.

• CSS Multi Column

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

• CSS свойство text-shadow

  CSS свойство text-shadow задает эффект тени тексту элемента.

• CSS3 PIE — Progressive Internet Explorer

  PIE помогает Internet Explorer 6-8 понять некоторые вещи из CSS3.

• CSS3 всплывающие подсказки

  Реализуем всплывающую подсказку на чистом CSS без скриптов и картинок.

• CSS3 шаблоны градиентов

  Творческий подход к использованию CSS3 градиентов позволяет избавится от ряда возможных фоновых картинок.

• IE’s CSS3 Transforms Translator

  IE’s CSS3 Transforms Translator — сервис для автоматического вычисления параметров трансформационной матрицы. Позволяет значительно упростить и ускорить написание фильтра Matrix для IE, который применяется для эмуляции в этом браузере CSS3 свойства transform.

• Modernizr — HTML5 и CSS3 уже сегодня

  Плагин Modernizr позволяет на лету определять поддержку web-технологий нового поколения и, в зависимости от результата, применять нужные стили или выполнять определенные действия.

• PIE для скрытых или динамических элементов

  Если блок, к которому применяется PIE изначально скрыт или вообще отсутствует в коде (вставляется позже, динамически), то PIE для него не сработает. Рассмотрим, как с этим бороться.

• Update PIE

  В новой версии плагина исправлены некоторые наболевшие баги, плюс появилось несколько приятных мелочей.

• Аккордеон на чистом CSS3

  У тебя есть много контента, мало места и при этом совершенно нет желания жертвовать юзабилити. Значит тебе нужен аккордеон. А еще лучше — аккордеон на CSS3!

• Анимация в CSS3. Часть I

  CSS3 свойство animation позволяет создавать анимированые переходы без помощи javascript. Safari 4+ и Chrome 3+ уже сейчас поддерживают это свойство с вендорным префиксом -webkit-. Итак, разбираем CSS3 анимацию.

• Анимация в CSS3. Часть II

  Продолжаем разбирать CSS3 анимацию. Вторая часть статьи посвящена особенностям применения нескольких анимаций к одному элементу, а также управлению анимацией.

• Аппаратное ускорение анимации

  CSS3 анимация для повышения производительности.

• Галерея на чистом CSS

  Когда слышишь «галерея» представляешь себе javascript скрипт (плагин), а-ля lightbox или highslide. CSS3 ломает эти стереотипы.

• Градиент: CSS3 против CSS2 + картинка

  CSS свойства linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена пройдет, наверно, немало времени пока мы сможем использовать эту мощь в своей работе. Тем не менее все большее число браузеров в том или ином виде поддерживает CSS-градиенты.

• Интервью: Марчин Вичери — создатель Google Pacman Logo, HTML5 Slide Deck и других интересных вещей

  Поговорить и поспрашивать крутого или, пока что, просто талантливого веб-разработчика всегда интересно. «Веб-ниндзя» Марчин Вичери (Marcin Wichary) отвечает на вопросы о своих проектах, новых технологиях и дает советы научится создавать действительно стоящие вещи.

• Многоколоночный текст на CSS3

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

• Необычные тени с CSS3 box-shadow

  Виртуозное владение CSS3-техниками box-shadow позволяет сделать даже такую неравномерную тень без картинок!

• Песня о CSS3

  Это не только про веб-анимацию и, возможно, не все можно решить проблему одной строкой кода, но CSS3 действительно крутая штука и заслуживает собственной песни.

• Свойство transform

  Css свойство transform — применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел).

• Свойство transform-origin

  Css свойство transform-origin — задает координаты центра трансформации.

• Свойство animation

  Css свойство animation — сокращенный способ задать свойства анимации animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, позволяет одновременно задать имя анимации, время анимации, способ определения промежуточных значений изменяющихся параметров, задержку анимации, количество циклов анимации и возможность ее проигрывания в обратную сторону.

• Свойство animation-delay

  Css свойство animation-delay задает время задержки анимации (можно указать несколько через запятую).

• Свойство animation-direction

  Css свойство animation-direction определяет, нужно ли проигрывать анимацию в обратном направлении (можно указать несколько через запятую).

• Свойство animation-duration

  Css свойство animation-duration задает продолжительность одного цикла анимации (можно указать несколько через запятую)

• Свойство animation-iteration-count

  Css свойство animation-iteration-count определяет количество циклов анимации (можно указать несколько через запятую).

• Свойство animation-name

  Css свойство animation-name задает имя анимации, при обращении к которому будет производиться анимация (можно указать несколько через запятую).

• Свойство animation-play-state

  Css свойство animation-play-state определяет, работает ли анимация или стоит на паузе (можно указать несколько значений через запятую).

• Свойство animation-timing-function

  Css свойство animation-timing-function описывает метод расчета промежуточных значений свойств для анимации (можно указать несколько через запятую).

• Свойство appearance

  Css свойство appearance может быть использовано для того, чтобы элемент выглядел как стандартный пользовательский элемент для этой платформы.

• Свойство backface-visibility

  Css свойство backface-visibility определяет будет ли видно контент элемента, который с помощью 3d трансформаций отвернут лицом от пользователя.

• Свойство background-clip

  CSS cвойство background-clip определяет, будет ли цвет фона ограничиваться началом границы элемента или будет продолжаться до внешнего края границы.

• Свойство background-origin

  Свойство background-origin определяет точку, с которой будет начинаться фоновое изображение. Оно может начинаться от внутреннего края границы элемента, от внешнего края границы элемента или только в зоне контента.

• Свойство background-size

  Css свойство background-size определяет ширину и высоту фонового изображения.

• Свойство border-bottom-left-radius

  CSS свойство border-bottom-left-radius — задает радиус скругления левого нижнего угла элемента.

• Свойство border-bottom-right-radius

  CSS свойство border-bottom-right-radius — задает радиус скругления правого нижнего угла элемента.

• Свойство border-image

  Css свойство border-image — сокращенный способ задать свойства границы border-image-source, border-image-slice, border-image-width, border-image-outset, border-image-repeat, позволяет одновременно задать фоновое изображение границы элемента, разбить его на фрагменты, указать размер контура и его способность выходить за пределы границы элемента, а также указать способ отображения боковых фрагментов и центра фонового изображения.

• Свойство border-image-outset

  Css свойство border-image-outset — указывает, на какое расстояние фоновое изображение границы выступает за ширину самой границы, заданную свойством border-width.

• Свойство border-image-repeat

  Css свойство border-image-repeat — определяет каким образом отображать боковые фрагменты фонового изображения границы заданного свойством border-image-source по оси x и по оси y.

• Свойство border-image-slice

  Css свойство border-image-slice — задает отступы сверху, справа, снизу и слева, которые надо отступить для разделения фонового изображения на части.

• Свойство border-image-source

  Css свойство border-image-source — задает изображение, которое будет использоваться в качестве фонового изображения для границы элемента вместо стиля заданного для границы.

• Свойство border-image-width

  Css cвойство border-image-width — задает для фонового изображения сверху, справа, снизу и слева ширину, которая отсчитывается от внутреннего края границы.

• Свойство border-radius

  Css свойство border-radius — позволяет задать одновременно радиус скруглений всех углов элемента.

• Свойство border-top-left-radius

  CSS свойство border-top-left-radius — задает радиус скругления левого верхнего угла элемента.

• Свойство border-top-right-radius

  CSS свойство border-top-right-radius — задает радиус скругления правого верхнего угла элемента.

• Свойство box-shadow

  Css свойство box-shadow задает эффект тени элементу.

• Свойство box-sizing

  Css свойство box-sizing определяет, будет ли размер элемента включать только контент (по умолчанию) или контент, внутренние отступы и границы.

• Свойство break-after

  Css свойство break-after определяет разрыв колонки после элемента в многоколоночном элементе, а также отвечает за разбивку страниц при печати.

• Свойство break-before

  Css свойство break-before определяет разрыв колонки перед элементом в многоколоночном элементе, а также отвечает за разбивку страниц при печати.

• Свойство break-inside

  Css свойство break-inside определяет разрыв страницы/колонки внутри элемента.

• Свойство column-count

  Css свойство column-count определяет количество колонок в многоколоночном элементе.

• Свойство column-gap

  Css свойство column-gap определяет промежуток между колонками в многоколоночном элементе.

• Свойство column-rule

  CSS свойство column-rule позволяет одновременно задать толщину линии, ее тип и цвет для всех границ колонок в многоколоночном элементе.

• Свойство column-rule-color

  CSS свойство column-rule-color определяет цвет границы колонки в многоколоночном элементе.

• Свойство column-rule-style

  Css свойство column-rule-style определяет тип линии границы колонки в многоколоночном элементе.

• Свойство column-rule-width

  Css свойство column-rule-width определяет ширину границы колонки в многоколоночном элементе.

• Свойство column-span

  CSS свойство column-span определяет одну или все колонки будет охватывать элемент в многоколоночном элементе.

• Свойство column-width

  Css свойство column-width определяет ширину колонок в многоколоночном элементе.

• Свойство columns

  Css свойство columns определяет ширину колонок и их количество в многоколоночном элементе.

• Свойство font-size-adjust

  Css свойство font-size-adjust позволяет корректировать размер строчных букв по отношению к заглавным для лучшей читаемости шрифта.

• Свойство font-stretch

  Css свойство font-stretch выбирает нормальную, уплотненную или расширенную ширину символов в шрифте.

• Свойство marquee-direction

  Css свойство marquee-direction определяет направление бегущего контента в элементах с бегущим контентом.

• Свойство marquee-play-count

  Css свойство marquee-play-count задает, какое количество раз будет показываться контент.

• Свойство marquee-speed

  Css свойство marquee-speed определяет скорость бегущего контента в элементах с бегущим контентом.

• Свойство marquee-style

  Css свойство marquee-style стиль бегущего контента в элементах с бегущим контентом.

• Свойство nav-down

  Css свойство nav-down определяет, какой элемент получит фокус при навигации вниз от данного элемента.

• Свойство nav-index

  Css свойство nav-index определяет позицию элемента в порядке табуляции в текущем документе.

• Свойство transition-delay

  Css свойство transition-delay указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).

• Свойство transition-duration

  Css свойство transition-duration указывает какое количество времени занимает анимированный переход (можно указать несколько через запятую).

• Свойство transition-property

  Css свойство transition-property задает свойство, для которого будет совершаться анимированный переход (можно указать несколько через запятую).

• Свойство transition-timing-function

  Css свойство transition-timing-function указывает на временную задержку перед анимированным переходом (можно указать несколько через запятую).

• Свойство unicode-range

  Css свойство unicode-range определяет интервалы таблицы Unicode, в пределах которых находятся символы внешнего шрифта, использующегося в документе (можно указать несколько интервалов через запятую).

• Свойство word-wrap

  Css свойство word-wrap определяет, можно ли разорвать слово, если оно не умещается в ширину строки.

• Селектор обобщенных родственных элементов

  Выбирает элементы расположенные за другим заданным элементом и имеющие с ним общего родителя. Экзотический селектор. Полезность не установлена.

• Синтаксис псевдоэлементов :after и :before

  Как правильно написать :after (:before) или ::after (::before)?

• Тень для блока без использования картинок

  Разгоняем сайт: делаем тень для блока с помощью CSS, не используя изображения.