Online CSS Optimizer That Can Handle CSS3 Gradients - css

Does anyone know of an online css optimizer / formatter that can handle css3 gradients?
I've tried using http://www.cleancss.com/ but converts something like this cross browser style :
.example {background:#555555;background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
into:
.example {background:0 color-stop(50%,#555555), color-stop(100%,#171717));}
Thanks!

This one says it can handle CSS3 http://devilo.us/. I tried your snippet and it wasn't too smart about the hex, but at least it doesn't hose your code.

http://refresh-sf.com/
Once you set it to "CSS" in the dropdown, this handles cross-browser CSS gradients just fine, including minimising the hex values.
It compressed this (260 characters):
.example {
background:#555555;
background:-moz-linear-gradient(top, #949494 0%, #555555 50%, #171717 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#949494), color-stop(50%,#555555), color-stop(100%,#171717));
}
to this (219 characters):
.example{background:#555;background:-moz-linear-gradient(top,#949494 0,#555 50%,#171717 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#949494),color-stop(50%,#555),color-stop(100%,#171717))}

Though not particularly on point here, I would highly recommend trying out SASS which does all sorts of compression (without removing things) and adds a whole crap load of cool things to CSS:
$ sass --watch -t compressed master.scss:master.css
Which will "watch" master.scss for changes and once a change has been made via saving the file, the CSS will be compressed and saved to master.css.
SASS also adds a lot of cool things to CSS like variables, if/else statments, reusable code blocks (e.g. Mixins), and functions like lighten(#000, 10%) and darken(#fff, 30%) which can take a color and lighten/darken it a specific percentage.
Lots of cool stuff, check it out.

You are better off formatting the CSS to be readable yourself, and then using a CSS minifier automatically when moving to production.

You can also use http://tools.w3clubs.com/cssmin/ which is a port of the YUI compressor. In my tests it worked better then all the above mentioned.

Related

GEB find before element and check styling

I am working on a project that is using Geb. -- I need to create a selector that hooks into the before element.
backgroundImageStyles(required: false) { $('.element:before')}
and then assess the styling
landingPage.heros[0].backgroundImageStyles.css("background") == '#000000'
this isn't working though - and I will also need to test for the background opacity - like the 0.2 in this gradient
background: linear-gradient(to top right, #000000 0%, rgba(3, 124, 104, 0.2) 100%);
As you are probably aware, Geb is using Selenium WebDriver to select elements in the browser and as far as I'm aware it's not possible to select ::before and ::after pseudo elements using Selenium because they don't really exist in the DOM.
As a side note I'd suggest rethinking your test. I might not have the full picture and understand what exactly you are trying to test and if there is a better way to do it but in general asserting on styles in browser tests is almost never the right thing to do.

Multiple background gradients using Compass

How do you write multiple background gradients using Compass? The docs only show examples of writing a single gradient at a time and I can't find anything about it by googling except a google group discussion that went quiet over two years ago! There must be a way of doing it cos layering up gradients is quite common practice I thought!
You should write them like so:
div{
#include background( linear-gradient(top left, #333, rgba(1,1,1, .3)),
radial-gradient(#c00, #fff 100px));
}
source: http://compass-style.org/reference/compass/css3/images/
(ugly but working) example: http://codepen.io/nobitagit/pen/cFjkv

Common CSS style for gradient buttons of any color

I would like to be able to create nice-looking buttons of any color dynamically within a web page, without defining a separate CSS class for each color ahead of time.
Using CSS3 gradients with alpha channels seems like it would be the best way to go about doing this, with low opacity gradients overlayed on top of a solid background color.
However, I don't know enough about CSS to even tell whether or not this is possible, much less actually implement it.
I have found a couple of resources on the web that look like they will help:
CSS3 Gradient Button Guide
Transparency and CSS3 Gradients
Can someone with more CSS experience tell me if this is possible, and perhaps point me towards other resources to make this easier to pull off?
Using something like LESS or SASS, this is fairly easy to do legitimately. Create a mixin like this (robust version):
.auto-gradient(#color) {
/* Use any of the built in functions like saturate() or spin() */
#topcolor: lighten(#color, 20);
#bottomcolor: darken(#color, 20);
background: #color;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#topcolor), to(#bottomcolor));
background: -webkit-linear-gradient(#topcolor, #bottomcolor);
background: -moz-linear-gradient(#topcolor, #bottomcolor);
background: -ms-linear-gradient(#topcolor, #bottomcolor);
background: -o-linear-gradient(#topcolor, #bottomcolor);
background: linear-gradient(#topcolor, #bottomcolor);
/* If using PIE.htc for IE */
-pie-background: linear-gradient(#topcolor, #bottomcolor);
behavior: url(pie.htc);
}
Usage:
.my-button {
.auto-gradient(darkviolet);
}
This will compile to valid CSS(3), it should be something like this:
.my-button {
background:darkviolet;
background:-webkit-gradient(linear,0 0,0 bottom,from(#c43aff),to(#4c006d));
background:-webkit-linear-gradient(#c43aff,#4c006d);
background:-moz-linear-gradient(#c43aff,#4c006d);
background:-ms-linear-gradient(#c43aff,#4c006d);
background:-o-linear-gradient(#c43aff,#4c006d);
background:linear-gradient(#c43aff,#4c006d);
}
Note: I use lessphp myself, and the version I'm using now seems to choke on named colors like DarkViolet being passed to lighten/darken unless they are lowercase.
MrOBrian's suggestion of the Ultimate CSS Gradient Generator made this a snap. Here is the solution I ended up going with, which is a relatively simple CSS style cobbled together from the aforementioned Gradient Generator and the Cross-Browser CSS Gradient Button Guide.
The following code adds a nice, slick button appearance when applied to an element with a background-color CSS attribute specified. This will allow me to use a common style for all of my buttons, specify their color using the background-color attribute.
JSFiddle Demo
Thank you for all of the advice and suggestions!

My fallback image keeps loading in my CSS

I put in a fallback image for some gradients that I have in a login box, but I've realized in both the modern firefox and chrome its skipping the code and going straight to the fallback image.
background:-moz-linear-gradient(19% 75% 90deg,#0177a9, #53c3e8);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#53c3e8), to(#0177a9));
background-color: #0177a9;
background: url(../images/signin.png);
background-repeat: repeat-x;
background-position: -5px -13px;
The fallback image is actually just a screenshot of the login box but it looks identical to how it looks when formed via the CSS3 gradients.
If I take out the fallback image and colour it will load the correct webkit or moz for each browser but as soon as I put the fallback it loads the fallback.
I know it uses the fallback because i set its position at a wrong angle just to see if it was loading and it did. Can anyone help me? It doesnt make sense that its happening.
Thanks!
If its a fallback then you need to have the image BEFORE the garadient definitions, otherwise its just going to override them.
Put the URL before everything else. The ordering might be what's doing it to you.
Usually, the last directive overrules the former ones. Try putting the "background: url" as the first in the file. If this doesn't help, I don't see a pure CSS solution. Use JS (look at the modernizer library to do feature detection).

css3 and dreamweaver

i have just downloaded dreamweaver cs5.5 and am trying to apply css3 to my page, however although my current css is working fine both in dreamweaver and other coders the new css3 is not being applied.
eg i am trying to apply border-radius, although it is showing up in my css list as i type it out (unlike microsoft expression 4, which is'nt although i believe it should), it is not being applied to the actual page.
i have also tried using box-shadow, and linear-gradient, both unsuccessfully which made me believe that it is a css3 issue.
could it be something like setting up dreamweaver to accept css3, (ticking/unticking something in settings).
i am a beginner, any help would be appreciated and also i have looked it up before submitting q, but it seems not much info on css3 and especially css3 with dreamweaver.
thanks in advance
Did you make sure to include properties for all browsers? also, can we see your css?
Cross compatible linear gradient needs to look like this:
linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);
-o-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%); /*opera*/
-moz-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*mozilla*/
-webkit-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*chrome*/
-ms-linear-gradient(bottom, rgb(48,54,48) 0%, rgb(54,61,54) 100%);/*IE*/
Please see what browser you are using Internet explorer 8 and below may not support the css3 newly introduced styles.check it in a browser like chrome. Also refer to the answer from #rfinz you can see how he does it for different browsers. You probably have to work along the same lines

Resources