https://ucoztemplates.com/ Forum Mon, 02 Jun 2014 07:12:04 GMT uCoz Web-Service https://ucoztemplates.com/forum/12-341-1 Mon, 02 Jun 2014 07:12:04 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread description: Uppod Player API/Javascript/jQuery<br />Thread starter: VZ<br />Last message posted by: VZ<br />Number of replies: 0 I have a written code but I <s>suck</s> at JS and jQuery, i need help. <br /> The http://www.god4life.tk/load/2-1-0-1. <br /> The problem is when I click  " 01. Я иду по дороге земной ", the soundtrack will not be played and the player will not show up. <br /> Log: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->ReferenceError: playerLoad is not defined<!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript VZ https://ucoztemplates.com/forum/12-341-1 https://ucoztemplates.com/forum/12-332-1 Thu, 03 Oct 2013 16:39:42 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread description: I need just 2 things to have my site at 100% finished.<br />Thread starter: Elexy<br />Last message posted by: Danny<br />Number of replies: 3 Hi everyone! <br /> My site is: <br /> http://zeatrex.com/ <br /><br /> I really need some help, I need just 2 things done to my website and my website will be 100% finished but I haven't been able to do it myself. My website is using one of your premium template which I want to modify some parts of. I want the side block bar column where the categories and sections of the site appear to look like the ones in this site: <br /> http://artisticate.at.ua/ <br /><br /> And I want it to have this exactly forums design instead of the one it has now: <br /> http://artisticate.at.ua/forum <br /><br /> I would also like the background container color (where the items are, not where the wallpaper of the cars is) to be the same color of the background container (it is using #F6F6F6) of the site I want to get the parts of. <br /><br /> Can anyone help me with this?<p><b>Added</b> (29.09.2013, 19:10)<br />---------------------------------------------<br /><b>Never mind, I got it done. <br /> ^^</b> HTML / CSS / Javascript Elexy https://ucoztemplates.com/forum/12-332-1 https://ucoztemplates.com/forum/12-320-1 Sat, 23 Feb 2013 22:45:54 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: UndisPuted<br />Last message posted by: UndisPuted<br />Number of replies: 0 <b>Installation</b> <br /> Between < head > and < / head > <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><script language=javascript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;var message="The right button is disabled!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;function click(e&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.all&#41; { // IE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.button == 2&#41; { // To disable the left button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;; // to disable the middle button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41; { // NC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.which == 3&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{document.captureEvents(Event.MOUSEDOWN&#41;;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.onmousedown=click;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.oncontextmenu=function(e&#41;{return false};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;//-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</script><script language=javascript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;var message="The right mouse button is disabled!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;function click(e&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.all&#41; { // IE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.button == 2&#41; { // To disable the left button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;; // to disable the middle button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41; { // NC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.which == 3&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{document.captureEvents(Event.MOUSEDOWN&#41;;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.onmousedown=click;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.oncontextmenu=function(e&#41;{return false};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;//-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</script><script language=javascript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;var message="The right mouse button is disabled!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;function click(e&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.all&#41; { // IE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.button == 2&#41; { // To disable the left button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;; // to disable the middle button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41; { // NC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.which == 3&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{document.captureEvents(Event.MOUSEDOWN&#41;;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.onmousedown=click;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.oncontextmenu=function(e&#41;{return false};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;//-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</script><script language=javascript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;var message="The right mouse button is disabled!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;function click(e&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.all&#41; { // IE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.button == 2&#41; { // To disable the left button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;; // to disable the middle button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41; { // NC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.which == 3&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{document.captureEvents(Event.MOUSEDOWN&#41;;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.onmousedown=click;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.oncontextmenu=function(e&#41;{return false};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;//-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</script><script language=javascript>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;var message="The right mouse button is disabled!";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;function click(e&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.all&#41; { // IE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (event.button == 2&#41; { // To disable the left button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;; // to disable the middle button, put the figure 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41; { // NC&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (e.which == 3&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(message&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return false;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;if (document.layers&#41;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{document.captureEvents(Event.MOUSEDOWN&#41;;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.onmousedown=click;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;document.oncontextmenu=function(e&#41;{return false};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;//-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;</script><!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript UndisPuted https://ucoztemplates.com/forum/12-320-1 https://ucoztemplates.com/forum/12-319-1 Thu, 21 Feb 2013 22:29:09 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: UndisPuted<br />Last message posted by: UndisPuted<br />Number of replies: 0 <a class="link" target="_blank" href="http://u.to/eArwAg" title="http://jldesign.at.ua/di-VJAV.jpg" rel="nofollow">http://jldesign.at.ua/di-VJAV.jpg</a> <br /><br /> <b>1.</b> adding counter <br /> go to your blocks add the code $COUNTER$ and you will get the uCoz counter. <br /><br /> <b>2.</b> list of online users <br /> add this after the $COUNTER$ code: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><a onclick="$('#uonline'&#41;.slideToggle('slow'&#41;;" href="javascript://" style="text-decoration:none"><b>List of online users</b></a> <br />&nbsp;&nbsp;<div&nbsp;&nbsp;id="uonline" style="display:none;padding-left:6px;text-decoration:none;">$ONLINE_USERS_LIST$</div><!--/uzc--></div></div><!--/uzcode--> <br /><br /> <b>3.</b> Creating Informers: <br /><br /> <b>USERS VISITED TODAY:</b> <br /> <b>1.</b> go to CP ---> Informers ---> create --> Users who have visited the site for the current day ---> Entries ---> User's name ---> Columns. <br /><br /> <b>2.</b> go to informer template and paste this in there: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><a href="$PROFILE_URL$" class="$CLASS$">$USERNAME$</a>,<!--/uzc--></div></div><!--/uzcode--> <br /><br /> <b>FILES STORED AND FORUM STATS:</b> <br /> <b>1.</b> go to CP ---> Informers --> Create ---> Per module entry counters ----> Entries. <br /><br /> <b>2.</b> go to informer template and paste this: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><span style="font-family: Tahoma;font-size: 9pt;"><b><u>Files Stored</u></b> <br />&nbsp;&nbsp;</font><br> <br />&nbsp;&nbsp;<span style="font-size: 8pt;"><b>In database:</b> $LOAD$<br> <br />&nbsp;&nbsp;<b>Comments posted:</b> $COMMENTS$</span> <br />&nbsp;&nbsp;<hr> <br />&nbsp;&nbsp;<span style="font-family: Tahoma;font-size: 9pt;"><b><u>Forum</u></b></span> <br />&nbsp;&nbsp;<br> <br />&nbsp;&nbsp;<span style="font-size: 8pt;"><b>Forum threads:</b> $FORUM_T$<br> <br />&nbsp;&nbsp;<b>Forum posts:</b> $FORUM_P$</span><!--/uzc--></div></div><!--/uzcode--> <br /><br /> <b>MEMBER STATISTICS: <br /> 1.</b> go to CP ---> Informers ---> Create ---> Counters for users · Entries · all, by groups, by gender, by zodiac, by days (today, yesterday, 7 days, 30 days) <br /><br /> <b>2.</b> go to informer template and paste this: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><span style="font-family: Tahoma;font-size: 9pt;"><b><u>Members</u></b></span> <br />&nbsp;&nbsp;&nbsp;<br /> <span style="font-size: 8pt;"> <br /> <b>We have:</b> $ALL_USERS$<br> <br /> <b>New today:</b> $TODAY$<br> <br /> <b>Yesterday:</b> $YESTERDAY$<br> <br /> <b>Verified:</b> $GROUP_2$<br> <br /> <b>Uploaders:</b> $GROUP_6$<br> <br /> <b>Male:</b> $GENDER_1$ <img src="image icon" border="0" align="absmiddle" /><br> <br /> <b>Women:</b> $GENDER_2$ <img src="image icon" border="0" align="absmiddle" /><br> </span><!--/uzc--></div></div><!--/uzcode--> <br /><br /> <b>4.</b> placing informers <br /> go to your blocks again and find: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><a onclick="$('#uonline'&#41;.slideToggle('slow'&#41;;" href="javascript://" style="text-decoration:none"><b>List of online users</b></a> <br />&nbsp;&nbsp;<div&nbsp;&nbsp;id="uonline" style="display:none;padding-left:6px;text-decoration:none;">$ONLINE_USERS_LIST$</div><!--/uzc--></div></div><!--/uzcode--> <br /><br /> then paste this after it: <br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><a onclick="$('#useroffline'&#41;.slideToggle('slow'&#41;;" href="javascript://" style="text-decoration:none"><b>User's visited today</b></a> <br />&nbsp;&nbsp;<div&nbsp;&nbsp;id="useroffline" style="display: none;padding-left:6px;text-decoration:none">$MYINF_3$</div> <br />&nbsp;&nbsp;$MYINF_5$ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr /> <br />&nbsp;&nbsp;$MYINF_4$ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<hr /><!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript UndisPuted https://ucoztemplates.com/forum/12-319-1 https://ucoztemplates.com/forum/12-285-1 Thu, 12 Jul 2012 02:11:53 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: UndisPuted<br />Last message posted by: UndisPuted<br />Number of replies: 0 Add this code intro "General appearance of forum pages" <br /> Right after $BODY$ Remember to change on all that i have written "Your Language" Here is an example: <br /><br /> e[i].innerHTML=e[i].innerHTML.replace('All-time high attendance','<span style="color:red">Your Language</span>'); <br /><br /> You need to change all the words that i have market in Red as show abow. <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='gTableBody1'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('All-time high attendance','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('reached on','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Total of','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('threads created','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('which have','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('replies','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('members registered','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Greetings to our new member','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('User','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Rank','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Group','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Messages','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Registration','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Input keyword or phrase to find.','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Enter username and select search options.','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Threads without updates for more than','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('closed threads only','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('All opened forums.....','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='threadsType'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Sticky threads','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Forum threads','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='threadsDetails'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('This forum has','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('threads','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('threads displayed','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('found','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('on the page','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='forumOnlineBar'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Forum is being viewed by :','Your Language :'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='pagesInfo'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Page','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('of','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='fFastSearchTd'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Search:','Your Language:'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('keyword','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='gTableTop'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Additional information','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Search','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Members List','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Forum rules','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('New Posts','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('New reply','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='gTableSubTop'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Visitors','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('members','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('guests','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Forum statistics','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Forum','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Threads','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Replies','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Updates','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Views','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Thread starter','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Thread','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Users found','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Search what','Your Language?'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Search where','Your Language?'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Search posts by member','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Administrator options','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Happy Birthday!','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='legendTd'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Normal thread (There are new message(s&#41;&#41;','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Normal thread (No new messages&#41;','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Hot thread (There are new message(s&#41;&#41;','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Hot thread (No new messages&#41;','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Closed thread (No new messages&#41;','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Normal thread','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Thread - Poll','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Sticky thread','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Hot thread','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Closed thread','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("DIV"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='funcBlock'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Mark all messages as read','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script> <br /> <script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e=document.getElementsByTagName("TD"&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> for(i=0;i<e.length;i++&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> if(e&#91;i].className=='threadLastPostTd'&#41; {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> e&#91;i].innerHTML=e&#91;i].innerHTML.replace('Message from','Your Language'&#41;;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> </script><!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript UndisPuted https://ucoztemplates.com/forum/12-285-1 https://ucoztemplates.com/forum/12-73-1 Mon, 18 Jun 2012 21:00:39 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: SirDarknight(Tonmoy)<br />Last message posted by: Danny<br />Number of replies: 6 <b>Implementation:</b> <p> To implement this script you don’t need any Javascript experience. Just follow these easy steps: <p> 1. Download the <a class="link" href="http://u.to/Hffu" title="http://depositfiles.com/files/qs0pjnhlt" rel="nofollow" target="_blank">zipped archive</a>. <p> 2. Upload the contents to your webserver. <p> 3. Place the following code in the part of your page: <p> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><script type='text/javascript' src='http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <br /> <link rel="stylesheet" href="css/queryLoader.css" type="text/css" /> <br /> <script type='text/javascript' src='js/queryLoader.js'></script><!--/uzc--></div></div><!--/uzcode--> <p> Remove the jQuery part if you have already included the file. <p> 4. Place this code at the bottom of your page: <p> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><script type='text/javascript'> <br />&nbsp;&nbsp;QueryLoader.init(&#41;; <br /> </script><!--/uzc--></div></div><!--/uzcode--> <p> You are now done! <br /> Customization: <p> If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want. <p> Let’s say you have an element with an id. You only want the images inside that element to be preloaded. You can use the following code: <p> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><script type='text/javascript'> <br />&nbsp;&nbsp;QueryLoader.selectorPreload = "#idOfTheElement"; <br />&nbsp;&nbsp;QueryLoader.init(&#41;; <br /> </script><!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript SirDarknight(Tonmoy) https://ucoztemplates.com/forum/12-73-1 https://ucoztemplates.com/forum/12-116-1 Mon, 09 Jan 2012 20:20:01 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: admin<br />Last message posted by: Filip5<br />Number of replies: 6 <div class="niceinput"><form action=""><label>Label Name: </label><input type="text" placeholder="Press Here"></input><form></div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><form action=""><input type="text"></input><form><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->input:focus{ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;outline:none; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-color:rgba(255,25,33,.75&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 0 8px rgba(255,25,33,.5&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 0 8px rgba(255,25,33,.5&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 0 8px rgba(255,25,33,.5&#41;; <br /> } <br /> input{ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:1px solid #aaa; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-border-radius:3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition:border linear .2s,box-shadow linear .2s; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transition:border linear .2s,-moz-box-shadow linear .2s; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition:border linear .2s,-webkit-box-shadow linear .2s; <br /> }<!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript admin https://ucoztemplates.com/forum/12-116-1 https://ucoztemplates.com/forum/12-107-1 Fri, 22 Jul 2011 22:18:16 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: admin<br />Last message posted by: Animorph<br />Number of replies: 5 Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ <br /><br /> <div class="shape"><div class="lifted"><p>Lifted corners</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="lifted"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Lifted corners</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.lifted p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> .lifted { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:4px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:4px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> .lifted:before, <br /> .lifted:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:15px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:20%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-width:300px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-3deg&#41;; <br /> } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> .lifted:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:auto; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(3deg&#41;; <br /> }<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="curled"><p>Curled corners</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="curled"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Curled corners</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.curled { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:1px solid #efefef; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:0 0 120px 120px / 0 0 6px 6px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:0 0 120px 120px / 0 0 6px 6px; <br /> } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> .curled:before, <br /> .curled:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:12px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:55%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-width:200px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 8px 12px rgba(0, 0, 0, 0.5&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:skew(-8deg&#41; rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:skew(-8deg&#41; rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:skew(-8deg&#41; rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:skew(-8deg&#41; rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:skew(-8deg&#41; rotate(-3deg&#41;; <br /> } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /> .curled:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:auto; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:skew(8deg&#41; rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:skew(8deg&#41; rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:skew(8deg&#41; rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:skew(8deg&#41; rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:skew(8deg&#41; rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} <br /> .curled p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="perspective"><p>Perspective</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="perspective"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Perspective</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.perspective { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .perspective:before, <br /> .perspective:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;<br /> .perspective:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:80px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:5px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:35%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-width:200px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:skew(50deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:skew(50deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:skew(50deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:skew(50deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:skew(50deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform-origin:0 100%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform-origin:0 100%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform-origin:0 100%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform-origin:0 100%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin:0 100%; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .perspective:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display:none; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .perspective p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="raised"><p>Raised box</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="raised"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Raised box</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.raised { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5&#41;, 0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5&#41;, 0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5&#41;, 0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;<br /> .raised:before, <br /> .raised:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .raised p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="curved-vt-1"><p>Single vertical curve</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="curved-vt-1"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Single vertical curve</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.curved-vt-1 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-1:before, <br /> .curved-vt-1:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-1:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:10px / 100px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:10px / 100px; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-1 p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="curved-vt-2"><p>Vertical curves</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="curved-vt-2"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Vertical curves</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.curved-vt-2 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-2:before, <br /> .curved-vt-2:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-2:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:0; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:10px / 100px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:10px / 100px; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-vt-2 p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="curved-hz-1"><p>Single horizontal curve</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="curved-hz-1"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Single horizontal curve</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.curved-hz-1 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-1:before, <br /> .curved-hz-1:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-1:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:0px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:100px / 10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:100px / 10px; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-1 p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="curved-hz-2"><p>Horizontal curves</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="curved-hz-2"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Horizontal curves</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.curved-hz-2 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-2:before, <br /> .curved-hz-2:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-2:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:0px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:0px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 0 15px rgba(0,0,0,0.6&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:100px / 10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:100px / 10px; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .curved-hz-2 p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<!--/uzc--></div></div><!--/uzcode--></div> <br /> <div class="shape"><div class="rotated"><p>Rotated box</p></div> <br /> <b>HTML:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="rotated"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<p>Rotated box</p> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> <b>CSS:</b> <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->.rotated { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:40%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:1em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:2em 10px 4em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:4px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-border-radius:4px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:none; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:none; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:none; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-3deg&#41;; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .rotated > :first-child:before { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-1; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:0px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:0; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:0; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:0px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3&#41;, 0 0 40px rgba(0, 0, 0, 0.1&#41; inset; <br /> }&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />&nbsp;&nbsp;&nbsp;<br /> .rotated:before, <br /> .rotated:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:""; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:-2; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bottom:15px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:50%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:20%; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;max-width:300px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;box-shadow:0 15px 10px rgba(0, 0, 0, 0.7&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:rotate(-3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(-3deg&#41;; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .rotated:after { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right:10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:auto; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transform:rotate(3deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:rotate(3deg&#41;; <br /> } <br />&nbsp;&nbsp;&nbsp;<br /> .rotated p { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:16px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight:bold; <br /> } <!--/uzc--></div></div><!--/uzcode--></div> <br /> <div style="float:right;"><a target="_blank" rel="nofollow" title="css-drop-shadows-without-images" href="http://u.to/7OYFAQ" title="http://nicolasgallagher.com/css-drop-shadows-without-images/" class="link">Author's website</a></div> HTML / CSS / Javascript admin https://ucoztemplates.com/forum/12-107-1 https://ucoztemplates.com/forum/12-125-1 Sun, 10 Jul 2011 14:45:29 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: admin<br />Last message posted by: Animorph<br />Number of replies: 1 <div id="animationWrapper"> <br /> <a href="https://ucoztemplates.com/"> <br /> <span class="span1">Only</span> <br /> <span class="span2">Free</span> <br /> <span class="span3">uCoz</span> <br /> <span class="span4">Templates</span> <br /> </a> <br /> </div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div id="animationWrapper"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ucoztemplates.com/"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="span1">Only</span> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="span2">Free</span> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="span3">uCoz</span> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="span4">Templates</span> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> <br /> </div><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc-->/* entire wrapper */ <br /> #animationWrapper&nbsp;&nbsp;{ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:300px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:#222; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:40px; <br /> } <br /><br /> /* link which encapsulates SPANs */ <br /> #animationWrapper a { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-weight: 800; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-transform: uppercase; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 42px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 0.9em; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom: 10px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #E58; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration: none <br /> } <br /><br /> /* span and a - "workers" */ <br /> #animationWrapper a, #animationWrapper span { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-transition: all 0.12s ease-out; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-moz-transition: all 0.12s ease-out; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-o-transition: all 0.12s ease-out; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-ms-transition: all 0.12s ease-out; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: all 0.12s ease-out; <br /> } <br /><br /> #animationWrapper span { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #555; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black; <br /> } <br /><br /> /* special size for the first item */ <br /> #animationWrapper .span1 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 76px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 0.8em; <br /> } <br /><br /> #animationWrapper a:hover { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff ; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: -3px; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: -3px; <br /> } <br /><br /> /* all spans become white */ <br /> #animationWrapper a:hover span { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:#fff; <br /> } <br /><br /> /* different colors for each SPAN */ <br /> #animationWrapper a:hover .span1 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E; <br /> } <br /><br /> #animationWrapper a:hover .span2 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90; <br /> } <br /><br /> #animationWrapper a:hover .span3 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7; <br /> } <br /><br /> #animationWrapper a:hover .span4 { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58; <br /> }<!--/uzc--></div></div><!--/uzcode--> HTML / CSS / Javascript admin https://ucoztemplates.com/forum/12-125-1 https://ucoztemplates.com/forum/12-123-1 Tue, 05 Jul 2011 11:49:48 GMT Forum: <a href="https://ucoztemplates.com/forum/12">HTML / CSS / Javascript</a><br />Thread starter: admin<br />Last message posted by: admin<br />Number of replies: 0 <br><span style="font-size:18pt;"><div align="center">Box # 11</div></span> <br /> <hr /> <br /> If you combine a gray-white gradient and a transparent tape, your frame box will look almost like if it actually were an acetate sheet. <br /> <div class="zindex"><div class="box11"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box11_ribbon"></div></div></div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="box11"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box11_ribbon"></div></div><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--> <br /> /* This is the selector of the eleventh box, here's where we establish the measures, background colors, borders and shadows */ <br /> .box11{ <br />&nbsp;&nbsp;margin: 50px; <br />&nbsp;&nbsp;width: 300px; <br />&nbsp;&nbsp;min-height: 150px; <br />&nbsp;&nbsp;padding: 0 0 1px 0; <br />&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;background: #f3f3f3; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3&#41;, to(#fff&#41;, color-stop(.1,#f3f3f3&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff&#41;; <br />&nbsp;&nbsp;border-top: 1px solid white; <br />&nbsp;&nbsp;border-right: 1px solid #ccc; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 60px 60px; <br />&nbsp;&nbsp;border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -1px 2px 2px rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;box-shadow: -1px 2px 2px rgba(0,0,0,0.2&#41;; <br /><br /> } <br /><br /> /* This pseudo class creates the bottom fold */ <br /> .box11:before{ <br />&nbsp;&nbsp;content:''; <br />&nbsp;&nbsp;width: 25px; <br />&nbsp;&nbsp;height: 20px; <br />&nbsp;&nbsp;background: white; <br />&nbsp;&nbsp;position: absolute; <br />&nbsp;&nbsp;bottom:0; right:0; <br />&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff&#41;, to( #eee&#41;, color-stop(.1,#fff&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee&#41;; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 30px; <br />&nbsp;&nbsp;border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -2px -2px 5px rgba(0,0,0,0.3&#41;; <br />&nbsp;&nbsp;box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br /> } <br /><br /> /* This is the shading of the fold */ <br /> .box11:after{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;z-index: -1; <br />&nbsp;&nbsp;width: 100px; <br />&nbsp;&nbsp;height: 100px; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;bottom:0; <br />&nbsp;&nbsp;right:0; <br />&nbsp;&nbsp;background: rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 20px 20px 17px rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 20px 20px 17px rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br /> } <br /><br /> /* This is the top tape of the box */ <br /> .box11_tape{ <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;top:-25px; left: 30%; <br />&nbsp;&nbsp;width: 130px; <br />&nbsp;&nbsp;height: 40px; <br />&nbsp;&nbsp;background:#ccc; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1&#41;&#41;, to(rgba(0, 0, 0, 0.0&#41;&#41;, color-stop(.1,rgba(0, 0, 0, 0.2&#41;&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(555% 0 180deg, rgba(0,0,0,0.1&#41;, rgba(0,0,0,0.2&#41; 10%, rgba(0,0,0,0.0&#41;&#41;; <br />&nbsp;&nbsp;border-left: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;border-right: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br /> }<!--/uzc--></div></div><!--/uzcode--> <br /> <hr /> <br /> <span style="font-size:18pt;"><div align="center">Box # 12</div></span> <br /> <hr /> <br /> This one is just an exercise that plays with folds, shadows, gradients and a tape on top that retains the frame against the wall. <br /> <div class="zindex"><div class="box12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="fold_box12"></div><div class="fold2_box12"></div><div class="box12_ribbon"></div></div></div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="box12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="fold_box12"></div><div class="fold2_box12"></div><div class="box12_ribbon"></div></div><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--> <br /> /* This is the selector of the twelfth box, here's where we establish the measures, background colors, borders and shadows */ <br /> .box12{ <br />&nbsp;&nbsp;margin: 50px; <br />&nbsp;&nbsp;width: 300px; <br />&nbsp;&nbsp;padding: 0 0 1px 0; <br />&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;background:#f3f3f3; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#f3f3f3&#41;, to(#fff&#41;, color-stop(.1,#f3f3f3&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff&#41;; <br />&nbsp;&nbsp;border-top: 1px solid #ccc; <br />&nbsp;&nbsp;border-right: 1px solid #ccc; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 60px 60px; <br />&nbsp;&nbsp;border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-webkit-border-bottom-left-radius: 60px 60px; <br />&nbsp;&nbsp;-moz-border-radius-bottomleft: 60px 60px; <br />&nbsp;&nbsp;border-bottom-left-radius: 60px 60px; <br />&nbsp;&nbsp;-webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2&#41;; <br /> } <br /><br /> /* This is the bottom left fold */ <br /> .box12:before{ <br />&nbsp;&nbsp;content:''; <br />&nbsp;&nbsp;width: 25px; <br />&nbsp;&nbsp;height: 20px; <br />&nbsp;&nbsp;background: white; <br />&nbsp;&nbsp;position: absolute; <br />&nbsp;&nbsp;bottom:0; right:0; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 50% 40%, from(#fff&#41;, to( #eee&#41;, color-stop(.1,#fff&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee&#41;; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 30px; <br />&nbsp;&nbsp;border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;transform: rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br /> } <br /><br /> /* This is the shading of the right fold */ <br /> .box12:after{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;z-index: -10; <br />&nbsp;&nbsp;width: 100px; <br />&nbsp;&nbsp;height: 100px; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;bottom:0; <br />&nbsp;&nbsp;right:0; <br />&nbsp;&nbsp;background: rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 20px 20px 17px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br /> } <br /><br /> /* This is the shading of the left fold */ <br /> .fold_box12{ <br />&nbsp;&nbsp;z-index: -10; <br />&nbsp;&nbsp;width: 50px; <br />&nbsp;&nbsp;height: 50px; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;bottom:0; left:0; <br />&nbsp;&nbsp;-webkit-box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -20px 20px 17px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: -20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(40px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(40px,-17px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(40px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br /> } <br /><br /> /* This is the bottom left fold */ <br /> .fold2_box12{ <br />&nbsp;&nbsp;width: 25px; <br />&nbsp;&nbsp;height: 20px; <br />&nbsp;&nbsp;z-index:20; <br />&nbsp;&nbsp;background: white; <br />&nbsp;&nbsp;position: absolute; <br />&nbsp;&nbsp;bottom:0; left:0; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 50% 80%, from(#fff&#41;, to( #eee&#41;, color-stop(.1,#fff&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0 50%, #fff, #fff 10%, #eee&#41;; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 30px; <br />&nbsp;&nbsp;border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(103deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-3deg,-40deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-15px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(103deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-3deg,-40deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-15px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(103deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-3deg,-40deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-15px&#41;; <br />&nbsp;&nbsp;transform: rotate(103deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-3deg,-40deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-15px&#41;; <br /> } <br /><br /> /* This is the top tape of the box */ <br /> .box12_tape{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;top:-25px; left: 30%; <br />&nbsp;&nbsp;width: 130px; <br />&nbsp;&nbsp;height: 40px; <br />&nbsp;&nbsp;background: #ccc; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1&#41;&#41;, to(rgba(0, 0, 0, 0.0&#41;&#41;, color-stop(.1,rgba(0, 0, 0, 0.2&#41;&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1&#41;, rgba(0,0,0,0.2&#41; 10%, rgba(0,0,0,0.0&#41;&#41;; <br />&nbsp;&nbsp;border-left: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;border-right: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br /> }<!--/uzc--></div></div><!--/uzcode--> <br /> <hr /> <br /> <span style="font-size:18pt;"><div align="center">Box # 13</div></span> <br /> <hr /> <br /> On this case we combine a wrinkled paper box with a fold in its bottom right corner and then we stick it to the wall using 2 tapes at both sides. <br /> <div class="zindex"><div class="box13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box13_corner_lf"></div><div class="box13_corner_rt"></div><div class="box13_ribbon"></div></div></div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="box13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box13_corner_lf"></div><div class="box13_corner_rt"></div><div class="box13_ribbon"></div></div><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--> <br /> /* This is the selector of the thirteenth box, here's where we establish the measures, background colors, borders and shadows */ <br /> .box13{ <br />&nbsp;&nbsp;margin: 50px; <br />&nbsp;&nbsp;width: 300px; <br />&nbsp;&nbsp;min-height: 150px; <br />&nbsp;&nbsp;padding: 0 0 1px 0; <br />&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff&#41;, to(#f3f3f3&#41;, color-stop(.1,#fff&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3&#41;; <br />&nbsp;&nbsp;border-top: 1px solid #ccc; <br />&nbsp;&nbsp;border-right: 1px solid #ccc; <br />&nbsp;&nbsp;border-left: 1px solid #ccc; <br />&nbsp;&nbsp;-webkit-border-top-left-radius: 60px 5px; <br />&nbsp;&nbsp;-moz-border-radius-topleft:60px 5px; <br />&nbsp;&nbsp;border-top-left-radius:60px 5px; <br />&nbsp;&nbsp;-webkit-border-top-right-radius: 60px 5px; <br />&nbsp;&nbsp;-moz-border-radius-topright:60px 5px; <br />&nbsp;&nbsp;border-top-right-radius:60px 5px; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright:60px 60px; <br />&nbsp;&nbsp;border-bottom-right-radius: 60px 60px; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3&#41; ; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3&#41; ; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3&#41; ; <br /> } <br /><br /> /* This is the bottom left fold */ <br /> .box13:before{ <br />&nbsp;&nbsp;content:''; <br />&nbsp;&nbsp;width: 25px; <br />&nbsp;&nbsp;height: 20px; <br />&nbsp;&nbsp;position: absolute; <br />&nbsp;&nbsp;bottom:0; <br />&nbsp;&nbsp;right:0; <br />&nbsp;&nbsp;-webkit-border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-moz-border-radius-bottomright: 30px; <br />&nbsp;&nbsp;border-bottom-right-radius: 30px; <br />&nbsp;&nbsp;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3&#41;; <br />&nbsp;&nbsp;-webkit-transform: <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-moz-transform:&nbsp;&nbsp;&nbsp;&nbsp;rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;-o-transform:&nbsp;&nbsp;&nbsp;&nbsp;rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br />&nbsp;&nbsp;transform:&nbsp;&nbsp;&nbsp;&nbsp;rotate(-20deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-40deg,-3deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-13px,-13px&#41;; <br /> } <br /><br /> /* This is the fold's shading */ <br /> .box13:after{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;z-index: -10; <br />&nbsp;&nbsp;width: 100px; <br />&nbsp;&nbsp;height: 100px; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;bottom:0; <br />&nbsp;&nbsp;right:0; <br />&nbsp;&nbsp;background: rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;-webkit-box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 20px 20px 18px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 20px 20px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;transform: rotate(0deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-45px,-20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br /> } <br /><br /> /* This is the top left shadow */ <br /> .box13_corner_lf{ <br />&nbsp;&nbsp;width: 100px; <br />&nbsp;&nbsp;height: 100px; <br />&nbsp;&nbsp;top:0; left:0; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;z-index:-6; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br /> } <br /><br /> /* this is the top right shadow */ <br /> .box13_corner_rt{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;width: 50px; <br />&nbsp;&nbsp;height: 50px; <br />&nbsp;&nbsp;top:0; right:0; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;z-index:-6; <br />&nbsp;&nbsp;-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br /> } <br /><br /> /* This is the left side tape */ <br /> .box13_tape:before{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;top:0; left: 0; <br />&nbsp;&nbsp;width: 130px; <br />&nbsp;&nbsp;height: 40px; <br />&nbsp;&nbsp;background:rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1&#41;&#41;, to(rgba(0, 0, 0, 0.0&#41;&#41;, color-stop(.1,rgba(0, 0, 0, 0.2&#41;&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1&#41;, rgba(0,0,0,0.2&#41; 10%, rgba(0,0,0,0.0&#41;&#41;; <br />&nbsp;&nbsp;border-left: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;border-right: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,65px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,65px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,65px&#41;; <br />&nbsp;&nbsp;transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,65px&#41;; <br /> } <br /><br /> /* This is the right side tape */ <br /> .box13_tape:after{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;top:0; right: 0; <br />&nbsp;&nbsp;width: 130px; <br />&nbsp;&nbsp;height: 40px; <br />&nbsp;&nbsp;background:rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1&#41;&#41;, to(rgba(0, 0, 0, 0.0&#41;&#41;, color-stop(.1,rgba(0, 0, 0, 0.2&#41;&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1&#41;, rgba(0,0,0,0.2&#41; 10%, rgba(0,0,0,0.0&#41;&#41;; <br />&nbsp;&nbsp;border-left: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;border-right: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,-65px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,-65px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,-65px&#41;; <br />&nbsp;&nbsp;transform: rotate(90deg&#41; skew(0,0&#41; translate(100px,-65px&#41;; <br /> }<!--/uzc--></div></div><!--/uzcode--> <br /> <hr /> <br /> <span style="font-size:18pt;"><div align="center">Box # 14</div></span> <br /> <hr /> <br /> But with CSS3 you can place an object not only vertically or horizontally but with any angle you want, and that’s exactly what we did with the tape on this example. <br /> <div class="zindex"><div class="box14"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box14_ribbon"></div></div></div> <br /> HTML: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--><div class="box14"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><div class="box14_ribbon"></div></div><!--/uzc--></div></div><!--/uzcode--> <br /> CSS: <br /><br /> <!--uzcode--><div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><!--uzc--> <br /> /* This is the selector of the fourteenth box, here's where we establish the measures, background colors, borders and shadows */ <br /> .box14{ <br />&nbsp;&nbsp;margin: 50px; <br />&nbsp;&nbsp;width: 300px; <br />&nbsp;&nbsp;padding: 5px 0 ; <br />&nbsp;&nbsp;position:relative; <br />&nbsp;&nbsp;background:#fff; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff&#41;, to(#f3f3f3&#41;, color-stop(.1,#fff&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(0% 0% 270deg, #fff, #fff 10%, #f3f3f3&#41;; <br />&nbsp;&nbsp;border: 1px solid #ccc; <br />&nbsp;&nbsp;-webkit-border-radius: 60px 5px; <br />&nbsp;&nbsp;-moz-border-radius: 60px/5px; <br />&nbsp;&nbsp;border-radius: 60px/5px; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1&#41; inset; <br />&nbsp;&nbsp;box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1&#41; inset; <br /> } <br /><br /> /* This is the top right shadow */ <br /> .box14:before{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;width: 50px; <br />&nbsp;&nbsp;height: 50px; <br />&nbsp;&nbsp;top:0; right:0; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;z-index:-1; <br />&nbsp;&nbsp;-webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(-14px,20px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(-20deg&#41;; <br /> } <br /><br /> /* This is the top left shadow */ <br /> .box14:after{ <br />&nbsp;&nbsp;content: ''; <br />&nbsp;&nbsp;width: 100px; <br />&nbsp;&nbsp;height: 100px; <br />&nbsp;&nbsp;top:0; left:0; <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;z-index:-1; <br />&nbsp;&nbsp;display: inline-block; <br />&nbsp;&nbsp;-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-moz-transform:&nbsp;&nbsp;rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;-o-transform:&nbsp;&nbsp;rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br />&nbsp;&nbsp;transform:&nbsp;&nbsp;rotate(2deg&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;translate(20px,25px&#41; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;skew(20deg&#41;; <br /> } <br /><br /> /* This class establishes the tape of the top side of the box */ <br /> .box14_tape{ <br />&nbsp;&nbsp;position:absolute; <br />&nbsp;&nbsp;top:0; right: 0; <br />&nbsp;&nbsp;width: 130px; <br />&nbsp;&nbsp;height: 40px; <br />&nbsp;&nbsp;background: rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1&#41;&#41;, to(rgba(0, 0, 0, 0.0&#41;&#41;, color-stop(.1,rgba(0, 0, 0, 0.2&#41;&#41;&#41;; <br />&nbsp;&nbsp;background: -moz-linear-gradient(555% 0% 180deg, rgba(0,0,0,0.1&#41;, rgba(0,0,0,0.2&#41; 10%, rgba(0,0,0,0.0&#41;&#41;; <br />&nbsp;&nbsp;border-left: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;border-right: 1px dashed rgba(0, 0, 0, 0.1&#41;; <br />&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2&#41;; <br />&nbsp;&nbsp;-moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;box-shadow: 0px 0px 12px rgba(0,0,0,0.2&#41;; <br />&nbsp;&nbsp;-webkit-transform: rotate(6deg&#41; skew(0,0&#41; translate(-60%,-5px&#41;; <br />&nbsp;&nbsp;-moz-transform: rotate(6deg&#41; skew(0,0&#41; translate(-60%,-5px&#41;; <br />&nbsp;&nbsp;-o-transform: rotate(6deg&#41; skew(0,0&#41; translate(-60%,-5px&#41;; <br />&nbsp;&nbsp;transform: rotate(6deg&#41; skew(0,0&#41; translate(-60%,-5px&#41;; <br /> }<!--/uzc--></div></div><!--/uzcode--> <br /> <div style="float:right;"><a class="link" href="http://u.to/CoKC" title="http://www.tutorialshock.com/" rel="nofollow" target="_blank">Author's website</a></div> HTML / CSS / Javascript admin https://ucoztemplates.com/forum/12-123-1