Here are more CSS3 awesomeness for you to replace your blurry png images
http://nicolasgallagher.com/pure-css-gui-icons/demo/
CSS3 is Awesome!
- Thread starter DRE
- Start date
http://nicolasgallagher.com/pure-css-gui-icons/demo/
DRE
Well-known member
Thanks I'll check it out. Did you get social media icons to work and if not I'll just post a Tips n Tricks Resource article on how to do it.Here are more CSS3 awesomeness for you to replace your blurry png images
http://nicolasgallagher.com/pure-css-gui-icons/demo/
Yes, I did. Work out pretty well.
You should make the article nonetheless for the community benefit.
Shelley
Well-known member
Here are more CSS3 awesomeness for you to replace your blurry png images
http://nicolasgallagher.com/pure-css-gui-icons/demo/
Blurry Images? what images are you using?
DRE
Well-known member
I want to do my own version and release it as a TMS addon which is why I was studying how to create fonts.
More like what monitor is he using (Retina).
What he said.
I happen to use an ipad 3, retina MBP for long period of time everyday so blurry images are very apparent. Can't help it.
Shelley
Well-known member
Can you show me a specific image you say is blurry?
and the link you posted. Take a look at the report css icon specifically the curved areas http://nicolasgallagher.com/pure-css-gui-icons/demo/
I'm just curious Andy about the images which are blurry. I'm actually willing to be educated here.
No problem, let me take a few screenshots for you. Pictures worth a thousand wordsCan you show me a specific image you say is blurry?
and the link you posted. Take a look at the report css icon specifically the curved areas http://nicolasgallagher.com/pure-css-gui-icons/demo/
I'm just curious Andy about the images which are blurry. I'm actually willing to be educated here.
Shelley
Well-known member
No problem, let me take a few screenshots for you. Pictures worth a thousand words
I did mean the actual images themselves, you do retain the source files?
Screenshots mean nothing without the source file, individual image (source file) is what I meant. The image could contain 20 layers with some of them containing matting issues, over-masking etc the list is endless and factors a mile long to the reason why that specific image (your set of images) look blurry.
Here is a pic of XF forum home. All the stock sprite, png images are blurry.I did mean the actual images themselves, you do retain the source files?
Screenshots mean nothing without the source file, individual image (source file) is what I meant. The image could contain 20 layers with some of them containing matting issues, over-masking etc the list is endless and factors a mile long to the reason why that specific image (your set of images) look blurry.
Here is an image of a post on my site. Post #8 is math formula that is generated by CSS/SVG and post #9 is the math formula generated by png images. I hope you can see right away the difference.
These are just normal items on the site (stock images or otherwise) that become glaringly less sharp on the new wave of retine screens. Majority of my mobile audience is using iphone/ipad so they can see the difference too.
Shelley
Well-known member
You've zoomed right in is the reason it's blurry what did you expect?
Forget the xf stock png images they look blurry on normal screens anyway that is just a terrible terrible example and I did mention to kier (in the case I put across) the smilies looked awfully blurry (png-8 being the culprit on a spritesheet) where there isn't enough colours to compensate and give them a crispier edge.
You see andy, I won't be having any of that trouble on my own version of the xf stock icons and smilies. I'll be able to zoom right in and they'll be crisp once i get around to them.
I know you released an extended set of smilies recently. Are they scaled up well?You've zoomed right in is the reason it's blurry what did you expect?
Forget the xf stock png images they look blurry on normal screens anyway that is just a terrible terrible example and I did mention to kier (in the case I put across) the smilies looked awfully blurry (png-8 being the culprit on a spritesheet) where there isn't enough colours to compensate and give them a crispier edge.
You see andy, I won't be having any of that trouble on my own version of the xf stock icons and smilies. I'll be able to zoom right in and they'll be crisp once i get around to them.
After digital point show case his svg smilies , things are never the same
Shelley
Well-known member
whilst that is true, had Andy mentioned he zoomed in, it would have saved the debate because then I would have agreed. SVG will be the solution for me so much so I've brought my stinking nexus 7 out to start experimenting. If and when I have something fruitful I'll share what I have done to rid those blurry images with the alternative format.
*groans* stares at n7 screen and zooms right in
Shelley
Well-known member
I know you released an extended set of smilies recently. Are they scaled up well?
After digital point show case his svg smilies , things are never the same
Yeah I just needed to understand why your images are blurry because it was kinda bugging me not knowing why. but not knowing you were zooming in and the fact you didn't mention that I didn't know. As stated in my previous post, once i get some time I'll have something fruitful to share. It means I need to go back and sort some layers out in photoshop but i'll work on that at some point.
I'll agree DPs smilies were awesome but I seldom use my tablet and seldom zoom in.
Guilty as charged for zooming but the point is I can notice which visual element is blurry now since I know where to look. Zooming in is just to make it worse
I'm so spoiled after learning about svg and replacing my logo with it.
Really the next biggest things are avatar and smilies. Other things are minor and I can eventually find someway to replace it with css3.
I'm so spoiled after learning about svg and replacing my logo with it.
Really the next biggest things are avatar and smilies. Other things are minor and I can eventually find someway to replace it with css3.
Digital Doctor
Well-known member
Hurry, get yourself busy with it
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
Shelley
Well-known member
Guilty as charged for zooming but the point is I can notice which visual element is blurry now since I know where to look. Zooming in is just to make it worse
I'm so spoiled after learning about svg and replacing my logo with it.
Really the next biggest things are avatar and smilies. Other things are minor and I can eventually find someway to replace it with css3.
Nah you're not guilty I'm glad you stuck to your guns Andy. You've probably increased my workload by a factor of 10 but at the end of the day the source files/designs I do are adaptable for hd, high pixel density screens so it just another few lines on my todo list.
edit: and the xf imagery will not be difficult to replicate, infact I already replicated most of it.
Similar threads
