^

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

+214

CSS_test

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

 На сайте уже есть похожая запись по формлению профиля, но я хочю уделить внимание основному принципу работы и базовым возможностям по оформлению. Сам я только начал изучать 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

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

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

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

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

 

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

 

background 

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

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

 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. Например, нужно сдвинуть изображение-фон вправо на 10 пикселей у кнопки «Отзывы»:

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

 

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

 

border

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

                            image

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

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

 div#tabs a#nowplay-tab-button {
  border: 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
}

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

 

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

 

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 и radial-gradient

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

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

div#tabs a#comments-tab-button {
  background: linear-gradient(to top, # 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)
} 

 

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

 

box-shadow

 Добавляет тень к элементу. Самое забавное, что тень отбрасывается во все четыре стороны и ей можно задать цвет, что позволяет использовать её для различных эффектов, таких, например, как свечение, вдавленный текст, 3D и т.д. Записывается так: «box-shadow: 1 2 3 4 5», где: 1 параметр — смещение по x; 2 параметр — смещение по y; 3 параметр — размытие; 4 параметр — растяжение тени; 5 параметр — цвет. Можно перечислять значения через зяпятую, что позволяет добавить несколько теней с разными параметрами. Например, свечение вокруг кнопки «Отзывы»:

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

 По сути тоже самое, что и «box-shadow», только для текста. Записывается так: «text-shadow: 1 2 3 4», где: 1 параметр — смещение по x; 2 параметр — смещение по y; 3 параметр — размытие; 4 параметр — цвет. В интернете также есть css-генераторы, так что можно не грузиться лишний раз. Например, синяя тень для текста всех заголовков на странице: 

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

 

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

 

text-decoration

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

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

 Позволяют задать отступ. Разница лишь в том, что padding задает отступ элементам, находящимся внутри основного элемента, а margin задает отступ самого элемента относительно других или другого основного элемента, если он находится внутри него. Если говорить проще, то padding сдвигает все то, что находится внутри элемента, а margin сам элемент. Отступ можно задать как для каждой из четырех сторон, так и общий для всех. Записываются так: «margin/padding: значение». Лучше конечно почитать о них на специализированных сайтах, но вот пара примеров:

 Сдигает текст в кнопке «Поклонники» влево на 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 

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

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

 

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

 

width и height

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

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

 

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

 

top, bottom, left, right

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

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

 

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

 

!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(megacursor.png), состояние». И вот пару примеров:

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

#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 – убирают фон. 

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

Тот 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: ' ';
 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: ' ';
 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: ' ';
 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: ' ';
 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-код вот этой страницы. Все элементы на своих местах. Код для удобства разбит на части. Сразу скажу, что я нуб, поэтому там все очень просто написано и не оптимизированно. Кое что можно было сгруппировать, но я хотел чтобы было больше отдельных элементов, на случай, если у кого-нибудь возникнут проблемы с поиском id. Так как к игре нет никаких новостей и статей, то я не смог проверить все ли нормально с их отображением. В паре мест присутствует знак (!), который значит «я не понял как правильно сделать, так что сделал как смог». Также я почти не офомлял то, что видит только хранитель. И да, у фона к некоторым элементам уже была сделана рамка в Photoshop, поэтому в css-коде рамка уже не прописывалась.

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

 

Главный фон

/* Фиксируем фон всей страницы при прокрутке (фон загружен через «Оформление») */
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;
}

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

 


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

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

v1.04

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

v1.03

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

v1.02

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

v1.01

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

+5

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

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

+5

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