Social icons in CSS3

#1

Post by nikeshhayaran » Sat, May 01, 2010, 8:12 AM UTC

Social icons in CSS3
nikesh.me

Re: Social icons in CSS3

#2

Post by theone » Sat, May 01, 2010, 11:10 AM UTC

Nice ... may be later on some work of photoshop guys will come on to Web Developers

Re: Social icons in CSS3

#3

Post by alextgordon » Sat, May 01, 2010, 11:46 AM UTC

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

Re: Social icons in CSS3

#4

Post by phoboslab » Sat, May 01, 2010, 12:11 PM UTC

Putting these small images together into one file is a good way to speed up the load times of the page.

However, I think the the CSS file would have been smaller with the icons as PNGs in a data URI or by using a single CSS-Sprite. You wouldn't be able to scale the icons, though.

Re: Social icons in CSS3

#5

Post by nikeshhayaran » Sat, May 01, 2010, 12:25 PM UTC

phoboslab wrote: post #4

Putting these small images together into one file is a good way to speed up the load times of the page. However, I think the the CSS file would have been smaller with the icons as PNGs in a data URI or by using a single CSS-Sprite. You wouldn't be able to scale the icons, though.

CSS-Sprite is one way to speed up the load time but even though this css file is still much smaller than the size of images used in CSS-Sprite. And on the other hand the programmer could change icon property(like gradient , radius etc) very easily.

Re: Social icons in CSS3

#6

Post by BerislavLopac » Sat, May 01, 2010, 1:27 PM UTC

alextgordon wrote: post #3

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

Errr, isn't that what PNG is for? o.O

Re: Social icons in CSS3

#7

Post by rokhayakebe » Sat, May 01, 2010, 1:54 PM UTC

alextgordon wrote: post #3

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

Some of us cannot make a nice looking shiny "Sign Up" button in Photoshop. So this is great.

Re: Social icons in CSS3

#8

Post by nikeshhayaran » Sat, May 01, 2010, 2:15 PM UTC

BerislavLopac wrote: post #6

alextgordon wrote: post #3

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

Errr, isn't that what PNG is for? o.O

the size of PNG is much bigger than one css file .. isn't it ..

Re: Social icons in CSS3

#9

Post by techiferous » Sat, May 01, 2010, 2:17 PM UTC

alextgordon wrote: post #3

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

I'm guessing it's done as an experiment and proof-of-concept instead of being offered as a best practice.

Re: Social icons in CSS3

#10

Post by nikeshhayaran » Sat, May 01, 2010, 3:57 PM UTC

techiferous wrote: post #9

alextgordon wrote: post #3

I don't understand this trend of making images in CSS3. Isn't that what SVG is for?

I'm guessing it's done as an experiment and proof-of-concept instead of being offered as a best practice.

yes it is done as an experiment but don't you think by using CSS3 ... you don’t have to regenerate images every time you change the text, pages will load much faster because you don’t have to download separate images . i can say by css3 in some portion we can replace the images.