Оформление листов

4njpdyqtomea8wf94n77bpqozzemtwfi8e.png

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


myswa1kqeijo.png

j78ra1kqewswatkwktnirwa.png

< Для этого лично я пользуюсь двумя сайтами. X-Lines и OnLine-Letters >


На обоих сайтах элементарно доступный интерфейс, так что и ребенок разберется, что и к чему. Главное правило - выбирая экзотический и изощренный шрифт не забывайте о читаемости текста! Некоторые с этим перебарщивают.


4ns7bq6oszem3wfi4n67dysosdeabwf74gf7bpjyjbkr4uby4gbpbpqosxemoqo.png


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

3495124e5b49ff78bbf434c8d02e3027.png
Вот так выглядит html код картинки, вставленной через кнопку.
Самая простая вещь - размер изображения, часто не соотствествует желаемому. Меняется в строчке style="width: 200px;" изменение цифры в кавычках позволяет увеличивать/уменьшать размер. Так же строчку можно заменить на width="100" height="100" что позволит установить точные значения ширины и высоты. Да и вообще, с помощью этих параметров можно изменять числовое значение размеров (цифры в кавычках), как вам удобно!
С помощью тега <center> можно разместить ваше изображение, допустим заголовок, в центре листа.

101456b93a7d9cffc09650894f7279c0.png Тег align позволяет располагать изображение на одном уровне с текстом, пользуясь align="left" и align="right" мы выбираем ориентацию картинки. Выглядит код таким образом:
ce291147df89a47b10e93e895d9d50f3.png

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

Пользуясь командой <a href> можно заменить свою ссылку, допустим, на музычку в ютабчеке, на любой элемент, будь то текст, изображение или видео.
Пример.

4nxpdyqtomem7wcy4n9pbpsozzemhegos8embwcx4n61bwfardemzwcd4n77bpa.png
0e2a95c11624f2630f673177d541ba60.png




4nxpdyqozzem7wf14n67dn6osworgw4urdemiwf64n4pdn3y4n4pbq6tthopb8qoz5emdwf54n37bcgtodemjwfi4n67bcb4.png


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

1. white  /  red  /  black
2. #FFFFFF  /  #8f1414  /  #000000
3. rgba(255, 255, 255, 1)  /  rgba(255, 0, 0, 1)  /  rgba(0, 0, 0, 1) - что в перевод: красный/зеленый/синий/альфа (прозрачность).



Первый вариант, логично, содержит самый узкий спектр цветов, потому редко используется. Хорош, если вам нужен стандартный цвет, а цветового обозначения на латыни не знаете и лень искать.
Второй вариант известен всем, кто работает с ФШ. Легко подобрать цвет любого оттенка. Я пользуюсь сайтом HEX Color. Есть ещё один удобненький сайт.
Третий вариант указан в формате rgba потому, что позволяет изменять прозрачность цвета, что немаловажно, если вы хотите сделать приятный глазу бэкграунд самого листа или попросту визуально убрать ненужные элементы. Последнее число изменяется от 0 до 1 и как раз отвечает за прозрачность.



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

bff2171e54a4179aec53e232fecbe90b.png

Собственно, сам код.

.body-bg-8 { background: url("URL ссылка") no-repeat fixed; background-size: cover; }

Далее код заливки основного фона вашего листа. Я предпочитаю делать его прозрачным - rgba(0, 0, 0, 0.0)

.content .post {
background: цвет на ваш вкус;
}


Пример показан красным, т.е. тот цвет, который мы и выставили:
1c68fc845c6da06f69277f9cf5281c66.png

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

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

.col-md-9 {
 width: 100%;
}



Едем дальше - бэкграунд листа. Или говоря простым и русским языком - задний фон не страницы сайта с листом, а сама картинка под буквами.


.content.bg-base-img {
background: цвет на ваш вкус !important;
}


ed0400cb29bef4903eec80a256defdb0.png


Тот самый черный фон под листом на картинке. На примере выше он белый, под красным. Приятно смотрится с прозрачность около 0.4. Но никто не запрещает поставить и картинку в этот код;)

.content.bg-base-img {background: url("ссылка на необходимую картинку") !important; }

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

.content .post .testimonial{
background: (малиновый в примере)!important; }


66033f505ccce261f7158cf056738dfa.png




Цвет окон Портрет / Предыстория / Дополнительно - довольно важный аспект.


.content .post .wp-block {
background: цвет на ваш вкус (зеленый в примере);
}
Чтобы отключить их, достаточно прописать:
.wp-block.default > .wp-block-body h2 {
display: none
}




60edf630e5df059143037bce2ae0a6bb.png




Колонки основной информации:

Цвет шаблонной части колонки:

.col-sm-4 {
background-color: цвет на ваш вкус (желтый в примере);
}


Цвет заполняемой части колонки:

.content .info-list .row {
background: цвет на ваш вкус (зеленый в примере);
}


Цвет надписей в колонках:

.content .info-list .item {
color: цвет на ваш вкус (красный в примере);
}

c9170e2cd03bb4b9fb223c49d6ccdae2.png


Размер и цвет заголовка листа:



.wp-block.article.post .article-title {
font-size: 35px;
color: цвет на ваш вкус (зеленый в примере);
}




cc6320a348eae76a5a49391ac2581f8d.png





Цвет основного текста
, (также влияет на некоторые элементы на сайте) line-height отвечает за высоту между строками, margin-bottom за отступы от границ блока.

p { line-height: 25px; margin-bottom: 8px; color: purple; }


Данная строчка отвечает за рамочку на вашем листе. Не советую делать больше 1 пикселся, но если не поняли, о какой рамке речь, ставьте 20 и увидите.


.wp-block.default { 
border: *численное значение размера границы*px solid; 
border-color:*цвет HEX или RGB*; 
}
.wp-block.default  {
border: none;
}

Если же есть необходимость выключить рамку, то следует писать следующий код выше на одну строчку. Обратите внимание


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

.shadow-5 {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}

В этом коде и заключен весь секрет. Здесь представлен код, полностью отключающий данный параметр. Если хотите, вы можете попробовать поэкспериментировать и стилизовать её под ваш лист, как будет удобнее, достаточно в указанных местах менять числовые значения. Однако не стоит полностью выключать интерфейс данного кода (display:none), так как полностью исчезнет информация в информационных блоках.


Помимо таких нехитрых манипуляций, можно сказать, что мы выполнили половину основной задачи. Кстати, вы ещё не заметили новую функцию - спойлер?
Здесь, пускай и самый простой, но вполне неплохой спойлер:

<p>
 <a href="#" class="spoiler_links">Заголовок спойлера (а если уловчиться и почитать текст выше, где объясняется работа с картинками, можно попробовать и вставить картинку)</a><br><span class="spoiler_body">
Текст спойлера
 </span>
</p>

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

<p>
 <a href="#" class="spoiler_links">Музыка</a><br><span class="spoiler_body">
 <iframe width="120" height="115" src="https://www.youtube.com/embed/vf6jBP4YXwo?autoplay=0" frameborder="0" allowfullscreen="">
 </iframe>
 </span>
</p>

Как видите, плеер с ютуба можно: стилизовать, придав тому определенное значение по высоте и ширине, можно поставить автоматическое включение музыки, изменив параметр в "autoplay=0" с 0 на 1 (что крайне не рекомендуется - плохой той в веб-дизайне). Все довольно просто.


Что же нужно сделать, чтобы вашу картинку покрывала красивая рамочка? В этом нет никакой магии, достаточно просто прописать следующий код:

.article-image {
border: числовое значение размераpx цвет на ваш вкус solid;
 -webkit-border-radius: числовое значение размераpx; 
}
Дополнительно: если вы хотите сделать себе эффект "тени" от вашей заглавной картинки нужно использовать следующий код:
<p>
.avatar-lg {
box-shadow: 13px 15px 5px 0px rgba(0,0,0,0.75);
}
С цифрами попробуйте поэкспериментировать сами. Уверен, вам понравится)</p>

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

Цвет самих комментариев:
.bg-white {
    color: цвет на ваш вкус;
}
Цвет надписи "Комментарии пользователей" и "Комментировать":
#parent-comment, .comment-list .comment-count {
color: #52b3d9;
font-size: 30px;
}

И на последок - пару простеньких сочетаний HTML+CSS. Например - замена цветов текста. Как же это сделать?

Вся суть в таблице стилей:

.colorswap
{
        color: #цвет текста;
        transition: all 0.5s;
}
.colorswap:hover
{
        color: цвет "скрытого" текста;
}

И её HTML составляющей:

<p class="colorswap"> текст </p>

Вы тоже это видели? Да-да - это. А значит, у нас на очереди ещё и сокрытие картинки! Однако, должен предупредить, что редактор багает тег <di>. Поэтому, оформлять такое нужно с осторожностью - сначала пишем текст, а только потом вставляем код для картинки, сохраняя в специальном редакторе "код" (почти как "не отрывая от ботвы", должен быть только черный экран)

Таблица стилей под это чудо:

.fadePicl
img {
 opacity: 0.5;
transition: all 0.5s;
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
.fadePicl:hover
img {
 opacity: 1;
-webkit-filter: blur(0px);
 -moz-filter: blur(0px);
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}

И, разумеется, HTML составляющая:

<div class="fadePicl"> картинка </div>

Удачи вам и успешных творческих начинаний ;)

Автор: Fata Morgana Simbirsk Создано: 1 авг. 2016 г., 3:29:50 Обновлено: 2 нояб. 2017 г., 9:46:15

Комментарии пользователей

  1.   Merciless rozalba 1 авг. 2016 г., 10:03:46  

    Большое спасибо! Закрепляю тему, позже еще добавлю пару заметок.

  2.    Catherine 1 авг. 2016 г., 14:55:10  

    Совсем не поняла, как выставлять прозрачность :(

    •   Fata Morgana Simbirsk 1 авг. 2016 г., 20:15:58  

      Ставишь цвет в формате rgba и изменяешь последнее значение ближе к нулю. Значение ноль есть полная прозрачность. Пример: rgba(255, 150, 150, 0.4)

  3.    Realhumanbean 1 авг. 2016 г., 15:15:48  

    Посылаю любовь автору темы.

  4.    Grantovich 2 авг. 2016 г., 13:18:45  

    Большое спасибо!

  5.   Безбожник Dworfius 27 авг. 2016 г., 17:01:49  

    Ммм, Алудуин в Совнгарде)

  6.   Безбожник Dworfius 28 авг. 2016 г., 11:25:14  

    Подскажите пожалуйста, как залить в тему или сообщение музыку?

  7.   Твоя вайфу Minirael 2 окт. 2017 г., 18:22:54  

    UPD:

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


    Обновления продолжаются. Как де поменять цвет у линейки выше в вашей анкете?

    hr {
    margin: 15px 0;
    border-color: ваш цвет;;
    }
    

    Как же добавить шрифт и его использовать?


    @import url(ссылка на шрифт);
    И далее, там, где необходимо использовать индивидуальный шрифт в анкете, необходимо вставить в код:
    font-family: 'название шрифта';
    
    Хорошие новости. Тег div снова работает.
  8.   Неторопливый Walker 30 янв. 2018 г., 20:20:57  

    Большое спасибо автору!

  9.   Премудрая Serimichi 1 апр. 2018 г., 1:22:39  

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

  10.    Rapz 1 мая 2018 г., 10:48:25  

    Помогло, очень благодарен автору.

  11.   Мать котов Pitalia 3 июн. 2018 г., 10:33:33  
    -
  12.   Маслинорожденный. Farengar_Sec 20 июн. 2018 г., 18:23:30  

    У меня нихрена не получилось!Вот просто!

    Не разбираюсь я походу в этих кодах!

ВОЙДИТЕ НА САЙТ, чтобы оставлять комментарии.