What is Reddit's opinion of ColorZilla?

From 3.5 billion Reddit comments

No, not the same problem at all.

Flash's problem (the one people hate Flash for) isn't compatibility. It's security.

Flash requires access to resources on your computer that normally a website doesn't get access to. That's the problem.

There's a downside to the 'no Flash' rule though, and it's directly attached to the 'problem': Flash can do things that web-browsers can't. For instance, every time you've ever clicked something to 'copy this to your clipboard' in a website, that was an SWF (Flash) object. Flash/Silverlight are the only things that can do that.

HTML5 video is perfectly safe to use, it's just not completely compatible. It's compatible enough to use now though.

Source: Am webdeveloper wasting time at work.

Edit: Lots of people chiming in to tell me that 'Copy to Clipboard' links aren't SWF. In most cases, yes they are.

Here's just one example. Note the 'Copy' link at the bottom-right corner of the CSS code. Right click it. That's a Flash object.

Here's the most popular answer on StackOverflow regarding copy-to-clipboard and javascript. You'll note it directs people to use SWF. Which is Flash.

I understand HTML5 has Clipboard API built in now, ~~but until IE starts playing ball with it properly (it doesn't yet), the best solution to that is SWF/Flash Objects.~~ Edit: No, this isn't an IE issue, it's strictly the limits of that Clipboard API: HTML5 Clipboard still can't do all the things Flash can. This is all of course a very minor example, but it's the little things that we come to rely on over time.

If you do this often, you may want to look into the colorzilla extension which allows you to use an eyedropper type tool on websites to hover over colors and find their RGB values and hex color numbers. http://www.colorzilla.com/

You can archive this with linear-gradient and many stops, like: #f00 0%, #f00 10%, #ff0 10.01%, #ff0 20%, #0ff 20.01% [...];

I'm currently on a Mobile device, so I can't Test this, but it should work like this. You can Test it here: http://www.colorzilla.com/gradient-editor/

EDIT: An example: http://codepen.io/NoxNebula/pen/kkgKLX

Well the biggest change we will likely see is media queries being used to build mobile friendly subreddits as right now there is no default mobile, these are simple to do.

Gradients can be added, there tools that can do this for you, http://www.colorzilla.com/gradient-editor/ is the most common used one.

Then there are shadows, text-shadow for example but wont look all that great on a light theme.

You can also attach on transition to stuff, so hovers and the like automatically transiton and fade, which is nice :D

A great addition is the box-sizing, as it can prevent the width from increasing when adding padding, super simple and super nice.!!

And like i mentioned in that other post, box-shadow is standard with css3 so you don't need prefixes XD a lot of prefixes have gone for specific elements.

I don't mind helping wherever, I spend a lot of time on reddit so got time to look at anything!

rbga() in CSS, allows you to add a transparency gradient to an element. I set the background image as the Moonwell and had the top part be a container with a purple transparency gradient, so it faded into the bottom image.

https://www.w3schools.com/css/css3_gradients.asp

I think I learned about it here.

Use this website to experiment: http://www.colorzilla.com/gradient-editor/

You can input the #------ color and get the RBG values, play around with it!

http://www.colorzilla.com/gradient-editor/

I switched a lot of things in my workflow. But not this. This is just plain awesome.

Also, http://csslint.net/

For times you can't figure out what the fuck is going on.

You can also use SVG gradients in IE9. This generator will make them for you.

http://www.colorzilla.com/gradient-editor/

*be sure to follow the instructions for IE9. You need to do some conditional comments.

Ideally there would be a graphic designer providing you with all that. If you want to be an all in one web designer, I'd suggest that you take a few days and go through a Photoshop training (or free alternative GIMP). It will teach you enough so you will be comfortable creating gradients, textures and simple elements. Thanks to CSS3 some of these are available through code. (Example: http://www.colorzilla.com/gradient-editor/). Then if you want to get into logo design you should look into Illustrator. Once again: a front end developer is not really required to know all this, but it's cool if you want to get everything done yourself, since it has its advantages. If you decide to dive in, think of it as a completely new area which is also useful for web design. I wouldn't suggest learning it on task specific basis.

TL;DR:
Generetors spit out deprecated vendor prefixes, use the generator but delete the extra lines; colorZilla removed those lines you can safely use it.

I love you. No really, I love doing my designs by hand(text editor with syntax checker only) but today I was like "fuck I just want something that makes just buttons. No Java, No html, just css text." Had that thought literally 4 hours ago.

Edit weeps I need it to work in IE

edit 2: Yay! my problem was the gradient so I supplemented your css background with this site http://www.colorzilla.com/gradient-editor/

> this image

Which image?

You can make your gradients with this site and copy them into your stylesheet.

All you need to remove are the -webkit-gradient and filter lines, eg if you got this

background: #1e5799; background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

then you only use

background: #1e5799; background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

To apply the gradient to the header use

#header { ... }

and

body { ... }

for the body.

#header-bottom-left { background: url(%%img%%) no-repeat top center; }

will apply a centered image to the background of it.

If you're building CSS3 gradients, check out: Colorzilla Gradient Editor. It gives all of the prefixes for the gradient (including -o and -ms) including a fallback color. Very useful tool!

I like the look of the page, very simplistic and modern, but there are some thing I personally would change. For instance the first blue ,,heading” or how to call it, I would use gradient of some colors. (For instance whiter and darker color.) See http://www.colorzilla.com/gradient-editor/ . Maybe some shadows so the different panels look like they are above each other. See https://www.cssmatic.com/box-shadow . Otherwise as I said very nice!

Använde Colorzilla, som nu visar helt rätt färgkoder.

Flaggan ser bra ut, btw. Hade faktiskt exakt samma idé igår när folk började posta flaggor. Får väl leta reda på någon mysko flagga ingen hört talas om och göra en variant av den. ;)

If you don't feel like actually coding it you can start with something like http://www.colorzilla.com/gradient-editor/ to get close.

But also check MDN like others suggested if you want to understand it.

Not sure about paintshield like Notaro mentioned. Is that an inside joke or something?

You can try the ColorZilla color picker tool. Then use https://www.goldenpaints.com/mixer to input the RGB from ColorZilla to get color combination recommendations.

I do a lot of web design and just did this for a painting company that wanted to use a specific paint color as part of their theme. Seemed to work pretty well.

Try using this instead of an image.

http://www.colorzilla.com/gradient-editor/

Should be as simple as defining it after the bootstrap css is loaded.

.jumbotron { background: rgb(109,179,242); background: -moz-linear-gradient(-45deg, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(50%,rgba(84,163,238,1)), color-stop(51%,rgba(54,144,240,1)), color-stop(100%,rgba(30,105,222,1))); background: -webkit-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: -o-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: -ms-linear-gradient(-45deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); background: linear-gradient(135deg, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=1 );

}

The submit buttons are

.morelink { ... }

and the headers in the sidebar (in your case)

.titlebox .usertext .md>h1 { ... }

You can add as many colours as you want into the gradients, like

linear-gradient(to right, red, green, blue, pink, black, cyan, white, orange);

You can also change the orientation (left>right, top>bottom, radial, or in degrees). Check out one of the gradient generators to see how they're constructed. Note that you'll need to strip away some of the CSS from the generated content, eg instead of

background: #1e5799; background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

you only really need

background: #1e5799; background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

Awesome, thank you for this!

Here are two bookmarks I use frequently that I'm not seeing on your page:

Gradient generator: http://www.colorzilla.com/gradient-editor/

Border-radius generator: http://border-radius.com/

The only thing keeping it from working across browsers is the syntax for the gradient and the vendor prefixes (taken care of on codepen by prefix-free. You can take a look at this: http://www.colorzilla.com/gradient-editor/ to help you create gradients. And do a google search if you don't know about the vendor prefixes for the animation - good luck!

Actually the next version of Firefox, the next version of Opera, and IE10 supports an unprefixed version of gradient and transform. Do note that the final standardized syntax is different for gradient.
I should've mentioned that previously, sorry about that sometimes I forget the 'details'.

I'm mentioning this as support for prefixes are removed, at least by Mozilla, after a while. See border-radius and box-shadow for an example of prefixes that are no longer supported since Fx13.

ColorZilla has a nice gradient editor that generates the code for you, if you like.

Yeah, when the client wants black, you sometimes have to suck it up I guess.

As for fonts, at least you didn't use Papyrus. Where I live, it seems like every religious and every hippy shop are using that font for promotion. "Oh we look so different!" Grr.

As for gradients, are you aware of/ going to use CSS gradients? Other than IE (of course) it looks so spectacular because it fills up the whole space perfectly regardless of the size of the screen. Here's a generator.

You can implement nearly the same behaviour with CSS3. Please have a look at the css gradient editor, the "border" and the "outline" properties.

Anyway, it's nice that RoosterSheep created these buttons for you :)

Amazing! Thanks for updating. It's a great tool!

If you're trying to make your tool "the best one" I have one more suggestion...

I was using the "import CSS" feature at http://www.colorzilla.com/gradient-editor/ quite a lot because it helped me convert gradients from other tools into usable code.

I don't really need that feature anymore because your tool gives me all the correct code now. BUT you might want to consider adding it to your tool so that you can attract other users from other tools into yours.

Just a little suggestion.

Thanks again for the update!

background-image: linear-gradient(0deg, rgba() 0%, ... , rgba() 100% );

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

http://www.colorzilla.com/gradient-editor/ May help*

I don't know why the page title isn't really set to work with images you can target that and add something to stand out against.

.pagename { background-color: rgba(255,255,255,0.4); }

If you're looking to add a gradient overlay:

#header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /Fades in left to right~/ background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /cause reddit.../ z-index: -1; }

not impossible. its just going to take some time to recreate it.

do you have the photoshop file saved with all the layers separate?

IF you do, you can save each layer as its own 32bit png (transparencies) and go here:

http://www.colorzilla.com/gradient-editor/

import every image, copy paste the CSS for each one. then just stack them.

that site doesnt do multiple layered gradients, so you have to do each layer one by one.

#header, .footer-parent { background: -webkit-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -o-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -moz-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -ms-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; }

Where #da5a00 is the mid-point between the two colours you mentioned.

Might want to play around with a gradient generator.

Try using width: 100%, it should scale the width of the image to the width of the page, similar to like here.

Alternatively if you really wanted (and had the time to get it to match your current image) you could probably replace the image with a gradient which would scale with the page as well as decrease page loading time.

If you are using a video as the background, depending what you are doing, you could have an overlay above it with the gradient.
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); / IE10+ /
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); / IE6-9 */

http://www.colorzilla.com/gradient-editor/

But if he has errors on the page then this might just add to your problems.

make the background a gradient of the 2 colors in the divs http://www.colorzilla.com/gradient-editor/

background: linear-gradient(to bottom, #555555 1%,#555555 50%,#0088dd 51%,#0088dd 100%);

No, your clipboard can copy/paste to websites just fine.

It's the link that says 'Copy this to Clipboard'. For instance, here's a CSS3 Gradient Generator.. You can design gradients and get the CSS code for it.

In the bottom right corner of the box that contains the code, you'll see a little tab that says 'Copy'. That's meant to copy that code to your clipboard. The website itself is putting data to the clipboard, not you hitting 'Ctrl+C'. That's the SWF object. Right click 'Copy' on that page and you'll see it's a Flash object.

Try using the Ultimate CSS Gradient Generator to generate gradients rather than using images because pure CSS will load faster than images. Then use the text-shadow property to add the shadow on the text.

Give this a try. Probably don't have to use an image if all you're looking to do is a simple gradient.

But, if you do choose to use an image... I recommend making the image only 1 pixel wide and repeating it horizontally.

I'm not sure what you mean by structural, but you can just give the backgrounds to the ul, and you can always add overflow:hidden; to wrap around the floats. I'm aware that this just a matter of taste, but hey if you can do it for 7 bytes less, why shouldn't you, right?

/saw the second message afterwards. Yeah, multiple backgrounds do require it, but that doesn't necessarily mean you need multiple backgrounds. If it's a gradient or sth, I just use background-gradients and punish IE8 and below. SUCK IT IE.

BONUS: You can use this for the background gradients: (http://www.colorzilla.com/gradient-editor/)

Well all I see is a solid color there now, but like milimilo suggests, the image you are using for a gradient may only be that tall. One way to fake it with images that don't go the full height of the element, is to set the background color of the element to the same color as the bottom stop of the gradient, that it it appears that the gradient fades seamlessly into that color.

I would highly suggest, though, that you look into css3 gradients. The support of great (except IE8 and down) This gradient generator is pretty slick to get you started. You can even upload your own image and it will generate the css3 gradient code based on its colors. And it generates all of cross browser stuff for you.