Архив рубрики 'css-play'

Подсказки на CSS

css-play, Полезные скрипты Оставь комментарий »

Идея очень простая, но эффективная. Вот маркап:

<a href=’#'>Заголовок ссылки <span>Подсказка</span></a>

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

  a {
	z-index:10;
  }
  a:hover {
	position:relative;
	z-index:100;
  }
  a span {
	display:none;
  }
  a:hover span {
	display:block;
	position:absolute;
	float:left;
	white-space:nowrap;
	top:-2.2em;
	left:.5em;
	background:#fffcd1;
	border:1px solid #444;
	color:#444;
	padding:1px 5px;
	z-index:10;
  }

Span мы спрячем, и покажем только когда мышка будет над ссылкой. Тогда сработает цсс селектор a:hover span. Также мы позиционируем a:hover релативно, а a:hover span абсолютно.

Источник.

Добавление верхних и нижних индексов

css-play, Полезные скрипты Оставь комментарий »

В результате интересной дискуссии на Хабре был предложено очень полезное решение установки css-стилей для верхних и нижних индексов (тэги <sup> и <sub>)

sup { vertical-align: baseline; position: relative; top: -0.4em; }
sub { vertical-align: baseline; position: relative; bottom: -0.4em; }

Будем использовать этот способ в css-файле, который ставится по умолчанию для контентной области.

YUI Compressor – уменьшение размера джаваскриптов

css-play, javascript-скрипты, Полезные скрипты Оставь комментарий »

YUI Compressor – это программа, написаная на Java, которая уменьшает размер джаваскрипт и CSS файлов. В результате её работы скрипты теряют примерно сорок процентов от своего первоначального размера.

Многоуровневое выпадающее меню без JS

css-play, Полезные скрипты Оставь комментарий »

Качественное меню, отличительная особенность которого – возможность добавлять иконки для каждого пункта меню.

Первый уровень сделан по технологии «sliding door», все остальные уровни – выпадающие.

Проверено в IE6, IE7, Firefox, Opera, Netscape, Mozilla and Safari (PC).

Смотрим и скачиваем.