^

Основы CSS или как оформить профиль/страничку игры v1.05

+214

CSS_test

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

 На сайте уже есть похожая запись по формлению профиля, но я хочю уделить внимание основному принципу работы и базовым возможностям по оформлению. Сам я только начал изучать CSS, так что на супер-пупер инфу пока не надейтесь. Запись будет обновляться иногда, так что если интересно, то можете заходить время от времени, но не очень часто. Примеры использования даны для странички игры т.к. у меня нет возможности оформлять профиль, но принцип работы такой же, так что полученные знания можно будет применить и там. Также, в конце записи, вы сможете найти css-код этой странички игры или вот этой, который содержит изменения почти всех основных элементов и при этом код прост и прокомментирован. Так что, если у вас возникнуть проблемы в оформлении странички игры, то вы можете попробовать посмотреть там.

 

ВВЕДЕНИЕ 

Спойлер

Что вообще такое CSS?

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

С чего начать? 

 Для того, чтобы изменить какой-то элемент страницы вам сначала нужно узнать его имя или, говоря по-умному, его id. Этот процесс я опишу на примере Internet Explorer 11 и кнопки «Поклонники» на страничке игры. Принцип работы для всех элементов и браузеров одинаковый, так что не бойтесь.

 Для того, чтобы узнать id кнопки нужно навести на неё курсор и нажать правую кнопку мыши. Старайтесь наводить как можно точнее. В открывшемся меню ищите «Проверить элемент» и жмите на него. В низу страницы появится окно «Средства разработчика», которое можно разделить на 3 части: левая(html-код), панель элементов(полоска внизу) и правая (окошко стилей или редактор стилей). В левой части написан html-код, где будет выделена строчка «<a id="fans-tab-button">Поклонники <sup></sup></a>». Ниже можно увидеть панель элементов, в конце которой вы можете увидеть id «a#fans-tab-button» как раз то, что нам нужно (то, что написано левее тоже важно, но об этом вы сможете прочитать в разделе «Полезные советы. Секреты id»). Зная id мы теперь можем изменить элемент как хотим. 

                      image

 Справа же, в окошке стилей(редактор стилей), вы можете увидеть CSS-код этого элемента. Главная фишка этого окошка в том, что вы можете изменять код или вообще отключить отдельные элементы (просто сняв галочку). При этом вы увидите результат сразу. Это очень удобно потому что, например, вам нужно изменить цвет ссылок или сдвинуть какой-то элемент, но вы не знаете точных значений. Так вам придется писать в CSS меню код, потом жать «Сохранить» и ждать пока страница обновиться и, если все не так как вы хотели, придется повторять процедуру, что может занять кучю времени. Но используя это окошко вы можете менять значения прямо в нем и сразу видеть результат, а потом, когда подберете нужное значение, записать его в CSS и сохранить. Кстати, вы можете не только изменять, но и добавлять новый код, просто ткнув левой кнопкой мышки в то место, где хотите что-то добавить, появится окошко для ввода, пишите что хотите и жмете enter. Опять же, офигено удобно, так как видим результат сразу. А тыкнув правой кнопкой слева от строки вы можете вызвать меню, через которое вы можете, например, удалить строку кода или же вернуть её в изначально состояние. В целях обучения рекомендую потыкать и посмотреть как и что на что влияет. Кстати, в этом окне вы также можете увидеть id нужно вам элемента. Да, все изменения не сохраняются так что бояться не стоит. Если что просто обновите страницу или закройте-откройте. 
 Более подробно про «Средства разработчика» вы можете прочитать на официальной странице вашего браузера.

Как изменить элемент?

 CSS-код записывается очень просто: сначала вы пишите id элемента, потом «{», потом то, что хотите с ним сделать, и заканчивается все это «}». Если говорить по-умному, то это записывается все так: 

 селектор(id) { свойство: значение } 

Итого, базовый шаблон кнопки «Поклонники», впрочем как и любого другого элемента, будут выглядеть так:

div#tabs a#fans-tab-button {
 то, что хотим сделать
}
 

Откуда взялся div#tabs и зачем это нужно вы можете узнать в разделе «Полезные советы. Секреты id».

Свойств может быть несколько и отделяются они друг от друга знаком «;». В последней сточке (перед «}») точку с запятой можно не ставить. В итоге css-код может выглядеть, например, вот так: 

div#tabs a#fans-tab-button {
 background: url(button_poklonniki_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6
}

То, что там записано вы сможете понять, прочитав раздел «Возможности». И да, тут ничего сложного нет =)

Куда все записывать? 

 Слева страницы под «меню игры» есть такая ссылочка как «Оформление», нажав на которую откроется окошко справа, в котором, тыкнув на вкладку «CSS» вы попадете в редактор в который и записывается код. Если что пойдет не так, вы можете просто удалить весь код и все станет как было. 

Итого?

 В общем, принцип работы прост. Тыкаем правой кнопкой на нужный элемент и смотрим его id, а потом в CSS пишем то, что хотим с ним сделать. Вот и все.

 


ВОЗМОЖНОСТИ 

Основы

> Свойства.

 Свойства записываются между скобок «{» и «}» . Я не буду расписывать в подробностях о каждом «свойстве». Для этого есть специализированные сайты, на которых вы сможете узнать все более подробно, с картинками и примерами. Я просто дам основное представление о них и то, как вы сможете их использовать для оформления. Я выделю их названия жирным шрифтом, чтобы вы знали, что искать. Но примеры использования будут, так что все ок =)

 

color

 Записывается: color: значение

Меняет цвет текста. Цвет, в основном, указывают в формате rgb или в виде шестнадцатиричного кода с добавлением знака «#» в начало(что работает для любого элемента, для которого можно указать цвет). Код вы можете легко узнать из палитры цветов в графическом редакторе, есть также онлайн сайты с палитрой. В CSS есть предустановки для некоторых цветов типа: red, blue, yellow, green, white, black и т.д. Например, вам нужно изменить цвет ссылок в «меню игры». Будет это выглядеть так:

div#left-block li a {
 color: #1977af
} 

Или цвет текста для кнопки «Поклонники»:

div#tabs a#fans-tab-button {
  color: rgb(25,119,175)
 } 

 

 // --------------------------------------------------------------------------

 

background 

 Записывается: background: значение

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

Замена цвета фона для кнопки «Отзывы»:

 div#tabs a#comments-tab-button {
   background: #d7e0e6
  }

 Замена фона на изображение для кнопки «Отзывы»:

 div#tabs a#comments-tab-button {
  background: url(fon.jpg)
 }

  При замене фона на изображение оно по умолчанию будет повторяться во все стороны, пока полностью не заполнит весь элемент, но этим можно управлять, добавив в конец строки: no-repeat – картинка не повторяется, repeat-x – картинка повторяется только по горизонтали, repeat-y – картинка повторяется только по вертикали. Например: 

 div#tabs a#comments-tab-button {
  background: url(fon.jpg) repeat-x

 }

  Из полезных хочу еще отметить «background-position-x» и «background-position-y», которые позволяют сдвинуть изображение по горизонтали или вертикали, или же выровнить его по бокам или центру используя значения top, center или bottom для «background-position-y» и left, right и center для «background-position-x». Записываются все отдельно от background. Например, нужно сдвинуть изображение-фон вправо на 10 пикселей и выровлять по левому краю по оси Х у кнопки «Отзывы»:

div#tabs a#comments-tab-button {
 background: url(fon.jpg) no-repeat;
  background-position-x: 10px;
  background-position-x: left
}

 

  // --------------------------------------------------------------------------

 

border

 Записывается: border: толщина стиль цвет

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

                            image

  Причем можно для каждой из 4х сторон при помощи «border-top», «border-bottom», «border-left», «border-right» задавать отдельно толщину, стиль и цвет. Толщина задается в пикселях. Также можно в качестве рамки использовать изображение, которое загружается через «border-image-source», а также его можно обрезать при помощи «border-image-slice», а при помощи «border-image-outset» отодвинуть. Они записываются отдельно. Например: 

Простая рамка для кнопки «Сейчас играют». Красная рамка «линия» в 1 пиксель со всех сторон: 

 div#tabs a#nowplay-tab-button {
  border: 1px solid red;

 }

Красная рамка только сверху и слева:

div#tabs a#nowplay-tab-button {
 border-top: 1px solid red;
 border-left: 1px solid red; 
}

 Рамка с изображением для кнопки «Сейчас играют». Прозрачная рамка в 10 пикселей под изображение в 10 пикселей, картинка обрезана на половину и отодвинута на 2 пикселя: 

div#tabs a#nowplay-tab-button {
 border: 10px solid transparent;
 border-image-source: url(ramka.png);
 border-image-slice: 50%;
 border-image-outset: 2px;
}

 

 // --------------------------------------------------------------------------

 

border-radius

 Записывается: border-radius: значение(в пикселях)

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

div#tabs a#nowplay-tab-button {
 border-radius: 8px
}

Для каждой из 4х сторон по отдельности:

div#tabs a#nowplay-tab-button {
 border-radius: 8px 12px 16px 20px
}

 Кстати, овальные кнопочки на страничке игры(Пройденые, Хочю поиграть и т.д.) изначально были прямоугольными, но за счет border-radius стали овальными. И да, хороший пример использования border-radius можно глянуть в этом оформлении.

 

 // --------------------------------------------------------------------------

 

outline

 Записывается: outline: толщина стиль цвет

 Делает тоже самое что и «border» и имеет теже стили, только не влияет на положение блока и его ширину. В отличии от «border» у «outline» нет отдельных настроек для каждой стороны, а также нельзя использовать изображение. Например, внешняя рамка «пунктир» для кнопки «Отзывы»:

div#tabs a#comments-tab-button {
 outline: 1px dashed #0981c5
} 

 Также добавив и используя минусовые значения свойства «outline-offset», можно сделать рамку «внутрь», положительное же значение просто отодвигает рамку «наружу» на указанное количество пикселей. Например так:

div#tabs a#comments-tab-button {
 outline: 2px dashed #0981c5;
 outline-offset: -10px

 

 // --------------------------------------------------------------------------

 

linear-gradient

 Записывается: linear-gradient(позиция, начальный цвет, конечный цвет)

 Позволяет добавить линейный градиент. Добавляется через свойство background-image или универсальное свойство background. Можно накладывать на изображение. Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left:

Позиция Угол Описание Вид
to top 0deg Снизу вверх.
to left 270deg Справа налево.
to bottom 180deg Сверху вниз.
to right 90deg Слева направо.
to top left   От правого нижнего угла к левому верхнему.
to top right   От левого нижнего угла к правому верхнему.
to bottom left   От правого верхнего угла к левому нижнему.
to bottom right   От левого верхнего угла к правому нижнему.

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

Пару примеров использования:

 Линейный градиент для кнопки «Отзывы»: 

div#tabs a#comments-tab-button {
  background: linear-gradient(to top, #1daca4, #f1ef39)
 }

 Линейный градиент для кнопки «Отзывы» наклоненный на 45 градусов: 

div#tabs a#comments-tab-button {
  background: linear-gradient(45deg, #1daca4, #f1ef39)
 }

Полупрозрачный линейный градиент, наложенный на изображение для кнопки «Отзывы»:

div#tabs a#comments-tab-button {
 background: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(4,52,85,0.5) 50%, rgba(255,255,255,0.1) 100%), url(123.png)
} 

 P.S. Лучше почитать о них на спец. сайте, но если не хотите грузить себя сложной инфой, то скажу, что в интернете есть css-генераторы градиентов. Просто делаете в них градиент и полученный код вставляете куда надо. 

 

 // --------------------------------------------------------------------------

 

 radial-gradient

Записывается: radial-gradient(тип градиента, начальный цвет, конечный цвет)

 Позволяет добавить радиальный градиент. Можно накладывать на изображение. Добавляется через свойство background-image или универсальное свойство backgroundПозиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов; ниже приведены возможные сочетания:

  • at top left = at left top = at 0% 0% (в левом верхнем углу);
  • at top = at top center = at center top = at 50% 0% (по центру вверху);
  • at right top = at top right = at 100% 0% (в правом верхнем углу);
  • at left = at left center = at center left = at 0% 50% (по левому краю и по центру);
  • at center = at center center = at 50% 50% (по центру) — это значение по умолчанию;
  • at right = at right center = at center right = at 100% 50% (по правому краю и по центру);
  • at bottom left = at left bottom = at 0% 100% (в левом нижнем углу);
  • at bottom = at bottom center = at center bottom = at 50% 100% (по центру внизу);
  • at bottom right = at right bottom = at 100% 100% (в правом нижнем углу).

 Возможны две формы радиального градиента — круг (circle) и эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.

Радиальный градиент в форме круга для кнопки «Отзывы»: 

div#tabs a#comments-tab-button {
  background: radial-gradient(circle, #1daca4, #f1ef39)
 } 

P.S. Лучше почитать о них на спец. сайте, но если не хотите грузить себя сложной инфой, то скажу, что в интернете есть css-генераторы градиентов. Просто делаете в них градиент и полученный код вставляете куда надо. 

 

  // --------------------------------------------------------------------------

 

box-shadow

Записывается: box-shadow: 1 2 3 4 5 (где: 1 параметр — смещение по x; 2 параметр — смещение по y; 3 параметр — размытие; 4 параметр — растяжение тени; 5 параметр — цвет)

 Добавляет тень к элементу. Главная особенность в том, что тень отбрасывается во все четыре стороны и ей можно задать цвет, что позволяет использовать её для различных эффектов, таких, например, как свечение, вдавленный текст, 3D и т.д.  Можно перечислять значения через зяпятую, что позволяет добавить несколько теней с разными параметрами. Например, свечение вокруг кнопки «Отзывы»:

div#tabs a#comments-tab-button {
 box-shadow: 0px 0px 5px 1px #0981c5
} 

 Убрав размытие, «box-shadow» можно также использовать для создания рамки (по типу «outline»), причем задавая несколько значений через запятую можно создать несколько «рамок» с разными параметрами. Единственное нужно учитывать, что они накладываются друг на друга тем самым перекрывая друг друга, поэтому нужно задавать размер каждой следующей рамки как «нужный вам размер рамки + сумма всех предыдущих размеров рамок». Например, пять рамок для кнопки «Отзывы»:

div#tabs a#comments-tab-button {
 box-shadow: 0 0 0 2px #d70303, 0 0 0 3px #d7c503, 0 0 0 9px #077198, 0 0 0 10px #98078f, 0 0 0 16px #459807

 Добавив к значениям «inset» можно сделать тень «внутрь». Например так:

div#tabs a#comments-tab-button {
 box-shadow: inset 0px 0px 5px 1px #0981c5

 

  // --------------------------------------------------------------------------

 

text-shadow

 Записывается: text-shadow: 1 2 3 4 (где: 1 параметр — смещение по x; 2 параметр — смещение по y; 3 параметр — размытие; 4 параметр — цвет)

 По сути тоже самое, что и «box-shadow», только для текста. В интернете также есть css-генераторы, так что можно не грузиться лишний раз. Например, синяя тень для текста всех заголовков на странице: 

 h2, h3, h4, .sub-title {
  text-shadow: 1px 1px 1px blue;
 } 

 

 // --------------------------------------------------------------------------

 

text-decoration

Записывается: text-decoration: значение

 Позволяет оформить текст в виде: подчёркивания(underline), перечёркивания(line-through), линии над текстом(overline) и мигание(blink). Можно использовать сразу несколько, перечисляя значения через запятую. Например, все ссылки слева в «меню игры» перечеркнуты: 

div#left-block li a {
 text-decoration: line-through
} 

 

 // --------------------------------------------------------------------------

 

opacity 

Записывается: opacity: значение (от 0 до 1) (где 0 полная прозрачность, а 1 – 100% непрозрачность)

 Позволяет изменить уровень прозрачности элемента. Например, 40% прозрачность кнопки «Прошли»:

div#tabs a#completed-tab-button {
 opacity: 0.4
} 

 

 // --------------------------------------------------------------------------

 

margin и padding

Записываются: margin: значение
                         padding: значение

 Позволяют задать отступ. Разница лишь в том, что padding задает отступ элементам, находящимся внутри основного элемента, а margin задает отступ самого элемента относительно других или другого основного элемента, если он находится внутри него. Если говорить проще, то padding сдвигает все то, что находится внутри элемента, а margin сам элемент. Отступ можно задать как для каждой из четырех сторон (padding-left, padding-right, padding-top, padding-bottom; margin-left, margin-right, margin-top, margin-bottom), так и общий для всех(padding; margin). Лучше конечно почитать о них на специализированных сайтах, но вот пара примеров:

 Сдигает текст в кнопке «Поклонники» влево на 5 пикселей, вниз на 10 пикселей:

 div#tabs a#fans-tab-button {
  padding-left: 5px;
  padding-top: 10px;
}

Задает расстояние 20 пикселей между всеми кнопками внизу(прошли, отзывы и т.д.):

div#main-block .tools-tabs-2 a {
 margin-left: 20px;
}

 

 // --------------------------------------------------------------------------

 

transform 

Записывается: transform: тип трансформации(значение) 

 Позволяет трансформировать элемент в 3D(preserve-3d), увеличить/уменьшить(scale), вращать(rotate), наклонять(skew), сдвигать(translate). Можно также задавать матрицу для преобразований. Можно все это комбинировать вместе просто перечисляя тип трансформации через пробел. Например, все кнопки внизу наклонены на 30 градусов по горизонтали и повернуты на 60 градусов:

div#tabs .tools-tabs-2 {
   transform: skewY(30deg) rotate(60deg)
}

 

 // --------------------------------------------------------------------------

 

width и height

Записываются: height: значение
                         width: значение

 Позволяют задать элементу ширину и высоту. Указываются в пикселях(px) или процентах (берутся от основного элемента, внутри которого находится). Используя значение «inherit» можно наследовать width/height от родительского элемента. Например, размер кнопки «Отзывы» 100 пикселей в высоту и 200 пикселей в ширину:

div#tabs a.current#comments-tab-button {
 height: 100px;
 width: 200px
}

 P.S. Есть небольшие особенности при использовании, так что если что пойдет не так имеет смысл глянуть про них на спец. сайте. 

 // --------------------------------------------------------------------------

 

top, bottom, left, right

Записываются:  top: значение
                         bottom: значение
                         left: значение
                         right: значение

 Позволяют задать положение(координаты) элемента внутри основного. top — отступ сверху, bottom — отступ снизу, left — отступ слева, right — отступ справа. Значения могут быть отрицательными. Используя их, вы можете легко поменять расположение всех элементов на странице, что позволяет создать совершенно новое оформление. Например, «меню игры» смещено вниз на 100 пикселей и влево на 200 пикселей внутри основного элемента:

#left-block, #right-block {
 top: 100px;
 left: 200px
}

 

// --------------------------------------------------------------------------

 

position

Записывается: position: значение

 Задает положение элемента относительно окна браузера или других элементов. Значения могут быть:

  • absolute - Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
  • fixed — По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. 
  • relative — Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
  • static — Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

 В этом примере создается новый элемент внутри элемента body высотой 150пикс и шириной 100пикс с черным фоном и ему задается фиксированое положение:

body::before {
 content: ' ';
 position: fixed;
 height: 150px;
 width: 100px;
 background: black;
}

 

 // --------------------------------------------------------------------------

 

 clip

Записывается: clip: rect(y1,x1,y2,x2)

Значения параметра clip

 Обрезает видимую облась элемента, оставляя видимым только ту область, которая была указана. Пока что доступен вариант только с прямоугольником. Работает только с обсолютно позиционированным элементом ( position: absolute ). Значения можно задавать в пикселях, em и т.д. Возможно также использовать значение auto.

image:hover {
 position: absolute;
 clip: rect(20px, 30px, 40px, 50px)
}

 

// --------------------------------------------------------------------------

 

float

Записывается: float: значение

 Задает выравнивание элемента и как при этом будут обтекать этот элемент другие элементы. Значения могут быть:

  • left — Выравнивает элемент по левому краю, а все остальные элементы, обтекают его по правой стороне.
  • right — Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
  • none — Обтекание элемента не задается.

 

 // --------------------------------------------------------------------------

 

transition

 Записывается: transition(1 2 3 4) (где 1 — тип перехода, 2 — продолжительность перехода(в секундах), 3 — функция, 4 — задержка перед началом перехода(в секундах))

 Позволяет задать значения перехода для элемента от одного состояния в другое. Тип перехода указывает на то, как вы ходите изменить элемент (top, width, color, transform, opacity, border, box-shadow и т.д.). Функция же указывает на скорость и как элемент будет изменяться и могут иметь значения:

ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,1).
ease-in Переход начинается медленно, а затем плавно ускоряется в конце. Соответствует cubic-bezier(0.42,0,1,1).
ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует cubic-bezier(0,0,0.58,1).
ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует cubic-bezier(0.42,0,0.58,1).
cubic-bezier(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения. В интернете есть сайты на которых вы сможете легко построить любую траекторию перехода.

 Например, кнопка «Прошли» при наведении курсора плавно меняет свой фон на черный в течении 5 секунд с задержкой перед началом перехода 0.5 секунд:

div#tabs a#completed-tab-button:hover {
 background: black;
 transition: background 5s linear 0.5s
}

 Можно использовать несколько переход просто перечисляя значения через запятую. Например transition: background 5s ease-out 0.5s, color 2s ease-in-out 1s.

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

 

 // --------------------------------------------------------------------------

 

visibility

Записывается: visibility: значение

 Позволяет сделать элемент видимым или невидимым. Значения могут быть:

  • visible — Отображает элемент как видимый.
  • hidden — Элемент становится невидимым, но он продолжает влиять на положение других элементов. 

Например, кнопка «Поклонники» невидимая:

div#tabs a#fans-tab-button {
   visibility: hidden
}

 

 // --------------------------------------------------------------------------

 

z-index

Записывается: z-index: значение

 Все элементы на странице наложены друг на друга как бы слоями и несмотря на то, что страница выглядит двухмерной, присутствует и третье измерение, а точнее ось Z. Так вот, z-index позволяет задать положение элемента на этой оси т.е. можно поднять какой-нибудь элемент над другим или, наоборот, опустить его под него. В качестве значения используются целые числа, которые могут быть как отрицательными, так и положительными. Чем выше значение, тем выше элемент, а чем ниже — тем он ниже. Работает только для элементов у которых значение position задано как absolute, fixed или relative.

Напрмер, в разделе «Бонус. Анимированные спрайты на фоне» есть код:

body::before {
 content: ' ';
 height: 64px;
 width: 150px;
 top: 100px;
 left: 10px;
 background: url('https://s19.postimg.org/minqok39f/Roy_Squad_Rocks_Shanghai_Doll_Assist2_1.gif') no-repeat;
 position: fixed;
 z-index: -1;
 animation: move 7s ease-in-out infinite;
}

@keyframes move {
 0% {left: 10px;}
 49% {transform: none;}
 50% {left: 1775px; transform: scaleX(-1);}
 100% {left: 10px; transform: scaleX(-1);}
}

 Так вот, если выстравить значение z-index равное 1, то анимация будет двигаться поверх страницы, но если выставить значение -1, то анимация будет двигаться под страницей. Вот так оно и работает =)

 

 // --------------------------------------------------------------------------

 

!important

 Если у вас по непонятным причинам, например, не меняется цвет текста, несмотря на то, что код написан правильно, то попробуйте дописать в конец строки !important, который повышает приоритет стиля. Например, для смены цвета текста на красный у кнопки button, который никак не хочет меняться:

button {
 color: red !important
} 

 

 // --------------------------------------------------------------------------

 

> Псевдоклассы.

 Да, хоть и звучит страшно, но вам даже не нужно знать что это. Псевдоклассов не мало, но я пока напишу про пару полезных. Псевдоклассы приписываются к id в конец через «:». 

 

:hover 

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

div#tabs a#completed-tab-button:hover {
 background: url(superfon.png) no-repeat;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px blue;
 color: #d7e0e6;
} 

 

 // --------------------------------------------------------------------------

 

:nth-child 

 Позволяет выбрать нужный элемент из таких же исходя из его порядкового номера. Например, нужно вам как-то выделить красным ссылку «Файлы» в «меню игры», которая является в списке 7 по счету: 

div#left-block ul.left-menu li:nth-child(7) {
 background: #860303;
} 

Можно использовать вместе с :hover: и будет выглядеть так “ul.left-menu li a:nth-child(7):hover”  

 

 // --------------------------------------------------------------------------

 

> Псевдоэлементы 

Тоже не парьтесь. Псевдоэлементы приписываются к id или псевдоклассу через «::» (да, два двоеточия). 

 

 ::before и ::after 

 Позволяют создать новый элемент и добавить к элементу то, что указано в свойстве «content». ::before добавляет до элемента, а ::after – после. Можно использовать с :hover. Например, нужно вам при наведении курсора на ссылки в «меню игры», чтобы слева появлялся «=)»: 

div#left-block ul.left-menu li a:hover::before {
 content: «=)»
}

 Можно, например, использовать вместе с :nth-child. Скажем, нужно вам выделить ссылку «Статьи» добавив к ней «!» красного цвета в начало:

div#left-block ul.left-menu li a:nth-child(2)::before {
 content: «!»;
 color: red
} 

 Кстати, ::before и ::after можно использовать не только с текстом. По сути они просто создают новый элемент с которым вы можете делать что хотите. Единственное условие, что в поле content должен присутствовать хотя бы пробел. Пару примеров вы можете глянуть в разделе «Бонус. Простая анимация фона». Там при помощи ::before создается новый элемент внутри другого и в него уже грузятся все картинки и происходят все изменения. И да, для одного элемента может быть только один ::before и один ::after.

 


ШРИФТ 

Шрифт и его замена

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

Основные настройка шрифта.

Свойства:
font-family — Задает шрифт, которым все пишется. Можно задать несколько шрифтов, перечисляя их имена через запятую. Первый будет использоваться как основной, остальные — как запасные. Например: font-family: arial, verdana, tahoma;
 Так же, дополнительно, можно указать тип шрифта: serif (с засечками), sans-serif (без засечек), cursive (курсив), fantasy (декоративный), monospace (моноширинный). Например: font-family: arial, sans-serif;
font-size — Задает размер шрифта. Обычно указывается в %, px или pt. Например: font-size: 12pt;
font-style — Задает стиль шрифта: normal (обычный), oblique (наклонный), italic (курсивный). Например: font-style: italic;
font-weight — Задает «толщину» шрифта: normal (нормальный), bold (полужирный), bolder (более жирный) и lighter (менее жирный). Например: font-weight: bold;

Основные проблемы использования.

 Дело в том, что если у пользователя нет на компьютере шрифта, который вы использовали для оформления, то у него все будет написано стандартным шрифтом! Список стандартезированных шрифтом очень мал и они все примерно выглядят одинаково.
 Но есть есть возможность подключить внешний шрифт, который будет загружаться на компьютер пользователя и тем самым у него все будет написано тем шрифтом, которым вы хотели. Есть 2 способа подключить шрифт: 1) использовать правило @font-face; 2) использовать веб шрифт, который загружается со специальных сайтов. Про @font-face я писать не буду, потому что все можно сделать проще используя веб шрифт, но если вам интересно можете сами почитать про него в интернете.

Подключение веб шрифта.

 Есть всякие сайты типа Google Fonts, Webfont и т.д. которые хранят у себя куча всяких шрифтов и предоставляют сервис по их подключению(бесплатно). Процесс подключения напишу на примере Webfont и шрифта ABeeZee, но процесс для других шрифтов такой же. И вот что нужно сделать:
1) Зайти на сайт Webfont и выбрать «Без засечек»;
2) Выбрать там шрифт ABeeZee. Должен быть первым в списке. (Для поиска других шрифтов есть всякие фильтры, которые могут заметно сократить время поиска нужного шрифта, НО учтите, что вам нужен шрифт с поддержкой кирилицы, которых, например, на Google Fonts очень мало);
3) Нажать «скачать шрифт»;
4) Появится окошко, где будет 2 поля: а) ссылка @import «http://webfonts.ru/import/abeezee.css»;. Вот эту ссылку вы копируете и вставляете в начало своего css-кода; б) Второе же — font-family: 'ABeeZee' вы должны будете добавить в css-код к тому элементу, к которому хотите применить этот шрифт;

Например, если вы хотите применить веб шрифт ко всей странице:

@import «http://webfonts.ru/import/abeezee.css»;

#layout-wrapper {
 font-family: abeezee, arial, verdana; /* arial и verdana просто как запасные на всякий случай, вдруг сайт отвалиться =) */
}

 Но есть некоторые особенности при использовании. Дело в том, что буквы у разных шрифтов разного размера и расстояние между ними тоже разное, поэтому при замене шрифта не редко может случиться так, что слова начнут вылезать за пределы кнопок, окон и т.д. Поэтому вам придется подгонять их размеры под новый шрифт. Также, скорее всего, придется менять значение font-size у многих элементов. Поэтому лучше всего начинать смену оформления именно с замены шрифта. В общем, процесс не легкий, но стоит того. Удачи! =)

P.S. И да, вы можете подключить несколько веб шрифтов, но старайтесь не использовать много «жирных» шрифтов, потому что это увеличит время загрузки страницы. На сайте шрифта обычно есть всякие возможности по оптимизации шрифта, так что пользутесь ими.

P.S.S. По каким-то непонятным мне причинам, данный способ не работает на SF (или это я туплю), хотя способ 100% рабочий(проверен на другом сайте). Так что, если кто разберется, напишите как сделать, буду крайне признателен.

 


КУРСОР 

Курсор и его замена на свой

 Вот вы сделали страничку, все вроде ок, но все равно чего-то не хватает, чего-то совсем незначительного. А не хватает курсора!

Курсор.

 Ну про сам курсор, я думаю, не нужно обьяснять, но пару важных моментов есть. Во-первых, курсор может иметь несколько «состояний» и его нужно будет указать. Состояний много, но вам, скорее всего, понадобится только два из них. Это «default» — обычное состояние курсора в виде стрелочки, «pointer» — когда вы наводите курсор на активный элемент типа ссылки, кнопки или превью для картинок и курсор меняется на руку с вытянутым указательным пальцем (не забываем, что это работает :hover). Во-вторых, IE в качестве формата файла курсора поддерживает CUR и ANI. Firefox, Chrome, Safari поддерживают форматы CUR, PNG, GIF, JPG. Opera не работает с файлами курсора. Если свой курсор не работает, то будет грузиться курсор по-умолчанию.

Подключаем свой курсор.

 Сама процедура подключения очень проста. Вы указываете для свойста cursor путь к новому курсору и его состояние и в итоге все записывается так: «cursor: url(путь к файлу курсора), состояние». И вот пару примеров:

Курсор в обычном состоянии для всей страницы:

#layout-wrapper {
  cursor: url(megacursor.png), default;
}

Курсор при наведении на все активные элементы типа кнопки, ссылки, превью скриншотов:

#layout-wrapper a:hover {
 cursor: url(megacursor2.png), pointer;
}

 Естественно, вы можете сделать курсор для какого-то элемента отдельно. Тогда свойтсво cursor вам нужно будет уже прописывать в его css-коде.

  


Полезные советы 

Спойлер

Секреты id. 

 Если вы читали вступление, то знаете, откуда берется id, но вот что там за id, написанные слева от него в панеле элементов? Дело в том, что каждый элемент находится как-бы внутри другого. Это примерно как файл находится в папке, а эта папка в другой папке, а та в другой и т.д. То есть даже если у файлов одинаковые имена, но они находятся в разных папках, то изменение одного файла никак не влияет другой.

Ну вот и к чему это все было?

 Ну так вот. Например, если вы ткнёте на ссылки в «меню игры» вы увидите, что у них id равен «а», а теперь попробуйте написать, например: a { border: 1px solid red } . Вы сразу увидите, что красная рамка появилась не только у ссылок в «меню игры», а вообще у всех ссылок!

Почему так произошло?

 Дело в то, что элемент и заданный ему стиль может быть использован во многих местах и, соответственно, другие такие же элементы наследуют стиль от него, что приводит к их изменению, если стиль основного элелемента меняется. В данном случае «а» определяет стиль всех ссылок. Получается что-то вроде системы родитель — ребенок.

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

 Для этого нужно указывать «местонахождение» элемента, так сказать, “папку” в которой он находится. Все это для того, чтобы указать, что изменения должны произойти только в этом месте. Для этого как раз и служат те id, которые указаны слева в панеле элементов (этакий путь к файлу).

Ну и как это сделать?

 Просто смотрите налево от id вашего элемента и ищете id, начинающийся на div# или # и приписываете его id к своему элементу в начало через пробел. Иногда можно просто вписать соседний id. В итоге правильный id для ссылок в «меню игры» будет выглядеть так: div#left-block ul.left-menu li a. Конечно, если элемент уникальный(нигде не повторяется), то можно и не мучиться, но иногда лучше подстраховаться. Тоже кстати касается овальных кнопочек «В избранное», «Играю» и т.д. потому что они еще используются как «Войти», «Регистрация».

 Кстати, кнопки имеют два состояния: активная(нажатая) и не активная(не нажатая). Для активных кнопок id нужно уже смотреть в окошке стилей справа (после того, как вы ткнули на саму кнопку конечно). Для овальных кнопочек id активной кнопочки будет иметь вначале приписку .active (т.е. .active.dark-button), а прямоугольные кнопки внизу иметь приписку в конце .current (т.е. например для кнопки «Сейчас играют» div#tabs a#nowplay-tab-button.current).

// --------------------------------------------------------------------------

Группировка

 Если вы задаете разным элементам одни и те же свойства, то чтобы не прописывать одно и тоже каждый раз вы можете их сгруппировать. Для это вы просто перечисляете все id через запятую и все. Например, вы хотите поменять цвет текста для button1, button2 и button3 на один и тот же. В итоге код будет выглядеть так: 

 button1, button2, button3 {
    color: red
  } 

 Учтите, что если вы делаете, например, общий эффект при наведении курсора, то при группировке вам нужно будет приписать :hover к каждому id т.е.: 

button1:hover, button2:hover, button3:hover {
    color: red
  } 

// --------------------------------------------------------------------------

Упрощаем себе работу. 

 Если все элементы, которые вы хотите изменить имеют общий элемент стиля, то можно просто прописать все свойства ему и они автоматически раскидаются на все остальные элементы. Например все прямоугольные кнопочки внизу имеют общий элемент .tools-tabs-2 a, который задает им стиль. И если вы захотите, например, поменять сразу всем кнопкам цвет текста и фон, то вы просто пишите: 

 .tools-tabs-2 a {
   background: blue;
   color: red
  } 

Для ссылок, как вы уже можете знать, это «а», а у овальных кнопочек он называется .dark-button. 

 // --------------------------------------------------------------------------

Отключаем ненужные стили. 

 Если вам нужно отключить какой-то стиль, то вам нужно указать в коде его значение как 0px или none. Например: border: none – убирает рамку; border-radius: 0px –убирает закругление краёв; box-shadow: none – убирает тень у элемента; text-shadow: none – убирает тень у текста; text-decoration: none – убирает оформление текста; background: none или background: transparent – убирают фон. 

 // --------------------------------------------------------------------------

rgba. 

 Как вы можете уже знать, цвет обычно задается в формате rgb или в виде шестнадцатиричного кода с добавлением знака «#» в начало. Но есть еще вариант с rgba. Его особенность в том, что в отличие от rgb вы можете задать не только цвет, но и его прозрачность, которая идет четвертым значением и записывается также как и свойство opacity. Например, у всех кнопок внизу белый фон и он прозрачный на 40%:

 .tools-tabs-2 a {
   background: rgba(255,255,255, 0.4);
  } 

 // -------------------------------------------------------------------------- 

Тот id да не тот. 

 Иногда для смены стиля элемента вам будет нужно менять стиль элемента, стоящего «выше» т.е. стоящего левее от id вашего элемента в панеле элементов. Просто переключаетесь на него, ткнув левой кнопкой мыши на его id в панеле элементов, и там уже в окошке стиля проверяете тот или не тот элемент отключая/меняя стили. 

 // --------------------------------------------------------------------------

Разные браузеры – разный эффект.

 Как это не странно, но разные браузеры могут делать одно и тоже по-разному или вообще не делать. Поэтому нужно проверять страничку в нескольких браузерах. Я лично рекомендую проверять все в Internet Explorer, потому что в нем многое может не работать. И да, IE пользуется куча народу и не важно как у вас припекает от IE и что вы считаете всех пользователей IE дураками. Если они зайдут на вашу страничку и там все будет криво-косо и толком ничего не работать, то дураком будете вы. Так что не выпендривайтесь. Если в IE все работает, то будет работать, наверное, почти во всех браузерах. Более подробно вы можете почитать на спец. сайтах в разделе «Кроссбраузерность». 

// --------------------------------------------------------------------------

 Оптимизация основного фона.

 Если ваш основной фон много весит, но вы не планируете делать центральную часть страницы прозрачной, то вы просто можете вырезать центральную часть фона или залить её одним цветом (например, черным). Да, вот так. Эту часть же все равно не видно. Это позволит уменьшить вес основного фона на ~35%! Единственное, что нужно сделать это позаботиться о том, чтобы размер центральной части не менялся, прописав в css код: 

.layout-content {
 min-height: 950px !important;
}

// --------------------------------------------------------------------------

Смотри что пишешь!

 Правильно пишите id, не забывайте про «;» в конце каждой стоки и про скобки «{» и «}». Так что если у вас вдруг что-то не работает, то первое куда надо смотреть это на правильность записи кода. 

// --------------------------------------------------------------------------

Новый взгляд.

 Полезно иногда полностью просматривать код или какие-то его части. Может что-то можно сгруппировать, что-то лишнее убрать, что-то поменять и даже исправить ошибки. В общем этакая оптимизация. Заодно может какие хорошие идеи возникнут =)

// --------------------------------------------------------------------------

Комментарии. 

 Вы можете добавлять к коду комментарии. Комментарии пишутся так: /* текст */ 

 // --------------------------------------------------------------------------

Сохраняйтесь почаще! 

 Просто копируйте css-код время от времени в какой-нибудь текстовый файл. Так вы всегда сможете, если что-то пойдет не так, откатиться к предыдущей версии или восстановить код в случае потери.

 


Для справки

Спойлер

— Ссылки в «меню игры» представлены в виде списка(list). Если вы не знаете что это такое и как работает, то лучше почитайте в интернете. 

— Некоторые элементы видите только вы. Например, меню «анкета, оформление и т.д.» под «меню игры» или окно для редактирования. Так что их можно не оформлять или же сделать это в самом конце.

— Если вы, по каким-либо причинам, не можете открыть «Редактор оформления», то просто добавте к ссылке в адресной строке браузера в конец ?builder=on.

— Если во время обновления страницы у вас появляется «II»(знак паузы), то просто жмите кнопку плей, которая находится слева вверху в окне «Средства разработчика»(для IE 11) пока не отпустит.

 


Бонус

Простая анимация фона

Движущиеся светящиеся шары

 Код адаптирован под копипаст, так что вам просто нужно вставить его в начало вашего css-кода и все =)

body::before {
 content: ' ';
 display: inline-block;
 height: 100%;
 width: 100%;
 background: url(https://s19.postimg.org/kcodwxthf/foreground.png) 5% 5%, url(https://s19.postimg.org/5qxd8owoz/midground.png) 20% 20%, url(https://s19.postimg.org/yull4xksj/background.png) 90% 110%;
 position: fixed;
 z-index: -1;
 animation: glowballs 250s linear infinite;
}

@keyframes glowballs {
 0% {background-position: 0px 0px, 0px 0px, 0px 0px}
 50% {background-position: 3000px 5000px, 4000px 5000px, 500px 5000px}
 100% {background-position: 6000px 9000px, 900px 9000px, 900px 9000px}
}

 Чем меньше время анимации, тем быстрее они движутся. Направление движения задается через background-position в glowballs анимации.

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

 

Анимированные спрайты на фоне

Кто хочет Хацунэ Мику? =)

body::before {
 content: ' ';
 display: inline-block;
 height: 120px; /* размер спрайта по высоте */
 width: 160px; /* размер спрайта по ширине */
 top: 870px; /* задает отступ сверху */
 left: 10px; /* задает отступ слева */
 background: url('http://s19.postimg.org/50ivrifer/Miku_fixed.gif') no-repeat;
 position: fixed;
 z-index: 1;
}

 Так же и как и со светящимися шарами, вы можете заменить Мику на другой анимированный спрайт. Так же вам ничто не мешает заставить спрайт двигаться куда вы захотите. Например так =)

body::before {
 content: ' ';
 display: inline-block;
 height: 64px;
 width: 150px;
 top: 100px;
 left: 10px;
 background: url('https://s19.postimg.org/minqok39f/Roy_Squad_Rocks_Shanghai_Doll_Assist2_1.gif') no-repeat;
 position: fixed;
 z-index: 1;
 animation: move 7s ease-in-out infinite;
}

@keyframes move {
 0% {left: 10px;}
 49% {transform: none;}
 50% {left: 1775px; transform: scaleX(-1);}
 100% {left: 10px; transform: scaleX(-1);}
}

 Настраивается также, как и пример выше. Если вам нужно убрать анимацию под низ, то просто поменяйте значение у z-index на -1. 1775px задает «дальность» полета в пикселях. При помощи свойства cubic-bezier можно задавать сложные траектории полета =)

P.S.S. По каким-то непонятным причинам у Мику в IE 11 тупит анимация, хотя код рабочий. Так что пока не разберусь вот кастыльная версия кода:

body::before {
 content: ' ';
 display: inline-block;
 height: 120px;
 width: 160px;
 top: 870px;
 left: 10px;
 background: url('http://s19.postimg.org/50ivrifer/Miku_fixed.gif') no-repeat;
 position: fixed;
 z-index: 1;
 animation: iewtf 1s linear infinite;
}

@keyframes iewtf {
 from {left: 0%}
 to {left: 0.1%}
}

 


 Всякие полезности

 

Основной фон всей страницы не двигается при прокрутке страницы

body {
 background-attachment: fixed;
}

 

Убираем серый фон и подгоняем размер рамки превьюшек скриншотов для скриншотов формата 4:3

div#page-info #gallery-block .photo {
 width: 70px;
}

 

Убираем серый фон и подгоняем размер рамки превьюшек скриншотов для скриншотов формата 16:9

div#page-info #gallery-block .photo, .photo {
 height: 45px;
 margin: 8px 5px;
}

 

Растягиваем по ширине инфотаблицу(альт.назв, разработчик, платформа и т.д.)

div#page-info .data-block table {
 width: 113%;
}

 

Центральная часть прозрачна на 33%

.layout-content {
 background: rgba(255,255,255,0.67) /* 0.67 = 67% непрозрачности */
}

 


Демо-код для странички игры

 Тут вы можете посмотреть css-код вот этой страницы(демо-код1) и вот этой страницы(демо-код2). Все элементы на своих местах. Код для удобства разбит на части. В демо-код1 упор сделан на отдельные элементы, в то время как в демо-код2 на группировку и общие стили у разных элементов. Так как к играм нет никаких новостей и статей, то отсутствует их оформление, для демо-код2 так же отсутствует оформление для сообщений т.к. их нет. В паре мест присутствует знак (!), который значит «я не понял как правильно сделать, так что сделал как смог». Также я почти не офомлял то, что видит только хранитель. И да, у фона к некоторым элементам уже была сделана рамка в Photoshop, поэтому в css-коде рамка уже не прописывалась.

 Код не дописан местами, но в качестве образца вполне норм. Если вы захотите, чтобы все работало вместе, то вам нужно просто кинуть все в одну кучю. Код проверялся только в Internet Explorer 11 и Google Chrome 53.


 Демо-код1

 

Главный фон

/* Фиксируем фон всей страницы при прокрутке (фон загружен через «Оформление») */
body {
 background-attachment: fixed;
}

 

Основной фон центральной части, текст и подразделы

/* --- Фейловая анимация печатанья текста */

@keyframes typing {
 from { width: 0 }
}

/* ------- Основной центральный фон и текст ------ */

/* ---- Меняем центральный фон + делаем рамку */
.layout-content {
 background: url(http://s19.postimg.org/agmdujptv/Central_fon.png);
 border: 1px solid #092a3e;
 min-height: 1080px !important;
}

/* ---- Теперь делаем текст читабельным на новом фоне */

/* --- Цвет текста «Нужна помощь?» */
div#question-block p {
 color: #156899;
}

/* --- Цвет текста «Описание», «нет статей» и «нет новостей» */
div#main-block div.description p, div#main-block .no-results {
 color: #156899;
}

/* --- Цвет текста всех заголовков! */
h2, h3, h4, .sub-title {
 color: #bfcdd6;
}

/* --- Добавляем ко всем заголовкам в начало «>» */
h2::before, h3::before, h4::before, .sub-title::before {
 content: «\ff1e» !important;
}

/* --- Добавляем фейловую анимацию к заголовкам в подменю «Статьи», «Новости» и т.д. */
h2 {
 white-space: nowrap;
 overflow: hidden;
 width: 100%;
 animation: typing 7s steps(50, end);
}

/* ---- Делаем рамку к описанию и чуть сужаем текст */
div#main-block .content {
 border: 20px solid transparent;
 padding: 2px;
 border-image-source: url(«http://s19.postimg.org/4ncsdcv43/target.png»);
 border-image-slice: 50%;
 border-image-outset: 2px;
 background: url(http://s19.postimg.org/alm09uooz/Opisanie_fon.png);
 background-origin: border-box;
 outline: 1px solid #092a3e;
}

/* --- Заменяем фон и цвет текста кнопоки «Задать вопрос», «Написать статью»,"Написать новость" и т.д. */
div#question-block button, div#question-block .button, div#main-block a.button, div#releases-block a#add-release, div.span-36 a.button, div#files a.button {
 background: url(http://s19.postimg.org/no7zi9j7n/Zadat_vopros.png) repeat-x;
 border: 1px solid #0981c5;
 border-radius: 0px;
 box-shadow: none;
 text-shadow: none;
 color: #d9d9d9 !important; ;
}

/* ---- Добавляем свечение при наведении курсора на эти кнопки */
div#question-block button:hover, #question-block .button:hover, div#main-block a.button:hover, div#releases-block a#add-release:hover, div.span-36 a.button:hover, div#files a.button:hover {
 box-shadow: 0px 0px 5px 1px #0981c5;
 border: 1px solid #0981c5;
 color: #e7e7e7;
}

/* --- Меняем фон «Даты релизов» */
#releases td {
 background: url(http://s19.postimg.org/fpd9y1zsz/data_relizov.png);
}

/* ---- Меняем цвет текста в «Дата релизов», «Модерировать», «Отметить проч», «Перейти к списку альбомов» */
div#releases caption, th, td, .controls a, div#forum a, div#main-block a {
 color: #156899;
}

/* ---- Меняем цвет текста «Редактировать», «Удалить» */
div#releases .controls a {
 color: #125379;
}

/* --- Меняем цвет текста «Редактировать», «Удалить», «Модерировать», «Отметить проч», «Перейти к списку альбомов» при наведении курсора */
div#releases .controls a:hover, div#forum a:hover, div#main-block a:hover {
 color: #299de1;
}

/* --- Заменяем фон и убираем старые стили в «Дата релизов» */
div.span-36 .content table th {
 background: url(http://s19.postimg.org/fpd9y1zsz/data_relizov.png);
 border-radius: 0px;
 text-shadow: none;
}

/* --- Меняем цвет рамки «Даты релизов» */
div.span-36 .content td, div.span-36 .content th {
 border: 1px solid #092a3e;
}

/* --- Добавляем рамку к обложке в «Даты релизов» */
div.span-36 .content img {
 border: 1px solid #092a3e;
}

/* --- Меняем фон «Файлы», цвет текста + рамка (!) */
div.layout-content .content table th {
 background: url(http://s19.postimg.org/66gwqfzib/page_info_bg.png) no-repeat;
 border-left: 1px solid #092a3e;
 border-bottom: 1px;
 outline: 1px solid #092a3e;
 border-radius: 0px;
 text-shadow: none;
color: #299de1;
}

 

Информация об игре (Page Info) + овальные кнопочки

/* ----------- Page Info --------*/

/* ---- Менем цвет и смещаем название игры, делаем его прозрачней на 30% */
div#page-info div#title h1 {
 color: #0d4262;
 padding-left: 31px;
 opacity: 0.7;
}

/* ------------ Меняем фон и делаем прямые края */
#page-info {
 background: url(http://s19.postimg.org/olj04vk3n/Page_info_fon_test.png) no-repeat;
 border-radius: 0px;
}

/* --- Чуть удлиняем таблицу инфо и сдвигаем её влево */
div#page-info .data-block table {
 width: 110%;
 padding-left: 5px;
}

/* ----- Меняем цвет раздел.полосок */
div#page-info .data-block th, div#page-info .data-block td {
 border-top: 1px solid rgba(0, 120, 240, 0.2)
}

/* --- Убираем верхнюю разделительную полосу */
div#page-info .data-block tr:first-child td, div#page-info .data-block tr:first-child th {
 border-top: 0 solid transparent !important;
}

/* ------- Добавляем рамку к обложке и делаем её на 15% прозрачней */
div#page-info #photo-container img {
 border: 1px solid #061f2e;
 filter: alpha(Opacity=85);
 opacity: 0.85;
}

/* ------- Подсвечиваем рамку у обложки при наведении курсора */
div#page-info #photo-container img:hover {
 border: 1px solid #092a3e;
}

/* ------- Убираем задний фон у превьюшек для скриншотов и добавляем рамку */
div#page-info #gallery-block .photo, .photo {
 background: none;
 border: 1px solid #061f2e;
}

/* ---- Подгоняем новую рамку под превьюшки у скриншотов */
div#page-info #gallery-block .photo {
 width: 70px;
}

/* --- Чуть сдвигаем вправо все превьюшки */
div#page-info #gallery-block {
 padding-right: 4px;
}

/* ---- Подсвечиваем рамку превьюшек у скриншотов при наведении курсора */
div#page-info #gallery-block .photo:hover {
 border: 1px solid #092a3e;
}

/* --- Добавляем рамку к скриншотам */
div#photobox-container a#photobox-photo img {
 border-radius: 0px;
 border: 1px solid #092a3e;
}

/* ----- Меняем цвет инфо теста */
#page-info .data-block th, .data-block td {
 color: #d7e0e6;
}

/* ----- Меняем цвет ссылок */
#page-info table a, #page-info .photo a, #page-info #gallery-block a {
 color: #0d4262;
}

/* ----- Меняем цвет ссылок при наведении курсора */
#page-info table a:hover, #page-info .photo a:hover, #page-info #gallery-block a:hover {
 color: #156899;
}

/* --------- Заменяем нижнюю панель на свое изображение + рамка внизу */
#page-info .darkbar {
 background: url(http://s19.postimg.org/n3shw791f/Page_info_panel.png) no-repeat;
 border: 1px solid #02587d;
 border-left-width: 0px;
 border-right-width: 0px;
 border-top-width: 0px;
}

/* -------- Меняем форму овальных кнопок на стандартную + рамка */
div#game-buttons .dark-button {
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
}

/* ----------- Заменяем фон активных уже не овальных кнопок */
div#game-buttons .active.dark-button {
 background: url(http://s19.postimg.org/x6pnhwhhf/ubrat_iz_proid.png) repeat-x;
}

/* ----------- Заменяем фон неактивных уже не овальных кнопок */
div#game-buttons .dark-button {
 background: url(http://s19.postimg.org/n4avf62kj/Igrayu.png) repeat-x;
}

/* ------ Заменяем серую хрень при наведении курсора на активные уже не овальные кнопки на свою хрень */
div#game-buttons .active.dark-button:hover {
 background: url(http://s19.postimg.org/x6pnhwhhf/ubrat_iz_proid.png) repeat-x;
 border: 1px solid #0981c5;
}

/* ------ Заменяем серую хрень при наведении на неактивные уже не овальные кнопки на свою хрень */
.div#game-buttons dark-button:hover {
 background: url(http://s19.postimg.org/n4avf62kj/Igrayu.png) repeat-x;
 border: 1px solid #0981c5;
}

/* ------ Подсветка уже не овальных кнопок при наведении курсора */
div#game-buttons .dark-button:hover {
 box-shadow: 0px 0px 5px 1px #0981c5;
 border: 1px solid #0981c5;
}

 

Меню игры

/* ----------- Меню игры-------- */

/* -------------- Заменяем фон «Меню игры» и убираем стили */
div#left-block .head-bar {
 background: url(http://s19.postimg.org/44uo0smmb/Menu_Up.png) no-repeat;
 border: none;
 border-radius: 0px;
}

/* ---- Добавляем основной фон под ссылки и сдвигаем его */
div#left-block .left-menu {
 background: url(http://s19.postimg.org/kxuiqpe2r/Menu_Down.png) no-repeat;
 background-position-y: 30px;
}

/* ---- Подгоняем ссылки под новый фон (!) */
ul.left-menu li {
 margin: 0;
 margin-top: 4px;
 margin-left: 18px;
}

/* ----- Убираем слово «Меню игры» */
div#left-block .head-bar .title {
 visibility: hidden;
}

/* --- Задаем фиксир.размер старому «меню игры» дабы оно не двигало ссылки при расстягивании */
div#left-block .head-bar {
 max-width: 150px;
 max-height: 0px;
}

/* ----- Меняет цвет ссылок */
div#left-block li a {
 color: #1977af;
}

/* --- Добавляем к ссылкам два пробела в начало */
div#left-block ul.left-menu li a::before {
 content: '\00a0\00a0';
}

/* --- Теперь заменяем первый пробел на «>» при наведении курсора */
div#left-block ul.left-menu li a::hover::before {
 content: '\02c3';
}

/* ----- Убираем «>» с «Меню игры» при наведении курсора (если вы не убирали слово «Меню игры») */
div#left-block .head-bar .title::hover::before {
 content: '\00a0\00a0';
}

 

Кнопки внизу (Отзывы, Прошли и т.д.)

/* ----------- Кнопки внизу (для каждой отдельно). Если хотите сделать одно и тоже для всех кнопок сразу, то просто замените id любой кнопки на «.tools-tabs-2 a», а остальной код удалите --------*/

/* ---- Подгоняемся под новые кнопочки */
div#main-block .tools-tabs-2 a {
 padding: 2px 9px;
 margin-top: 3px;
 margin-left: 3px;
}

/* ------ Заменяем фон неактивной кнопки «Отзывы» */
div#tabs a#comments-tab-button {
background: url(http://s19.postimg.org/k71c1jurn/button_otziv_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

/* --- Добавляем свечение при наведении курсора */
div#tabs a#comments-tab-button:hover {
 border-radius: 0px;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px #0981c5;
 color: #d7e0e6 !important;
}

/* ------ Заменяем фон активной кнопки «Отзывы» */
div#tabs a#comments-tab-button.current {
 background: url(http://s19.postimg.org/5zbncwi2r/button_otziv_active.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

/* ---------- Заменяем фон кнопки «Прошли» */
div#tabs a#completed-tab-button {
background: url(http://s19.postimg.org/pnjzvxo5f/button_prosli_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#completed-tab-button:hover {
 border-radius: 0px;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#completed-tab-button.current {
 background: url(http://s19.postimg.org/9b9y679tv/button_prosli_active.png) no-repeat ;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

/* ---------- Заменяем фон кнопки «Поклонники» */
div#tabs a#fans-tab-button {
 background: url(http://s19.postimg.org/yswy3jgxv/button_poklonniki_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#fans-tab-button:hover {
 border-radius: 0px;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#fans-tab-button.current {
 background: url(http://s19.postimg.org/q9dk5s8lf/button_poklonniki_active.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

/* ----------- Заменяем фон кнопки «Собираются играть» */
div#tabs a#wish-tab-button {
 background: url(http://s19.postimg.org/l2xth04g3/button_sob_igrat_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#wish-tab-button:hover {
 border-radius: 0px;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#wish-tab-button.current {
background: url(http://s19.postimg.org/vr1kfuef7/button_sob_igrat_active.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

/* ----------- Заменяем фон кнопки «Сейчас играют» */
div#tabs a#nowplay-tab-button {
background: url(http://s19.postimg.org/mo3whbzwj/button_igrat_seit_noactive.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#nowplay-tab-button:hover {
 border-radius: 0px;
 border: 1px solid #0981c5;
 box-shadow: 0px 0px 5px 1px #0981c5;
 color: #d7e0e6 !important;
}

div#tabs a#nowplay-tab-button.current {
 background: url(http://s19.postimg.org/49xyr3czn/button_igrat_seit_active.png) no-repeat;
 border-radius: 0px;
 box-shadow: none;
 border: 1px solid #0981c5;
 color: #d7e0e6 !important;
}

 

Серия

/* ---- Серия (часть кода перенесена во «Во всякие мелочи») ------ */

/* --- Добавляем рамку для окна «Серия» */
#series .series-item {
 border-radius: 0px;
 border: 10px solid transparent;
 border-image-source: url(«http://s19.postimg.org/4ncsdcv43/target.png»);
 border-image-slice: 50%;
 border-image-outset: 2px;
 background: url(http://s19.postimg.org/alm09uooz/Opisanie_fon.png);
 background-origin: border-box;
 outline: 1px solid #092a3e;
}

/* --- Добавляем рамочку к картинкам «Серия» */
div#series .img-border, div#series .img-border-small {
 border-radius: 0px;
 border: 1px solid #092a3e;
}

/* ---- Добавляем свечение для картинок в «Серия» при наведении курсора */
div#series .img-border:hover, div#series .img-border-small:hover {
 box-shadow: 0px 0px 4px 1px #0981c5;
}

 

Окно для отправки сообщений и сами сообщения

/* ---- Сообщения ---- */

/* --- Меняем цвет слова «Текст сообщения» */
div#pane-0 div .comment .top-info{
 color: #d7e0e6;
}

/* --- Меняем цвет слов «Подписка активна», «Выкл. редактор» */
div#pane-0 .comments .subscription, div#pane-0 a {
 color: #156899;
}

/* --- Повышаем непрозрачность «ответить, удалить» */
div#pane-0 .hover-controls.controls {
 opacity: 0.80;
}

/* ---- Меняем цвет «ответить, удалить» */
div#pane-0 .controls a {
 color: #156899;
}

/* --- Меняем цвет «ответить, удалить», «Подписка активна», «Выкл. редактор» при наведении курсора */
div#pane-0 .controls a:hover, div#pane-0 .comments .subscription:hover, div#pane-0 a:hover {
 color: #299de1;
}

/* --- Меняем текст сообщений отзывов и делаем его на 10% прозрачней */
div#pane-0 div.message p {
 color: #d7e0e6;
 opacity: 0.9;
}

/* ---- Убираем фон и меняем цвет текста кнопки «Оставить отзыв» и сдвигаем её */
div#pane-0 div.buttons button, div#pane-0 div.buttons .button {
 color: #d7e0e6 !important;
 background: transparent;
 border: 10px solid transparent;
 border-radius: 0px;
 box-shadow: none;
 opacity: 0.75;
 margin: -10px;
}

/* ---- Добавляем рамку к кнопке «Оставить отзыв» при наведении курсора */
div#pane-0 div.buttons button:hover, div#pane-0 div.buttons .button:hover {
 border: 10px solid transparent;
 border-image-source: url(«http://s19.postimg.org/tpjx3xqwz/target_25.png»);
 border-image-slice: 50%;
 color: #d7e0e6 !important;
 opacity: 1;
}

/* --- Делаем рамку для редактора сообщений и сообщений */
div#pane-0 .comment .message {
 border-radius: 0px;
 border: 10px solid transparent;
 border-image-source: url(«http://s19.postimg.org/4ncsdcv43/target.png»);
 border-image-slice: 50%;
 border-image-outset: 2px;
 background: url(http://s19.postimg.org/alm09uooz/Opisanie_fon.png);
 background-origin: border-box;
 outline: 1px solid #092a3e;
}

/* ---- Добавляем фон на панель инструментов в режиме «редактор»*/
div#pane-0 .defaultSkin table.mceToolbar {
 background: url(http://s19.postimg.org/vr1kfuef7/button_sob_igrat_active.png);
 border: 1px solid #105379;
}

/* --- Добавляем рамку к иконкам при наведении в режиме «редактор» */
div#pane-0 .defaultSkin a.mceButton:hover {
 background: url(http://s19.postimg.org/68wniwupv/target_icons.png) no-repeat;
 border-radius: 0px;
 background-position-y: -5px !important;
}

/* --- Меняем цвет элем. панели инструменов */
div#textarea-container .editor-button {
 color: #156899;
}

/* --- Меняем цвет подсветки инструментов при наведении курсора */
div#textarea-container .editor-button:hover {
 background-color: #092a3e;
 border-radius: 0px;
 opacity: 0.75;
}

 

Всякие мелочи

/* ---- Всякие мелочи ------ */

/* ---- Меняем цвет ссылок «хранитель», «вклад в игру» и «серия»*/
div#left-block p a, #contribution-block .smaller, div#series div a {
 color: #156899;
}

/* ---- Меняем цвет ссылок «хранитель», «вклад в игру» и «серия» при наведении курсора */
div#left-block p a:hover, #contribution-block .smaller:hover, div#series div a:hover {
 color: #299de1;
}

/* --- Меняем цвет полоски опыта (простая замена картинки)*/
div#contribution-block .good {
 background: url(http://s19.postimg.org/fy17d4gw3/exp_bar.png) repeat-x scroll 00 transparent;
}

/* ---------------------- */

 


Демо-код2

Спойлер

/* Фиксируем фон */
body {
background-attachment: fixed;
}

/* --- Задаем цвет текста для всех заголовков! */
h2, h3, h4, .sub-title {
color: #bfcdd6;
}

/* Заменяем фон у центральной цасти страницы, добавляем рамку, задаем цвет текста и снижаем прозрачность*/
div.layout-content {
background: rgba(39,151,255,0.2);
opacity: 0.8;
color: white;
border: 1px solid rgba(255, 255, 255, 0.1)
}

/* Заменяем фон и цвет текста кнопок «Задать вопрос», «Написать статью», «Написать новость», «Оставить отзыв» и т.д. */
a.button, div#pane-0 div.buttons button {
background: url(http://s19.postimg.org/kdpdkgv43/dot.png), #061649;
border-radius: 3px;
border: 1px solid rgba(70, 170, 210, 0.2);
box-shadow: none;
color: rgb(220,220,220) !important;
}

/* Добавляем свечение при наведении курсора на эти кнопки */
a.button:hover, div#pane-0 div.buttons button:hover {
background: url(http://s19.postimg.org/kdpdkgv43/dot.png), #061649;
text-shadow: 2px 0px 5px #0680b7;
border: 1px solid rgba(70, 170, 210, 0.4);
color: white !important;
}

/* --- Меняем фон «Даты релизов» */
#releases td {
background: rgba(39,151,255,0.2);
}

/* Подгоняем рамку превьюшек в «Галерея» и «Управл. изображениями» */
div#items a.photobox.item.photo, a.lightbox.photo {
height: 65px;
}

/* Меняем фон в «Файлы» */
div.layout-content .content table th {
background: rgba(3,0,76,0.5);
border-radius: 0px;
text-shadow: none;
}

/* Меняем цвет слов "Без категории в «Файлы» и цвет дат в «Хроника» */
p.category-title b, #activity ul li.date {
color: whitesmoke
}

/* Меняем цвет ссылок «Редактировать», «Удалить», «Модерировать», «Перейти к списку альбомов», «хранитель», «вклад в игру», «серия», «Подписка активна», «Выкл. редактор» */
div#releases .controls a, div#forum a#moderator-mode.internal, div#forum a#mark-as-read.internal, div#main-block a, div#left-block p a, #contribution-block .smaller, div#series div a, div#pane-0 .comments .subscription, div#pane-0 a, div.span-36.left-labels.last a {
color: #16628e;
}

/* Меняем цвет этих ссылок при наведении курсора */
div#releases .controls a:hover, div#forum a#moderator-mode.internal:hover, div#forum a#mark-as-read.internal:hover, div#main-block a:hover, div#left-block p a:hover, #contribution-block .smaller:hover, div#series div a:hover, div#pane-0 .comments .subscription:hover, div#pane-0 a:hover, div.span-36.left-labels.last a:hover {
color: #299de1;
}

/* --- Заменяем старый фон и убираем старые стили в «Дата релизов» */
div.span-36 .content table th {
background: rgba(39,151,255,0.2);
border-radius: 0px;
text-shadow: none;
}

/* Подгоняем размер превьюшек в «Хроника»*/
#activity .photo {
height: 45px;
}

/* --------- Инфо таблица -------*/

/* Заменям фон у инфо.таблицы, убираем старые стили*/
#page-info {
background:rgba(3,0,76,0.5);
border: none;
border-radius: 0px;
text-shadow: none;
}

/* Растягиваем по ширине инфо. текст */
div#page-info .data-block table {
width: 113%;
}

/* Добавляем для всех превьюшкам скриншотов рамку и подгоняем её под их размер */
div#page-info #gallery-block .photo, .photo {
height: 45px;
margin: 8px 5px;
background: none;
border: 1px solid #153545;
}

/* Подсвечиваем рамку у всех превьюшек у скриншотов и обложек при наведении курсора */
div#page-info #gallery-block .photo:hover, .photo:hover, div#page-info #photo-container img:hover, div.cover:hover, div#items a.photobox.item.photo:hover {
border: 1px solid #104677;
}

/* Добавляем рамки ко всем обложкам и делаем их на 10% прозрачней */
div#page-info #photo-container img, div.cover {
border: 1px solid rgba(20,50,70, 0.5);
opacity: 0.9;
}

/* Меняем цвет ссылок в инфо таблице при наведении курсора */
#page-info table a:hover, #page-info .photo a:hover, #page-info #gallery-block a:hover {
color: #156899;
}

/* Убираем фон под овальными кнопочками */
#page-info .darkbar {
background: none
}

/* Задаем овальным кнопочкам и кнопкам внизу стили, делаем рамку и заменяем фон */
#page-info .dark-button, .tools-tabs-2 a {
background: url(http://s19.postimg.org/kdpdkgv43/dot.png), #061649;
border-radius: 3px;
border: 1px solid rgba(70, 170, 210, 0.2);
box-shadow: none;
color: rgb(220,220,220) !important
}

/* Добавляем свечение для активных овальных кнопок */
div#game-buttons .active.dark-button {
text-shadow: 2px 0px 5px #0680b7;
color: white;
border: 1px solid rgba(70, 170, 210, 0.5);
}

/* Добавляем овальным кнопочкам и кнопкам внизу тень для текста и рамку при наведении курсора */
div#game-buttons .dark-button:hover, .tools-tabs-2 a:hover {
text-shadow: 2px 0px 5px #0680b7;
border: 1px solid rgba(70, 170, 210, 0.6);
color: white !important;
}

/*----------- Меню игры ------------ */

/* Заменям фон и цвет текста у «Меню игры» */
div#left-block .head-bar {
background: url(http://s19.postimg.org/wxk1ou2df/blood.png) no-repeat;
color: white;
}

/* Увеличиваем размер ссылки «Меню игры» */
div#left-block .head-bar a {
font-size: 15px;
}

/* ----- Меняет цвет ссылок, их размер, стиль */
div#left-block li a {
color: white;
font-size: 13px;
font-weight: bold
}

/* Выравниваем ссылки */
ul.left-menu li {
margin: 0;
margin-top: 2px;
margin-left: 18px;
}

/* Добавляем рамку для ссылок при наведении курсора*/
div#left-block li a:hover {
border-top: 1px solid white;
border-bottom: 1px solid white;
}

/* Убираем градиент слева */
.left-block-corner-top {
background: none
}

/* Убираем градиент слева */
.left-block-middle {
background: none
}

/* Убираем градиент слева */
.left-block-corner-bottom {
background: none
}

/*---------- Кнопки внизу ---------- */

/* Чуть сдвигаем кнопки внизу */
.tools-tabs-2 a {
padding: 5px;
}

/* Заменяем фон у активной кнопки внизу, добавляем рамку, меняем цвет текста */
.tools-tabs-2 a.current {
background: #1b6db8;
border: 1px solid rgba(70, 170, 210, 0.6);
color: white !important;
}

/* ------------------- */

/* Меняем цвет полоски опыта (простая замена картинки) */
div#contribution-block .good {
background: url(http://s19.postimg.org/fy17d4gw3/exp_bar.png) repeat-x scroll 00 transparent;
}

 


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

История обновлений

v1.05

— Обновлена информация по многим свойствам и также добавлены свойства position, clip, float, transition, visibility, z-index. Добавленa в «Полезные советы» информация по rgba. Добавлен «Демо-код2».

v1.04

— Добавлен раздел «Всякие полезности».

v1.03

— Добавлен раздел «Курсор. Курсор и его замена на свой». Убрал примеры использования со страниц для «Бонус. Анимированные спрайты на фоне» дабы не засирать страницы левым контентом.

v1.02

— Обновил описание некоторых свойств и добавил свойство «top, bottom, left, right». Добавлен раздел «Шрифт. Шрифт и его замена». Также добавил костыль-код(для Мику) для IE 11 в «Бонус. Анимированые спрайты на фоне».

v1.01

— Лаги, баги, шмаги, все в лучших традициях первых версий. Незабываемые ощущения гарантированны.

 

P.S.S. Я хотел добавить полезных ссылок (онлайн палитра, css-генератор градиентов, спец.сайт по css и т.д.), но не знаю можно ли их добавлять (ссылки на сторонние ресурсы). Поэтому их нет. Но вы можете сами легко нагуглить все это, так что ничего страшного.

P.S.S.S. Если вы оформили при помощи CSS профиль/страничку игры, то пишите мне, я добавлю сюда ссылку. Думаю, всем, кто захочет оформить свой профиль/страничку игры, будет интересно посмотреть на другие оформления, что также может прибавить им энтузиазма =)

Автор Ranmabaka 1 октября 2016, 21:11 (834 просмотра)
Комментарии

О, пригодится. Единственное что, мне бы хотелось отдельно в начале список названия всех кнопок и обозначений с которыми можно возиться на странице игры. А то пример отдельных провели, что с ними можно сделать сказали, но о ком конкретно идет речь на страницах игры, не поведали. Зато хоть в самих примерах рассказали кто и на кого происходит влияние редактора CSS, так что можно и так сориентироваться.

Спасибо за блог.

Статья наверняка нужная, смущают лишь фразы «Все остальное лучше почитать на специализированных сайтах. Там ничего сложного.», почитать то можно, но вот один момент, эта заметка останется тут, а вот инфа на спец.сайтах как и сами спец.сайты могут со временем кануть в лету)

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

Да вряд ли. CSS — это не торрент с редким японским андерграундом, а фундаментальный инструмент вёрстки сайтов, обвалить спецификацию по которому можно только в случае отключения интернета как такового, да и то её 100% начнут на дисках продавать в ларьках потом. :D

Статья отличная, спасибо!

Да вряд ли. CSS — это не торрент с редким японским андерграундом, а фундаментальный инструмент вёрстки сайтов, обвалить спецификацию по которому можно только в случае отключения интернета как такового, да и то её 100% начнут на дисках продавать в ларьках потом. :D

А, ну раз так, тогда ты прав) Раз это настолько все популярно и в любой момент легкодоступно, то да, тут можно часть описать, а часть нет. Видимо поэтому я не стал плюсовать заметку :D 

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

+5

Единственное что, мне бы хотелось отдельно в начале список названия всех кнопок и обозначений с которыми можно возиться на странице игры.

Мы можем легко узнавать это сами. В Файрфоксе -- правый клик по интересующему элементу и Q. В появившемся окне смотрим название. В Опере это Ctrl+Shift+C.

+5

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