Викия

ru-Викия

коммент.33

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

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

===Обновления CSS===

Данный выпуск немного сломает обычный шаблон наших блогов о CSS, так как "фокусов" будет не 4, а немного больше, и некоторые из них не такие уж и простые (но тем не менее, результат того стоит :) ). Напоминаю, что код нужно копировать в MediaWiki:Wikia.css .


В последнее время довольно популярным стал код, который заменяет стандартную картинку уведомлений на пользовательскую. Сначала этот код появился на Angry Birds Wiki, потом на Mass Effect Wiki, а сейчас распространён на множестве википроектов, включая такие вики, как S.T.A.L.K.E.R. Вики и Террария Вики. Оригинальный код для установки лого выглядит примерно так:

#WallNotifications .bubbles {
background-image: url('http://желаемое лого');
background-size: 23px;
background-position: 1px 0px;
background-repeat: no-repeat;
}


Но на обычном пользовательском лого мы не остановимся :) Давайте добавим сюда также и изменение картинки при наведении на лого с помощью псевдокласса :hover:

#WallNotifications .bubbles:hover {
background-image: url('http://желаемое url');
background-size: 23px;
background-repeat:no-repeat;
}

Что получилось, вы можете просмотреть здесь.

Но, резкое изменение одной картинки на другую не очень привлекательно. Давайте добавим плавности в изменение картинок, вот так:

#WallNotifications .bubbles {
background-image: url('http://url картинки №1');
background-size: 23px;
background-repeat: no-repeat;
-moz-transition: background-image 0.3s 0s ease;
-o-transition: background-image 0.3s 0s ease;
-webkit-transition: background-image 0.3s 0s ease;
}
 
#WallNotifications .bubbles:hover {
background-image: url('http://url картинки №2');
background-size: 23px;
background-repeat:no-repeat;
transition:all 0.2s ease;
-moz-transition: background-image 0.3s 0s ease;
-o-transition: background-image 0.3s 0s ease;
-webkit-transition: background-image 0.3s 0s ease;
}

Как это выглядит, можно посмотреть здесь.

С помощью CSS можно отредактировать и отображение количества непрочитанных уведомлений. Например - сделать маркер уведомлений больше и заметнее, с помощью следующего кода:

#WallNotifications .bubbles.reddot {
border-radius: 15px;
-webkit-border-radius: 15px;
background:red;
width: 25px;
height: 25px;
position: relative;
left: 0px;
top: -2px;
-moz-box-shadow: 0 0 10px rgba(255, 140, 0, 1.0); 
-webkit-box-shadow: 0 0 10px rgba(255, 140, 0, 1.0);
box-shadow: 0 0 10px rgba(255, 140, 0, 1.0); 
}
 
#WallNotifications .bubbles.reddot #bubbles_count {
background: none;
position: relative;
left: 4px;
top: 4px;
font-size: 16px;
text-align: center;
font-weight : bold;
}


В прошлых выпусках мы уже рассказывали о выделении ников определённых участников вики на различных страницах и пространствах имён. Сегодня мы продолжим развивать эту тему, и создадим особые лого и подписи для участников в чате.

Код для особого лого модераторов чата в чате:

.username:after {
background-image : url('http://url особого лого в чате');
background-position: 0px 0px;
}

Лого можно изменить только для определённых участников, если использовать id вида #user-Имя участника. Пример:

#user-Wildream .username:after {
background-image : url('http://url особого лого в чате');
background-position: 0px 0px;
}


Код для подписи под именем участника (эта подпись также заменяет надпись "Отсутствует", но ник участника всё равно окрашивается в серый цвет). Этот код необходимо применять только с id, которые присваивают отображение текста только под пользовательскими именами определённых участников:

#user-Имя участника .details:after {
content: "Текст подписи";
font-size: 10px;
}
 
#user-Имя участника .status {
display: none;
}


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

Вот как он выглядит:

Спойлер!
Викия (англ. Wikia) — это бесплатный сервис вики-хостинга, предоставляющий возможность любому желающему создать свой собственный тематический вики-проект или принять участие в коллективной работе над уже существующими проектами. На данный момент на Викия находится более 300 000 сайтов на разнообразные темы: от популярных компьютерных игр и телесериалов до научных порталов и сайтов о моде.

Чтобы создать его, нам потребуется сделать сразу две вещи - поместить в MediaWiki:Wikia.css этот код:

#spoiler {
overflow: hidden;
background-color: #002E54;
border: 1px white solid; !important;
border-radius: 6px;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px;
color:white;
width: 120px;
height : 25px;
text-decoration: underline;
-moz-transition: all 0.8s 0.001s ease-in;
-o-transition: all 0.8s 0.001s ease-in;
-webkit-transition: all 0.8s 0.001s ease-in;
}
 
#spoiler:hover {
background-color: #ADD8E6;
border:4px solid #002E54;
-moz-border-radius: 6px 6px;
-webkit-border-radius: 6px;
color: #000;
width: 100%;
height: 100%;
text-decoration: none;
text-align:center;
}

и создать шаблон для более удобного использования этого кода. Код шаблона очень простой, и выглядит вот так:

<div id="spoiler"><center>Спойлер!</center>{{{1}}}</div>

Совершенствуя код, можно сделать этот шаблон ещё более интересным, например - вот таким:

Спойлер!!!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

К сожалению, данный код для шаблонов, а также плавное изменение иконки не поддерживаются браузером Internet Explorer до 9 версии включительно.


Если вас заинтересовали представленные коды, у вас есть вопросы или пожелания - оставляйте их в комментариях ниже. Экспериментируйте с представленными выше кодами, придумывайте новые фокусы и делайте свою вики уникальной! Удачи!

Викия-сеть

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