ProCSSor - An Advanced CSS Prettifier - uCoz Community

Page 1 of 1 1
Forum moderator: bigblog

ProCSSor - An Advanced CSS Prettifier (Recommended web interface for your CSS)

ProCSSor - An Advanced CSS Prettifier

Posts: 1570

Reputation: 58

Message # 1 | 7:00 PM 2011-01-26

Hello dear users, today I would like to talk about a unique web interface that I truly recommend to anyone who uses CSS on their website. What the ProCSSor does, is simply makes your CSS much prettier! The interface is specifically designed to make your CSS look and feel so much better and up to modern standards. It will not ruin your coding, or destroy any functions. I use this myself and I create websites all the time simply because it's my job. And believe me, it's a great interface.

The ProCSSor does not have silly functions like 'Paste' the code for it to work. You can simply upload a CSS file, provide a link to a URL or like most interfaces you can Paste or type the code.

Even better, is that you are completely in control, you can change your preferences ('Options'), so the interface is not doing something you don't want it to do. And finally, the web interface itself is clean, user-friendly, easy-to-use, simple but of course professional.

Visit the ProCSSor website now @ www.procssor.com

Demonstration: http://forum.ucoz.com/forum/38-12301-71031-16-1298309855

Best regards, Elliott.

Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.

Posts: 1570

Reputation: 58

Message # 2 | 5:37 PM 2011-02-21

Demonstration:

Here is a random .css script I found:

Code

.tooltip{position:absolute;z-index:9999;border-collapse:collapse}.tooltip td.tt-topleft{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 0;height:33px;width:33px}.tooltip td.tt-top{background:transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 0;height:33px}.tooltip td.tt-topright{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px 0;height:33px;width:33px}.tooltip td.tt-left-tail div.tt-left,.tooltip td.tt-left{background:transparent url(http://css.tl/static/img/tooltip/tooltip-L-R.png) repeat-y scroll 0 0;width:33px}.tooltip td.tt-left-tail div.tt-left-tail{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 -33px;width:33px;height:40px}.tooltip td.tt-right-tail div.tt-right,.tooltip td.tt-right{background:transparent url(http://css.tl/static/img/tooltip/tooltip-L-R.png) repeat-y scroll -33px 0;width:33px}.tooltip td.tt-right-tail div.tt-right-tail{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px -33px;width:33px;height:40px}.tooltip td.tt-bottomleft{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 -73px;height:33px;width:33px}.tooltip td.tt-bottom{background:transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 -33px;height:33px}.tooltip td.tt-bottomright{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px -73px;height:33px;width:33px}.tooltip table.tt-top,.tooltip table.tt-bottom{width:100%}.tooltip table.tt-top th{width:50%;background:transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 0}.tooltip table.tt-bottom th{width:50%;background:transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 -33px}.tooltip table.tt-top td div{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -33px 0;width:40px;height:33px}.tooltip table.tt-bottom td div{background:transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -33px -73px;width:40px;height:33px}.tooltip td.tt-content{background-color:#fff;vertical-align:middle}

As you can see, it's very messy. here's what it looks like after it's ProCSSor conversion:

Code

.tooltip {
        position: absolute;
        z-index: 9999;
        border-collapse: collapse;
}
.tooltip td.tt-topleft {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 0;
        height: 33px;
        width: 33px;
}
.tooltip td.tt-top {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 0;
        height: 33px;
}
.tooltip td.tt-topright {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px 0;
        height: 33px;
        width: 33px;
}
.tooltip td.tt-left-tail div.tt-left,
.tooltip td.tt-left {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-L-R.png) repeat-y scroll 0 0;
        width: 33px;
}
.tooltip td.tt-left-tail div.tt-left-tail {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 -33px;
        width: 33px;
        height: 40px;
}
.tooltip td.tt-right-tail div.tt-right,
.tooltip td.tt-right {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-L-R.png) repeat-y scroll -33px 0;
        width: 33px;
}
.tooltip td.tt-right-tail div.tt-right-tail {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px -33px;
        width: 33px;
        height: 40px;
}
.tooltip td.tt-bottomleft {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll 0 -73px;
        height: 33px;
        width: 33px;
}
.tooltip td.tt-bottom {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 -33px;
        height: 33px;
}
.tooltip td.tt-bottomright {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -73px -73px;
        height: 33px;
        width: 33px;
}
.tooltip table.tt-top,
.tooltip table.tt-bottom { width: 100% }
.tooltip table.tt-top th {
        width: 50%;
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 0;
}
.tooltip table.tt-bottom th {
        width: 50%;
        background: transparent url(http://css.tl/static/img/tooltip/tooltip-T-B.png) repeat-x scroll 0 -33px;
}
.tooltip table.tt-top td div {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -33px 0;
        width: 40px;
        height: 33px;
}
.tooltip table.tt-bottom td div {
        background: transparent url(http://css.tl/static/img/tooltip/tooltip.png) no-repeat scroll -33px -73px;
        width: 40px;
        height: 33px;
}
.tooltip td.tt-content {
        background-color: #fff;
        vertical-align: middle;
}

ProCSSor also highlights different functions as different mark-up colours. As you can see in this screenshot:

Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.

ProCSSor - An Advanced CSS Prettifier (Recommended web interface for your CSS)

Page 1 of 1
1