.PNG ---> CSS

Anyone know of a website or someone that can convert a ".PNG" image to a "CSS" script?

For no cost.

If someone here can do it, that'd be awesome, I'll just send you the image to convert.

I need the .png image, "sliced" and "coded"


Thank You




[edit on 22-6-2009 by Solofront]

Might look into getting a copy of Dreamweaver, last I heard it could do the whole slice to code process and do it fairly well. I doubt you are going to find many people willing to undertake the process by hand for free, esp now that one has to code for IE, Firefox, Opera, Safari and Chrome - it gets to be a real headache.

Thats the problem, I don't have dreamweaver or photoshop, so I'm turning to someone who has the neccesary software already, or can do it some other way.

I really don't want to pay though if some one who does this stuff for fun, can possibly do this for me as well...

[edit on 22-6-2009 by TruthJusticeFreedom]

I'm not trying to be harsh, but you are going about things all wrong. I've read a couple of your threads, and you are just looking for the easy way as if it's going to net you money. You are wasting your time.

Learn to hand code HTML. If you can't do HTML and CSS by hand in notepad, then you are never going to advance beyond anything static.

Worry about getting a decent site before you worry about making money on it. Advertisers aren't interested in amateurish sites with general content. They want highly targeted and relevant traffic. I use to run an ad network and sites such as yours are generally avoided like the plague.

We know what you are going to do, you are going to put the ads on your site and click on them thinking you are making money. Then you will check your stats and find out you got credit for only 1 click. Then you will start trying to change your IP address and doing it again. At which point your CTR% is going to go through the roof, you will be spotted for fraud and your account will be closed.

Yes, I did I too. I think everyone does lol. But it's well known and so low traffic amateurish sites are pretty much shunned by any decent advertisers. Any you do get, outside maybe google, will likely rip you off. As for google: google is smart, you just won't get any good paying ads. You'll be able to sign up for affiliate programs, which won't do anything either unless you are making sites targeted for that program, which is what I mostly do except as I do high volume I work with contracts directly to companies rather than programs, delivering the leads over xml feeds.

I know I may sound harsh, but I have been where you are and I have learned those lessons. I've been working on the net for about 10 years.

*deleted petty content*, things are different today.
I now want to start another website, but this time with a friend of mine.

I've only used premade templates that worked wonders on my other sites with adsense revenue, we're trying something new on this site with a custom .png background that we need sliced and coded, unlike the typical template that you can just click "use" and you have it.

We also need to somehow split the revenue earned amongst ourselves.

*blah, deleted more petty content*, Do you at least know how to split ad revenue amongst multiple site owners, with your "~10 years net working?"

I'm still in this dilema...

reply to post by Solofront


I don't know of any place that would by default allow 2 accounts for a single site, so it would be something you have to actually ask them for.

If you split it up manually, one of you will have to give your SSN for taxes. So then that person will need to write checks to the other person, so that they can share in paying the taxes. And you will have to file more difficult taxes etc.

My company has 3 owners. Me and 2 other guys, but it's not equal shares. I own the smallest amount(10%), my CEO owns the majority amount(over 50%) and the CFO owns the rest. We are a LLC just like ATS.

Limited Liability Company

I'm not all up to date on that kind of stuff to be honest. The company was formed before I came along and I only got my small part over time. So I wasn't there when it was formed and don't know what was involved in forming the LLC. They had another owner before I came along, but he was bought out.

hmm, ok, I guess I'll talk to a rep at my bank this weekend then.

I was just hoping, there was some paramater or something, we could set up with adsense which would automatically send, like 60% of the revenue into my account and 40% into his...?

Or maybe start up a split account at my bank with him or something...

I guess that kind of solves that dilema, but now back to the .png...

I know some html, so I can probably code it.

I just have no photo software aside from paint and some crap dell photo demo.

Anyone know if gimp, or someother free photo software allows for the slicing aspect of a .png image?

If it's just adsense, then you can probably give google a call or email and ask them. They might have some solution available that I am not aware of, I've just never really noticed anything like that with them.

Am i missing something?

.png is an image format, like a .gif or .jpg

CSS is used for formating data.

A .png cannot in any way be reformatted as a css file. Although it is possible to use CSS to display an image or even to position it at a certain place.

background-image: url(linktoyourimage.png);
background-position: top center;

I wonder if this is what he is asking about. I create buttons with .css and .pngs all the time. The advantage to it is that I can completely change how the button looks with a small edit of .css. Color, text fonts and so on.

Ok, you are going to need a good paint editing program. You can download PSP on a 30 day trial for free probably. I use it instead of photoshop, but I just make buttons and do what I'm about to tell you. I think it's like $50 for a paid copy. This works in photoshop too.

Open up the program. Create a new layer. Use the fill tool, and fill it up with whatever color button you want.

Add a new layer. Add a vertical reverse gradiant to this layer. It should have the white at the top, darker color at the bottom. Set the transparency of this layer to between 10 and 30% depending on the definition you want.

Add a new layer on top of this. At the top of this layer, add a single white horizontal line. At the bottom, add a single black line. Set transparency between 80 and 100%.

Now you have a basic button. You can fill the first layer with any color now to see how it looks in different colors etc.

Now, turn off visibility on the first fill layer with the color. Flatten/Merge all layers, so it's a single layer. You should only see the "shadows" of the button now with the fill layer gone. Select 100% of the height, but only 1 pixel wide. Copy and paste as new image. Save the new image as a transparent .png.

Save it as a transparent .png file. Upload it or whatever.

Now, open up the html file etc. Where you want the button, make 2 divs, and give each of them their own class. Put the text of the button in the inner most div.

Open up the .css file. Create the 2 classes. In the first class, add a background-color line. This will be the actual color of the button on the page. Add your font settings and so forth.

In the 2nd class, put in a background-image: with the newly created .png file. Also, set in a repeat-x line to make it repeat the image over and over.

Upload it all, and you should have a button which you can change the looks of completely with a simple edit of the .css file. You can also create many templates and buttons without actually creating a bunch of images, it will all be built using that really small image.

You can also add a :hover to the 1st div, and then change the background color and you get an instant mouseover hover that looks just like the image swap stuff, but actually isn't, still using the 1 image. This only works on newer browsers, but you can use the :hover for the text color and it will work on a few older browsers, just not the background part.

If you want to add splitters that seperate the buttons, then just create an image that 2 pixels wide, and 1 pixel wide. Then create a div between the buttons, give it a class and do the image-background thing on that div. Add both repeat-x and repeat-y and a width of 2px, and height the same as the other buttons.

And then you have a .png/.css button. But it is not converting a .png button into css. The most basic button you can make in .css is to just create a div, and set a border to 1 solid.

Btw, here are some good tutorials for creating buttons in a paint program. These are directed towards PSP, but the general concept will be the same in all.

www.dumlao.cc...

This will give you glossy buttons, which are "in" right now. Just at the end, you of course save it like I mentioned above as a transparent .png, and without the color/fill level visible.

I know you said u don't have dreamweaver, or photoshop, but fireworks does exactly what you want, it may be time to invest.

It allows you to select a box like selection, then you can sliced it the whole document. Then you can give each selection a command, such as a 'rollover' command. If you hover over the image, then it will change the image to the rollover image.

Look to see if there are free software that does this for you, but I recommend fireworks for this.

Originally posted by Im a Marty
It allows you to select a box like selection, then you can sliced it the whole document. Then you can give each selection a command, such as a 'rollover' command.

Does fireworks use CSS or Javascript to make rollovers?

I just checked, created one, and it uses _javascript. Do you need it to be specifically CSS do you?

reply to post by Im a Marty

No simply curious.

I had issues making some CSS work the same on IE and Firefox. I also decided that Javascript was safer in that regard. (seems more backward-compatible)

Originally posted by ConspiracyNut23
reply to post by Im a Marty

 

No simply curious.

I had issues making some CSS work the same on IE and Firefox. I also decided that Javascript was safer in that regard. (seems more backward-compatible)

IE 6 doesn't allow the background change with CSS, you have to do it in _javascript. IE7 and 8 both seem to handle it no problem.

It sucks, and last time I looked like 20% of users are still using IE6. Hoping that gets down lower quick.

I usually just say screw IE6 lately and they just don't get the background effect. You can still :hover the text change, just the background won't change.

But IE7 and 8 handle the :hover css much better.

No buttons for me yet, however I think this is what I'm looking for probably...

background-image: url(linktoyourimage.png);
background-position: top center;

I don't know if I'm allowed to post the url to our test site for it that has the image, it might make more sense, at least for me...

So here it is:

chaotic-collision.webs.com...

As you can see, I need something to slice it, so like, Top/Header, Bottom/Footer, and then the middle stretched.








[edit on 3-7-2009 by Solofront]

reply to post by Solofront


ok, let's assume that you sliced it. The slices would look something like this: (It's ready to be exported as HTML slices)

[atsimg]http://files.abovetopsecret.com/images/member/06fb9f09a79a.gif[/atsimg]

Slice 1 = header
Slice 2 --> 9 = Navigation
Slice 10 = left sidebar
Slice 11 = Center content (border should be made up of 4 individual slices)
Slice 12 = right sidebar
Slice 13 = footer


A few problems...

1. Notice that you have only 6 buttons. However, you have 8 categories.

2. Where are you planning to put this image? (Mario Bros Princess)

3. Where are you going to put your 2 flash banners? They don't currently fit in the right sidebar or the left sidebar.



[edit on 4/7/09 by ConspiracyNut23]

Thanks for all the replies people, see, this is why I came to you guys first..

So yeah, ConspiracyNut23, that is what I'm pretty sure I needed along with the associated html, maybe I should of supplied the original image, here;

img522.imageshack.us...

I don't have any photo software, but I do have Yahoo Sitebuilder on another pc, I wonder how that'd fair..