|
1 |
по стр.
CSS хаки
CSS хаки это не по стандарту написанные CSS правила, которые по разному воспринимаются различными браузерами (одни их просто игнорируют, другие же применяют не обращая внимания на ошибку) - это и позволяет применять различные css-правила для различных браузеров.
Свойство writing-mode
Основное средство поддержки текстовых потоков для языков отличных от Western
Расширенный вариант writing-mode включён в спецификацию CSS3
поддержка браузеров: Internet Explorer все версии
Закругляем рамки у блока средствами CSS
Как отобразить закруглённые уголки у блока не используя громоздкие html-конструкции на основе таблиц, либо букет из вложенных div`ов. Неужели нельзя обойтись всего одним блочным тегом
<div class="corners"> ... </div>
убрав все описания в CSS?
PNG-прозрачность в IE
Формат PNG поддерживает глубину цвета в 48 бит на пиксел, отдельный альфа-канал, улучшенное сжатие данных (PNG использует алгоритм сжатия Deflate без потерь информации), возможность использования гамма-коррекции, сохранение компрессированных или некомпрессированных текстовых вставок для хранения информации о копирайте или других целей. Всё это позволяет задавать различную степень прозрачности области изображения
Многие браузеры умеют работать с данным форматом и поддерживают его прозрачность: Mozilla 0.9+ (Firefox, Netscape 6+ ...), Opera 6+, Konqueror 3+, Safari 1.0+ ...
В Internet Explorer 5.5+ для корректного отображения файла *.png к изображению необходимо применить
фильтр CSS AlphaImageLoader. Есть несколько вариантов подключения фильтра, все они имеют свои плюсы и недостатки. Рассмотрим некоторые из них
Свойство content
Свойство content позволяет установить тип содержимого (например HTML тег), с которым связываются псевдоэлементы before и after. Это позволяет веб-разработчику реализовать специальные эффекты, например воспроизводить звук перед или после отображения определённых элементов веб-страницы или
изменять форматирование элементов документа.
Псевдоэлемент before (after) включает строку текста или выполняет другие действия перед (после) выбранным веб-элементом.
поддержка браузеров: Mozilla Firefox частично, Opera все версии
Многоуровневый нумерованный список
Многоуровневый нумерованный список с выводом нумерации всех дочерних элементов
см. также: Свойство content
Искажение текста
Искажение текста с помощью фильтра CSS Wave
поддержка браузеров: Internet Explorer все версии
см. также: filter: wave
Меняющийся текст
Один текст сменяет другой, с применением эффектов, которые, вы, конечно, можете настроить
поддержка браузеров: Internet Explorer все версии
см. также: filter: glow
Конструкция expression()
Конструкция expression() избавляет кодера от необходимости разбираться в тонкостях CSS позиционирования и событийной модели.
поддержка браузеров: Internet Explorer все версии
Свойство border-collapse
Свойство позволяет управлять отображением рамки таблицы
поддержка браузеров: Internet Explorer частично, Mozilla Firefox все версии, Opera все версии, Netscape Navigator все версии
Свойство table-layout
Позволяет указать, должна ли ширина ячейки зависеть от содержащихся в ней данных
Свойство margin
Задаёт внешние отступы блока относительно других элементов (например, если для блока у вас задана рамка, то расстояние от рамки до других элементов будет равно указанной вами величине)
Свойство padding
Задаёт отступы внутри блока (например, если для блока у вас задана рамка, то расстояние от текста внутри блока до рамки будет равно указанной вами величине)
Свойство border-bottom (top, left, right)
Позволяет применять к каждой границе различные эффекты
Свойство border-width
Свойство позволяет указать толщину рамки вокруг элемента
Свойство border-color
Свойство определяет цвет рамки вокруг элемента
Свойство border-style
Определяет тип обрамления вокруг элемента
Свойство list-style-position
Влияет на отображение маркеров перед пунктами списка
Свойство list-style-image
Позволяет использовать в качестве маркера произвольное изображение
Свойство list-style-type
Определяет тип маркера в списках
Свойство float
Определяет, как указанный элемент располагается относительно "родительского" элемента.
По сути, это свойство заменяет собой выражения "align=left" или "align=right"
Свойство clear
Данное свойство определяет, допускает ли элемент обтекание, и задаёт взаимное расположение различных элементов.
Действие этого свойства напоминает html-дескриптор <br clear="all" />.
Свойство применяется, если на странице находится несколько изображений, и вы хотите, чтобы рядом с изображением отображался соответствующий ему текст
Свойство text-indent
Устанавливает отступ для первой строки от левой границы страницы (применяется к элементам блокового уровня, например к заголовкам или абзацам, но не к таблицам) - может быть задано абсолютное значение, или величина, установленная в процентах, относительно ширины окна браузера
Свойство text-align
Выравнивание текста на странице (применяется к элементам блокового уровня, например к заголовкам или абзацам)
Свойство vertical-align
Размещение текста относительно других элементов, находящихся на странице
Свойство text-transform
С помощью этого свойства можно преобразовывать регистр символов
Свойство text-decoration
Позволяет выводить текст с подчёркиванием, зачёркиванием ...
Свойство line-height
Междустрочный интервал (может принимать следующие значения: normal (принимается по умолчанию - вывод текста "через один интервал") , любая единица измерения, допустимая спецификацией css, значение в процентах от высоты шрифта)
Свойство white-space
Управляет расстановкой пробелов между словами
Свойство word-spacing
Задаёт интервалы между отдельными словами (может принимать следующие значения: normal
(принимается по умолчанию) или любая единица измерения, допустимая спецификацией css)
Свойство letter-spacing
Задаёт интервалы между отдельными символами (может принимать следующие значения: normal
(принимается по умолчанию) или любая единица измерения, допустимая спецификацией css)
Общие свойства для текста
Данные свойства позволяют контролировать отображение шрифтов на экране
Свойство first-letter
Этот псевдоэлемент предназначен для отображения первого символа абзаца специальным образом (например эффект буквицы). Если абзац начинается с кавычек, то форматируется открывающая кавычка и следующая за ней буква.
Если вы хотите выделить первую букву, не формируя буквицу, просто удалите выражение "float: left;"
Свойство first-line
Данное свойство позволят изменять представление только первой строки абзаца (или <div>). Объём, выделенного таким образом текста, определяется размером строки
Свойство scrollbar
Эти свойства позволяют менять внешний вид полос прокрутки браузера
Свойство visibility
Используется для отображения или скрытия элемента на экране (применимо к любому элементу)
поддержка браузеров: Internet Explorer частично, Mozilla Firefox все версии, Opera частично
Свойство clip
С помощью этого свойства можно задать какая часть содержимого блока будет видима
Свойство overflow
Указывает браузеру, какие действия необходимо выполнить, если содержимое элемента "не влезает" в пределы отведённого блока (понятное дело, что необходимо указать размеры этого блока, т.е. ширину (width) и высоту (height))
Свойство unicode-bidi
Используется совместно со свойством direction, и позволяет явным образом задать направление текста и размещение прочих элементов на странице (в отличие от direction свойство применяется к документу в целом)
Свойство direction
С помощью этого свойства можно изменить направление текста (например для арабских языков), но свойство не влияет на порядок следования символов
Свойство position
Позволяет располагать элементы точно в тех местах, которые они должны занимать
Свойство background-image
Позволяет использовать изображение в качестве фона
Свойство display
Это свойство модифицирует действие связанных с ним дескрипторов
filter: zigzag
новое изображение проявляется по мере движения специальной области вперёд и назад в пределах области
style="filter: progid:DXImageTransform.Microsoft.zigzag(gridSizeX=8, gridSizeY=8);"
поддержка браузеров: Internet Explorer все версии
filter: wheel
имитация вращательного движения при построении нового изображения
style="filter: progid:DXImageTransform.Microsoft.wheel(spokes=8);"
поддержка браузеров: Internet Explorer все версии
filter: pixelate
изображение меняется так, как будто отображается на мониторе с низким разрешением
style="filter: progid:DXImageTransform.Microsoft.pixelate(maxSquare=30, duration=2, enabled=false);"
поддержка браузеров: Internet Explorer все версии
filter: inset
новое изображение воспроизводится, начиная с верхнего левого угла
style="filter: progid:DXImageTransform.Microsoft.inset;"
поддержка браузеров: Internet Explorer все версии
filter: slide
"передвигает" данные в требуемую позицию
style="filter: progid:DXImageTransform.Microsoft.slide(slideStyle=swap, bands=4);"
поддержка браузеров: Internet Explorer все версии
filter: stretch
эффект "растягивания" и "перемещения" изображения
style="filter: progid:DXImageTransform.Microsoft.stretch(stretchStyle=push);"
поддержка браузеров: Internet Explorer все версии
filter: spiral
область, проявляющая новое изображение, совершает движение по спирали
style="filter: progid:DXImageTransform.Microsoft.spiral(gridSizeX=65, gridSizeY=65, duration=1);"
поддержка браузеров: Internet Explorer все версии
filter: iris
область, в которой воспроизводится целевое изображение, расширяется подобно диафрагме фотоаппарата
style="filter: progid:DXImageTransform.Microsoft.iris(irisStyle=cross, motion=out);"
поддержка браузеров: Internet Explorer все версии
filter: randomDissolve
фильтр формирует изображение, выбирая случайным образом пиксели в составе целевого объекта
style="filter: progid:DXImageTransform.Microsoft.randomDissolve(duration=0.75);"
поддержка браузеров: Internet Explorer все версии
filter: randomBars
фильтр формирует изображение, выбирая случайным образом строки
style="filter: progid:DXImageTransform.Microsoft.randomBars(orientation=vertical);"
поддержка браузеров: Internet Explorer все версии
filter: strips
изображение проявляется в области, траектория движения которой, напоминает зубья пилы
style="filter: progid:DXImageTransform.Microsoft.strips(duration=5, motion-leftdown);"
поддержка браузеров: Internet Explorer все версии
filter: radialWipe
содержимое целевого объекта проявляется так, как будто его открывает некая полоса
style="filter: progid:DXImageTransform.Microsoft.radialWipe(wipeStyle=wedge);"
поддержка браузеров: Internet Explorer все версии
filter: wipe
по мере движения "градиентной полосы" постепенно заменяет исходное изображение целевым
style="filter: progid:DXImageTransform.Microsoft.wipe(gradientSize=0.5, wipeStyle=0, motion=forward);"
поддержка браузеров: Internet Explorer все версии
filter: revealTrans
данный фильтр позволяет реализовать несколько визуальных эффектов
style="filter: progid:DXImageTransform.Microsoft.revealTrans(duration=1, transition=23);"
поддержка браузеров: Internet Explorer все версии
filter: fade
отображает новое изображение, постепенно заменяя им исходное
style="filter: progid:DXImageTransform.Microsoft.fade(duration=5, overlap=0.4);"
поддержка браузеров: Internet Explorer все версии
filter: checkerboard
объект условно разбивается на ячейки, которые "раскрываются", делая нижележащий объект видимым
style="filter: progid:DXImageTransform.Microsoft.checkerBoard(squaresX=6, squaresY=4, direction=right);"
поддержка браузеров: Internet Explorer все версии
filter: blinds
эффект жалюзи
style="filter: progid:DXImageTransform.Microsoft.blinds(direction=left, bands=6, duration=1);"
поддержка браузеров: Internet Explorer все версии
filter: barn
эффект открывающейся (закрывающейся) двери
style="filter: progid:DXImageTransform.Microsoft.barn(orientation=vertical, motion=in, duration=1);"
поддержка браузеров: Internet Explorer все версии
filter: light
фильтр используется для создания эффекта освещения объекта источником света
<img src="clock.jpg" style="filter: light;" id="light_1" onLoad="light_1.filters.light.addAmbient (0, 255, 0, 100)" width="200" height="149" alt="Результат применения фильтра light" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: chroma
удаление из изображения определённого цвета
<img src="clock.jpg" style="filter: chroma (enabled, color=#1F1A17)" width="200" height="149" alt="Результат применения фильтра chroma" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: xray
монохромный негатив
<img src="clock.jpg" style="filter: xray" width="200" height="149" alt="Результат применения фильтра xray" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: gray
чёрно-белое изображение
<img src="clock.jpg" style="filter: gray" width="200" height="149" alt="Результат применения фильтра gray" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: invert
инвертирование
<img src="clock.jpg" style="filter: invert" width="200" height="149" alt="Результат применения фильтра invert" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: basicImage
данный фильтр позволяет одновременно реализовать несколько визуальных эффектов
<img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.basicImage (grayscale=0, xray=1, mirror=1, invert=0, opacity=0.5, rotation=2)" width="200" height="149" alt="Результат применения фильтра basicImage" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: wave
добавляет синусоидальный сигнал, в результате чего объект выглядит колеблющимся
<img src="clock.jpg" style="filter: wave (add=true, lightStrength=40, phase=80, strength=50, freq=2)" width="200" height="149" alt="Результат применения фильтра wave" class="left" />
поддержка браузеров: Internet Explorer все версии
см. также: Искажение текста
filter: shadow
тень
<img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.shadow (direction=120, strength=7, color=silver)" width="200" height="149" alt="Результат применения фильтра shadow" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: dropShadow
тень
<img src="clock.jpg" style="filter: progid:DXImageTransform.Microsoft.dropShadow (offX=-5, offY=-5, color=silver, positive=true)" width="200" height="149" alt="Результат применения фильтра dropShadow" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: blur
задаёт размытие изображения
<img src="clock.jpg" style="filter: blur (direction=5, strength=10, add=false)" width="200" height="149" alt="Результат применения фильтра blur" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: alpha
задаёт прозрачность изображения
<img src="clock.jpg" style="filter: alpha(opacity=30, finishOpacity=50, style=2)" width="200" height="149" alt="Результат применения фильтра alpha" class="left" />
поддержка браузеров: Internet Explorer все версии
filter: compositor
В результате работы фильтра текст верхнего слоя превращается в маску для нижнего слоя
style="filter: progid:DXImageTransform.Microsoft.Compositor();"
поддержка браузеров: Internet Explorer все версии
filter: flipV
переворачивает текст вертикально
<span style="filter: flipV" width="350" height="70" title="Результат применения фильтра flipV" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: flipH
переворачивает текст горизонтально
<span style="filter: flipH" width="350" height="70" title="Результат применения фильтра flipH" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: gradient
<span style="filter: progid:DXImageTransform.Microsoft.gradient (gradientType=0, startColorStr=#6e7864, endColorStr=#ffffff)" width="350" height="70" title="Результат применения фильтра gradient" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: mask
делает некоторый цвет прозрачным, и вместо него отображает другой цвет (в данном случае указан цвет шрифта, обратите внимание, что background не задан)
<span style="filter: progid:DXImageTransform.Microsoft.maskFilter (color=#6e7864)" width="350" height="70" title="Результат применения фильтра mask" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: glow
позволяет создавать ореол вокруг текста
<span style="filter: progid:DXImageTransform.Microsoft.glow (color=#698db7, strength=10)" width="350" height="70" title="Результат применения фильтра glow" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
см. также: Меняющийся текст
filter: engrave
для имитации трёхмерного объекта (отображает объект в монохромном режиме) - текст как бы выступает над поверхностью
<span style="filter: progid:DXImageTransform.Microsoft.engrave" width="350" height="70" title="Результат применения фильтра engrave" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: emboss
для имитации трёхмерного объекта (отображает объект в монохромном режиме) - текст как бы вдавлен в поверхность
<span style="filter: progid:DXImageTransform.Microsoft.emboss(bias=0.5)" width="350" height="70" title="Результат применения фильтра emboss" class="box" />Perkoka.ru</span>
поддержка браузеров: Internet Explorer все версии
filter: matrix
Позволяет изменять размеры элемента, вращать его или изменять характеристики на противоположные (понимание основ линейной алгебры упростит работу с этим фильтром)
style="filter: progid:DXImageTransform.Microsoft.matrix(sizingMethod='auto expand');"
поддержка браузеров: Internet Explorer все версии
Свойство !important
Позволяет увеличить приоритет и обеспечить применение свойства, независимо от наличия других css-выражений, которые могли бы переопределить данное свойство
пример использования:
Мы осуществляем полный спектр услуг по разработке и созданию сайтов, размещению, оказываем техническую поддержку веб сайтов.
Для увеличения целевой посещаемости сайта мы предлагаем комплекс мероприятий по рекламе вашей компании в интернет - оптимизацию и продвижение веб сайтов с учетом особенностей поисковых систем в интернет.
<style type="text/css">
p.preview { color: black !important; }
</style>
<p class="preview">
Мы осуществляем полный спектр услуг по разработке и созданию сайтов, размещению, оказываем техническую поддержку веб сайтов.<br />
Для увеличения целевой посещаемости сайта мы предлагаем комплекс мероприятий по рекламе вашей компании в интернет - оптимизацию и продвижение веб сайтов с учетом особенностей поисковых систем в интернет.
</p>
Свойство cursor
Определяет тип курсора на веб-элементе (может применяться к любому элементу)
Свойство background-color
Задаёт цвет фона для элемента
Эффекты перехода между страницами в HTML
пример использования:<meta http-equiv="Page-Enter" content="BlendTrans(Duration=1)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)" />
параметры:
- Page-Enter - эффект появления страницы
- Page-Exit - эффект выхода со страницы
- content - применяемый эффект
|
1 |
по стр.
