Распечатать этот пост

Кроссбраузерное решение прозрачности блока на CSS

Вы можете быстро и легко применить прозрачность любого div-элемента, добавив следующий код CSS в таблицу стилей:

.opacity {
	filter: alpha(opacity=50);
	-khtml-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	}

Данный пример устанавливает прозрачность блока .opacity на 50%. (изменив, на пример, 50 на 70, а 0.5 на 0.7 выставится прозрачность в 70% соответственно)

Перед использованием не забудьте удалить комментарии, а то были случаи…

Спасибо за внимание.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (8 голосов, в среднем: 5,00 из 5)
Loading ... Loading ...

Распечатать этот пост

Прозрачный PNG

Чтобы полноценно пользоваться всеми прелестями альфа-канала, используемого в png для всевозможных эффектов, нужно всего-лишь заменить серый фон, который ставит IE на прозрачный. Сделать это можно простым скриптом, подставляющим вместо этого фона пустой прозрачный gif.

1. Размещаем скрипт pngbehavior.htc (http://creadome.ru/src/pngbehavior.htc) для примера в директории /src/. Меняем путь до прозрачного gif`а (var blankSrc = «/im/blank.gif»;)
Узнать больше

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (8 голосов, в среднем: 4,63 из 5)
Loading ... Loading ...

Распечатать этот пост

Скрипт для исправления бага полупрозрачных PNG в IE6

Элегантное решение проблемы полупрозрачных PNG-24 в IE6.

Пользователям IE6 подгружается один маленький скриптик весом в 1455 байт, который выводит все png-картинки через фильтр AlphaImageLoader.

Скрипт подключается с помощью условных комментариев:

<!--[if lte IE 6]-->
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->

и сам обрабатывает все PNG, встречающиеся в HTML.

Автор скрипта: Drew McLellan.

Узнать больше

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (7 голосов, в среднем: 4,71 из 5)
Loading ... Loading ...

Распечатать этот пост

Кроссбраузерное позиционирование футера

Как расположить футер, чтобы он всегда находился внизу, даже тогда, когда содержимое не занимает всю страницу? Для этого, контенту нужно задать высоту 100%. Но, не все так просто, пока ИЕ6 присутствует в статистике.

Предлагается кроссбраузерное решение. В CSS нужно написать следующее:

body, html {
	/* это обязательно, иначе футер внизу не будет */
	height: 100%;
}

#content {
	/* для всех нормальных браузеров */
	min-height: 100%;
	/* для всех нормальных браузеров */
	height: auto !important;
	/* это для ИЕ6, вместо min-height */
	height: 100%;
	/* отступ для футера */
	margin-bottom: -7em;
}

#footer {
	height: 7em;
}

Узнать больше

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (8 голосов, в среднем: 4,63 из 5)
Loading ... Loading ...

Распечатать этот пост

Уменьшение времени загрузки js и css файлов

Каждый разработчик javascript приложений рано или поздно сталкивается с проблемой большого (относительно конечно) времени загрузки подключаемых js и css файлов. Эта проблема, как известно, происходит из двух причин: большого количества подключаемых файлов (браузер имеет ограничение на количество одновременно скачиваемых файлов, поэтому пока не скачается один, браузер не приступит к скачиванию другого) и большого размера используемых библиотек (prototype, extjs и т.д.)

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

Узнать больше

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (7 голосов, в среднем: 4,86 из 5)
Loading ... Loading ...

Распечатать этот пост

Сокращение времени загрузки страниц с помощью CSS

Несмотря на всё большее распространение широкополосного доступа к Интернету, проблемы скорости загрузки HTML-страниц всё ещё не безразличны многим пользователям Сети, особенно на просторах бывшего Союза. CSS (Cascading Style Sheets) может помочь в этом деле, сэкономив нам время и трафик.

Избегайте использования таблиц для разметки страницы

Вот шесть причин, по которым лучше использовать CSS, а не таблицы, для разметки страниц:

  • Браузеры анализируют таблицы дважды: первый раз для того, чтобы оценить структуру таблицы, и второй — для определения их содержимого.
  • Таблицы отображаются сразу полностью, а не по мере загрузки.
  • Таблицы заставляют использовать прозрачные картинки для определения ширины колонок и т.п.
  • CSS требует гораздо меньше кода, чем перегруженные таблицы.
  • Весь CSS-код может быть вынесен во внешний файл, который будет грузиться всего один раз и храниться в кэше браузера.
  • При помощи CSS можно контролировать очерёдность загрузки элементов страницы.

Узнать больше

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (7 голосов, в среднем: 4,29 из 5)
Loading ... Loading ...