Викия

ru-Викия

коммент.5

4 простых фокуса с CSS, выпуск 3

Обнаружено использование расширения AdBlock.


Викия — это свободный ресурс, который существует и развивается за счёт рекламы. Для блокирующих рекламу пользователей мы предоставляем модифицированную версию сайта.

Викия не будет доступна для последующих модификаций. Если вы желаете продолжать работать со страницей, то, пожалуйста, отключите расширение для блокировки рекламы.

Будьте внимательны, некоторые из кодов в блоге уже не могут быть использованы. Чтобы уточнить информацию из данного блога, обратитесь на форум.

После довольно длительного перерыва мы продолжаем рассказывать о возможностях пользовательского CSS и его применении для изменения внешнего вида вики. Напоминаем, что код нужно добавлять на страницу MediaWiki:Wikia.css.

В предыдущем выпуске мы рассказывали о том, как с помощью CSS можно сделать несколько логотипов для разных пространств имён на вики. В этот раз мы сделаем интерактивный логотип для вики. Интерактивный логотип использует две картинки, одна из которых отображается по умолчанию, а другая сменяет её при наведении курсора на него. Удачно подобрав картинки, можно добиться эффекта движения определённых элементов лого (пример) или подсветки/затемнения лого (пример). Итак, для того, чтобы сделать лого интерактивным, необходимо добавить следующий код:

body.mediawiki h1.wordmark:hover > a > img {
 opacity:0 !important;
}
 
body.mediawiki h1.wordmark:hover { 
 background:url('http://images.wikia.com/community/ru/images/7/79/Your logo#1.png') no-repeat !important;
}
 
.ns-112 h1.wordmark.medium.graphic {background: url("http://images.wikia.com/community/ru/images/8/89/Wiki-wordmark.png") no-repeat scroll 0% 0% transparent !important;}
.ns-112 #WikiHeader h1.wordmark img {zoom:1; opacity:0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity:0; -moz-opacity:0;}
}

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

Следующий "фокус" проведём с ссылками - заставим их светиться. Этот довольно красивый эффект очень легко реализуется технически. Код:

a:visited:hover, .color2 a:visited:hover {
  color: #FF4500; 
  text-shadow: #FF4500 0 0 5px;
  text-decoration:none;
}
 
a:hover, .color2 a:hover {
  color: #FF4500;
  text-shadow: #FF4500 0 0 5px;
  text-decoration:none;
}

Данный код даст подсветку ссылок тёмно-оранжевым цветом. Примеры подсвечивания ссылок можно просмотреть здесь и здесь.

Ещё одна тема, которая была затронута в прошлом выпуске - изменение стандартных шрифтов на вики. В прошлый раз мы рассказывали, как изменить стандартный шрифт страниц, сегодня же - опубликуем небольшой код, который позволяет изменять шрифт в редакторе Исходного кода:

.editpage-editarea textarea {
font-family: 'Times New Roman' !important;
}

Данный код заменяет стандартный шрифт на Times New Roman. Конечно, вы можете подобрать свой шрифт, или даже группу шрифтов для изменения стандартного шрифта.

Напоследок расскажем о небольшой "фишке" для нового расширения - Форума, а точнее - для блока отображения его активности (вставляется на страницу с помощью тега <wikiaforum/>). Этот блок имеет свой собственный фон, что часто делает его вставку на страницу не эстетичной. Однако, фон можно сделать прозрачным. Для этого создадим пользовательский класс "mainpageforum":

.mainpageforum section.ForumActivityModule {
  background: transparent;
  border: none;
  box-shadow: none;
}

Также, можно убрать заголовок "Активность на Форуме":

 .mainpageforum section.ForumActivityModule h1 {
  display: none;
}

Теперь, чтобы код подействовал, тег <wikiaforum/> необходимо заключить в теги <div>:

<div class="mainpageforum"><wikiaforum/></div>

В таком виде тег и вставляется на страницу.

На этом наш третий экскурс по CSS завершается. Оставляйте свои комментарии и отзывы ниже. Удачных экспериментов с кодом!

Викия-сеть

Случайная вики