{"id":55215,"date":"2022-03-24T03:01:38","date_gmt":"2022-03-23T17:01:38","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55215"},"modified":"2022-03-23T19:09:19","modified_gmt":"2022-03-23T09:09:19","slug":"contenteditable-outerhtml-ideas-css-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/contenteditable-outerhtml-ideas-css-tutorial\/","title":{"rendered":"Contenteditable OuterHTML Ideas CSS Tutorial"},"content":{"rendered":"
\"Contenteditable<\/a>

Contenteditable OuterHTML Ideas CSS Tutorial<\/p><\/div>\n

Onto yesterday’s Contenteditable OuterHTML Ideas Mobile Tutorial<\/a> we turn our attention to some aesthetics matters with this “Contenteditable OuterHTML Ideas” web application. Yes, most of this involves CSS changes, such as those for those div elements …<\/p>\n


\n<style>
\n div.indiv {
\n outline: 2px solid green;
\n outline-offset: 2px;
\n padding: 2 2 2 2;
\n border: 12px solid transparent;
\n border-image: -webkit-linear-gradient(45deg,pink,orange,fuchsia,cyan,lightgreen) 20 stretch;
\n font-weight: bold;
\n font-style: italic;
\n }
\n<\/style>
\n<\/code><\/p>\n

… for a “high impact” look. And then there are watermark changes<\/font> ….<\/p>\n


\n<style>
\n span {
\n transform: rotate(45deg);
\n font-family: Arial, Helvetica, sans-serif;
\n font-style: oblique;<\/font>
\n }
\n<\/style>
\n<\/code><\/p>\n

And then there is a vague blurry subtle green radial gradient look applied to the background of that “table clone for watermarking purposes”<\/font> …<\/p>\n


\n shadowtable=document.getElementById('mytable').outerHTML.replace('mytable', 'shadowtable').replace(' style=\"', ' style=\"position:absolute;top:' + shadowrect.top + 'px;left:' + shadowrect.left + 'px;opacity:0.5;z-index:-9; background: #75f547; background: -webkit-radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%); background: radial-gradient(center center, circle cover, rgba(117, 245, 71, 1), rgba(255, 255, 255, 0) 100%);<\/font>').replace(\/\\<td\\>\/g, '<td style=\"opacity:0.5;border: 1px solid transparent; vertical-align: middle; text-align: center;transform: rotate(45deg);font-size:' + fifty + 'px;\"><span><\/span>');
\n<\/code><\/p>\n

All still in action together in the changed<\/a> proof of concept contenteditable_outerhtml_ideas.htm<\/a> web application<\/a> ideas.<\/p>\n

\n

\n

Previous relevant Contenteditable OuterHTML Ideas Mobile Tutorial<\/a> is shown below.<\/p>\n

\"Contenteditable<\/a>

Contenteditable OuterHTML Ideas Mobile Tutorial<\/p><\/div>\n

Developing yesterday’s Contenteditable OuterHTML Ideas Watermark Tutorial<\/a> on this MacBook Air had us a bit neglectful of mobile platforms. This neglectfulness manifested itself in the usual “width” and “height” dilemmas …<\/p>\n