{"id":3852,"date":"2020-09-22T02:33:51","date_gmt":"2020-09-22T02:33:51","guid":{"rendered":"http:\/\/csshint.com\/?p=3852"},"modified":"2020-09-22T02:33:51","modified_gmt":"2020-09-22T02:33:51","slug":"minecraft-color-codes-text-generator","status":"publish","type":"post","link":"https:\/\/csshint.com\/minecraft-color-codes-text-generator\/","title":{"rendered":"Minecraft color codes text generator"},"content":{"rendered":"

Check out this Cool Minecraft color codes<\/strong> text generator Using css and js Designed by 0biwan.<\/p>\n

\n
\"Minecraft<\/a>

Minecraft color codes<\/p><\/div>
\n<\/figure>\n\n

HTML<\/p>\n

[code language=”html”]<\/p>\n

<div class="container">
\n\t<div class="tools">
\n\t\t<div class="colors">
\n\t\t\t<button data-color="0" class="bg-1">&amp;0<\/button>
\n\t\t\t<button data-color="1" class="bg-2">&amp;1<\/button>
\n\t\t\t<button data-color="2" class="bg-3">&amp;2<\/button>
\n\t\t\t<button data-color="3" class="bg-4">&amp;3<\/button>
\n\t\t\t<button data-color="4" class="bg-5">&amp;4<\/button>
\n\t\t\t<button data-color="5" class="bg-6">&amp;5<\/button>
\n\t\t\t<button data-color="6" class="bg-7">&amp;6<\/button>
\n\t\t\t<button data-color="7" class="bg-8">&amp;7<\/button>
\n\t\t\t<button data-color="8" class="bg-9">&amp;8<\/button>
\n\t\t\t<button data-color="9" class="bg-10">&amp;9<\/button>
\n\t\t\t<button data-color="a" class="bg-11">&amp;a<\/button>
\n\t\t\t<button data-color="b" class="bg-12">&amp;b<\/button>
\n\t\t\t<button data-color="c" class="bg-13">&amp;c<\/button>
\n\t\t\t<button data-color="d" class="bg-14">&amp;d<\/button>
\n\t\t\t<button data-color="e" class="bg-15">&amp;e<\/button>
\n\t\t\t<button data-color="f" class="bg-16">&amp;f<\/button>
\n\t\t<\/div>
\n\t\t<div class="style">
\n\t\t\t<button data-color="l"><span style="font-weight: bold;">Bold<\/span><\/button>
\n\t\t\t<button data-color="n"><span style="text-decoration: underline;">Underline<\/span><\/button>
\n\t\t\t<button data-color="o"><span style="font-style: italic;">Italic<\/span><\/button>
\n\t\t\t<button data-color="m"><span style="text-decoration: line-through;">Strikethrough<\/span><\/button>
\n\t\t\t<button data-color="k">Obfuscated<\/button>
\n\t\t\t<button data-color="r">Reset<\/button>
\n\t\t<\/div>
\n\t<\/div><\/p>\n

\t<div class="editor">
\n\t\t<textarea name="inputbox" onKeyUp="colour(this.value)"><\/textarea>
\n\t\t<div class="output" id="output">
\n\t<\/div>
\n<\/div><\/p>\n

<div class="bgs">
\n\t<div class="dirt"><\/div>
\n\t<div class="plains"><\/div>
\n\t<div class="item"><\/div><\/p>\n

<\/div><\/p>\n

<!– <div class="main">
\n\t<div class="colours">
\n\t\t<div class="btxt bg-1"><div class="label">&amp;0<\/div><\/div>
\n\t\t<div class="btxt bg-2"><div class="label">&amp;1<\/div><\/div>
\n\t\t<div class="btxt bg-3"><div class="label">&amp;2<\/div><\/div>
\n\t\t<div class="btxt bg-4"><div class="label">&amp;3<\/div><\/div>
\n\t\t<div class="btxt bg-5"><div class="label">&amp;4<\/div><\/div>
\n\t\t<div class="btxt bg-6"><div class="label">&amp;5<\/div><\/div>
\n\t\t<div class="btxt bg-7"><div class="label">&amp;6<\/div><\/div>
\n\t\t<div class="btxt bg-8"><div class="label">&amp;7<\/div><\/div>
\n\t\t<div class="btxt bg-9"><div class="label">&amp;8<\/div><\/div>
\n\t\t<div class="btxt bg-10"><div class="label">&amp;9<\/div><\/div>
\n\t\t<div class="btxt bg-11"><div class="label">&amp;a<\/div><\/div>
\n\t\t<div class="btxt bg-12"><div class="label">&amp;b<\/div><\/div>
\n\t\t<div class="btxt bg-13"><div class="label">&amp;c<\/div><\/div>
\n\t\t<div class="btxt bg-14"><div class="label">&amp;d<\/div><\/div>
\n\t\t<div class="btxt bg-15"><div class="label">&amp;e<\/div><\/div>
\n\t\t<div class="btxt bg-16"><div class="label">&amp;f<\/div><\/div>
\n\t\t<div class="ctxt"><div class="label">&amp;l – <span style=’font-weight:900;’>Bold<\/span><\/div><\/div>
\n\t\t<div class="ctxt"><div class="label">&amp;n – <span style=’text-decoration:underline;’>Underline<\/span><\/div><\/div>
\n\t\t<div class="ctxt"><div class="label">&amp;o – <span style=’font-style:italic;’>Itallic<\/span><\/div><\/div>
\n\t\t<div class="ctxt"><div class="label">&amp;m – <span style=’text-decoration:line-through;’>Strike<\/span><\/div><\/div>
\n\t\t<div class="ctxt"><div class="label">&amp;r – Reset<\/div><\/div>
\n\t<\/div>
\n<\/div> –>
\n[\/code]<\/p>\n

CSS \/ SCSS<\/p>\n

[code language=”css”]
\n*{
\n\tbox-sizing: border-box;
\n\tfont-family: ‘minecraftfont’,’Roboto’, sans-serif;
\n}<\/p>\n

@font-face {
\n font-family: "minecraftfont";
\n src: url(\/public\/fonts\/1412\/minecraftfont.eot);
\n src: local("minecraftfont"), url(http:\/\/fontsforweb.com\/public\/fonts\/1412\/minecraftfont.ttf) format("truetype");
\n}<\/p>\n

body{
\n\tbackground-color: #eee;
\n}<\/p>\n

.tools{
\n\tdisplay: flex;
\n\tdiv{
\n\t\tmargin: 15px;
\n\t\ttext-align: center;
\n\t}
\n\tbutton{
\n\t\tborder: 0;
\n\t\tmin-width: 30px;
\n\t\theight: 30px;
\n\t\tborder: 1px #777 solid;
\n\t\tmargin: 1px;
\n\t}
\n}<\/p>\n

.container{
\n\tmax-width: 720px;
\n\tmargin: 0 auto;
\n}<\/p>\n

.editor{
\n\tdisplay: flex;
\n}<\/p>\n

textarea {
\n\tbackground: #ccc;
\n\tfont-size: 16px;
\n\twidth: 50%;
\n\theight: 200px;
\n\t\/\/resize: vertical;
\n\tpadding: 10px;
\n\tborder: 1px #777 solid;
\n}
\n.output {<\/p>\n

\tpadding: 10px;
\n\tcolor: #fff;
\n\theight: 200px;
\n\twidth: 50%;
\n\tbackground-color: #eee;
\n\tborder: 1px #777 solid;
\n\tborder-left: 0;
\n\tfont-family: ‘minecraftfont’, ‘Roboto’, sans-serif;
\n\tbackground: url(https:\/\/s-media-cache-ak0.pinimg.com\/originals\/0e\/1f\/c2\/0e1fc2e0638e878d3ba8db495152164c.jpg);
\n\tbackground-size: cover;
\n\tbox-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
\n}<\/p>\n

.bgs{
\n\tmargin: 20px 15px;
\n\tdisplay: flex;
\n\tjustify-content: space-between;
\n\tdiv{
\n\t\tmargin: 10px;
\n\t\tflex-grow: 1;
\n\t\twidth: 100px;
\n\t\theight: 60px;
\n\t\tbackground-color: #000;
\n\t\tbackground-size: cover;
\n\t\tbox-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
\n\t}
\n\t.plains{
\n\t\tbackground: url(https:\/\/dncache-mauganscorp.netdna-ssl.com\/thumbseg\/1006\/1006445-bigthumbnail.jpg) center no-repeat;
\n\t\tbackground-size: cover;
\n\t}
\n\t.dirt{
\n\t\tbackground: url(https:\/\/s-media-cache-ak0.pinimg.com\/originals\/0e\/1f\/c2\/0e1fc2e0638e878d3ba8db495152164c.jpg) center no-repeat;
\n\t\tborder: 3px #aaa solid;
\n\t}
\n\t.item{
\n\t\tbackground-color: lighten(#110211,20%);
\n\t}
\n}<\/p>\n

\/\/ .main{
\n\/\/ \tmargin: 15px;
\n\/\/ }
\n\/\/ .label {
\n\/\/ \tbackground: rgba(0, 0, 0, 0.5);
\n\/\/ \tcolor: #fff;
\n\/\/ \twidth: 35%;
\n\/\/ \ttext-align: center;
\n\/\/ \tmargin: 0 auto;
\n\/\/ }<\/p>\n

@function set-text-color($color) {
\n @if (lightness($color) > 50) {
\n @return #000000;
\n } @else {
\n @return #ffffff;
\n }
\n}<\/p>\n

$colors: #000 #00A #0A0 #0AA #A00 #A0A #FA0 #AAA #555 #55F #5F5 #5FF #F55 #F5F #FF5 #FFF;
\n@for $i from 1 through length($colors){
\n\t.bg-#{$i} {
\n\t\tbackground-color: nth($colors, $i);
\n\t\tcolor: set-text-color(nth($colors, $i));
\n\t}
\n}
\n@for $i from 1 through length($colors){
\n\t.c-#{$i} {
\n\t\tcolor: nth($colors, $i);
\n\t}
\n}
\n[\/code]<\/p>\n

JS<\/p>\n

[code language=”js”]<\/p>\n

$(‘body’).mouseup(function(){
\n $(‘.output’).height($(‘textarea’).height());
\n $(‘.output’).height($(‘textarea’).height());
\n});<\/p>\n

$.fn.selectRange = function(start, end){
\n if(!end) end = start;
\n return this.each(function(){
\n if (this.setSelectionRange) {
\n this.focus();
\n this.setSelectionRange(start, end);
\n } else if (this.createTextRange) {
\n var range = this.createTextRange();
\n range.collapse(true);
\n range.moveEnd(‘character’, end);
\n range.moveStart(‘character’, start);
\n range.select();
\n }
\n });
\n};<\/p>\n

$(‘.bgs div’).click(function(elem){
\n\t$(‘.output’).css(‘background’, $(elem.target).css(‘background’));
\n\t$(‘.bgs div’).css(‘border’,0);
\n\t$(elem.target).css(‘border’, ‘3px #aaa solid’);
\n});<\/p>\n

var motd_raw = $(‘.editor textarea’);
\n$(‘.tools button’).click(function(e){
\n\tvar caretPos = motd_raw[0].selectionStart;
\n\tvar textAreaTxt = motd_raw.val();
\n\tvar txtToAdd = ‘&’ + $(this).attr(‘data-color’);
\n\tconsole.log(caretPos);
\n\tmotd_raw.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos)).focus();
\n\tmotd_raw.selectRange(caretPos + 2);
\n\tcolour(motd_raw.val());
\n});<\/p>\n

function colour (text) {
\nleft = htmlEncode("<");
\nright = htmlEncode(">");
\ntext = text.replace(\/<\/gi, left);
\ntext = text.replace(\/>\/gi, right);
\ntext = text.replace(\/\\n\/gi, "&r<br \/>");
\n\/\/colours
\ntext = text.replace(\/&0\/gi,'<\/span>&r<span class="c-1">’);
\ntext = text.replace(\/&1\/gi,'<\/span>&r<span class="c-2">’);
\ntext = text.replace(\/&2\/gi,'<\/span>&r<span class="c-3">’);
\ntext = text.replace(\/&3\/gi,'<\/span>&r<span class="c-4">’);
\ntext = text.replace(\/&4\/gi,'<\/span>&r<span class="c-5">’);
\ntext = text.replace(\/&5\/gi,'<\/span>&r<span class="c-6">’);
\ntext = text.replace(\/&6\/gi,'<\/span>&r<span class="c-7">’);
\ntext = text.replace(\/&7\/gi,'<\/span>&r<span class="c-8">’);
\ntext = text.replace(\/&8\/gi,'<\/span>&r<span class="c-9">’);
\ntext = text.replace(\/&9\/gi,'<\/span>&r<span class="c-10">’);
\ntext = text.replace(\/&a\/gi,'<\/span>&r<span class="c-11">’);
\ntext = text.replace(\/&b\/gi,'<\/span>&r<span class="c-12">’);
\ntext = text.replace(\/&c\/gi,'<\/span>&r<span class="c-13">’);
\ntext = text.replace(\/&d\/gi,'<\/span>&r<span class="c-14">’);
\ntext = text.replace(\/&e\/gi,'<\/span>&r<span class="c-15">’);
\ntext = text.replace(\/&f\/gi,'<\/span>&r<span class="c-16">’);
\n\/\/bold
\ntext = text.replace(\/&l\/gi,"<span style=’font-weight:900;’>");
\n\/\/italic
\ntext = text.replace(\/&o\/gi,"<span style=’font-style:italic;’>");
\n\/\/strikethrough
\ntext = text.replace(\/&m\/gi,"<span style=’text-decoration:line-through’>");
\n\/\/underlined
\ntext = text.replace(\/&n\/gi,"<span style=’text-decoration:underline’>");
\n\/\/obfuscated
\ntext = text.replace(\/&k\/gi,"<span class=’obfuscated’>");
\n\/\/reset
\ntext = text.replace(\/&r\/gi, "<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>");<\/p>\n

document.getElementById(‘output’).innerHTML=text;<\/p>\n

}<\/p>\n

setInterval(function() {
\n $(‘.obfuscated’).text(randomizer($(‘.obfuscated’).text()));
\n}, 100);<\/p>\n

function htmlEncode(value){
\n return $(‘<div\/>’).text(value).html();
\n}<\/p>\n

function randomizer(rawr) {
\n var length = rawr.length;
\n var text = ”;
\n var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";<\/p>\n

for( var i=0; i < length; i++ )
\n text += possible.charAt(Math.floor(Math.random() * possible.length));<\/p>\n

return text;
\n}<\/p>\n

[\/code]<\/p>\n

color codes minecraft <\/h2>\n