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

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

Поделиться12010-03-29 18:10:51

Автор: ~Yukiko
.|The Show Must Go On|.
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 1836
Уважение: [+20/-0]
Позитив: [+23/-0]
Пол: Женский
Возраст: 34 [1990-06-11]
Провел на форуме:
6 дней 5 часов
Последний визит:
2012-08-05 12:36:56

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

Поделиться22010-03-29 18:12:10

Автор: ~Yukiko
.|The Show Must Go On|.
Зарегистрирован: 2010-03-08
Приглашений: 0
Сообщений: 1836
Уважение: [+20/-0]
Позитив: [+23/-0]
Пол: Женский
Возраст: 34 [1990-06-11]
Провел на форуме:
6 дней 5 часов
Последний визит:
2012-08-05 12:36:56

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>

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

Поделиться32010-03-29 18:16:49

Автор: Wilhelm
Opus Magnum
Зарегистрирован: 2010-03-12
Приглашений: 0
Сообщений: 126
Уважение: [+12/-0]
Позитив: [+2/-0]
Пол: Мужской
Возраст: 36 [1988-01-24]
Провел на форуме:
1 день 2 часа
Последний визит:
2011-02-16 18:49:28

Тень для текста
Наблюдать этот эффект вы можете на форуме 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;
Третий — радиус размытия;
Четвертый — цвет тени.

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

Поделиться42010-03-29 18:17:12

Автор: Wilhelm
Opus Magnum
Зарегистрирован: 2010-03-12
Приглашений: 0
Сообщений: 126
Уважение: [+12/-0]
Позитив: [+2/-0]
Пол: Мужской
Возраст: 36 [1988-01-24]
Провел на форуме:
1 день 2 часа
Последний визит:
2011-02-16 18:49:28

haha, забавный эффект для любителей множественных фонов
Двойной фон
Итак, как поставить вместо одного основного фона два, не затрагивая при этом объект #pun?
Все просто:
1. Для начала поставим на фон размножающийся, прокручивающийся фон (чтобы добиться того эффекта,, который вы будете наблюдать позже). Допустим, такой: https://forumupload.ru/uploads/0009/2d/79/136-3-f.jpg

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

2. ставим второй фон, что будет перекрывать первый. Не прописывайте здесь цвет фона! в данном случае - пристыкуем непрокручивающийся фон к нижнему краю. Для картинки используем эту полупрозрачную полоску: https://forumupload.ru/uploads/0009/2d/79/136-2-f.png

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

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

Поделиться52010-03-29 18:17:48

Автор: Wilhelm
Opus Magnum
Зарегистрирован: 2010-03-12
Приглашений: 0
Сообщений: 126
Уважение: [+12/-0]
Позитив: [+2/-0]
Пол: Мужской
Возраст: 36 [1988-01-24]
Провел на форуме:
1 день 2 часа
Последний визит:
2011-02-16 18:49:28

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

Перекат этот я организовал с помощью псевдокласса hover (Определяет стиль элемента при наведении на него курсора мыши, при этом элемент не активирован, иными словами кнопка мыши не нажата).
Итак, создаем в фотошопе или ином редакторе двойную картинку: сверху будет то, как должен выглядеть элемент в неактивном положении, ниже - так, как он должен выглядеть при наведении на него мыши. Я создал такую картинку:

Не удаляйте 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;
}