CSS3 Rotation Generator Script For Blogger
I’m offering an exclusive CSS3 Rotation Generator Script for Blogger – completely FREE!. Are you looking to add dynamic animations to your Blogger site? Want to make your content stand out with rotating elements like images, text, or buttons? Look no further! At codenova.in.
With this script, you can effortlessly integrate CSS3-based rotation effects into your blog. Whether you’re a beginner or a seasoned blogger, this tool will help you add stunning effects to your website without the need for complex coding.
Table of Contents
What Does This CSS3 Rotation Generator Do?
The CSS3 Rotation Generator Script allows you to generate code that adds smooth, customizable rotations to any element on your site. You can rotate images, buttons, or even entire sections to bring a professional, interactive feel to your pages.
Key Features:
- Easy to Implement: Simply copy and paste the code into your Blogger template. No coding experience needed.
- Customizable Rotation: Control the degree of rotation (45°, 90°, 360° – it’s up to you!).
- Cross-Browser Compatibility: Works across all modern browsers.
- Lightweight: No bulky scripts, ensuring fast page loading times.
- Completely FREE: Download the script for free at codenova.in.
How to Use the CSS3 Rotation Script
- Download the Script: Head over to codenova.in and grab the script.
- Embed in Blogger: Open your Blogger dashboard, go to Theme > Edit HTML, and paste the script into the appropriate section of your template.
- Customize Your Rotation: Use the built-in generator to choose the degree and speed of the rotation.
- Apply to Elements: Add the CSS class to any element (images, text, buttons) you want to rotate.
Example Code Snippet
Here’s a basic idea of how the rotation code works:
.rotate {
transform: rotate(45deg);
transition: transform 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg);
}
You can apply this class to any HTML element, like an image or button:
<img class="rotate" src="image.jpg" alt="Rotating Image">
Why Use CSS3 Rotation?
Rotation effects are a simple yet powerful way to grab attention and make your site look modern. With this script, you can:
- Add unique visual effects to your blog.
- Create rotating logos, icons, or image galleries.
- Enhance your website’s interaction and appeal.
Get it Now – 100% Free!
Ready to take your blog design to the next level? Visit codenova.in now and download the CSS3 Rotation Generator Script for Blogger – it’s free! Get creative, and start adding stunning rotation effects to your site today!
CSS3 Rotation Generator Script For Blogger
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='en' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<!--SEO Data-->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//w3.org' rel='dns-prefetch'/>
<meta content='#######' name='keywords'/>
<link href='https://html-table-online.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://html-table-online.blogspot.com/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
<link href='https://html-table-online.blogspot.com/favicon.ico' rel='apple-touch-icon'/>
<link href='https://html-table-online.blogspot.com/feeds/posts/default' rel='alternate' title='HTML Table Online Builder And Designer - Atom' type='application/atom+xml'/>
<link href='https://html-table-online.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='HTML Table Online Builder And Designer - RSS' type='application/rss+xml'/>
<link href='https://www.blogger.com/feeds/4219911528331242584/posts/default' rel='service.post' title='HTML Table Online Builder And Designerr - Atom' type='application/atom+xml'/>
<link href='https://html-table-online.blogspot.com/feeds/4219911528331242584/comments/default' rel='alternate' title='HTML Table Online Builder And Designer - Atom' type='application/atom+xml'/>
<meta content='successbeta' name='author'/>
<meta content='summary' name='twitter:card'/>
<meta content='@ajaykrmahato101' name='twitter:site'/>
<meta content='HTML Table Online Builder And Designer' name='twitter:title'/>
<meta content='HTML Table Generator online to build HTML table syntax which can be copied in HTML.' name='twitter:description'/>
<meta content='https://htmltable.org/img/cb/html-table-generator.png' name='twitter:image'/>
<meta content='https://htmltable.org/html-table-generator' name='twitter:url'/> <meta content='@ajaykrmahato101' name='twitter:creator'/>
<meta content='HTML Table Online Builder And Designer' property='og:title'/>
<meta content='https://htmltable.org/img/cb/html-table-generator.png' property='og:image'/>
<meta content='https://htmltable.org/html-table-generator' property='og:url'/>
<meta content='website' property='og:type'/>
<script type='application/ld+json'>
{
"@context": "http://schema.org/",
"@type": "WebSite",
"name": "HTML Table Online Builder And Designer",
"image": "https://htmltable.org/img/cb/html-table-generator.png",
"url": "https://htmltable.org/html-table-generator",
"description": "HTML Table Generator online to build HTML table syntax which can be copied in HTML.",
"isPartOf": {
"@type": "Website",
"name": "HTML Table Online Builder And Designer",
"url": "https://htmltable.org"
},
"sameAs" : [
"https://twitter.com/ajaykrmahato101"
]
}
</script>
<!--SEO Data-->
<b:skin><![CDATA[/*
]]></b:skin>
<style>body,html {
font-family: 'Open Sans', sans-serif;
margin:0;
padding:0;
height:100%;
min-height:100%;
font-size:1.1em;
}
input, select, textarea, table td {
font-family: 'Droid Sans', sans-serif;
font-size:1em;
}
h1, h2, h3, h4, h5 {
margin:0;
padding:0;
font-family:Helvetica, serif;
color:#333;
font-weight:normal;
padding-bottom:10px;
border-bottom: 1px solid #e5e5e5;
margin-bottom:20px;
}
h1 {font-size:1.6em;}
h2 {font-size:1.5em;}
h3 {font-size:1.2em; color:#6483d3; border-bottom:none;}
h4 {font-size:1.1em;}
h5 {font-size:1em;}
ul li h3 {
margin-bottom:0;
}
p {
margin:0;
padding:0;
line-height:30px;
padding-bottom:20px;
}
a img {
border:none;
}
#container{
text-align:left;
padding:0 15px;
width: 90%;
width: 1200px;
overflow: hidden;
margin: 0 auto 40px;
position: relative;
padding-bottom:60px;
min-height:100%;
height:auto !important;
height:100%;
}
input.input-field, select.input-field, input.long-input-field, select.long-input-field, textarea.long-input-field, input.short-input-field{
width:97%;
display: inline-block;
width: 500px;
padding: 7px;
margin: 0;
outline: 0;
background-color: #fff;
border: 1px solid #e1e8ed;
border-radius: 3px;
}
input.long-input-field, select.long-input-field, textarea.long-input-field {
width:750px;
}
textarea.long-input-field {
width:1000px;
}
input.short-input-field {
width:50px;
}
input.red-border, select.red-border, textarea.red-border {
border: 3px solid #f02a2a;
}
.button {
-webkit-appearance: button;
color: #fff;
background-color: #55acee;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#0C000000)";
border: 1px solid #3b88c3;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
font-size:0.8em;
display:inline-block;
padding:8px 20px;
cursor:pointer;
border-radius: 3px;
}
.button:hover {
color: #fff;
background-color: #48a2cc;
border-color: #adadad;
}
.m-right10 {margin-right:10px;}
.m-left10 {margin-left:10px;}
.m-bottom10 {margin-bottom:10px;}
.m-top10 {margin-top:10px;}
.m-right20 {margin-right:20px;}
.m-left20 {margin-left:20px;}
.m-bottom20 {margin-bottom:20px;}
.m-top20 {margin-top:20px;}
.p-right10 {padding-right:10px;}
.p-left10 {padding-left:10px;}
.p-bottom10 {padding-bottom:10px;}
.p-top10 {padding-top:10px;}
.p-right20 {padding-right:20px;}
.p-left20 {padding-left:20px;}
.p-bottom20 {padding-bottom:20px;}
.p-top20 {padding-top:20px;}
.height-80 {height:80px;}
.height-150 { height:150px;}
.height-200 {height:200px;}
.height-500 {height:500px;}
.float-left {
float:left;
}
.float-right {
float:right;
}
.form {
font-size:0.9em;
}
.form .float-left {
width:600px;
}
.label-input {
font-style:italic;
font-weight:bold;
color:#4d71cc;
font-size:0.9em;
padding-bottom:5px;
}
.small-text {
font-size:0.8em;
}
.clear {
margin-bottom:15px;
clear:both;
}
.error-message, .message-info {
margin-top:10px;
margin-bottom:10px;
width:95%;
border:solid 1px #f71818;
padding:15px;
border-radius:8px;
background:#f9feeb;
line-height:1.5em;
font-size:0.8em;
}
.message-info {
border:solid 1px #6d6d64;
background:#f2fdc1;
padding:7px;
display:inline-block;
}
.hidden {
display:none;
}
.required-label {
font-size:1.5em;
font-weight:bold;
color:red;
padding-left:5px;
}
#main-body {
margin-top:10px;
width:100%;
padding-bottom:20px;
}
#main-body h1 {
color: #eb3d00;
margin-bottom:10px;
border-bottom:none;
}
#left-content {
float:left;
width:860px;
}
#right-content {
float:right;
min-width:320px;
}
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.liner {
height: 10px;
margin: 10px 0;
border-bottom: dashed 2px #BDBBB9;
}
.clear-footer{
}
#footer{
height:60px;
background:#322e2d;
color:#ffffff;
line-height:40px;
position:fixed;
bottom:0;
left:0;
width:100%;
}
#footer a, #footer a:hover, #footer a:visited{
color:#ffffff;
text-decoration:none;
position:relative;
}
#footer-inside{
margin:0 auto;
font-size:0.6em;
padding:0 10px;
width: 1200px;
}
#footer-inside ul.ul-footer {
width:250px;
}
#footer-inside ul.ul-footer, #footer-inside ul.ul-footer li {
margin:0;
padding:0;
list-style:none;
float:left;
}
#footer-inside ul.ul-footer li {
line-height:15px;
padding-right:10px;
padding-top:10px;
}
.footer-banner {
float:left;
margin-left:40px;
margin-top:5px;
}
/***************** Table styles ******************/
table.table-grid {
border-collapse:collapse; /*cellspacing="0"*/
border-spacing: 0;
width:100%;
}
table.table-grid tr:nth-child(even){
background-color:#eee;
}
table.table-grid tr.tr-header {
background:#606264;
height:30px;
line-height:30px;
color:#fff;
}
table.table-grid td {
padding:5px 10px;
font-size:0.9em;
}
a.link-edit, a.link-delete {
width:16px;
height:16px;
display:inline-block;
cursor:pointer;
background:url("https://lh3.googleusercontent.com/-cFdoyvlzurw/Y1QjRuvwGYI/AAAAAAAADNE/tJNUavTXdZ4V2MBH2t3uUfdRzcHsAmIagCNcBGAsYHQ/h120/edit.gif") no-repeat;
text-indent:-999em;
overflow:hidden;
}
a.link-delete {
background:url("https://lh3.googleusercontent.com/-Iw60WhODwlY/Y1QjE7KqIuI/AAAAAAAADNA/iJ3gVkDWU0onUGS4Fg8ckO4yflQv2SBjQCNcBGAsYHQ/h120/delete.gif") no-repeat;
}
table.table-search td {
padding:5px 10px;
}
.align-right {
text-align:right;
}
.search-option {
margin:20px 0;
}
.record-found {
padding:5px 0;
text-align:right;
font-size:0.8em;
}
.statistic-summary {
margin:10px 0;
font-size:0.9em;
font-weight:bold;
}
/******************** Paging Bar *********************/
.paging-bar {
padding:10px 0;
}
.paging-bar a {
margin-right:5px;
float:left;
border-radius:3px;
border:solid 1px #ccc;
padding:7px 10px;
display:inline-block;
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.10);
-ms-box-shadow: 0 1px 0 rgba(0,0,0,0.10);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.10);
box-shadow: 0 1px 0 rgba(0,0,0,0.10);
cursor:pointer;
font-size:0.8em;
}
.paging-bar a.link-selected, .paging-bar a:hover {
border-color: #c6c6c6;
background: #c7b6b6;
color:#fff;
}
/***************** BANNER *********************/
.header-banner,.ads-banner {
text-align:center;
margin:20px 0;
}
/*************** TUTORIAL BOX **************/
.tutorial-box{
padding:7px;
float:left;
margin-right:18px;
margin-bottom:15px;
background:#f8f6f6;
-moz-box-shadow: 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px #ccc;
position:relative;
cursor:pointer;
width:195px;
height:160px;
text-align:center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.tutorial-box:hover{
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
.tutorial-image{
padding-top:8px;
text-align:center;
padding-bottom:10px;
}
.img-tut{
display:none;
}
.intro-text {
margin-top:20px;
}
.tutorial-no{
float:left;
width:32px;
font-size:2em;
text-align:right;
padding-right:5px;
}
.tutorial-title-big{
float:left;
width:140px;
text-align:left;
border:Solid 1px black;
}
.tutorial-title-big a h2{
text-decoration:none;
font-size:1.2em;
}
.tutorial-title{
position:absolute;
bottom:7px;
width:200px;
left:0;
text-align:center;
}
.tutorial-title h1{
margin:0;
padding:0;
font-size:0.8em;
}
.tutorial-title a{
display:block;
text-align:center;
text-decoration:none;
}
.tutorial-desc{
padding-top:15px;
font-size:0.8em;
text-align:left;
background:url(https://lh3.googleusercontent.com/-aZYll9_k8zo/Y1Qiz8HE11I/AAAAAAAADM4/cMTAP3_dKJoBaACpf6gYmmnwoYr7oStWQCNcBGAsYHQ/h120/transparent_black.png);
color:#ffffff;
position:absolute;
left:0;
bottom:0;
display:none;
width:100%;
}
.tutorial-desc-inside{
padding:12px;
display:inline-block;
font-size:0.8em;
}
.tutorial-desc-inside p{
line-height:18px;
}
a.link-learn-more{
text-decoration:none;
color:#eef399;
font-weight:bold;
}
.tutorial-box-long{
padding:15px 10px;
padding-bottom:0;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
margin-bottom:15px;
background: #f0f7fa;
position:relative;
display:inline-table;
width:400px;
float:left;
height:140px;
margin-right:20px;
border:solid 1px #ccc;
}
.tutorial-box-long:hover{
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
background: #e4e869;
}
.tutorial-box-long-no{
float:left;
font-size:20px;
font-weight:bold;
font-size:2em;
line-height:1em;
margin:0;
padding:0;
padding:0px 7px;
margin-top:10px;
width:40px;
text-align:right;
color:#2e2b2b;
padding-right:12px;
}
.tutorial-box-long-desc{
float:left;
margin-left:15px;
width:300px;
font-size:0.72em;
line-height:18px;
}
.tutorial-box-long-desc h2{
color:#1d5ccf;
font-size:1.3em;
line-height:1.2em;
border-bottom:none;
padding-bottom:0;
margin-bottom:7px;
}
.tutorial-box-long-desc h2 a{
text-decoration:none;
}
.tutorial-box-long-desc p{
line-height:23px;
padding-bottom:5px;
}
.published-date {
font-size:0.7em;
font-style:italic;
text-align:right;
padding-right:20px;
padding-bottom:20px;
}
.article-list {
margin-top:25px;
display:inline-block;
}
.imageborder {
margin: 10px 0;
padding: 10px;
border: Solid 1px #ccc;
display: inline-block;
}
.article-box{
padding:20px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
position:relative;
width:100%;
border-left:solid 1px #fbe8e8;
border-top:solid 1px #fbe8e8;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
box-shadow:5px 5px 5px #ccc;
margin-bottom:25px;
display:inline-block;
}
.article-title{
padding-bottom:10px;
}
.article-title a{
font-size:1.1em;
text-decoration:none;
}
.article-published-date {
padding-bottom:10px;
color:#292323;
font-size:0.8em;
font-style:italic;
float:left;
text-align:center;
width:50px;
padding:10px;
border-radius:5px;
height:60px;
background: #fefcea; /* Old browsers */
background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fefcea 0%,#f1da36 100%); /* IE10+ */
background: linear-gradient(to bottom, #fefcea 0%,#f1da36 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}
.date-day{
font-size:1.1em;
font-weight:bold;
display:block;
}
.date-month, .date-year {
display:block;
}
.article-content {
float:left;
margin-left:15px;
width:700px;
}
.div-paging {
text-align:center;
margin-bottom:10px;
display:block;
}
.article-paging{
border:1px solid #15aeec; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #49c0f0; background-image: -webkit-gradient(linear, left top, left bottom, from(#49c0f0), to(#2CAFE3));
background-image: -webkit-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -moz-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -ms-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: -o-linear-gradient(top, #49c0f0, #2CAFE3);
background-image: linear-gradient(to bottom, #49c0f0, #2CAFE3);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#49c0f0, endColorstr=#2CAFE3);
cursor:pointer;
width:40%;
}
.article-paging:hover{
border:1px solid #1090c3;
background-color: #1ab0ec; background-image: -webkit-gradient(linear, left top, left bottom, from(#1ab0ec), to(#1a92c2));
background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -moz-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -ms-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: -o-linear-gradient(top, #1ab0ec, #1a92c2);
background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1ab0ec, endColorstr=#1a92c2);
}
.link-read-more a {
font-size:0.8em;
color:#df1010;
}
.article-desc {
padding-bottom:7px;
font-size:0.85em;
}
.scrollsection {
cursor:pointer;
color:#5665f4;
}
.scrollsection:hover {
color:#2c3ac0;
}
/******************* POPUP BOX ******************/
#popup-box-transparent
{
z-index:10000;
position:absolute;
left:0;
top:0;
width:100%;
background: #000;
opacity: .60;
-ms-filter: Alpha(Opacity=60);
}
#popup-box
{
z-index:10001;
position:fixed;
background:#fff;
padding:20px;
width:300px;
height:100px;
left:50%;
top:50%;
margin:-50px 0 0 -150px;
border-radius:8px;
text-align:center;
color:#769cc7;
font-size:15px;
}
.loading-image
{
padding-bottom:25px;
}
/********************** TABLE EXAMPLE ***********************/
table.tblexample, table.tblproperty{
border-left:solid 1px #89897e;
border-top:solid 1px #89897e;
width:99%;
margin-bottom:15px;
}
table.tblresult{
border-left:solid 1px #89897e;
border-top:solid 1px #89897e;
margin-bottom:15px;
}
table.tblexample td, table.tblproperty td, table.tblresult td{
padding:5px 10px;
border-right:solid 1px #89897e;
border-bottom:solid 1px #89897e;
}
table.tblexample tr.trheader td, table.tblproperty tr.trheader td, table.tblresult tr.trheader td{
background:#2982c1;
color:#ffffff;
font-weight:bold;
font-size:1.2em;
}
table.tblresult tr.trheader td{
background:#484844;
font-size:1em;
padding:5px 20px;
}
table.tblexample tr.tralter td, table.tblproperty tr.tralter td{
background:#e6f4fd;
}
table.tblexample td pre{
min-width:240px;
}
.note{
min-height: 50px;
height: auto !important;
height: 60px;
padding-left: 75px;
background: url(https://lh3.googleusercontent.com/-QHaWsmxVk3s/Y1QiW9kjl0I/AAAAAAAADMs/-801D56BjO41eSbljzRRSHJba7EPGiKagCNcBGAsYHQ/h120/note.png) no-repeat center left #eef7fe;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
border:solid 1px #ccc;
color: #333;
font-size: 1em;
padding: 10px 15px;
padding-left:75px;
margin:22px 0;
font-weight:normal;
}
a.view-demo, a.view-demo:visited, a.view-demo:hover,
a.view-demo-small, a.view-demo-small:visited, a.view-demo-small:hover{
background:#f06114;
display:inline-block;
color:#fff;
padding:10px 20px;
text-transform:uppercase;
text-decoration:none;
}
a.view-demo-small, a.view-demo-small:visited, a.view-demo-small:hover{
padding:5px 10px;
}
/***************** HEADER QUESTION *************/
h2.h2question{
background:#3a3a36;
color:#fff;
padding:5px 15px;
font-size:1em;
font-weight:normal;
margin-bottom:5px;
border:solid 1px #ccc;
border-bottom:none;
}
.answer{
margin-bottom:25px;
padding:3px 15px;
}
h2.groupheader{
display:inline-block;
padding:12px 30px;
color:#fff;
text-transform:uppercase;
background:#415268;
font-size:1em;
margin:0;
border-radius: 17px 25px 0px 0px;
border-bottom:none;
}
.groupbox{
border:solid 1px #ccc;
margin-bottom:20px;
padding:20px;
}
.groupbox:hover{
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
background: #fbfce5;
}
.groupbox ul, .groupbox ul li{
margin:0;
padding:0;
list-style:none;
}
.groupbox ul li{
min-width:120px;
float:left;
padding:5px 0;
}
/***************** FREE WEB TOOLS *****************/
.tool-box {
float: left;
margin: 10px 15px;
width: 260px;
height: 130px;
background: #f9fcff;
border: solid 1px #afb3b6;
position: relative;
margin-left: 0;
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
.tool-box:hover {
background:#eaf8a6;
border: solid 1px #618eea;
}
.tool-box-desc{
padding:0px 15px 10px 15px;
}
.tool-box-desc p{
line-height:18px;
padding-bottom:7px;
font-size:0.65em;
padding-right:5px;
}
.tool-box-desc h1 {
margin:0;
padding:0;
margin-top:15px;
padding-bottom:5px;
font-size:0.9em;
}
.tool-box-desc a {
font-size:0.65em;
}
.tool-box-desc h1 a {
font-size:0.9em;
}
.box {
border: 2px solid #AAA7A5;
display: inline-block;
padding: 25px 10px;
width:90%;
position: relative;
box-shadow: 5px 5px 5px #CCC;
margin-bottom: 15px;
font-size:0.9em;
}
#box-message{
padding: 25px 10px;
width:90%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
#progress-box, .success-result{
-moz-box-shadow: 5px 5px 5px #000;
-webkit-box-shadow: 5px 5px 5px #000;
box-shadow: 5px 5px 5px #000;
border: 2px solid #575555;
text-align:center;
padding:15px 10px;
width:100%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.success-result{
background:#f5f2d7;
text-align:left;
}
.row{
clear:both;
display:block;
}
.rowlabel{
float:left;
width:130px;
margin-bottom:10px;
text-align:right;
padding-right:10px;
font-size:0.8em;
word-wrap:break-word;
}
.rowinput{
float:left;
margin-bottom:10px;
width:80%;
}
.rowinput input.textbox, .rowinput input.textboxshort, .textboxarea, .textboxlong{
border: 1px solid #cac0bd;
width: 80%;
height: 28px;
line-height: 28px;
padding-left:5px;
font-family: 'Open Sans', sans-serif;
border-radius:5px;
font-size:0.8em;
}
.rowinput input.textboxshort{
width:60px;
}
.textboxarea{
height:250px;
line-height:18px;
}
.rowinput input.button-tools, .button-tools, .button-clear, .button-disabled{
background: #305cfc;
padding: 8px 10px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
cursor: pointer;
border:none;
margin-right:10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
font-size:0.8em;
}
.rowinput input.button-tools.button-disabled, .button-disabled,
.rowinput input.button-clear.button-disabled{
background: #737171;
cursor:progress;
}
.big-font{
font-size:1.6em;
font-weight:bold;
}
.button-tools:hover, .button-disabled:hover, .button-clear:hover{
-moz-box-shadow: 5px 5px 5px #383333;
-webkit-box-shadow: 5px 5px 5px #383333;
box-shadow: 5px 5px 5px #383333;
}
.checkfield{
background: #ee0101;
position: relative;
color: #fff;
min-width: 120px;
font-size: 11px;
border: 2px solid #ddd;
box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
-webkit-box-shadow: 0 0 6px #000;
-o-box-shadow: 0 0 6px #000;
padding: 4px 10px 4px 10px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
display:none;
margin-left:5px;
}
.example{
font-size:11px;
font-style:italic;
color:#292626;
padding:5px 0;
}
.error-message{
background:#f74040;
padding:15px;
color:#ffffff;
}
table.tbl{
border-top:solid 1px #5e5b5b;
border-left:solid 1px #5e5b5b;
margin-bottom:15px;
}
table.tbl td{
border-right:solid 1px #5e5b5b;
border-bottom:solid 1px #5e5b5b;
padding:5px 10px;
}
table.tbl tr.trheader td{
background-color:#727171;
color:#ffffff;
text-align:center;
font-weight:bold;
}
.text-content{
width:100%;
height:350px;
font-size:0.8em;
}
.bold-title{
color:#1499c5;
border-bottom:solid 1px #4d4948;
padding-bottom:5px;
margin-bottom:10px;
}
/*************** LOTTERY *******************/
.ul-lottery, .ul-lottery li{
margin:0;
padding:0;
list-style:none;
}
.ul-lottery li.li-game{
float:left;
width:120px;
font-weight:bold;
font-size:22px;
line-height:59px;
}
.ul-lottery li.li-ball, .ul-lottery li.li-powerball{
float:left;
width:59px;
height:59px;
color:#000;
font-size:22px;
background:url(https://lh3.googleusercontent.com/-S4jrlq2FxWc/Y1Qh6LT4hOI/AAAAAAAADMg/yOUddt2yKz8NVMyCu7LX8-0bcGowt4sRwCNcBGAsYHQ/h120/lottery-ball.png) no-repeat;
text-align:center;
font-weight:bold;
line-height:59px;
}
.ul-lottery li.li-powerball{
background:url(https://lh3.googleusercontent.com/-kwYgSu07fFI/Y1QiHZYJnPI/AAAAAAAADMk/ESMSr6ccV80kaEmFdh4EF5Al_Y4ujXmhQCNcBGAsYHQ/h120/lottery-ball-red.png) no-repeat;
margin-left:20px;
color:#fff;
font-weight:bold;
}
.ul-lottery{
clear:both;
height:58px;
margin-bottom:25px;
}
/************************************ CSS3 Generator *********************************/
#css3-codes{
min-height:120px;
width:100%;
background:#2c2c2b;
border:dashed 1px #747809;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:15px;
color:#fff;
}
.higher{
height:220px;
}
#box-preview-wrapper{
text-align:center;
}
#box-preview{
width:200px;
height:100px;
margin:15px auto;
background:#f5741e;
color:#fff;
font-size:1.6em;
}
#box-preview-inside{
vertical-align:middle;
display:table-cell;
height:100px;
width:200px;
text-align:center;
line-height:50px;
}
.css3-input{
height:25px;
line-height:25px;
border:solid 1px #ccc;
border-radius:5px;
width:80px;
padding:0 5px;
margin-bottom:5px;
}
.span-label-small{
width:40px;
}
.example-value{
font-size:0.8em;
font-style:italic;
color:#292927;
}
.css3-box-wrapper{
text-align:left;
}
.hidden{
display:none;
}
.box-left, .box-right{
width:260px;
margin-bottom:20px;
float:left;
}
.box-rounded{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:10px;
border:solid 1px #ccc;
margin-bottom:10px;
font-size:0.85em;
}
.box-right{
width:550px;
float:right;
}
.bg-blue-light{
background:#f4f6f6;
}
.header-bold{
font-weight:bold;
padding-bottom:5px;
}
.note-info{
font-size:0.82em;
font-style:italic;
color:#009;
}
.range-slider{
margin:5px 0 10px 0;
font-size:90%;
}
.color-picker{
width:80px;
}
.multiple-column-preview{
padding:10px;
border:solid 1px #ccc;
font-size:0.8em;
text-align:left;
}</style>
</head>
<body>
<div class='header-container'>
<header class='header'>
<!-- logo -->
<div class='img-container'>
<img alt='Logo' class='logo' src='https://lh3.googleusercontent.com/-hgT1SSLVbg8/YqDdazena2I/AAAAAAAAC5g/QXfI7JDD79kevZR_iNNvYjiomlZMtQtigCNcBGAsYHQ/h120/fsfs%2Bcopy.png'/>
<!-- <h1>HTML Table Editor Online</h1> [if you want a text logo add this line]-->
</div>
<!-- /logo -->
<!-- icons -->
<!-- you can remove or add a size to the icons doing size="large" -->
<div class='icons-container'>
<a href='#' target='_blank'>
<ion-icon class='icon' name='logo-instagram'/>
</a>
<a href='#' target='_blank'>
<ion-icon class='icon' name='logo-twitter'/>
</a>
<a href='#' target='_blank'>
<ion-icon class='icon' name='logo-youtube'/>
</a>
<a href='#'>
<ion-icon class='d-none2 icon' name='logo-linkedin'/>
</a>
<a href='#'>
<ion-icon class='d-none2 icon' name='logo-github'/>
</a>
</div>
<!-- /icons -->
<!-- hamburger menu -->
<div class='hamburger'>
<span class='bar'/>
<span class='bar'/>
<span class='bar'/>
</div>
</header>
</div>
<!-- /hamburger menu -->
<div class='nav-container' id='navbar'>
<nav>
<div>
<!-- nav links -->
<ul class='navbar'>
<li><a class='nav-link' href='https://editor.htmltable.org/'>Home</a></li>
<li><a class='nav-link' href='https://www.htmltable.org'>HTML Table Generator</a></li>
<li><a class='nav-link' href='#about' id='MyBtn12'>Term And Conditions</a></li>
<li><a class='nav-link' href='#projects' id='MyBtn5'>Privacy policy</a></li>
<li><a class='nav-link' href='#contact' id='MyBtn4'>Contact Us</a></li>
</ul>
<!-- /nav links -->
</div>
<!-- transform the buttons on the nav in icons to the header -->
<!-- /buttons to icons -->
</nav>
</div>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js' type='module'/>
<script nomodule='' src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'/>
<script type='text/javascript'>// call your hamburger and navbar classes
const hamburger = document.querySelector('.hamburger')
const navbar = document.querySelector('.navbar');
// add a event click with arrow function and an active class
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navbar.classList.toggle('active');
})
// when you click on any navbar link it will close the hamburger menu
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
hamburger.classList.remove('active');
navbar.classList.remove('active');
}))</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700family=Roboto:wght@300;400;700family=Russo+Onedisplay=swap');
/* resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
li {
list-style: none;
}
/* /resets */
/* global */
:root {
--bg-color: #eff0f5;
--bg-header-color: #e5e8ee;
--bg-navbar-color: #e0e0e7;
--nav-font: 'Roboto', sans-serif;
--secondary-font: 'Roboto Mono', monospace;
--main-font: 'Russo One', sans-serif;
--smooth-black: #393939;
--smooth-other-black: #504f4f;
--smooth-white: rgb(247, 247, 247);
}
.d-none2 {
display: none;
}
/* /global */
/* header section */
.logo {
max-width: 100%;
height: 70px;
}
/* if the logo is a text */
.img-container h1 {
padding: 18px 0;
}
/* if the logo is a text */
.icons-container {
font-size: 30px;
color: var(--smooth-black);
}
.icon {
transition: ease .5s;
}
.icon:hover {
color: var(--smooth-other-black);
}
.header-container {
background-color: var(--bg-header-color);
}
.header {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
padding: 5px;
align-items: center;
justify-content: space-between;
}
/* /header section */
/* hamburger section */
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: var(--smooth-black);
}
/* /hamburger section */
/* navbar section */
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1100px;
margin: 0 auto;
align-items: center;
padding: 2px 0;
}
.blog {
border: 0;
background-color: var(--smooth-black);
padding: 12px 20px;
font-weight: bold;
border-radius: 2px;
color: var(--smooth-white);
cursor: pointer;
transition: ease .5s;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.164);
margin-right: 7px;
}
.blog:hover {
background-color: #666565;
color: white;
}
.nav-container {
background-color: var(--bg-navbar-color);
}
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar li {
margin-right: 35px;
font-family: var(--nav-font);
font-weight: bold;
transition: ease .3s;
border-radius: 3px;
}
.navbar li a {
padding: 5px;
transition: ease-out .5s;
}
.navbar li a:hover {
color: var(--smooth-white);
background-color: var(--smooth-black);
border-radius: 5px;
}
/* /navbar section */
/* responsive media queries section */
@media (max-width: 1200px) {
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header-container {
max-width: 1200px;
}
.nav-container {
max-width: 1200px;
}
nav {
justify-content: space-between;
}
}
@media (max-width:800px) {
.nav-link a {
color: var(--smooth-white);
}
.d-none {
display: none;
}
.d-none2 {
display: inline-block;
}
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.navbar {
position: fixed;
left: -100%;
top: 150px;
gap: 0;
flex-direction: column;
background-color: var(--smooth-white);
width: 100%;
text-align: center;
transition: .3s;
}
.navbar ul li {
margin: 16px;
color: var(--smooth-white);
}
.navbar.active {
left: 0;
}
.nav-container {
max-width: 800px;
}
.navbar {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 8px 0px;
}
.navbar li {
margin: 5px 0px;
}
nav {
padding: 0px 15px;
}
.btn-nav {
display: flex;
flex-direction: column;
gap: 10px;
align-content: space-between;
}
}
@media (max-width: 400px) {}
/* /responsive media queries section */</style>
<div id='main-body'>
<div id='left-content'>
<h1>CSS3 Rotation Generator</h1>
<p>CSS3 Rotation is part of CSS3 Transform property. This property is used to rotate an element. </p>
<!-- REGION LEFT BOX -->
<div class='box-left'>
<div class='css3-rotation-controls'>
<div class='box-rounded bg-blue-light'>
<div class='header-bold'>Rotation Properties</div>
<div>Degree: <span id='rotate-degree'>15</span></div>
<div class='range-slider' data-id='rotate-degree' data-max='360' data-min='0' data-step-value='1' data-value='15'/>
</div>
</div>
</div>
<!-- END REGION LEFT BOX -->
<!-- REGION RIGHT BOX -->
<div class='box-right'>
<div class='box-rounded' id='box-preview-wrapper'>
<div class='header-bold'>CSS3 Preview</div>
<div id='box-preview'><div id='box-preview-inside'/></div>
</div>
<div class='box-rounded'>
<div class='header-bold'>CSS3 Codes</div>
<textarea id='css3-codes'/>
</div>
</div>
<!-- END REGION RIGHT BOX -->
<div class='clear'/>
</div>
<div id='right-content'>
<div class='sticky' id='sticky'>
<div class='ads-banner'>
<script type='text/javascript'><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxx";
/* HTMLTable.Org 300x250 */
google_ad_slot = "7531167182";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</div>
<div class='ads-banner'>
<script type='text/javascript'><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxx";
/* HTMLTable.Org 300x250 */
google_ad_slot = "7531167182";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
</div>
</div>
</div>
<div class='clear'/>
</div>
<div class='clear-footer'/>
<footer id='footer'>
<div id='footer-inside'>
<ul class='ul-footer'>
<li> 2022 HTMLTable.Org</li>
<li><a href='#'>Terms</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='https://www.twitter.com/'>Twitter</a></li>
<li><a href='https://www.facebook.com/'>Facebook</a></li>
<li><a href='/https://plus.google.com/' rel='publisher'>Google+</a></li>
</ul>
<div class='footer-banner'>
<script async='async' src='http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- Overpie 320 x 50 -->
<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxx' data-ad-slot='8567327586' style='display:inline-block;width:320px;height:50px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='footer-banner'>
<!-- Overpie 320 x 50 -->
<ins class='adsbygoogle' data-ad-client='ca-xxxxxx' data-ad-slot='8567327586' style='display:inline-block;width:320px;height:50px'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class='clear'> </div></div>
</footer>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.3.4/spectrum.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.3.4/spectrum.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>var currentPage = "css3-rotation";</script>
<script>/********************* COPYRIGHT HTMLTable.Org ******************/
//
//PUBLIC VARIABLES
var cssCode = "";
var cssValue = "";
var ifWebkit = true;
var ifMoz = true;
var cssType = "";
$(function () {
//INITIAL VALUES
$("#chk-webkit").prop("checked", false);
$("#chk-moz").prop("checked", false);
$("#box-preview-wrapper").show();
//Get current css3 mode
//var currentPage = ($(".sub-menu a.selected").attr("href")).replace("/", "");
switch (currentPage) {
case "css3-border-radius":
cssType = "br-all";
$("#css3-codes").html(generateCSS3Border_AllBorders("10"));
$("#box-preview").attr("style", generateCSS3Border_AllBorders("10").replace(/\n/g, ""));
break;
case "css3-box-shadow":
cssType = "box-shadow-hex";
$("#css3-codes").html(generateCSS3BoxShadow("5", "10", "25", "5", "#575754"));
$("#box-preview").attr("style", generateCSS3BoxShadow("5", "10", "25", "5", "#575754").replace(/\n/g, ""));
break;
case "css3-text-shadow":
cssType = "text-shadow-hex";
$("#css3-codes").html(generateCSS3TextShadow("5", "5", "5", "#000000"));
$("#box-preview").attr("style", generateCSS3TextShadow("5", "5", "5", "#000000").replace(/\n/g, ""));
$("#box-preview-inside").html("Text Demo");
break;
case "css3-rgba":
$("#css3-codes").html(generateCSS3RGBA());
$("#box-preview").attr("style", generateCSS3RGBA().replace(/\n/g, ""));
break;
case "css3-opacity":
$("#css3-codes").html(generateCSS3Opacity());
$("#box-preview").attr("style", generateCSS3Opacity().replace(/\n/g, ""));
break;
case "css3-transform":
$("#box-preview-inside").html("Transform Me!!!");
$("#css3-codes").html(generateCSS3Transform());
$("#box-preview").attr("style", generateCSS3Transform().replace(/\n/g, ""));
break;
case "css3-rotation":
$("#box-preview-inside").html("Rotate Me!!!");
$("#css3-codes").html(generateCSS3Rotation());
$("#box-preview").attr("style", generateCSS3Rotation().replace(/\n/g, ""));
break;
case "css3-box-resize":
$("#box-preview-inside").html("both resize");
$("#css3-codes").html(generateCSS3BoxResize());
$("#box-preview").attr("style", generateCSS3BoxResize().replace(/\n/g, ""));
break;
case "css3-box-sizing":
$("#css3-codes").html(generateCSS3BoxSizing());
break;
case "css3-outline":
$("#css3-codes").html(generateCSS3Outline());
$("#box-preview").attr("style", generateCSS3Outline().replace(/\n/g, ""));
break;
case "css3-multiple-column":
$("#css3-codes").html(generateCSS3MultipleColumn());
$("#multiple-column-preview").attr("style", generateCSS3MultipleColumn().replace(/\n/g, ""));
break;
}
//COLOR PICKER
$(".color-picker").each(function () {
$(this).spectrum();
$(this).show();
});
//RANGE SLIDER
$(".range-slider").each(function () {
var minValue = parseFloat($(this).attr("data-min"));
var maxValue = parseFloat($(this).attr("data-max"));
var defaultValue = parseFloat($(this).attr("data-value"));
var stepValue = parseFloat($(this).attr("data-step-value"));
$("#" + $(this).attr("data-id")).html(defaultValue);
$(this).slider({
range: "max",
min: minValue,
max: maxValue,
step: stepValue,
value: defaultValue,
slide: function (event, ui) {
cssValue = ui.value;
$("#" + $(this).attr("data-id")).html(cssValue);
if ($(".css3-border-radius-controls").length > 0) {
switch ($(this).attr("data-id")) {
case "br-all":
$("#css3-codes").html(generateCSS3Border_AllBorders(cssValue));
$("#box-preview").attr("style", generateCSS3Border_AllBorders($("#br-all").html()).replace(/\n/g, ""));
cssType = "br-all";
break;
default:
$("#css3-codes").html(generateCSS3Border_EachBorder($("#br-left-top").html(), $("#br-right-top").html(), $("#br-bottom-left").html(), $("#br-bottom-right").html()));
$("#box-preview").attr("style", generateCSS3Border_EachBorder($("#br-left-top").html(), $("#br-right-top").html(), $("#br-bottom-left").html(), $("#br-bottom-right").html()).replace(/\n/g, ""));
cssType = "br-each";
break;
}
} else if ($(".css3-box-shadow-controls").length > 0) {
var color = "rgba(" + $("#bshadow-R").html() + "," + $("#bshadow-G").html() + "," + $("#bshadow-B").html() + "," + $("#bshadow-Opacity").html() + ")";
$("#css3-codes").html(generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), color));
$("#box-preview").attr("style", generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), color).replace(/\n/g, ""));
} else if ($(".css3-text-shadow-controls").length > 0) {
var color = "rgba(" + $("#tshadow-R").html() + "," + $("#tshadow-G").html() + "," + $("#tshadow-B").html() + "," + $("#tshadow-Opacity").html() + ")";
$("#css3-codes").html(generateCSS3TextShadow($("#tshadow-horizontal").html(), $("#tshadow-vertical").html(), $("#tshadow-blur").html(), color));
$("#box-preview").attr("style", generateCSS3TextShadow($("#tshadow-horizontal").html(), $("#tshadow-vertical").html(), $("#tshadow-blur").html(), color).replace(/\n/g, ""));
} else if ($(".css3-rgba-controls").length > 0) {
$("#css3-codes").html(generateCSS3RGBA());
$("#box-preview").attr("style", generateCSS3RGBA().replace(/\n/g, ""));
} else if ($(".css3-opacity-controls").length > 0) {
$("#css3-codes").html(generateCSS3Opacity());
$("#box-preview").attr("style", generateCSS3Opacity().replace(/\n/g, ""));
} else if ($(".css3-transform-controls").length > 0) {
$("#css3-codes").html(generateCSS3Transform());
$("#box-preview").attr("style", generateCSS3Transform().replace(/\n/g, ""));
} else if ($(".css3-rotation-controls").length > 0) {
$("#css3-codes").html(generateCSS3Rotation());
$("#box-preview").attr("style", generateCSS3Rotation().replace(/\n/g, ""));
} else if ($(".css3-outline-controls").length > 0) {
$("#css3-codes").html(generateCSS3Outline());
$("#box-preview").attr("style", generateCSS3Outline().replace(/\n/g, ""));
} else if ($(".css3-multiple-column-controls").length > 0) {
$("#css3-codes").html(generateCSS3MultipleColumn());
$("#multiple-column-preview").attr("style", generateCSS3MultipleColumn().replace(/\n/g, ""));
}
}
});
});
//INPUT BLUR, CHANGE
/************** BOX SHADOW INPUTS ****************/
$("#bshadow-hex").bind("change", function () {
$("#css3-codes").html(generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), $("#bshadow-hex").val()));
$("#box-preview").attr("style", generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), $("#bshadow-hex").val()).replace(/\n/g, ""));
cssType = "box-shadow-hex";
});
$("#chk-shadow-box-inset").click(function () {
if (cssType == "box-shadow-hex") {
$("#css3-codes").html(generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), $("#bshadow-hex").html()));
$("#box-preview").attr("style", generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), $("#bshadow-hex").html()).replace(/\n/g, ""));
} else {
var color = "rgba(" + $("#bshadow-R").val() + "," + $("#bshadow-G").html() + "," + $("#bshadow-B").val() + "," + $("#bshadow-Opacity").val() + ")";
$("#css3-codes").html(generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), color));
$("#box-preview").attr("style", generateCSS3BoxShadow($("#bshadow-horizontal").html(), $("#bshadow-vertical").html(), $("#bshadow-blur").html(), $("#bshadow-spread").html(), color).replace(/\n/g, ""));
}
});
/************** END BOX SHADOW INPUTS ****************/
/************** TEXT SHADOW INPUTS ****************/
$("#tshadow-hex").bind("change", function () {
$("#css3-codes").html(generateCSS3TextShadow($("#tshadow-horizontal").html(), $("#tshadow-vertical").html(), $("#tshadow-blur").html(), $("#tshadow-hex").val()));
$("#box-preview").attr("style", generateCSS3TextShadow($("#tshadow-horizontal").html(), $("#tshadow-vertical").html(), $("#tshadow-blur").html(), $("#tshadow-hex").val()).replace(/\n/g, ""));
cssType = "text-shadow-hex";
});
/************** END TEXT SHADOW INPUTS ****************/
/************** BOX RESIZE INPUTS ******************/
$("#box-resize-selector").bind("change", function () {
$("#css3-codes").html(generateCSS3BoxResize());
$("#box-preview").attr("style", generateCSS3BoxResize().replace(/\n/g, ""));
$("#box-preview-inside").html($("#box-resize-selector").val() + " resize");
});
/************** END BOX RESIZE INPUTS ******************/
/************** BOX SIZING INPUTS ******************/
$("#box-sizing-selector").bind("change", function () {
$("#css3-codes").html(generateCSS3BoxSizing());
});
/************** END BOX SIZING INPUTS ******************/
/************** OUTLINE INPUTS ******************/
$("#outline-selector").bind("change", function () {
$("#css3-codes").html(generateCSS3Outline());
$("#box-preview").attr("style", generateCSS3Outline().replace(/\n/g, ""));
});
/************** END OUTLINE INPUTS ******************/
/************** OUTLINE INPUTS ******************/
$("#input-multiple-column").bind("change", function () {
$("#css3-codes").html(generateCSS3MultipleColumn());
$("#multiple-column-preview").attr("style", generateCSS3MultipleColumn().replace(/\n/g, ""));
});
/************** END OUTLINE INPUTS ******************/
});
/******************* INDIVIDUAL FUNCTION **************************/
function generateCSS3Border_AllBorders(value) {
cssCode = "";
cssCode += "border-radius: " + value + "px;\n";
cssCode = "-webkit-border-radius: " + value + "px;\n";
cssCode += "-moz-border-radius: " + value + "px;\n";
return cssCode;
}
function generateCSS3Border_EachBorder(topLeft, topRight, bottomLeft, bottomRight) {
cssCode = "";
cssCode += "border-radius: " + topLeft + "px " + topRight + "px " + bottomRight + "px " + bottomLeft + "px;\n";
cssCode += "-webkit-border-radius: " + topLeft + "px " + topRight + "px " + bottomRight + "px " + bottomLeft + "px;\n";
cssCode += "-moz-border-radius: " + topLeft + "px " + topRight + "px " + bottomRight + "px " + bottomLeft + "px;\n";
return cssCode;
}
function generateCSS3BoxShadow(horizontalLength, verticalLength, blurRadius, spread, color) {
cssCode = "";
var box_shadow_insert = ($("#chk-shadow-box-inset").prop("checked")) ? " inset " : " ";
cssCode += "box-shadow:" + box_shadow_insert + horizontalLength + "px " + verticalLength + "px " + blurRadius + "px " + spread + "px " + color + ";\n";
return cssCode;
}
function generateCSS3TextShadow(horizontalLength, verticalLength, blurRadius, color) {
cssCode = "";
cssCode += "text-shadow:" + horizontalLength + "px " + verticalLength + "px " + blurRadius + "px " + color + ";\n";
return cssCode;
}
function generateCSS3RGBA() {
cssCode = "background: rgba(" + $("#rgba-r").html() + ", " + $("#rgba-g").html() + ", " + $("#rgba-b").html() + ", " + $("#rgba-a").html() + ")" + ";\n";
cssCode += "background-color: rgba(" + $("#rgba-r").html() + ", " + $("#rgba-g").html() + ", " + $("#rgba-b").html() + ", " + $("#rgba-a").html() + ")" + ";\n";
cssCode += "color: rgba(" + $("#rgba-r").html() + ", " + $("#rgba-g").html() + ", " + $("#rgba-b").html() + ", " + $("#rgba-a").html() + ")" + ";\n";
return cssCode;
}
function generateCSS3Opacity() {
cssCode = "opacity: " + $("#opacity-level").html() + ";\n";
return cssCode;
}
function generateCSS3Rotation() {
cssCode = "";
cssCode += "transform: rotate(" + $("#rotate-degree").html() + "deg)" + ";\n";
cssCode += "-webkit-transform: rotate(" + $("#rotate-degree").html() + "deg)" + ";\n";
cssCode += "-moz-transform: rotate(" + $("#rotate-degree").html() + "deg)" + ";\n";
cssCode += "-o-transform: rotate(" + $("#rotate-degree").html() + "deg)" + ";\n";
return cssCode;
}
function generateCSS3Transform() {
cssCode = "";
cssCode += "transform: rotate(" + $("#transform-rotate-degree").html() + "deg) scale(" + $("#transform-scale-degree").html() + ") skew(" + $("#transform-skew-degree").html() + "deg) translate(" + $("#transform-translate-degree").html() + ")" + ";\n";
cssCode += "-webkit-transform: rotate(" + $("#transform-rotate-degree").html() + "deg) scale(" + $("#transform-scale-degree").html() + ") skew(" + $("#transform-skew-degree").html() + "deg) translate(" + $("#transform-translate-degree").html() + "px)" + ";\n";
cssCode += "-moz-transform: rotate(" + $("#transform-rotate-degree").html() + "deg) scale(" + $("#transform-scale-degree").html() + "deg) skew(" + $("#transform-skew-degree").html() + "deg) translate(" + $("#transform-translate-degree").html() + "px)" + ";\n";
cssCode += "-o-transform: rotate(" + $("#transform-rotate-degree").html() + "deg) scale(" + $("#transform-scale-degree").html() + ") skew(" + $("#transform-skew-degree").html() + "deg) translate(" + $("#transform-translate-degree").html() + "px)" + ";\n";
return cssCode;
}
function generateCSS3BoxResize() {
cssCode = "";
cssCode += "resize: " + $("#box-resize-selector").val() + ";\n";
cssCode += "overflow: auto;\n";
return cssCode;
}
function generateCSS3BoxSizing() {
cssCode = "";
cssCode += "box-sizing: " + $("#box-sizing-selector").val() + ";\n";
cssCode += "-webkit-box-sizing: " + $("#box-sizing-selector").val() + ";\n";
cssCode += "-moz-box-sizing: " + $("#box-sizing-selector").val() + ";\n";
return cssCode;
}
function generateCSS3Outline() {
cssCode = "outline: " + $("#outline-thickness").html() + "px " + $("#outline-selector").val() + " " + $("#outline-color").val() + ";\n";
cssCode += "outline-offset: " + $("#outline-offset").html() + "px" + ";\n";
return cssCode;
}
function generateCSS3MultipleColumn() {
cssCode = "column-count: " + $("#input-multiple-column").val() + ";\n";
cssCode += "column-gap: " + $("#column-gap-size").html() + "px" + ";\n";
cssCode += "-webkit-column-count: " + $("#input-multiple-column").val() + ";\n";
cssCode += "-webkit-column-gap: " + $("#column-gap-size").html() + "px" + ";\n";
cssCode += "-moz-column-count: " + $("#input-multiple-column").val() + ";\n";
cssCode += "-moz-column-gap: " + $("#column-gap-size").html() + "px" + ";\n";
return cssCode;
}
</script>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>
<!-- End Please keep the Credits intact-->
</body>
</html>