Do you find it tedious to manually type in the variants for border-radius, linear-gradients, and other CSS3 properties? Then CSS3 Maximizer is for you. This project was created to help make web-developers lives easier in the constantly complexifying world of W3C.

Here’s an example, say you are working in webkit, and you are developing with css that looks like this:

#example {
	background: #0d0d0d;
	background: -webkit-gradient(linear, center top, center bottom, from(#777), color-stop(10%,#333), to(#000000));
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 6px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.35);
	color: rgba(255,255,255,0.5);
	text-shadow: 0 2px 4px #000;
	user-select: none;
	-webkit-transition: transform 0.3s ease-out;
	-webkit-transform: rotate(7.5deg);
}

Using PHP in the backend, CSS3 Maximizer will send you this back automagically:

#example {
	background: #0d0d0d;
	background: -webkit-gradient(linear, center top, center bottom, from(#777), color-stop(10%,#333), to(#000000));
	background: -webkit-linear-gradient(top, #777 0%, #333 10%, #000000 100%);
	background: -moz-linear-gradient(top, #777 0%, #333 10%, #000000 100%);
	background: -ms-gradient(top, #777 0%, #333 10%, #000000 100%);
	background: -o-gradient(top, #777 0%, #333 10%, #000000 100%);
	background: linear-gradient(top, #777 0%, #333 10%, #000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#777', EndColorStr='#000000');
	border: 1px solid #000000;
	border: 1px solid rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.35);
	color: #FFFFFF;
	color: rgba(255, 255, 255, 0.5);
	text-shadow: 0 2px 4px #000;
	-moz-text-shadow: 0 2px 4px #000;
	user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-webkit-user-select: none;
	transition: transform 0.3s ease-out;
	-moz-transition: -moz-transform 0.3s ease-out;
	-ms-transition: transform 0.3s ease-out;
	-o-transition: transform 0.3s ease-out;
	-webkit-transition: transform 0.3s ease-out;
	transform: rotate(7.5deg);
	-moz-transform: rotate(7.5deg);
	-ms-transform: rotate(7.5deg);
	-o-transform: rotate(7.5deg);
	-webkit-transform: rotate(7.5deg);
}

Wow… that would have been a pain to type, no?!

CSS3 Maximizer parses the following color formats, and standardizes them into #HEX for the fallback, and rgba(255,255,255,0.5) when an alpha is present. Although it’s fun to develop, creating quick mockups, with the latest and greatest hsla() it can be a pain to convert the colors for older browsers.

 CSS3 Color Module
 ------------------
 #00FF00
 hsl(120, 100%, 50%);
 hsla(120, 100%, 50%, 1);
 rgb(0, 255, 0);
 rgb(0, 100%, 0);
 rgba(0, 255, 0%, 1);
 rgba(0, 100%, 0%, 1);

CSS3 Maximizer makes creating gradients for your website a charm. Pick your favorite browser to develop in, develop with any of the following formats and the closest translations will be generated for other browsers.

 CSS3 Gradient Module
 ---------------------
 linear-gradient(yellow, blue);
 linear-gradient(to top, blue, yellow);
 linear-gradient(180deg, yellow, blue);
 linear-gradient(to bottom, yellow 0%, blue 100%);
 -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444444), color-stop(100%, #999999)); // Saf4+, Chrome
 -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); // Saf4+, Chrome
 -webkit-linear-gradient(top, #444444, #999999); // Chrome 10+, Saf5.1+
 -moz-linear-gradient(top, #444444, #999999); // FF3.6
 -ms-linear-gradient(top, #444444, #999999); // IE10
 -o-linear-gradient(top, #444444, #999999); // Opera 11.10+

This project is by no means perfect, and sometimes breaks CSS code.

Create a fork on Github;  https://github.com/mudcube/CSS-Maximizer