{"id":10971,"date":"2015-12-11T02:01:46","date_gmt":"2015-12-10T16:01:46","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10971"},"modified":"2015-12-10T20:23:54","modified_gmt":"2015-12-10T10:23:54","slug":"cssjavascripthtml-text-effects-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/cssjavascripthtml-text-effects-primer-tutorial\/","title":{"rendered":"CSS\/Javascript\/HTML Text Effects Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MovingText\/\"><img decoding=\"async\" id='irt' style=\"float:left; border: 15px solid pink;\" alt=\"CSS\/Javascript\/HTML Text Effects Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MovingText\/MovingText.jpg\" title=\"CSS\/Javascript\/HTML Text Effects Primer Tutorial\"  onmouseover=\"  this.src=this.src.replace('.gif','.JPG').replace('.jpg','.png').replace('.png','.gif').replace('.JPG','.jpg');     \"  \/><\/a><p class=\"wp-caption-text\">CSS\/Javascript\/HTML Text Effects Primer Tutorial<\/p><\/div>\n<p>We last specifically talked about HTML and CSS and text elements when we had the <a target=_blank href='#cetpt' title='CSS Embossed Text Primer Tutorial'>CSS Embossed Text Primer Tutorial<\/a> as shown below.<\/p>\n<p>Today we talk about some other ideas regarding text, inspired by reading (in particular, point 9 of) <a target=_blank title='20 Useful CSS Tips For Beginners' href='http:\/\/www.hongkiat.com\/blog\/20-useful-css-tips-for-beginners\/'>20 Useful CSS Tips For Beginners<\/a> (thanks) and think a bit about the more &#8220;showy&#8221; ways of presenting HTML text data, regarding &#8230;<\/p>\n<ul>\n<li>toggling between an <a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_h1.asp' title='h1 tag information from w3schools'>&lt;h1&gt;<\/a> HTML element as a piece of text and then an image via a vastly negative HTML <a target=_blank title='text-indent property information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_text_text-indent.asp'>text-indent<\/a> property<\/li>\n<li>make the text move from left to right (like a <a target=_blank title='HTML marquee element information' href='http:\/\/www.tutorialspoint.com\/html\/html_marquee_tag.htm'>&lt;marquee&gt;<\/a> HTML element) via the HTML text-indent property<\/li>\n<li>make the text move from right to left via the HTML text-indent property with negative values<\/li>\n<li>rotating text (helped heaps by this useful <a target=_blank title='Text rotation information ... thanks' href='http:\/\/css-tricks.com\/snippets\/css\/text-rotation\/'>link<\/a> &#8230; thanks)<\/li>\n<li>snaking text via the use of <a target=_blank href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp' title='textarea tag information from w3schools'>&lt;textarea&gt;<\/a> HTML element&#8217;s Javascript <a target=_blank title='Document object model information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Document_Object_Model'>DOM<\/a> <a target=_blank title='Javascript DOM innerHTML property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> and using a <a target=_blank title='WYSIWYG information from Wikipedia' href='http:\/\/en.wikipedia.org\/wiki\/WYSIWYG'>WYSIWYG<\/a> Courier New font<\/li>\n<\/ul>\n<p>&#8230; making use of CSS principles and Javascript DOM manipulations.<\/p>\n<p>It can be good to apply some effects to text on occasions when it is to attract attention in the first place, but when you are deep into the explanation of something, &#8220;text distractions&#8221; may not be a good <a target=_blank title='?' href='https:\/\/www.google.com.au\/search?q=%22bad+hair+day%22&#038;biw=1280&#038;bih=469&#038;source=lnms&#038;tbm=isch&#038;sa=X&#038;ei=9ruDVMTYO8SNmwWbuoHoDg&#038;ved=0CAYQ_AUoAQ'>look<\/a>.<\/p>\n<p>Try today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MovingText\/\" title=\"Click picture\">live run<\/a> and\/or download the HTML source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/MovingText\/moving_text.html_GETME\" title=\"moving_text.html\">moving_text.html<\/a> tutorial, and hope it helps in some way.<\/p>\n<hr>\n<p id='cetpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10783' title='CSS Embossed Text Primer Tutorial'>CSS Embossed Text Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emboss.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"CSS Embossed Text Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/emboss.jpg\" title=\"CSS Embossed Text Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">CSS Embossed Text Primer Tutorial<\/p><\/div>\n<p>Sometimes it is good to give a <a target=_blank title='Text effects information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_text_effects.asp'>3D embossed<\/a> effect (with <a target=_blank href='http:\/\/www.w3schools.com\/cssref\/css3_pr_text-shadow.asp' title='Text shadowing'>text shadowing<\/a>) to some text HTML elements for the purpose of attracting the user&#8217;s attention and giving that 3D effect for vibrancy.<\/p>\n<p>Today we&#8217;ve applied some CSS to do this in a number of combinations:<\/p>\n<ul>\n<li>With WordPress Blog title via changes to header.php as per the bold code below &#8230;<br \/>\n<code>&lt;link rel=\"stylesheet\" type=\"text\/css\" media=\"all\" href=\"&lt;?php bloginfo( 'stylesheet_url' ); ?&gt;\" \/&gt;<br \/>\n&lt;style&gt;<br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<\/p>\n<p><b><br \/>\n#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n<\/b><br \/>\n&lt;\/style&gt;<br \/>\n&lt;link rel=\"pingback\" href=\"&lt;?php bloginfo( 'pingback_url' ); ?&gt;\" \/&gt;<br \/>\n<\/code><\/li>\n<li>Landing Page (and other) HTML of <a target=_blank title='Landing Page' href='http:\/\/www.rjmprogramming.com.au'>www.rjmprogramming.com.au<\/a> &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n#rjmp {<br \/>\n    color: #777777;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/li>\n<li>File Information Table <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/fileinfotable.php\" title='fileinfotable.php'>fileinfotable.php<\/a> changes can be seen via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/fileinfotable.php-------------GETME\" title='fileinfotable.php'>fileinfotable.php<\/a> using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emboss_h1.css_GETME\" title='emboss_h1.css'>emboss_h1.css<\/a><\/li>\n<li>HTML\/XML to Text Conversion <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/flatten_ml.php\" title='flatten_ml.php'>flatten_ml.php<\/a> changes can be seen via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/flatten_ml.php---GETME\" title='flatten_ml.php'>flatten_ml.php<\/a><\/li>\n<\/ul>\n<p>Hope you enjoy today&#8217;s tutorial.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d10783' onclick='var dv=document.getElementById(\"d10783\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10783' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d10971' onclick='var dv=document.getElementById(\"d10971\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=DOM\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10971' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We last specifically talked about HTML and CSS and text elements when we had the CSS Embossed Text Primer Tutorial as shown below. Today we talk about some other ideas regarding text, inspired by reading (in particular, point 9 of) &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/cssjavascripthtml-text-effects-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[281,354,552,576,652,1006,1072,1254,1261,1262,1319,1467],"class_list":["post-10971","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-css","tag-dom","tag-h1","tag-html","tag-javascript","tag-ptogramming","tag-rotation","tag-text","tag-text-indent","tag-textarea","tag-tutorial","tag-wysiwyg"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10971"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=10971"}],"version-history":[{"count":1,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10971\/revisions"}],"predecessor-version":[{"id":14615,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/10971\/revisions\/14615"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=10971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=10971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=10971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}