Различен цвят при копиране на текст

Добър ден, приятели. Вече написах как да постигнете промяна на цвета на копирания текст в блога. Днес ще ви покажа малък трик, чрез който при копиране отделните участъци от текста на публикацията ще бъдат маркирани в различни цветове.

1. Как се постига този ефект? Първа възможност
2. Втора възможност

Принципът е един и същ, но се оказва доста интересен. В момента можете да видите този ефект в тестовия блог. Просто опитайте да маркирате текста на страницата.

Как се постига този ефект? Първа възможност

Как се постига маркиране на текста в различни цветове?
Просто задайте отделен клас за всеки желан от вас цвят. Например:

За червен цвят:

<div class="red">Тук е вашият текст</div>

За син цвят:

<div class="blue">Тук е вашият текст</div>

За зелен цвят:

<div class="green">Тук е вашият текст</div>

Използвайте и елемента :: selection., защото позволява да се приложат стилове към частта от текста на публикацията, която ще бъде избрана за копиране от потребителя.

::selection {background: #ff0000;}
 ::-moz-selection {background: #ff0000;}

За да променим цвета на буквите ще добавим

::selection {background: #ff0000; color: #fff;}

::-moz-selection {background: #ff0000; color: #fff;}

А сега стиловете на елемента ::selection. Направих 3 цвята. Посочила съм ги по-горе. Можете да използвате повече или по-малко цветове.

Целият CSS кодът е:

<style>div.red::selection {background: #ff0000;}

div.red::-moz-selection {background: #ff0000;}

div.blue::selection {background: #03d5fb; margin-bottom:30px;}

div.blue::-moz-selection {background: #03d5fb;}

div.green::selection {background: #c1e124;}

div.green::-moz-selection {background: #c1e124;}</style>

Как да реализираме този ефект?

➤Напишете в редактора целия текст на вашата публикация;

➤Преминете в режим HTML;

➤Затворете дадения участък от текста с таговете за съответния цвят. Например:

<div class="red">Тук е вашият текст</div>

➤Със следващия участък от текста направете същото, но с друг клас;

➤И в самия край на публикацията вмъквате целия CSS код;

Това е всичко.

Втора възможност

А сега втората възможност, която имате.
Ако искате да прилагате това често, трябва да инсталирате CSS кода в темата на блога преди реда ]]> </ b: skin>. Тогава след като напишете публикацията си затворете желаните участъци от текста с таговете от съответния клас.

Можете да прилагате този трик както искате. Използвайте тази таблица на цветовете.

Изненадвайте понякога вашите читатели. Когато копират ваш материал, цветът на текста да се променя.

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!