Создание тени у текста, совместимой с iexplorer. Происходит дублирование текста - текст берется из title="" и непосредственно из текста помещенного между <span></span>. За счет наложения одного текста на другой, и смещения на 1px осуществляется эффект тени.
HTML
Код
<h1 title="Текст с тенью." class="shadowtitle"> <span>Текст с тенью.</span> </h1>
Недавно я увидел смену вида материалов, т.к. она платная в магазине uscript, который недавно презентовала ucoz; Я решил создать свой, малый и понятный, адаптивный, надеюсь красивый (каждому не угодишь) вид материалов, и скрипт к нему; Смысл скрипта и вида материала заключается в том что при нажатии кнопки меняется вид материалов, а точнее становится лентой. сеткой в два или три колонны.
УСТАНОВКА
1) Установите CSS стили с CSS.txt в файл с стилями или в общие шаблоны (Таблица стилей (CSS)); 2) Между тегом вставьте библиотеку иконок
Скрипт очень простой, на jQuery, и понятный .removeClass - удалить класс, .addClass - добавить, при нажатии на кнопку происходит действие по смене классов, одни удаляются, другие присваиваются; 4) Вид материалов устанавливаем с файла - Вид материалов.txt, один важный момент, иконку я оставил для примера, для каждой категории вы можете присвоить свою с помощью переменной -
Думаю, каждый сайт, который представляет услуги, должен их рекомендовать, поэтому такие таблички будут показывать вашу деятельность, и что в нее включено. Есть 2 варианта табличек и 11 hover эффектов, и даже если таблички вам не понадобятся, то эффекты всегда будут нужны, и их можно применять к любому элементу сайта, от шапки до картинки, кнопки и т.п. Сейчас возьмем пример с демо и разберем, что к чему.
ptc-smaller в стиле отвечает за пропорциональное уменьшение таблички на 15%, ничего не изменяет, кроме габаритов Остальные стили в классе
Код
col-lg-2 col-md-4 col-sm-6 col-xs-12
отвечают за разрешение таблицы в разных экранах (проверить можно в демо меняя масштаб, например, с помощью клавиш Ctrl + "+/-" или зажав на Ctrl + колесико мыши)
Чтобы установить ховер-эффект, нужно в класс главного дива добавить следующие стили: wobble-vertical - вариант 1, второй пример wobble-horizontal - вариант 1, третий пример wobble-to-bottom-right - вариант 1, четвертый пример wobble-to-top-right - вариант 1, пятый пример grow - вариант 1, шестой пример shrink - вариант 2, первый пример rotate - вариант 2, второй пример grow-rotate - вариант 2, третий пример float - вариант 2, четвертый пример sink - вариант 2, пятый пример buzz-out - вариант 2, шестой пример
Уникальный скрипт для подсветки синтаксиса. При закрытии кода в теги code и quote код будет подсвечен. На скриншоте мы видим пример, пример можно увидеть на нашем сайте. Установка скрипта - подсветки синтаксиса для сайта очень проста.
Установка "Подсветки синтаксиса для сайта":
Вставляем код в (Панель управления-->Дизайн-->Управление дизайном-->Страница материала и комментариев к нему), либо в другой, любой модуль где вы хотите видеть подсветку синтаксиса, ПЕРЕД
Перед тем как оформить нужный вид меню категорий, нам следует включить нужные функции, для этого заходим в Панель управления » Нужный модуль » Настройки модуля и устанавливаем:
Количество колонок в меню категорий → 1. Выводить количество сообщений в категории возле названия категории: → устанавливаем галочку.
Теперь для отображение меню категорий модуля сайта, нам необходимо установить на страницу сайта специальный системный код → $CATEGORIES$
После того, как Вы добавили и сохранили в шаблон системный код $CATEGORIES$ давайте посмотрим, что нам выдала система:
Как мы видим, перед нами обычная таблица с классом catsTable и ячейками catsTd в которой представлены: Ссылки на нужные категории → class="catName"; Тег span — количество материалов в категории → class="catNumData"; Тег div — описание категории → class="catDescr".
catsTable: width:200px; → отвечает за ширину таблицы; border-collapse:0px; → расстояние линий между ячейками таблицы; overflow: hidden; → отображение области внутри элемента.
catsTd: width:200px; → отвечает за ширину ячейки td; height:20px; → высота ячейки td; color:#000; → цвет текста.
a.catName:link,a.catName:visited,a.catName:active: font:10px Arial,sans-serif; → размер и его шрифт; color:#eee; → отвечает цвет текста; float:left; → элемент по левому краю (left - слева, center - центр, right - справа); width:200px; → длина ячейки с учётом внутренних отступов — padding:4px 0 0 11px;; height:18px; → высота; display:block; → элемент показывается как блок; position:absolute; → указывает, что элемент абсолютно позиционирован; margin:0; → запрещаем внешние отступы; padding:4px 0 0 11px; → внутренние отступы; border-top: 1px solid #ccc!important; → верхняя линия рамки.
catsTd a:hover: background:#eee; → отвечает за фон ссылки при нажатии.
catNumData: float:right; → элемент по правому краю (left - слева, center - центр, right - справа); margin: 5px 5px 0 0; → отвечает за внешние отступы; position: relative; → устанавливается относительно его исходного места; font:9px Arial,sans-serif; → размер и его шрифт; font-weight: bold; → шрифт жирный.
catDescr: padding: 9px 6px 0 0; → внутренние отступы; margin: 21px 0 4px 0!important; → внешние отступы; border-top: 1px solid #ccc!important; → верхняя линия рамки; color:#484848; → цвет текста; font-weight: bold; → жирный шрифт; text-align:right; → отвечает за выравнивание текста по правому краю (left - слева, center - центр, right - справа).
Настраиваем на свой вкус
Многие интересуются вопросом → "как установить иконки перед категориями?". Это делается скриптом, но работает скрипт в модулях: каталог статей/файлов/сайтов и онлайн игры.. Устанавливаем код на нужных страницах (главная страница каталога, страница добавления, страница материала и комментариев к нему и др.) после
В массиве img пропишите пути к картинкам для категорий (в одинарных кавычках через запятую, не забываем про подсчет категорий). Также к скрипту можно добавить CSS стили в свойство style, для упрощенной настройки отображения картинок.
Думаю стандартный вид категорий который идет в стандартных шаблонах как то по дизайну не очень красиво вписываются под портал. И если даже шаблон нарисован под заказ всегда стает точка сомнение какой делать по фактуре этот скрипт или вообще его делать. Если его на сайте нет то становятся много блоков и навигация по сайту становиться слаба и гость уходит с сайта не найдя что искал. Этот скрипт все сразу на свои точки ставит и по нему что вам нужно вы быстро найдете. Выполнен он в темных тонах, но это не говорить что он под темный дизайн сайта, так как на светлом он отлично подойдет. Есть нумерация материалов что самое главное. Да и вообще выполнен и нарисован все красиво и качественно. Оставляем стандарт и просто к нему прописываем стиль: