^

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

+214

image

 Думаю, что многие хотели бы оформить страничку игры или свой профиль, но не знание 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 мы теперь можем изменить элемент как хотим. (Вы так же можете «переключать» id тыкая на строчки в левой части окна (HTML код) )

                      image

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

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

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

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

 Самые простые селекторы бывают:

  • по идентификатору (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 пишем то, что хотим с ним сделать. Вот и все.

 


ВОЗМОЖНОСТИ (Свойства, псевдоклассы, псевдоэлементы, функции) 

Предисловие

 В CSS довольно много свойств и на начальном этапе все сразу и не запомнишь, так что я решил немного помочь вам разобраться на что в первую очередь обратить внимание. Сначала постарайтесь запомнить следующие свойства: color — меняет цвет текста, background — меняет фон (цвет, изображение, градиент), border/outline — создают рамку, border-radius — закругляет края, box-shadow/text-shadow — создают тени. Как освоитесь с этим то: linear/radial gradient — создают градиенты, opacity — меняет прозрачность, width/height — меняют ширину/высоту, top/bottom/left/right — задают координаты, hover — меняет стить при наведении курсора мыши, !important — повышает приоритет стиля. Потом эти: margin/paddin — задают отступы, transform — позволяет вращать/перемещать/маштабировать/наклонять, transition — создает плавный переход от одного состояния в другое, z-index — задает позицию элемента по оси Z (глубина), before/after — создают новый элемент, position — задает положение элемента относительно других. Ну, а когда со всем этим освоитесь, то уже изучайте все остальное. Рекомендую сначала почитать про остальные единицы измерения, подробней про transition, nth-child и nth-of-type, почитать про animation, @media, @supports, display и flex. Удачи =)

 

Основы

> Свойства.

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

 

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-size 

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

  Позволяет вам управлять размером фонового изображения, которое вы указали для background. Имеет несколько значений среди которых интересны только три: cover — растягивает изображение так, чтобы его высота и ширина равнялись высоте и ширине элемента, внутри которого оно находится; contain — сохраняя пропорции изображения, старается сделать так, чтобы изображение поместилось полностью (но при этом оно уже может не занимать полностью весь элемент, внутри которого оно находится); проценты/пиксели — позволяют задать ширину и высоту в процентах или пикселях (записываются два значения через пробел). Из своего опыта могу сказать, что contain полная хрень, да и от cover пользы мало. Так что самое нормальное тут это проценты/пиксели. Ну и никто не запрещает попробовать самим и посмотреть как оно. Из примеров… например, вам нужно, чтобы фон для инфотаблицы (жанр, дата выхода, разраб и т.д.) растягивался на весь блок, независимо от его размера:

#page-info {
 background: url(fon.jpg) no-repeat;
 background-size: 100% 100%;
}

  Управлять можно не только размером изображения, но и размером цвета, только в этом случае его нужно задавать через градиент. Например, добавим вертикальную полоску кнопкам под описанием, шириной в 3 пикселя и находящуюся слева (результат можно оценить у меня в профиле):

.tools-tabs-2 a {
 background: linear-gradient(to top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%) repeat-y, rgba(25, 25, 25, .65);
 background-size: 3px;
}

 

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

 

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 можно глянуть в этом оформлении.

 

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

 

box-sizing

  Записывается: box-sizing: значение

 Например, есть у вас элемент 100х100 пикселей, если вы добавите к нему рамку в 2 пикселя, используя border, то теперь его высота и ширина будут 104х104 пикселя. При этом соседние элементы будут сдвинуты на величину значения border, что не всегда хорошо. Так вот, используя свойство box-sizing вы можете управлять тем, как свойство border будет влиять на размер элемента. Имеет два значения: content-box — является стандартным и оно нам не интересно, но вот второе значение border-box как раз то, что позволит нам добавить рамку элементу, не увеличивая его размеров. Единственное, нужно быть осторожным т.к. рамка теперь будет создаваться как бы внутрь элемента, тем самым уменьшая свободную область внутри него. Например, рамка «внутрь» для кнопок под описанием:

.tools-tabs-2 a {
  border: 2px solid red;
  box-sizing: border-box;
}

 

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

 

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)
<}</span>

Самое интересное в градиенте то, что с помощью него можно создавать фоны разной формы. Например, в этом оформлении форма кнопок создана через использование градиента. Сами смотрите. Мы можем задать угол. Задать цвет, при этом вы можете задать несколько цветов (в том числе и прозрачный), их позицию, а также размер. Комбинируя эти значения можно достичь интересных результатов. Единственное условие то, что нужно также добавить в код «background-repeat: no-repeat», а также управлять размером фона, используя свойство «background-size».

 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: тип трансформации(значение) 

 Позволяет трансформировать элемент:

  • scale3d(X, Y, Z) — маштабирует (увеличивает/уменьшает) элемент по осям X, Y и Z. Базовое значение равно 1, которое соответствует 100% размеру элемента (например, 1.2 — это 120%, a 0.5 — 50%). Есть также возможность задать маштабирование отдельно для каждой оси используя scaleX(), scaleY, scaleZ();
  • rotate3d(X, Y, Z) — вращает элемент в трехмерном пространстве. Угол вращения задается в градусах(deg). Есть также возможность вращать элемент на каждой оси отдельно используя rotateX(), rotateY(), rotateZ(). Для вращения в двухмерном пространстве можно использовать rotate();
  • skew(X, Y) — наклоняет элемент на заданный угол по осям X и Y. Угол задается в градусах(deg);
  • translate3d(X, Y, Z) — сдвигает элемент на указанное значение по осям X, Y и Z. Значение можно задавать как в пиксклях(px), так и в процентах. Есть также возможность задать значение отдельно для каждой оси используя translateX(), translateY(), translateZ(). Для сдвига в двухмерном пространстве можно использовать transtate();
  • matrix() — задает матрицу для преобразований. Есть также возможность задать трехмерную матрицу, используя matrix3d();
  • perspective() — задает перспективу. Значение задается в пикселях;

 Можно все это комбинировать вместе просто перечисляя тип трансформации через пробел. Если нужно пропустить какую-либо ось, то просто используйте для её значения 0. Например, все кнопки внизу наклонены на 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;
 display: block;
 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 и т.д., если же вы хотите применить переход для всех свойств, то просто пишете all. Функция же указывает на скорость и как элемент будет изменяться и могут иметь значения:

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. Единственное, с чем нужно быть внимательным то, что свойство opacity аннулирует значения z-index. Поэтому при задавании z-index какому-нибудь элементу задавайте его прозрачность через rgba (смотри раздел «Полезные советы»)

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

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 и :nth-of-type

 :nth-child — позволяет выбрать нужный элемент внутри родителя исходя из указанного типа элемента и порядкового номера, а :nth-of-type — выбрать элемент исходя из указанного типа элемента и порядкового номера в этом типе. Т.е. :nth-child ищет совпадения заданых условий, а :nth-of-type — сначала ищет указаный тип элемента и в нем уже ищет порядковый номер. Например, нужно вам как-то выделить через :nth-child красным ссылку «Файлы» в «меню игры», которая является в списке 7 по счету (список + 7) в списке(li): 

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

 Можно использовать вместе с :hover: и будет выглядеть так “ul.left-menu li:nth-child(7):hover” . Можно использовать, например, для того, чтобы задать каждой ссылке в «Меню игры» отдельный фон, цвет и т.д.  

 

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

 

:nth-first-child и :nth-last-child, :nth-first-of-type и :nth-last-of-type

 Тоже самое, что и :nth-child и :nth-of-type, только указанный стиль применяется только к первому(:nth-first-child, :nth-first-of-type) или последнему(:nth-last-child, :nth-last-of-type) элементу.

 

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

 

:active

 Позволяет задать стиль элемента в момент нажатия (удержания) левой кнопки мыши.

 

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

 

 :not

 Позволяет задать исключение. Нельзя использовать составные селекторы (т.е., например, .left-menu li a работать не будет, нужно указать только или .left-menu или li или a) и вместе с псевдоэлементами. Например, меняем цвет всех ссылок в «Меню игры» на красный кроме последней ссылки:

.left-menu li a:not(:last-child) {
 color: red;
}

 

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

 

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

Тоже не парьтесь. Псевдоэлементы приписываются к 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:nth-child(2)::before {
 content: «!»;
 color: red
}

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

 

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

 

::first-letter

 Позволяет задать стиль первой букве в тексте. Можно использовать, например, для выделения первой буквы каждого обзаца:

p::first-letter {
 color: red;
 font-size: 16px;
 font-weight: bolder;
}

 

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

 

::selection

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

p::selection {
 color: yellow;
 background: black;
}

 

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

 

> Функции

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

cacl()

Записывается: свойство: calc(математическая формула)

 Позволяет вам проводить несложные математические вычисления, такие как сложение(+), вычитание(-), деление(/) и умножение(*) (знаки + и — должны отбиваться пробелами с двух сторон). В качестве значений могут быть использованны размер, угол, время или число. В основном используется для динамического изменения координат или размера элемента, например, при изменении размера окна браузера. Ну, например, нужно вам чтобы элемент всегда занимал по ширине треть от размера окна браузера и вы пишете в этом элементе: width: cacl(100%/3).

 


ШРИФТ 

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

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

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

Свойства:
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 и веб-шрифт это одно и тоже, разница лишь в том, что при использовании @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. Вы можете использовать стандартизированные шрифты, которые есть у каждого пользователя Windows. Какие шрифты являются стандартизироваными вы можете посмотреть в интернете.

P.S.S.S. Если у вас не работает импор шрифта, то смотри раздел "Баги SquareFaction".

 


КУРСОР 

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

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

Курсор.

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

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

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

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

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

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

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

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

  


Создаём свои классы или использование CSS для оформления описания или статей 

Спойлер

 Помимо возможности к оформлению внешнего вида страниц в CSS также есть возможность создавать свои классы (стиль оформления), которые можно использовать для оформления описаний или статей. Что, в свою очередь, сильно расширяет ваши возможности к оформлению т.к. возможности стандартного редактора сильно ограничены. И да, для создания своего класса вы, в первую очередь, должны иметь доступ к CSS т.е. быть хранителем, иметь 10 уровень (вроде), а также базовые знания по CSS.

 Сам процесс создания класса очень прост и весь синтаксис выглядит так: .<названия класса на свой вкус> { оформление } и потом название этого класса (уже без точки) прописываем в код редактора (в которым вы пишете статьи, сообщения и т.д.) между < и >, используя для этого тег class="имя нашего класса". Т.е. как уже кто-то смог заметить создание класса практически не отличается от смены оформления уже готовых классов (точка в начале и все). CSS код своего класса пишется там же, где и основной CSS код. Ну, на примерах все будет куда понятнее :)

 1) Например, у загружаемых изображений отсутствует рамка из-за чего они выглядят как-то не очень, но создав свой класс, вы можете легко это исправить. Назовем его, например, imgborder и добавим картинкам при его помощи серенькую рамку в 1 пиксель, уберем закругление краев и добавим еще синенькое свечение. Жмякаем «Оформление -> CSS» и пишем:

.imgborder {
  border: 1px solid #797979;
  border-radius: 0px;
  box-shadow: 0px 0px 3px 0px rgba(68, 158, 213, 0.9);
}

 Теперь загружаем нужную вам картинку и в коде редактора сообщений добавляем ко второй ссылке (если вы используете не оригинальный размер изображения) изображения (т.к. именно это изображение отображается) к свойству class имя нашего класса и все будет выглядить примерно так: 

<a class="noback lightbox" href="/files/user/118932/storage/20171225144758_5fb2730c.jpg"><img class="margins imgborder" alt="image" src="/files/user/118932/storage/350x350/20171225144758_5fb2730c.jpg" /></a>

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

.imgborder:hover {
  animation: glow 1.2s ease-in-out infinite alternate;
}

@keyframes glow {
 0% {border-color: #797979;}
 100% {border-color: #2da4ed;}
}

 2) Или, например, вы захотители поменять цвет текста в определенных местах на красный, а в другом месте на синий. Тогда сначала созданим два класса redtext и bluetext для этого:

.redtext {
  color: darkred;
}

.bluetext {
  color: dodgerblue;
}

  Теперь, в редакторе в коде для текста прописываем в нужных местах наш класс, используя для этого тег <span> и код будет выглядить примерно вот так:

<p>блаблаблабла блаблабла <span class="redtext">тут будет красный текст</span> блаблаблаблабла <span class="bluetext">а тут будет синий текст</span></p>

***

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

 1) Например, захотели вы что бы тег strong (жирный текст) был не черного, а зеленого цвета. То, выглядить это будет вот так:

strong {
 color: green;
}

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

 2) Или например, вы захотели, чтобы в каждом обзаце первая буква была жирной и красного цвета, то тогда код будет выглядить вот так:

p:first-letter {
 color: red;
 font-weight: bolder;
}

 В общем, при создании своего класса вы облажаете теми же возможностями, что и при модификации уже имеющихся. Если вы хотите использвовать несколько классов сразу, то просто перечисляете их имена через пробел т.е. примерно так class="effect1 effect2 superramka textshadow". Так что все остальное зависит только от ваших навыков в CSS и вдохновления. Все выше приведенные примеры (кроме последнего) можно увидеть в действии на в этой статье к игре Valkyrie Chronicle 4. Удачи =)

 


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

Спойлер

Секреты id. 

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

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

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

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

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

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

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

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

 Просто смотрите налево от id вашего элемента и ищете id, начинающийся на div#, div. , # или . и приписываете его id к своему элементу в начало через пробел. Иногда можно просто вписать левый (соседний) 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).

P.S. В Chrome можно посмотреть id элемента просто наведя на него курсор мыши в HTML коде. Ткнув же там же на него правой кнопкой, можно переключить его в режим :hover, :active, :focus и :visited, что позволяет сразу в «редакторе стилей» увидить код на эти события, если они есть.

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

Группировка

 Если вы задаете разным элементам одни и те же свойства, то чтобы не прописывать одно и тоже каждый раз вы можете их сгруппировать. Для это вы просто перечисляете все 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. Например, у всех кнопок внизу белый фон и он прозрачный на 60%:

 .tools-tabs-2 a {
   background: rgba(255,255,255, 0.4); /* 0.4 это 40% непрозрачности*/
  }
 

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

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

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

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

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

 Как это не странно, но разные браузеры могут делать одно и тоже по-разному или вообще не делать. Поэтому нужно проверять страничку в нескольких браузерах. Я лично рекомендую проверять все в Internet Explorer, потому что в нем многое может не работать. И да, IE пользуется куча народу и не важно как у вас припекает от 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: 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 анимации, а продолжительность через свойство animation. Если вы хотите разместить анимацию поверх страницы, то вам нужно изменить значение z-index на положительное, а также обязательно нужно добавить в код строчку pointer-events: none иначе картинки заблокируют элементы страницы, находящиеся под анимацией.

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

 

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

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

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

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

body::before {
 content: ' ';
 display: 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: 91%; transform: scaleX(-1);}
 100% {left: 10px; transform: scaleX(-1);}
}

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

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

body::before {
 content: ' ';
 display: block;
 height: 120px;
 width: 160px;
 top: 85%;
 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:before {
 content: ' ';
 display: block;
 height: 100%;
 width: 100%;
 top: 0px;
 left: 0px;
 background: url(https://i.imgur.com/N7tJgmR.png);
 position: fixed;
 z-index: 3;
 pointer-events: none;
 opacity: .9;
 animation: noise 2s linear infinite;
 -webkit-animation: noise 2s linear infinite;
}

@keyframes noise {
 0% {background-position: 0px 0px;}
 50% {background-position: 900px 1200px;}
 100% {background-position: 1800px 2400px}
}

@-webkit-keyframes noise {
 0% {background-position: 0px 0px;}
 50% {background-position: 900px 1200px;}
 100% {background-position: 1800px 2400px}
}

 Если хотите меньшить силу «шума», то уменьшите значение свойства opacity. Если же хотите усилить, то удалите свойство opacity или замените текстурку шума на более мощную (в интернете есть генераторы текстур).

 

Эффект старого фильма

 Создает эффект старого фильма для всей страницы. Хорошо идет в паре с эффектом «Шум». Все вместе можно заценить тут.

body::before {
 content: ' ';
 height: 100%;
 width: 100%;
 background: url(https://i.imgur.com/jEpyaKA.png);
 position: fixed;
 background-size: 80%;
 z-index: 3;
 pointer-events: none;
 animation: oldfilm 1.2s linear infinite;
 -webkit-animation: oldfilm 1.2s linear infinite;
}

@keyframes oldfilm {
 0% {background-position: 0px 0px, 0px 0xp; opacity: 0.8;}
 50% {background-position: 200px 2500px, 0x 0px; opacity: 0.3;}
 100% {background-position: 400px 6000px, 0px 0px; opacity: 0.7;}
}

@-webkit-keyframes oldfilm {
 0% {background-position: 0px 0px, 0px 0xp; opacity: 0.8;}
 50% {background-position: 200px 2500px, 0x 0px; opacity: 0.3;}
 100% {background-position: 400px 6000px, 0px 0px; opacity: 0.7;}
}

 Естественно, вы можете заменить текстурку на более реалистичную, там самым усилив эффект.

 

Звездное небо

 Создает фон в виде анимированного звездного неба с плывущем по нему облаком. Можно заценить тут.

body::before {
 content: ' ';
 position: fixed;
 top: 0;
 left: 0;
 background: url(https://i.imgur.com/wpvIDMx.png) repeat-x top center, url(https://i.imgur.com/7gNeztf.png)   repeat top center, url(https://i.imgur.com/LomDQM5.png) repeat top center, black;
 width: 100%;
 height: 100%;
 z-index: -1;
 animation: star_sky 200s linear infinite;
 -webkit-animation: star_sky 200s linear infinite;
}

@keyframes star_sky {
 from {background-position: 0 0, 0 0, 0 0, 0 0;}
 to {background-position: 2500px 0, 3000px 1100px, 0 0, 0 0;}
}

@-webkit-keyframes star_sky {
 from {background-position: 0 0, 0 0, 0 0, 0 0;}
 to {background-position: 2500px 0, 3000px 1100px, 0 0, 0 0;}
}

 Вы можете добавить, например, луну или даже НЛО. Можно также удалить облака и добавить планету или астероидов получив тем самым космический фон.

 

Эффект ЭЛТ телевизора

 Создает эффект ЭЛТ телевизора (полоски и мигание).

body::after {
 content: " ";
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: rgba(18, 16, 16, 0.1);
 opacity: 0;
 z-index: 3;
 pointer-events: none;
 animation: crt_blink 0.15s infinite;
}

body::before {
 content: " ";
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg,  rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
 z-index: 3;
 background-size: 100% 2px, 3px 100%;
 pointer-events: none;
}

@keyframes crt_blink {
0% {
 opacity: 0.27861;
}
5% {
 opacity: 0.34769;
}
10% {
 opacity: 0.23604;
}
15% {
 opacity: 0.90626;
}
20% {
 opacity: 0.18128;
}
25% {
 opacity: 0.83891;
}
30% {
 opacity: 0.65583;
}
35% {
 opacity: 0.67807;
}
40% {
 opacity: 0.26559;
}
45% {
 opacity: 0.84693;
}
50% {
 opacity: 0.96019;
}
55% {
 opacity: 0.08594;
}
60% {
 opacity: 0.20313;
}
65% {
 opacity: 0.71988;
}
70% {
 opacity: 0.53455;
}
75% {
 opacity: 0.57288;
}
80% {
 opacity: 0.71428;
}
85% {
 opacity: 0.70419;
}
90% {
 opacity: 0.7003;
}
95% {
 opacity: 0.36108;
}
100% {
 opacity: 0.54387;
}
}

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

@keyframes crt_textshadow {
 0% {
text-shadow: 0.43px 0 1px rgba(15,90,130,0.5), -0.43px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
5% {
 text-shadow: 2.8px 0 1px rgba(15,90,130,0.5), -2.8px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
10% {
 text-shadow: 0.03px 0 1px rgba(15,90,130,0.5), -0.03px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
15% {
 text-shadow: 0.40px 0 1px rgba(15,90,130,0.5), -0.40px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
20% {
 text-shadow: 3.48px 0 1px rgba(15,90,130,0.5), -3.48px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
25% {
 text-shadow: 1.61px 0 1px rgba(15,90,130,0.5), -1.61px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
30% {
 text-shadow: 0.70px 0 1px rgba(15,90,130,0.5), -0.70px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
35% {
 text-shadow: 3.89px 0 1px rgba(15,90,130,0.5), -3.89px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
40% {
 text-shadow: 3.87px 0 1px rgba(15,90,130,0.5), -3.87px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
45% {
 text-shadow: 2.23px 0 1px rgba(15,90,130,0.5), -2.23px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
50% {
 text-shadow: 0.08px 0 1px rgba(15,90,130,0.5), -0.08px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
55% {
 text-shadow: 2.37px 0 1px rgba(15,90,130,0.5), -2.37px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
60% {
 text-shadow: 2.2px 0 1px rgba(15,90,130,0.5), -2.2px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
65% {
 text-shadow: 2.86px 0 1px rgba(15,90,130,0.5), -2.86px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
70% {
 text-shadow: 0.48px 0 1px rgba(15,90,130,0.5), -0.48px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
75% {
 text-shadow: 1.89px 0 1px rgba(15,90,130,0.5), -1.89px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
80% {
 text-shadow: 0.083px 0 1px rgba(15,90,130,0.5), -0.083px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
85% {
 text-shadow: 0.097px 0 1px rgba(15,90,130,0.5), -0.097px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
90% {
 text-shadow: 3.4px 0 1px rgba(15,90,130,0.5), -3.4px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
95% {
 text-shadow: 2.1px 0 1px rgba(15,90,130,0.5), -2.1px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
100% {
 text-shadow: 2.6px 0 1px rgba(15,90,130,0.5), -2.6px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
}

/* Если использовать как класс для текста (если не хотите применять эффект искажения ко всей странице) */
.crt_text {
 animation: crt_textshadow 1.6s infinite;
}

 Для еще большего усиления эффекта можно также создать эффект цветового искажения рамок.

/*---Анимация искажения рамки */
@keyframes crt_boxshadow {
0% {
 box-shadow: 0.43px 0 1px rgba(15,90,130,0.3), -0.43px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
5% {
 box-shadow: 2.3px 0 1px rgba(15,90,130,0.3), -2.3px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
10% {
 box-shadow: 0.03px 0 1px rgba(15,90,130,0.3), -0.03px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
15% {
 box-shadow: 0.40px 0 1px rgba(15,90,130,0.3), -0.40px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
20% {
 box-shadow: 2.28px 0 1px rgba(15,90,130,0.3), -2.28px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
25% {
 box-shadow: 1.61px 0 1px rgba(15,90,130,0.5), -1.61px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
30% {
 box-shadow: 0.70px 0 1px rgba(15,90,130,0.3), -0.70px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
35% {
 box-shadow: 2.49px 0 1px rgba(15,90,130,0.3), -3.49px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
40% {
 box-shadow: 2.57px 0 1px rgba(15,90,130,0.3), -2.57px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
45% {
 box-shadow: 2.23px 0 1px rgba(15,90,130,0.3), -2.23px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
50% {
 box-shadow: 0.08px 0 1px rgba(15,90,130,0.3), -0.08px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
55% {
 box-shadow: 2.37px 0 1px rgba(15,90,130,0.3), -2.37px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
60% {
 box-shadow: 2.2px 0 1px rgba(15,90,130,0.3), -2.2px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
65% {
 box-shadow: 2.46px 0 1px rgba(15,90,130,0.3), -2.46px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
70% {
 box-shadow: 0.48px 0 1px rgba(15,90,130,0.3), -0.48px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
75% {
 box-shadow: 1.89px 0 1px rgba(15,90,130,0.3), -1.89px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
80% {
 box-shadow: 0.083px 0 1px rgba(15,90,130,0.3), -0.083px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
85% {
 box-shadow: 0.097px 0 1px rgba(15,90,130,0.3), -0.097px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
90% {
 box-shadow: 2.32px 0 1px rgba(15,90,130,0.3), -2.32px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
95% {
 box-shadow: 2.1px 0 1px rgba(15,90,130,0.3), -2.1px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
100% {
 box-shadow: 2.3px 0 1px rgba(15,90,130,0.3), -2.3px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
}

 Все это вместе можно заценить тут (полный код страницы представлен в разделе демо-код1)

 

Эффекты для текста

Цветовое искажение текста

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

.tools-tabs-2 a:hover {
 background: black;
 animation: rgbglitch 4s infinite;
 -webkit-font-smoothing: antialiased;
}

@keyframes rgbglitch {
0% {
text-shadow:
 2px 0px 2px rgba(255,0,0,0.5),
 -2px 0px 2px rgba(0,255,255,0.5);
}

12% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

25% {
text-shadow:
 -4px 0px 2px rgba(255,0,0,0.5),
 2px 2px 2px rgba(0,255,255,0.5);
}

37% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

40% {
text-shadow:
 -0px 4px 2px rgba(255,0,0,0.5),
 -4px 0px 2px rgba(0,255,255,0.5);
}

42% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

43% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 10px 2px rgba(0,255,255,0.5);
}

44% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

46% {
text-shadow:
 -4px 2px 2px rgba(255,0,0,0.5),
 -4px 0px 2px rgba(0,255,255,0.5);
}

50% {
text-shadow:
 -0px 2px 2px rgba(255,0,0,0.5),
 -2px 0px 2px rgba(0,255,255,0.5);
}

62% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

75% {
text-shadow:
 0px -4px 2px rgba(255,0,0,0.5),
 2px 0px 2px rgba(0,255,255,0.5);
}

86% {
text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

87% {
text-shadow:
 2px 0px 2px rgba(255,0,0,0.5),
 7px px 2px rgba(0,255,255,0.5);
}

89% {
 text-shadow:
 0px 0px 2px rgba(255,0,0,0.5),
 0px 0px 2px rgba(0,255,255,0.5);
}

100% {
 text-shadow:
 2px 0px 2px rgba(255,0,0,0.5),
 0px -2px 2px rgba(0,255,255,0.5);
}
}

 

Анимация «печатающего» текста

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

h1, h2, h3, h4, .sub-title {
 width: 100%;
 white-space: nowrap;
 overflow: hidden;
 animation: type 2.5s steps(60, end);
}

/* ----Анимация печатанья текста */
@keyframes type {
 from { width: 0;}
 to { width: 100%; }
}

 Поигравшись со значением steps можно добиться более реалистичного эффекта.

 

Меню игры

Меню игры «Ленточки»

Меняет стандартное оформление «Меню игры» на «Ленточки». Можно заценить тут.

/* Меню игры «Ленточки» */

div#left-block ul.left-menu, div#options-block {
 left: -30px;
}

div#left-block .head-bar {
 border-radius: 0px;
 margin-bottom: 25px;
}

div#left-block .head-bar a {
 font-size: 15px;
 color: whitesmoke;
 text-shadow: 0px 0px 3px #bdb98c;
}

div#left-block li a {
 color: rgb(220,220,220) !important;
 text-shadow: 0px 0px 3px #bdb98c;
 font-size: 14px;
 font-weight: bold;
 display: inline-block;
 text-align: center;
 width: 134px;
 transition: all .4s;
}

div#left-block li {
 background: dimgray;
 box-shadow: 2px -1px 3px 0 black;
 transition: .4s;
 padding: 3px;
 margin-top: 10px;
 width: 100%;
}

div#left-block li::before {
 content: ' ';
 position: relative;
 border-style: solid;
 border-color: transparent;
 bottom: -5px;
 left: -3px;
 border-width: 0 10px 10px 0px;
 border-right-color: dimgray;
 z-index: -1 !important;
 transition: all .4s;
}

.left-menu li span {
 display: none;
}

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

div#left-block .sidebar-block li:hover, div#left-block li:hover::before {
 margin-left: -7px;
 border-width: 0 16px 10px 7px;
}

div#left-block li a:hover {
 color: darkorange !important;
 margin-left: -9px;
}

 

Темы

Blorange v1.0 Standart

 При ширине окна браузера выше 1250 пикселей заменяет стандартное оформление странички игры на более широкоэкранное с вынесенным отдельно меню, чтобы максимально эффективно использовать свободное место. Можно заценить тут и тут . Из основных особенностей также можно выделить, что рамки под изображения автоматический подгоняются и выравниваются, ну, и всякие эффекты. Тема будет работать во всех современных браузерах т.е. IE10+, FireFox 20+, Chrome 29+, Opera 12+, Safari 6.1+. Лично мною была проверена в IE 11.0.9600, Chrome 63.0.3239 и Firefox 57.0.4 (может частично не работать, но виной тому могут быть пользовательские настройки безопасности). К сожалению, IE не очень хорош с анимацией, поэтому там она будет выглядеть немного рваной, но с этим уже ничего не поделаешь, браузер доживает свои последние годы. Так же тема пока находится в процессе разработки и улучшений, так что пока возможны мелкие баги, вроде разного расположения иконок в «Меню игры» в разных браузерах. Но в основном должна работать нормально, но если что пишите мне. Единственное, что не проверялось — это форум.

 Способ установки:

 Ткнуть на страничке «Оформление», перейти во вкладку «CSS», удалить там весь имеющийся css код (если есть) и вставить (только замените кавычки на стандартные кавычки):

@import url(«https://dl.dropboxusercontent.com/s/ftty3dqlm0b3w2w/Blorange_standart.css») screen and (min-width: 1250px);
@import url(«https://dl.dropboxusercontent.com/s/vlvuo664q4krq6n/Menu_visible.css») screen and (min-width: 1250px);

 Если у вас уже установлено какое-то фоновое изображение, то: 1) смотрите раздел «Баги SquareFaction»; 2) Скопируйте полностью css код и вставьте себе в «Оформление», но тогда вы потеряете возможность автоматического обновления до последней версии.

 Дополнительные фичи

Установка: Просто копируем и вставляем код куда указано:

1) Добавляет иконки при наведение на ссылки в «Меню игры». Можно заценить тут. Установка — просто копируем ссылку и вставляем после кода для установки темы:

@import url(«https://dl.dropboxusercontent.com/s/hxua9bk6yqcyfxs/Icons_and_effects.css») screen and (min-width: 1250px);

2) Убирает «Меню игры» за пределы экрана (левая часть) и показывает его при наведении курсора. Можно заценить тут. Просто заменяем вторую строку кода (там где Menu_visible) на строчку внизу:

@import url(«https://dl.dropboxusercontent.com/s/a4m8lym5vrlrng1/Menu_hide.css») screen and (min-width: 1250px);

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

  

Blorange v 1.0 Modern Dark (будет переделано)

 За основу был взят «Blorange v1.0 Modern», но был переделан под темный фон, а также претерпел различные визуальные изменения и улучшения. По-умолчанию уголки для превьюшек у скриншотов и фон для заголовков (h3, h4) отключен (закомментирован) т.к. их нужно подгонять вручную, но их код вы можете найти в конце css файла. Тема пока находится в процессе доработки, так что возможны различные изменения. Заценить все можно тут.

Способ установки:

 Ткнуть на страничке «Оформление», перейти во вкладку «CSS», удалить там весь имеющийся css код (если есть) и вставить (только замените кавычки на стандартые кавычки):

@import «https://dl.dropboxusercontent.com/s/712tq5vb3c8np8n/Blorange_flex_modern_dark.css»;

 Если у вас уже установлено какое-то фоновое изображение, то: 1) смотрите раздел «Баги SquareFaction»; 2) Скопируйте полностью css код и вставьте себе в «Оформление», но тогда вы потеряете возможность автоматического обновления до последней версии.

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

 Дополнительные фичи

Установка: Просто копируем и вставляем код после ссылки на импорт

1) Превью для скриншотов в виде хексов. Не работает в IE любой версии, но смотрится все равно норм. Можно заценить тут:

div#page-info .container .photo {
 width: 60px;
 height: 50px;
 background: darkorange;
 box-shadow: none;
 clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

div#page-info .container .photo img {
 position: absolute;
 width: 56px;
 height: 46px;
 top: 2px;
 left: 2px;
 right: 2px;
 bottom: 2px;
 clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

div#page-info #gallery-block .photo:nth-child(1) {
 left: 65px;
 top: -8px;
}

div#page-info #gallery-block .photo:nth-child(2) {
 left: -72px;
 top: 18px;
}

div#page-info #gallery-block .photo:nth-child(3) {
 left: 18px;
 top: 7px;
}

div#page-info #gallery-block .photo:nth-child(4) {
 left: -25px;
 top: -19px;
}

div#page-info #gallery-block .photo:nth-child(5) {
 left: 65px;
 top: -31px;
}

div#page-info #gallery-block .photo:nth-child(6) {
 left: -72px;
 top: -5px;
}

 

Всякое разное

Эффект сворачивания и разворачивания/Прелоадер

 Создает на ваш выбор эффект сворачивания или разворачивания. Можно, например, применить как прелоадер для страницы или разворачивания каких-то её элементов (я использовал для разворачивания сообщений на этой странице, код можно найти в разделе демо-код1). В качестве примера приведен прелоадер для страницы, с задержкой перед анимацией в 3 секунды и продолжительностью самой анимации в 2 секунды:

body::before {
 content: ' ';
 position: fixed;
 display: block;
 background: black;
 width: 100%;
 height: 100%;
 animation: svernut 2s ease-out 1 forwards;
 animation-delay: 3s;
 pointer-events: none;
 z-index: 5;
 opacity: 1; /* 0 если нужно развернуть */
}

@keyframes razvernut {
0% {
 opacity: 0;
 transform: scale(0.5, 0.005);
 box-shadow: inset 0 9999px 0 rgba(15, 15, 15, 1.0);
}
40% {
 opacity: 1.0;
}
70% {
 transform: scale(1.0, 0.005);
 box-shadow: inset 0 9999px 0 rgba(15, 15, 15, 1.0);
}
100% {
 transform: scale(1.0, 1.0);
}
}

@keyframes svernut {
0% {
 transform: scale(1.0, 1.0);
 opacity: 1.0;
}
40% {
 transform: scale(1.0, 0.005);
 box-shadow: inset 0 9999px 0 rgba(15, 15, 15, 1.0);
}
70% {
 opacity: 1.0;
}
100% {
 opacity: 0;
 transform: scale(0.5, 0.005);
 box-shadow: inset 0 9999px 0 rgba(15, 15, 15, 1.0);
}
}

 В место черного фона можно вставить какое-нибудь изображение или надпись, а может и то и другое. Там уж сами придумаете =)

 


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

 

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

body {
 background-attachment: fixed;
}

  

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

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

 

 Простой блок от копирования текста

.description.content, div#entry {
  user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}

 


 Баги SquareFaction 

@import

 Команда @import не работает, если фоновое изображение загружено через «Оформление». Если хотите, чтобы фоновое изображение заработало, то просто загрузите его на внешний файл хост и вставьте ссылку на него в следующий css код, который нужно будет поместить уже после команды @import (не забудьте поставить галку «Удалить изображение» в «Оформлении»): 

body {
 background-image: url(ссылка на ваше изображение);
 background-repeat: no-repeat;
}

 


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

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

 Код не дописан местами (отстутствует оформление статей, новостей и форума т.к. их просто нет), но в качестве образца вполне норм. Код проверялся только в Internet Explorer 11.0.49 и Google Chrome 63.0.3239.


Демо-код1

Спойлер

/* Фиксируем фон всей страницы при прокрутке */
body {
background-attachment: fixed;
}

/* ------- Основной фон и текст ------ */

/* --- Текст всех заголовков + анимация печатанья */
h1, h2, h3, h4, .sub-title {
color: #bfcdd6;
width: 100%;
white-space: nowrap;
overflow: hidden;
animation: type 2.5s steps(60, end), crt_textshadow 1.6s infinite;
}

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

/* ---- Меняем центральный фон + рамка */
div.layout-content {
background: url(https://i.imgur.com/m6ZJ1zu.png);
border: 1px solid #092a3e;
min-height: 950px !important;
border-radius: 0px;
box-shadow: 0px 0px 4px #092a3e;
color: whitesmoke;
}

/* ----- Меняем цвет всех ссылок */
#layout-wrapper a {
color: skyblue;
}

/* ----- Меняем цвет всех ссылок при наведении курсора */
#layout-wrapper a:hover {
color: deepskyblue;
}

/* Делаем единую рамку для обложек и скиншотов */
#gallery-block .photo, #photo-container img, #activity .photo, #entries .entry .entry-short-text img, #releases .cover, div#series .img-border-small, .photo {
border-radius: 0px;
border: 1px solid #061f2e;
animation: crt_boxshadow 1.6s infinite;
}

/* Делаем единый эффект при наведении на обложки и скиншоты */
#gallery-block .photo:hover, #photo-container img:hover, #activity .photo:hover, #entries .entry .entry-short-text img:hover, #releases .cover:hover, div#series .img-border-small:hover, .photo:hover {
border-radius: 0px;
border: 1px solid #01415c;
box-shadow: 0px 0px 4px 0px rgba(12, 129, 199, 0.7);
animation: glow 1s ease-in-out infinite alternate, crt_boxshadow 1.6s infinite;
}


/* ----------- Информация об игре-------*/

/* ------------ Меняем фон и делаем прямые края */
#page-info {
background: url(https://i.imgur.com/g0SHdWk.png);
border-radius: 0px;
border: 1px solid #01415c;
}

/* --- Чуть растягиваем инфо таблицу */
div#page-info .data-block table {
width: 113%;
}

/* ----- Меняем цвет раздел.полосок */
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;
}

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

/* ----- Меняем цвет ссылок (оф.сайт, жанр и т.д.)*/
#page-info table a {
color: cadetblue;
}

/* ----- Меняем цвет ссылок (оф.сайт, жанр и т.д.) при наведении курсора */
#page-info table a:hover {
color: dodgerblue;
}

/* ----- Подгоняем размер превьюшек у скриншотов */
#gallery-block .photo {
width: 70px;
border-radius: 0px;
background: none;
}

/*--- Добавляем рамку и фон к превьюшкам скриншотов в инфо.таблице */
#gallery-block {
background: url(https://i.imgur.com/pYHNc73.png) no-repeat left bottom, url(https://i.imgur.com/lJkc9qP.png) no-repeat right bottom, url(https://i.imgur.com/yQj7277.png) no-repeat left top, url(https://i.imgur.com/4cJu2k0.png) no-repeat right top, rgba(3, 57, 112, 0.1);
background-size: 3%;
}

/*---Чуть сдвигаем превьюшки скриншотов */
#gallery-block .container {
margin-left: 10px;
}

/*---Выравниваем ссылки под превьюшками*/
#gallery-block a {
margin-left: 45px;
}

/*---Овальные и остальные кнопки---*/

/* --------- Добавляем панеле рамку (только верх) и убираем фон */
#page-info .darkbar {
background: none;
border-top: 1px solid #02587d;
}

/* -------- Меняем форму кнопок на стандартную (прямоугольную) и задаем цвет текста и фон*/
div#game-buttons .dark-button, #layout-wrapper .button {
background: linear-gradient(to right, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.75) 100%), url(https://i.imgur.com/fF3Y0LA.png), #0371a2;
color: rgb(220,220,220) !important;
border-radius: 0px;
box-shadow: none;
border: 1px solid #0981c5;
}

/* ----------- Заменяем фон активных кнопок у dark button */
div#game-buttons .active.dark-button {
background: url(https://i.imgur.com/P0IoRC8.png) repeat-x;
color: whitesmoke !important;
}

/* ------ Подсветка кнопок при наведении курсора */
div#game-buttons .dark-button:hover, #layout-wrapper .button:hover {
box-shadow: 0px 0px 5px 1px #0981c5;
border: 1px solid #0981c5;
color: whitesmoke !important;
}

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

/* -------------- Заменяем фон «Меню игры», убираем стили и задаем фиксир.размер */
div#left-block .head-bar {
background: url(https://i.imgur.com/Kb02qp7.png) no-repeat;
border: none;
border-radius: 0px;
max-width: 150px;
max-height: 0px;
}

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

/* ---- Добавляем основной фон под ссылки и корректируем его позицию */
div#left-block {
background: url(https://i.imgur.com/tZsncPL.png) no-repeat;
background-position-y: 30px;
}

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

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

/* ----- Меняет цвет ссылок при наведении курсора */
div#left-block li a:hover {
color: deepskyblue;
}

/* --- Добавляем указатель при наведении курсора на ссылки */
div#left-block ul.left-menu li a:hover::before {
content: ' ';
background: url(https://i.imgur.com/emaLLyR.png) no-repeat 0px 3px;
width: 11px;
height: 11px;
display: block;
position: absolute;
left: 18px;
padding-top: 5px;
}

/* ----- Убираем числа степени */
.left-menu li span {
display: none;
}

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

/* --- Меняем цвет полоски опыта */
div#contribution-block .good {
background: url(https://i.imgur.com/c2GUWKy.png) repeat-x scroll 00 transparent;
}

/* -----------Глобальная рамка и фон----------- */

/* ---- Делаем рамку и фон к описанию, задать вопрос, редактор сообщ, сообщениям и убираем фон */
div#main-block .content, div#question-block, div#series, div#pane-0 .comment .message {
background: rgba(3, 57, 112, 0.25);
color: aliceblue;
border-radius: 0px;
border: 10px solid transparent;
border-image-source: url(https://i.imgur.com/0EKVXoP.png);
border-image-slice: 50%;
border-image-outset: 2px;
outline: 1px solid #092a3e;
}

/*---Убираем галку в описании (проверка)*/
.grade-c, .grade-b, .grade-d, .grade-e {
display: none;
}

/* ---- Сообщения и Редактор сообщений---- */

/* --- Меняем цвет «Текст сообщения», сообщений и даты */
div#pane-0 div.message p, div#pane-0 div .comment .top-info, div#pane-0 div .comment a.secondary-text {
color: #d7e0e6;
opacity: 0.95;
}

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

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

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

/* ---- Добавляем фон на панель инструментов в режиме редактора */
.defaultSkin table.mceToolbar {
background: url(https://i.imgur.com/56RZCuQ.png);
border: 1px solid #105379;
}

/* --- Добавляем рамку к иконкам при наведении в режиме редактор */
.defaultSkin a.mceButton:hover {
background: url(https://i.imgur.com/40vaLPG.png) no-repeat !important;
border-radius: 0px;
background-position-y: -5px !important;
background-size: 99% !important;
}

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

/* --- Меняем цвет подсветки инструментов при наведении курсора и добавляем рамку */
.editor-button:hover {
background: #061d2b;
border-radius: 0px;
outline: 1px solid #09293c;
opacity: 0.75;
}

/*---- Подразделы----*/

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

/* Подгоняем рамку превьюшек в «Галерея» и «Управление изображениями»*/
a.photobox.item.photo, .photos-list .photo {
width: 105px !important;
}

/* --- Заменяем старый фон и убираем старые стили в «Дата релизов» + рамка */
#releases td, div.span-36 .content table th {
background: url(https://i.imgur.com/F3P7DLE.png);
border-radius: 0px;
text-shadow: none;
color: whitesmoke;
border: 1px solid #092a3e;
}

/* ---Меняем фон «Файлы», цвет текста + рамка */
div.layout-content .content table th, .files {
background: url(https://i.imgur.com/F3P7DLE.png) 100px;
border-radius: 0px;
text-shadow: none;
color: whitesmoke;
border: 1px solid #01415c;
}

/*--- Меняем цвет заголовков в «Файлы» и цвет дат в «Хроника» */
div#files .category-title b, div#activity .leaf {
color: whitesmoke;
}

/* ----Кнопки внизу (отзывы, прошли и т.д.) */

/*---Задаем кнопкам рамку, цвет текста и убираем фон */
.tools-tabs-2 a {
background: none;
border: 1px solid #01415c;
border-radius: 0px;
text-shadow: none;
color: whitesmoke;
padding-bottom: 1px;
}

/*---Добавляем анимацию при наведении на кнопки */
.tools-tabs-2 a:hover {
animation: glow 1s ease-in-out infinite alternate, crt_textshadow 1.6s infinite, crt_boxshadow 1.6s infinite;
}

/*---Задаем активной кнопке рамку, цвет текста и убираем фон */
.tools-tabs-2 a.current {
background: #7f031f;
color: whitesmoke !important;
border: 1px solid #01415c;
}

/*---Слегка подсвечиваем фон при клике на кнопки */
.tools-tabs-2 a:active, .tools-tabs-2 a.current:active {
background: rgba(3, 57, 112, 0.33);
}

/* ----Анимация и эффекты */

/* ----Анимация свечения рамки */
@keyframes glow {
0% {border-color: #01415c;}
100% {border-color: #0480b4;}
}

@-webkit-keyframes glow {
0% {border-color: #01415c;}
100% {border-color: #0480b4;}
}

/* ----Анимация печатанья текста */

@keyframes type {
 from { width: 0;}
 to { width: 100%; }
}

@-webkit-keyframes type {
 from { width: 0;}
 to { width: 100%; }
}

/* --- Эффект телевизора */

body::after {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(18, 16, 16, 0.1);
opacity: 0;
z-index: 3;
pointer-events: none;
animation: crt_blink 0.15s infinite;
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 3;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

@keyframes crt_blink {
0% {
 opacity: 0.27861;
}
5% {
 opacity: 0.34769;
}
10% {
 opacity: 0.23604;
}
15% {
 opacity: 0.90626;
}
20% {
 opacity: 0.18128;
}
25% {
 opacity: 0.83891;
}
30% {
 opacity: 0.65583;
}
35% {
 opacity: 0.67807;
}
40% {
 opacity: 0.26559;
}
45% {
 opacity: 0.84693;
}
50% {
 opacity: 0.96019;
}
55% {
 opacity: 0.08594;
}
60% {
 opacity: 0.20313;
}
65% {
 opacity: 0.71988;
}
70% {
 opacity: 0.53455;
}
75% {
 opacity: 0.57288;
}
80% {
 opacity: 0.71428;
}
85% {
 opacity: 0.70419;
}
90% {
 opacity: 0.7003;
}
95% {
 opacity: 0.36108;
}
100% {
 opacity: 0.54387;
}
}

/* ---- Эффект искажения всего текста */

@keyframes crt_textshadow {
0% {
 text-shadow: 0.43px 0 1px rgba(15,90,130,0.5), -0.43px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
5% {
 text-shadow: 2.8px 0 1px rgba(15,90,130,0.5), -2.8px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
10% {
 text-shadow: 0.03px 0 1px rgba(15,90,130,0.5), -0.03px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
15% {
 text-shadow: 0.40px 0 1px rgba(15,90,130,0.5), -0.40px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
20% {
 text-shadow: 3.48px 0 1px rgba(15,90,130,0.5), -3.48px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
25% {
 text-shadow: 1.61px 0 1px rgba(15,90,130,0.5), -1.61px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
30% {
 text-shadow: 0.70px 0 1px rgba(15,90,130,0.5), -0.70px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
35% {
 text-shadow: 3.89px 0 1px rgba(15,90,130,0.5), -3.89px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
40% {
 text-shadow: 3.87px 0 1px rgba(15,90,130,0.5), -3.87px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
45% {
 text-shadow: 2.23px 0 1px rgba(15,90,130,0.5), -2.23px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
50% {
 text-shadow: 0.08px 0 1px rgba(15,90,130,0.5), -0.08px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
55% {
 text-shadow: 2.37px 0 1px rgba(15,90,130,0.5), -2.37px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
60% {
 text-shadow: 2.2px 0 1px rgba(15,90,130,0.5), -2.2px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
65% {
 text-shadow: 2.86px 0 1px rgba(15,90,130,0.5), -2.86px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
70% {
 text-shadow: 0.48px 0 1px rgba(15,90,130,0.5), -0.48px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
75% {
 text-shadow: 1.89px 0 1px rgba(15,90,130,0.5), -1.89px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
80% {
 text-shadow: 0.083px 0 1px rgba(15,90,130,0.5), -0.083px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
85% {
 text-shadow: 0.097px 0 1px rgba(15,90,130,0.5), -0.097px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
90% {
 text-shadow: 3.4px 0 1px rgba(15,90,130,0.5), -3.4px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
95% {
 text-shadow: 2.1px 0 1px rgba(15,90,130,0.5), -2.1px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
100% {
 text-shadow: 2.6px 0 1px rgba(15,90,130,0.5), -2.6px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
}

/* Если использовать как класс для текста (если не хотите применять эффект искажения ко всей странице) */
.crt_text {
animation: crt_textshadow 1.6s infinite;
}

/*---Анимация искажения рамки */
@keyframes crt_boxshadow {
0% {
 box-shadow: 0.43px 0 1px rgba(15,90,130,0.3), -0.43px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
5% {
 box-shadow: 2.3px 0 1px rgba(15,90,130,0.3), -2.3px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
10% {
 box-shadow: 0.03px 0 1px rgba(15,90,130,0.3), -0.03px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
15% {
 box-shadow: 0.40px 0 1px rgba(15,90,130,0.3), -0.40px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
20% {
 box-shadow: 2.28px 0 1px rgba(15,90,130,0.3), -2.28px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
25% {
 box-shadow: 1.61px 0 1px rgba(15,90,130,0.5), -1.61px 0 1px rgba(255,0,80,0.3), 0 0 3px;
}
30% {
 box-shadow: 0.70px 0 1px rgba(15,90,130,0.3), -0.70px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
35% {
 box-shadow: 2.49px 0 1px rgba(15,90,130,0.3), -3.49px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
40% {
 box-shadow: 2.57px 0 1px rgba(15,90,130,0.3), -2.57px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
45% {
 box-shadow: 2.23px 0 1px rgba(15,90,130,0.3), -2.23px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
50% {
 box-shadow: 0.08px 0 1px rgba(15,90,130,0.3), -0.08px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
55% {
 box-shadow: 2.37px 0 1px rgba(15,90,130,0.3), -2.37px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
60% {
 box-shadow: 2.2px 0 1px rgba(15,90,130,0.3), -2.2px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
65% {
 box-shadow: 2.46px 0 1px rgba(15,90,130,0.3), -2.46px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
70% {
 box-shadow: 0.48px 0 1px rgba(15,90,130,0.3), -0.48px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
75% {
 box-shadow: 1.89px 0 1px rgba(15,90,130,0.3), -1.89px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
80% {
 box-shadow: 0.083px 0 1px rgba(15,90,130,0.3), -0.083px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
85% {
 box-shadow: 0.097px 0 1px rgba(15,90,130,0.3), -0.097px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
90% {
 box-shadow: 2.32px 0 1px rgba(15,90,130,0.3), -2.32px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
95% {
 box-shadow: 2.1px 0 1px rgba(15,90,130,0.3), -2.1px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
100% {
 box-shadow: 2.3px 0 1px rgba(15,90,130,0.3), -2.3px 0 1px rgba(255,0,80,0.1), 0 0 3px;
}
}

/* ---Применяем искажение текста и рамок к ссылкам, тексту и кнопкам внизу */
div.layout-content, div#page-info, #releases td, div.span-36 .content table th, .tools-tabs-2 a {
animation: crt_textshadow 1.6s infinite, crt_boxshadow 1.6s infinite;
}

/* --- Т.к. нам не нужна анимация искажения рамки для редактора сообщений и других кнопок, то выносим их отдельно */
div#game-buttons .dark-button, #layout-wrapper .button, .editor-button, div#pane-0 div.buttons button, div#pane-0 div.buttons .button, button#submit {
animation: crt_textshadow 1.6s infinite;
}

/* --- Анимация разворачивания сообщений */
@keyframes razvernut {
0% {
 opacity: 0;
 transform: scale(.1, .008);
 box-shadow: inset 0 1000px 0 rgba(23, 129, 189, 1);
}
40% {
 opacity: 1.0;
}
70% {
 transform: scale(1, .008);
 box-shadow: inset 0 1000px 0 rgba(23, 129, 189, 1);
}
100% {
 transform: scale(1, 1);
}
}

/*--- Применяем анимацию разворачивания к сообщениям и редактора */
div#pane-0 .comment .message {
 animation: razvernut 1s ease-out 1;
}

 

Демо-код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.11

— Переделан раздел «Темы». Будут и дальнейшие изменения в этом разделе.

v1.10

— В раздел «Темы» добавлена тема «Blorange v1.0 Modern Dark».

v1.09

— В раздел «Свойства» добавлены свойства background-size и box-sizing. В раздел «Темы» добавлена тема «Blorange v1.0 Modern».

v1.08

— В раздел «Возможности» добавлено «Предисловие», а также псевдоклассы: «:nth-child и :nth-of-type», «:nth-first-child и :nth-last-child, :nth-first-of-type и :nth-last-of-type», «:active», «:not», псевдоэлементы: «::first-letter», «::selection» и функция «calc()». В раздел «Бонус» добавлены «Анимация „печатающего“ текста». Созданы новые разделы «Баги SquareFaction», а также «Темы». Также мелкие фиксы там и сям.

v1.07

— Добавлен раздел «Создаём свои классы или использование CSS для оформления описания или статей». В раздел «Бонус. Анимация фона» добавлены анимации: «Эффект „Шум“», «Эффект старого фильма», «Звездное небо», «Эффект ЭЛТ телевизора». В разделе «Бонус» созданы три подраздела «Эффекты для текста», «Меню игры» и «Всякое разное».

v1.06

— Полностью переписан «Демо-код1», а также добавлены мелкие фиксы для кодов в разделе «Бонус».

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

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

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

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

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

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

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

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

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

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

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

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

+5

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

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

+5

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