Мелкие заметки по администрированию и не только. Используются в личных целях в качестве памятки

Наградной значок на сайт

Наткнулся в своём архиве на исходники «медальки».

Потребовалось как-то установить значок на сайт.
Фон значка обесцвечивался в Paint.NET (Да. Я тот ещё извращенец).
В размерах 48x48 он оказался нечитаем и было решено при наведении курсора мыши увеличивать значок до оригинальных размеров.
Казалось бы одну картинку повесить — 2 строчки кода, а ушло на это дело около 2-х вечеров.
Opera поняла меня сразу. 10 минут со ввода первого символа и результат выводился как задумывалось.
FireFox’у и Chrome’у пришлось объяснять что от них требуется ещё около 40 минут,
а от Internet Explorer’а добиться желаемого так и не удалось. Как-то выводится (не без костылей, конечно) уже хорошо.
Это я к чему?
Сколько раньше приходилось потратить времени и сил чтобы страница открывалась если не у всех, то хотя бы у подавляющего большинства одинаково. А сейчас что?
После того, как Google потопили Opera’у и Internet Explorer некоторые сервисы даже на современных обозревателях не всегда работают (камень в огород корзины DNS-Shop.RU).

Но мы ушли далеко от темы. Собственно код таблицы стилей:

.MedalLogo{
	margin-top: 10px;
	clear: both;
	width: 42px;
	height: 42px;
	border: 3px solid white;
	background: url("GEMMA_48.png") no-repeat center white;
	border-radius: 24px;
	box-shadow: .1em .1em .5em .2em rgba(0,0,0,.2);
}
.MedalLogo:hover{
	z-index: 11;
	position:fixed;
	width: 200px;
	height: 200px;
	padding: .5em;
	margin-left: -80px;
	/*background: url("GEMMA_200w.png") no-repeat center white rgba(255,255,255,.6);*/
	background: no-repeat center rgba(255,255,255,.6);
	background-image: url("GEMMA_200w.png");
	border-radius: 50%;
	box-shadow: .1em .1em .5em .2em rgba(0,0,0,.5);
}

и код HTML-вставки:

<img class="MedalLogo" src="1px.png">

Результат:

А так это выглядело на своём законном месте:
http://web.archive.org/web/20151230105339/http://www.dreamkam.ru/

Отправить
Запинить