•●Anime Crossroads●• - проект помощи и поддержки аниме ролевых

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



CSS коды от участников

Сообщений 1 страница 5 из 5

1

Делимся кодами!

0

2

CSS код фоновой картинки в объявлении.
Т.к. посетители форума уже не в первый раз, задают мне вопрос "Как сделать картинку в объявлении, как на вашем форуме?" Я выкладываю скрипт, который стоит у нас.

<style type="text/css">

#pun-announcement .container {
background-image : url(http://i078.radikal.ru/1003/1a/48eea70c7f76.png);
background-repeat : no-repeat; height : 390px;
}
</style>


Адрес картинки

0

3


Тень для текста

Наблюдать этот эффект вы можете на форуме http://12circle.rolka.su/ - в основном меню, в названиях категорий.

Заранее хочу вас предупредить относительно этого свойства: некоторые браузеры полностью или частично его не поддерживают. В их число входят: Maxthon, IE, Opera (до версии 9.5), Mozilla (до версии 3.1), Google Chrome
Поддерживают свойство: Opera (от версии 9.5), Safari, Mozilla (от 3.1), Chromium, Konqueror

Итак, где же его применить? Везде, где есть текст! ) Лучше, конечно, не делать тень у текста сообщений, иначе чтение обернется кошмаром. А вот названия и прочее - почему бы и нет?

Объявляется свойство так:

селектор {
    text-shadow: 1px 0px 0px #000;
}

Первый параметр — смещение по оси X;
Второй — смещение по оси Y;
Третий — радиус размытия;
Четвертый — цвет тени.

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

0

4

haha, забавный эффект для любителей множественных фонов
Двойной фон

Итак, как поставить вместо одного основного фона два, не затрагивая при этом объект #pun?
Все просто:
1. Для начала поставим на фон размножающийся, прокручивающийся фон (чтобы добиться того эффекта,, который вы будете наблюдать позже). Допустим, такой: http://destiny.rolebb.com/uploads/0009/ … 36-3-f.jpg

HTML{background-color: #цвет_фона; background-image: url("фоновая_картинка");  background-repeat: repeat;}

2. ставим второй фон, что будет перекрывать первый. Не прописывайте здесь цвет фона! в данном случае - пристыкуем непрокручивающийся фон к нижнему краю. Для картинки используем эту полупрозрачную полоску: http://destiny.rolebb.com/uploads/0009/ … 36-2-f.png

BODY {background-image: url("картинка");  background-attachment: fixed; background-repeat: repeat-x; background-position: bottom center;}

3. наслаждаемся нашим затухающим фоном )

0

5

Эффект переката
Наблюдать этот эффект вы можете на форуме http://aristotraterneko.rolka.su/ (Правила, Сюжет и пр.)
Рассмотрим сейчас именно такой перекат - когда для каждой ссылки заводится своя индивидуальная картинка.

Перекат этот я организовал с помощью псевдокласса hover (Определяет стиль элемента при наведении на него курсора мыши, при этом элемент не активирован, иными словами кнопка мыши не нажата).
Итак, создаем в фотошопе или ином редакторе двойную картинку: сверху будет то, как должен выглядеть элемент в неактивном положении, ниже - так, как он должен выглядеть при наведении на него мыши. Я создал такую картинку:
http://destiny.rolebb.com/uploads/0009/2d/79/134-4.jpg
Не удаляйте psd-файл, возможно, он вам еще потребуется.
Организовываем селектор. Это можно сделать, прописав определенный код в CSS (поместить в первое окошко стиля в конец общего кода или же заключить в тэги <style> и поставить в html-верх):

/*Сюжет*/
a#storyb {
  width: 150px;                      /*ширина картинки*/
  height: 50px;                       /*длина картинки. Не полностью, лишь половина*/
  display: inline-block;
  background: transparent url("картинка_сюжет") no-repeat scroll 0 0;
}

a#storyb:hover {
  background: transparent url("картинка_сюжет") no-repeat scroll 0 100%;
  outline: none !important;
}

Теперь в объявлении можно поместить ссылку на этот самый сюжет:

<a href="ссылка_сюжет" id="storyb" alt="Сюжет"></a>

Таким же образом прописываем и другие элементы, но не забудьте потом менять имя селектора в тэге <a>

/*Правила*/
a#rulesb {
  width: 150px;
  height: 50px;
  display: inline-block;
  background: transparent url("картинка_правила") no-repeat scroll 0 0;
}

a#rulesb:hover {
  background: transparent url("картинка_правила") no-repeat scroll 0 100%;
  outline: none !important;
}

<a href="ссылка_правила" id="rulesb" alt="Правила"></a>

Enjoy )

+1



Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC