• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

CSS3 is Awesome!

DRE

Well-known member
#1
I am a noob to CSS3. When I first read Andrew Parson's CSS3 Guide, I scoffed at it and thought 'Oh there ain't no way I'm messing with that' but after playing around with it last night and applying it to test skin on my local installation, I ended up liking the results immensely. I immediately began replacing some of the gradients on my own site and found that it made my site two seconds faster.

CSS3 has no problems other than a user's crappy browser. Speaking of crappy, I've monitored my slow shared server's resources since I implemented CS3 and have noticed a huge drop since I started using CSS3. While CDNs like Cloudflare works for awhile, my shared server doesn't seem to be jiving well with it and Cloudflare has problems of it's own. CSS3 gradients has been a savior to my site.

Besides being inspired to create new skins I also wanna make CSS3 versions of all my existing skins. I started work on them last night. Some of them will probably look a little different from the original skin though. I don't ever want to make another skin that uses only gradients and images again. That would be lame after experiencing the awesomeness of CSS3. Plus with the resolution of monitors going up, image files are starting to look more blurry than ever. I experienced that when I looked at both xenforo forums and my own site last month when I went to Best Buy to check out the Macbook Pro w/ Retina.

Another thing is that I now have a new found appreciation for the current designers like Shelley and Forsaken who do a ridiculously awesome job with it and have even tried to give me tips in the past that I was just not comprehending or willing to learn at the time lol. The different configuration options the CSS3 generator gives me makes me appreciate their work now because I know it ain't easy to make something look good when you have that much flexibility and large room for error.
 

DRE

Well-known member
#2
I created a new skin called Mobile Tiger and made it the default for now. It only has one or two png gradient files. I now have CSS3 for the header, navigation, page background, subheaders and message title enhancement with png file gradients as backdrops. The forum node icons are now CSS (thanks Jake Bunce) and the logo is now a combination of HTML and CSS with shadow and sparkling glitter upon hover. I would like to replace the RSS icons and Create Thread Button with CSS eventually as well and I'll probably try touching up the thread listing display to look a lil like this later: http://adminextra.com/forums/graphic-design.80/

The site now looks great from my mobile phone with the exception of avatar images, which can't be helped, and the sprite images. Whole point of this all was to make the site Retina-Ready, which I believe it mostly is by now compared to most sites. I just have a couple more things to do... When I viewed the site from the Macbook Pro w/Retina at Best Buy, what bugged me the most that day was how the site logo looked and the forum node icons. I was like ewwwww but now after these changes I'm like oooohhhh and the fact that the site loads faster now and is like aahhhhhh.

Oh speaking of mobile phones, the special font type I used for the logo doesn't show up on my Android so I gotta research that.
 

Andy.N

Well-known member
#3
What did I say about css3 and retina ;)
I posted a thread about safari and chrome support hi density images a few days ago.
When you can replace the rss icon with css3 let us know.
I use svg for my site logo.
I think you still have board menu very blurry.
 

DRE

Well-known member
#5
What did I say about css3 and retina ;)
I posted a thread about safari and chrome support hi density images a few days ago.
When you can replace the rss icon with css3 let us know.
I use svg for my site logo.
I think you still have board menu very blurry.
I got that board menu sprite from Shelley. I thought it was super awesome at the time and I still do, but now I know I need to replace it.

I don't know anything about svg.

I will figure out how to do the RSS icon but mostly because I want to see if I can combine it with a create thread button CSS image and have them both lined up side by side.
 

Andy.N

Well-known member
#7
Some extra resources I used that also helped me out with this project.

50 Extremely Useful And Powerful CSS Tools | Smashing Coding
50 Useful Design Tools For Beautiful Web Typography | Smashing Magazine

And I blame Andy for motivating me to do all of this because of his posts. If I had never seen a MacBook Pro w/Retina I'd have never tried.
Don't blame me. I got myself a retina iPad, retina MBP and I haven't stopped working to get my site pixel-perfect ever since ;)
Digitalpoint has done some great things with svg smilies and I can't wait to use them.
The rss icons from sprite sheet are the only thing on the forum home that is not retina-ready. Things like banner, avatars are out of my control.
 

DRE

Well-known member
#8
Don't blame me. I got myself a retina iPad, retina MBP and I haven't stopped working to get my site pixel-perfect ever since ;)
Digitalpoint has done some great things with svg smilies and I can't wait to use them.
The rss icons from sprite sheet are the only thing on the forum home that is not retina-ready. Things like banner, avatars are out of my control.
Yeah can't do anything about avatars. smh. I'll probably work on the RSS forum node icons next weekend.

This is what I did today. CSS3 Social Media Icons.

Normal View:

CSS3-Social-Icons.jpg


Zoomed In:

CSS3-Social-Icons2.jpg
 

DRE

Well-known member
#11
To me, the term "retina-ready" doesn't mean anything. Its the same as back in the 90s when we were using terms like "synergy", or later when we were saying "web 2.0". What is retina? High resolution? Really? We need a special term for that now?
It's not something casual webmasters should have to worry about. You won't know how much you want it until you see how blurry your site is on a high-res screen.
 

Andy.N

Well-known member
#12
Yeah can't do anything about avatars. smh. I'll probably work on the RSS forum node icons next weekend.

This is what I did today. CSS3 Social Media Icons.

Normal View:

View attachment 33075

Zoomed In:

View attachment 33076
Great job with the icons. Look really sharp on my retina-ready MBP (;) at Jaxel)
1) Can you share the css code that you use for them?
2) Can't you make the RSS icon smaller (16x16) and use it for your footer where the feed icon is?
 

Shelley

Well-known member
#13
Great job with the icons. Look really sharp on my retina-ready MBP (;) at Jaxel)
1) Can you share the css code that you use for them?
2) Can't you make the RSS icon smaller (16x16) and use it for your footer where the feed icon is?
Let's see how good the majority of those icons look when the designer stolen acquired them from another site and they are not retina ready since they are not in the format that utilizes retina/hd or they focus on say (example smilies saved in svg but the dumb asses have the rest of the imagery in other formats). Of course, I wouldn't encounter this issue since all the icons I design are vectored 100%, constructed from scratch and are scalable already and have been for years (before retina). The only other issue I have is I'd rather support IE6 than apple users and accommodate their every whim because their beloved ipad/mac can do a few more pixels over the standard hd resolution.

Digitalpoint is an exception, he's one of the few people that is trying to enforce all imagery is retina ready but for the majority of people that think "whoopee retina" I'm betting half more 90% of them will still have imagery that isn't retina ready saved in a format that doesn't utilize it so it's really a mute point.

ps. Anyone tackled the editor spritesheet yet? ;)
 

Shelley

Well-known member
#16
I think your missing the point. What about the rest of the images in and on your site? amounting to the other 90%?

What is the point in making 1%-10% of your website images not utilizing the higher resolutions when the majority of it will look taccy (if you decide to Zoom/scale)?

- smilies
- xenforo spritesheet images
- indivdual imagery
- editor images
- Other misc custom imagery you add


?
 

DRE

Well-known member
#17
I think your missing the point. What about the rest of the images in and on your site? amounting to the other 90%?

What is the point in making 1%-10% of your website images not utilizing the higher resolutions when the majority of it will look taccy (if you decide to Zoom in)?

- smilies
- xenforo spritesheet images
- indivdual imagery
- editor images
- Other misc custom imagery you add


?
I'm trying as I go but not that hard because when I view the site from my Android, any custom font I serve isn't being read.
 

DRE

Well-known member
#18
I'll do an experiment later using google webfonts to see if my phone reads those. So basically all we need to get this working right is to use fonts or custom fonts and put padding around them using CSS3. That's all that's needed to replace some of the icons in the xenforo spritesheet images. The only problem is making sure all browsers are able to read the fonts. Guess we ain't in the future yet.
 

Anthony Parsons

Well-known member
#19
There is a line where high definition for a website crosses... and people really aren't that interested in it, because a web site isn't supposed to be blu-ray movie quality. I would put Retina display quality right at the bottom of my list of things to do as well.