Объемные разделители

[Fisana]

1. Проблема темных линей в таблицах на светлом скине.

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

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

В файлах стиля по этому поводу даже есть предупреждение о широком использовании данного класса:

.borderwrap,
.borderwrapm{ /* this will affect the outlining border of all the tables and boxes through-out the skin. */
background: #fff;

Если у вас дефолтный голубой (или просто светлый) скин, попробуйте написать туда что-то вроде 000 вместо fff... и попытайтесь, например, авторизоваться....

Если "нащупали" как это сделать, вам повезло

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

Светлые скины с темными линиями выглядят часто более стильно, но форма быстрого ответа ужасает чернотой.

Как этого избежать.

Для заполнения основных таблиц в скинах 2.0х используются только два класса:

row1 и row2:

.row1{ 
background: #DFE6EF; 
}

.row2{ 
background: #E4EAF2; 
}

Именно ячейки таблиц с этими роями берут под линии тот самый border...

У этих классов по умолчанию нет никаких собственных контуров. И если вы даже добавите к ним это:

border: 1px solid #000;

получите толстые черные страшные сдвоенные линии..

А теперь попробуйте сделать так:

             
border-top: 1px solid #000;
border-right: 1px solid #000;

Так вы получите желанные темные линии.

Вы увидите, что во многих местах все стало гораздо лучше смотреться. Более того, у линий появился объем (желательно все-таки выбрать не черный цвет)

Форма быстрого ответа и прочие важные вещи при этом не пострадали.

Но справа линии иногда тоже сдваиваются с темным внешним контуром..

Возможно, в некоторых скинах кто-то сможет это красиво обыграть.

Я делаю иначе..

Как, расскажу позже

Добавлю, что ни в одном из виденных мной скинов (а видела много), эта проблема не решена.

.......................................................

........................................................

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

Для таких классов как row1, row2, post1, post2 и многих других просто делаю теневые контуры.

Рисую прямоугольник, залитый цветом нужного класса, делаю из него фигуру вроде 3d кнопки, и цвет контуров (border-bottom, border-top, border-left и border-right) беру, соответственно, с боков этой кнопки.

Дописываю эти контуры в соответствующие классы, если там уже существует border, обнуляю его (0px).

Левому и верхнему контурам обычно даю значение 1 px, нижнему и правому - 2 (для объема - но только не в основных роях)

А цвет в

.borderwrap,

.borderwrapm

оставляю светлым - что-то между цветами row1 и row2.

И получается рельефный скин с относительно темными линиям (нижняя часть 3d кнопки темная по умолчанию)...

 

Пример рельефного скина теперь можете посмотреть

здесь

Изменено 30 Августа 2005 пользователем Fisana