Ваш путь по созданию творчества на сайте начался! Будь то первый отчет, анкета или же квента, все это не столь важно. Гораздо важнее ваше желание развивать творчество и подойти к этому с более креативной стороны. Для этого, как раз, вам и понадобится такая «функция», как CSS.

Но что же такое этот CSS и с чем его едят? Если переводить данную аббревиатуру сразу на русский, то вы получите такое название, как каскадные таблицы стилей. Но по-прежнему это мало, что вам сказало, верно?

Для простоты, страницу, на которой вы в данный момент сидите, можно было бы назвать капустой. Да-да, именно капустой. Но почему? Все просто, все на вашем экране состоит из слоев (элементов) и почти каждый этот слой вы сможете изменить. Вы сможете поменять первый лист нашей капусты (background), затем стиль шрифта, его положение и цвет. За все это отвечает именно панель CSS в редакторе творчества. Слой за слоем вы будете подстраивать изначальную страницу под характер или историю персонажа, события, или же подстраивать под ваш индивидуальный вкус.

Заинтересованы? Тогда начнем...






Однако, первое, с чем вы можете столкнуться, это отсутствие статуса «РОЛЕВИК». Данная плашка и дает вам доступ к редактированию страницы вашего творчества или профиля на сайте.

Чтобы получить «ролевик» вам необходимо зарегистрироваться у нас на сайте, пробыть на проекте неделю или же иметь творчество, которое вы уже разместили тут. После того, как первый пункт был успешно вами пройден, можете смело писать в канал #помощь дискорда Darkmoon'а.

Обратиться вы можете по следующей форме: @Администратор Выдайте статус ролевика (вставьте свою ссылку на профиль).

Или же — альтернативный вариант – подайте обращение ( rp-wow.ru/reports ) с текстом «Прошу выдать мне ролевика» .


И так, вам выдали заветную плашку, выполнив второй и заключительный пункт. Что же дальше? А дальше только интереснее, ведь вам предстоит оживление страницы, создание молчаливой истории, а может и не молчаливой, все зависит от вас.







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

Ваш полигон для работы весьма прост: сперва прочтите правило, что присутствует сразу в поле, а после начните творить! Но не забудьте, что код начнет работать только если в начале у вас будет <style>, а в конце </style>.

5.7. Не допускается использование CSS для скрытия важных элементов. К важным элементам относятся: 1) логотип Даркмуна, позволяющий вернуться на главную страницу 2) Название творчества (анкеты, квенты, отчета, гильдии) в текстовом формате, которое можно выделить и скопировать в буфер обмена 3) Оценка творчества и комментариев 4) Кнопки действий — профиль пользователя, понижение и повышения репутации творчества и комментариев, написание комментария 5) число просмотров, тэги 6) Кнопка редактирования творчества.

И так, первое, с чего бы можно было начать, это с заднего фона. Вариации различные, но расскажу об основных:

— Сплошной цвет. Порой, не хочется ничего броского и яркого, только один спокойный цвет. Данный ниже код поможет вам сменить первый слой вашей конструкции.

body {

background: #Цвет или же rgb(цвет);
padding: 0;
margin: 0;
}



— Изображение. Нет, просто цвет вам не подходит? Тогда воспользуйтесь фотографией или чьим-то артом с просторов интернета!



Так же вы можете перемещать нужное вам творчество со своего компьютера на сайт (https://imgur.com/), а после брать ссылку для бэкграунда.



— Анимация. Картинки вам мало… Тогда вставьте GIF. Оживите задний фон, точно так же, как оживили своего героя на сервере!

Здесь, вы можете играться, как только пожелаете, можете повторять картинку или гифку по всему заднему фону (Background-repeat:, вставляется по желанию), убрать в уголок только одной стороны, оставить все как есть (Background-position, вставляется по желанию) или же можете уменьшить, растянуть нужное изображение (background-size).

body {

background: url( ваша url ссылка на изображение ) no-repeat fixed;
background-size: cover; ( вставляется в код всегда )
}


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












Пожалуй, следующим шагом я рассмотрю полотно, на котором вы размещаете всю информацию или рассказ (body section article). Можно менять его размер, цвет, прозрачность и многое другое. Но все по порядку!



Начнем с размера полотна (width). От него зависит то, как будут располагаться остальные элементы всей структуры страницы. Например, на данной странице размер полотна увеличен, поэтому меню справа (Aside widget) пришлось увеличить так же и перенести вниз, для более аккуратного вида. Рассмотрим на примере кода этой страницы:

#body section article {
padding: 20px;
background: #270b08bd;
margin-bottom: 10px;
position: relative;
z-index: 0;
border-radius: 4px;
box-shadow: 0px 0px 7px #f06736;
width: 892px;
backdrop-filter: blur(3px);
border: double 4px #eb6036a3;
}



Размер, а именно ширина полотна, зависит от данной части самого кода!

width: (кол-во пикселей)px;

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




Вторая самая важная часть — прозрачность и цвет вашего «тела»(background). От нее зависит хотите ли вы видит сквозь данный элемент текст или же нет. Приведу парочку примеров:

1) Полностью прозрачный фон.

background: none;

2) Допустим сплошной черный цвет. (код цвета спокойно выдает любая поисковая система, играйтесь)

background: #000000;

3) Полупрозрачный бордовый, опять же к примеру.

background: rgba(128, 0, 0, 0.35)ж



Все это так же меняется, достаточно найти нужный вам код цвета!


Следующий элемент — рамка (border). От нее зависит не так чтобы много, но поиграться со стилем возможность есть.



1) DOTTED


2) DASHED


3) GROOVE


4) DOUBLE


5) SOLID


6) NONE (отсутствие рамки)


Сам пункт рамки (border) весьма содержательный.

Так есть код, меняющий радиус закругления углов у некоторых элементов (nav, article, aside widget, layout footer)!

border-radius: 0px 0px 0px 0px;

Помимо этого, вы можете менять и толщину рамки, и цвет, и прозрачность — все сразу в одной строке!

border: <вид рамки> <толщина в px> <цвет>;

Например:

border: dotted 4px #ad442a;

Данная выше вырезка из кода сделает вашу рамку из точек, слегка прозрачного оранжевого цвета.




Тень внутри рамки или же снаружи (box-shadow). Может помочь сделать фон тела более расплывчатым, создать иллюзию левитации на общем заднике, а так же создать вкупе с рамкой неоновый эффект.

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


box-shadow: 0px 0px 0px 0px #000;


Первый «пиксельный показатель» определяет направление тени по оси X, второй же показатель определяет направление по оси Y. Третий же устанавливает степень размытия самой тени (blur), ну а четвертый распространение и плотность (spread).


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

Так же есть еще один показатель для тени: outset или inset. От данной приписки перед размерными показателями ( inset 0px 0px 0px 0px) зависит направление вашей тени, внутрь или же наружу.



Если вы не вставили никаких дополнительных параметров, то тень автоматически будет направлена наружу!




— И последнее, о чем хотелось бы отметить, это размытие фона (backdrop-filter). Вещь весьма своеобразная. Подобный параметр поддерживают не все браузеры, да и не все версии даже у них.

backdrop-filter: blur(0px);

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



Со списком браузеров, которые поддерживают данный пункт можете ознакомится по ссылке: caniuse.com/#feat=css-backdrop-filter !








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

Сейчас мы начнем с меню справа (aside widget), так как оно включает в себя несколько важных элементов сразу.


1) Первый слой.

#body aside {
float: left !important;
width: 941px;
margin-bottom: 10px;
}


↑ Отвечает за размер меню и положение относительно пространства.


2) Второй слой.

aside .widget {
background: #270b08bd;
box-shadow: 0px 0px 10px #ff8836;
border: double 4px #eb6036a3;
}


↑ Регулирует основной цвет фоны меню, тень и рамку.


3) Третий слой.

.widget_user_avatar .user_info {
margin-bottom: 10px;
background: #c5bcc500;
border-radius: 4px;
}



↑ Отвечает за верхнюю панель с вашем именем и мини-аватаром.


4) Четвертый слой.

#body aside .menu, #body aside .menu li, #body section .menu, #body section .menu li {
list-style: none;
background: #fff0;
}



↑ Отвечает за нижнюю часть панели, не считая другой части с аватаром.


5) Пятый слой.

#body aside .menu li {
border-bottom: solid 1px #ecf0f100;
}




↑ Работает с «разделительной полосой» между кнопками.


6) Шестой слой.

#body aside .menu a, #body aside .menu span.item, #body section .menu a, #body section .menu span.item {
overflow: hidden;
display: block;
color: #ffce93;
text-decoration: none;
padding: 4px 10px;
padding-left: 36px;
}



↑ Элемент, отвечающий за текст меню, а так же его стиль шрифта (font-family, вставляется дополнительно).


Ура! Наше меню слева приобретает более приятный вид. А пункты элемента, сам код, становятся более понятными, ведь все так просто!







И вот мы дошли до верхнего меню(nav), которое так же стоит разобрать детально, на примере элемента с этой страницы!


nav {
height: 50px;
background: #270b08bd;
padding: 0;
margin-bottom: 10px;
font-size: 13px;
border: double 4px #eb6036a3;
box-shadow: 0px 0px 10px #ff8836;
width: 933px;
}



Все, как и в предыдущих пунктах, задний фон (background), размер (width, height), рамка (border), тень (box-shadow) и размер шрифта (font-size) — все это меняется, точно так же, как я описывала выше. Вы можете играться с цветами, шириной и высотой меню, как вам угодно!


Если вы хотите чтобы какой-то элемент сместился, в нашем случае сам текст, чтобы по расширению вертикально он находился по центру, вам потребуется элемент: margin; в данном новом фрагменте:



nav .menu {
float: left;
height: 50px;
line-height: 50px;
margin-top: <размер в px>;
}



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








Первая вещь, о которой чаще всего забывают — это верхняя панель (breadcrumbs) у тельца (body section article). Данный ниже отрывок позволит вам настроить весьма яркую и зачастую мешающую панель под свой вкус и предпочтения.


#breadcrumbs {
margin: -20px;
margin-bottom: 20px;
background: #ecf0f100;
padding: 0 10px;
position: relative;
}





Еще одна деталь, которую часто хотят менять, но путаются или же просто не знают как — логотип проекта (Logo). Напомню, что скрывать данный элемент не стоит, если не хотите нарушить правило.



#layout header #logo a, #layout header #logo > span {
display: block;
float: left;
width: 250px;
margin-left: 328px;
height: 50px;
background: url(ссылка на вашу картинку для Logo) no-repeat left center;
}


В лого вы можете вставлять и gif, и обычное изображение, а так же заглавную надпись с сайта (http://x-lines.ru/inscription/de.html). Так же данный сайт предоставляет код для вставки в поле вашего творчества той же заглавной надписи. Однако, если вы хотите ваш текст в логотип, вам потребуется ссылка на картинку, а не другие пункты, предоставляющие вам выбор. Вставляете ссылку в код, подгоняете размер в пикселях там же и вуаля!



Так же даю вам код на панель с самого внизу (layout footer). Слишком часто я замечаю, что о ней и вовсе забывают! А ведь она порой выбивается из общего вида...



#layout footer {
height: 60px;
color: #ffce93;
padding: 0 15px;
clear: both;
font-size: 12px;
border: double 4px #eb6036a3;
box-shadow: 0px 0px 10px #ff8836;
background: #270b08bd;
width: 905px;
}



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



Есть у нас любители музыки? А музыкального сопровождения для придачи своему творчества изюминки? Я расскажу о самом простом способе добавления аудио к себе на страницу. Данный код можете вставлять сразу в конце для удобства, перед </style>.


element.style {

}
.musicvideo {
height: 45px;
width: 45px;
position: fixed;
left: 20px !important;
top: 5% !important;
box-shadow: 0px 0px 5px #0000;
padding-bottom: 0%;
border: double 15px #5b737f66;
}



Данный код помогает вам настроить рамку для видео, то есть сделать ее где-то, допустим, в углу страницы, может прямо у тельца (body section article), главное правильно под себя настроить пиксели и рамку с тенью. Сделайте индивидуально под стиль страницы.

Для того, чтобы вывести в эфир само видео, вам нужно зайти на youtube и выбрать нужное, после нажимаете правой кнопкой мыши и выбираете функцию «copy embed code».

Вы благополучно скопировали код, а дальше нужно его вставить, дабы вышло так же, как на скрине ниже. P.s. элементы </style>, <br />, </div>, а так же <div class=«musicvideo»> нужно вставлять самостоятельно.

Подчеркнутые значения надо сделать равными тем, которые вы указали в тех же параметрах в коде элемента выше для рамки. А если вы хотите сделать автоматическое проигрывание музыки при заходе на страницу, в конце самой src ссылки укажите "?autoplay=1".

Пожалуйста, теперь у вас есть проигрыватель на странице вашего творческого мира!



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

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

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

Сайт: developer.mozilla.org/en-US/docs/Web/CSS



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

Я искренне надеюсь, что статья вам помогла, поэтому предлагаю договор! Если вы хотите продолжения и освещение более интересных и мелких деталей — отпишитесь и я сделаю все, ради вас!

Удачи на просторах Darkmoon'а, дорогой игрок!



05:47
4401