Всем привет! Решил я написать вторую по счёту запись и опять-таки по css. Подобной записи я не видел на Darkmoon, поэтому возможно, что я первый!)

И так, сегодня я расскажу вам как сделать рамку-картинку, которую вы видите сейчас… Я не буду подробно вникать в суть дела. Я расскажу вам, что вам следует знать и да, я не буду рассказывать как вам сделать картинки эти для рамки, я буду рассказывать про css код. Учтите это.

И так, давайте в начале взглянем на этот код:

#body section article {
padding: 70px;
background: url(https://media.discordapp.net/attachments/566856015858106378/583926651419754507/Fac4.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926651419754506/Fac3.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926650790739968/Fac1.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926650790739970/Fac2.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583925131542396929/hs2.png?width=77&height=231), url(https://media.discordapp.net/attachments/566856015858106378/583922542490681345/hs.png?width=77&height=231), url(https://media.discordapp.net/attachments/566856015858106378/583920723048005653/8.png?width=231&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583920722053824532/1.png?width=231&height=77), rgba(18,18,18,0.35);
background-position: top left, top right, bottom left, bottom right, left, right, top, bottom, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x, repeat;
}

Да, уж. На первый взгляд он покажется не понятным и простым набором букв, но это не так. И так, в начале хотелось бы сказать примечание: вы должны сделать 8 картинок. 4 картинки-квадраты углы. 2 боковые справа и слева, снизу и сверху.

Когда вы это сделали переходим к коду. Но, перед этим расскажу как делал я. Я просто взял рамку, и с помощью Ps touch прога на телефоне разделил рамку на 8 частей. И да из-за того, что я делал на телефоне получилось, кривовато, ну ли из-за того, что у меня руки не из того место растут). Также рекомендуется скачать все эти картинки. Ссылки на эти картинки в коде в скобках и по ним уже как трафарет накладывать на мою рамку свою. Как шаблон.

Ну, а теперь давайте перейдём непосредственно к коду.

#body section article { — Название блока кода.

padding: 70px; — это отступ от содержимого до края блока на 70 пикселей, в данном случае.

background: — фон.

Дальше, идут элементы уже этой рамки. Прошу запомнить, что за чем идёт.

Всё вот это:

url(https://media.discordapp.net/attachments/566856015858106378/583926651419754507/Fac4.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926651419754506/Fac3.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926650790739968/Fac1.png?width=85&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583926650790739970/Fac2.png?width=85&height=77),

Углы данной рамки.

Вот это:

url(https://media.discordapp.net/attachments/566856015858106378/583925131542396929/hs2.png?width=77&height=231), url(https://media.discordapp.net/attachments/566856015858106378/583922542490681345/hs.png?width=77&height=231),

Боковые стороны. (справа, слева)

И вот это:

url(https://media.discordapp.net/attachments/566856015858106378/583920723048005653/8.png?width=231&height=77), url(https://media.discordapp.net/attachments/566856015858106378/583920722053824532/1.png?width=231&height=77)

Верхняя и нижняя часть рамки.

rgba(18,18,18,0.35); — цвет фона.

background-position: top left, top right, bottom left, bottom right, left, right, top, bottom, center; — картинки, которые мы загрузили. Базовое знание англ. языка, поможет вам прочитать и понять.

Фон-позиция. вверх лево — 1я картинка, наш угол, правый верхний — наш угол находится сверху, справа и тд. Просто указываются позиции нашей картинки.

background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat-y, repeat-y, repeat-x, repeat-x, repeat; — код, который делает нашу рамкой, «рамочной», то что не обрывок, который сфотошопиили, а делает на весь экран, независимо от платформы на которой смотрят эту страницу. Ну, что я и просил обратить внимание. первые четыре: no-repeat, no-repeat, no-repeat, no-repeat — это наши углы. Они не повторяются. repeat-y, repeat-y, repeat-x, repeat-x боковые стороны по оси X и Y. а так же их отрицательные варианты.

Вот и всё! Я рассказал вам как сделать такую рамку и возможно в ваших отчетах я увижу ее.