I have been wanting to write a post for some time now over CSS. I started to think about what I could write about that has not already been said. I mean there is already so much documentation, tutorials, and beautiful examples already. What more could I bring? So I will take this in another direction, and let you know what have been some of the struggles I have faced with CSS and how I was able to work around them.
First off let me say I am not a CSS guru. I work creating CSS sites on a daily basis, however I will be the first to admit that I do not know 1/5th of everything that can an can’t be done through CSS. With that begin said if you see an easier or better method, then post a comment below or email me. I will do my best to include and update on this post.
PNG Image Transparency - Cross Browser Problem
Having PNG images in CSS designers arsenal very beneficial as it can cut down on the amount of images used as well and some of the code that its use. PNG images can also open up design possibilities that you never knew were possible. See example below.
http://www.levelopacity.com/
Check out the use of the PNG image in the footer.
http://www.alexbuga.com/
Alex uses transparency throughout his page.
http://silverbackapp.com/
When you resize your browser the PNG background images give a sense of depth of field.
PNG’s are awesome, however, if you are designing your sites to work correctly in IE6 (as you should be) then you know that PNG’s don’t work correctly. There are several ways of getting your PNG images to work in IE, however depending where and how you want to display your images will depend on what fix you will put in place.
If you have an image much like my logo in which uses an image tag, then you can go with the AlphaImageLoader fix. Target IE using *html. It is best to include you IE hacks fixes in a separate style sheet. Be aware, if you decide to use this method on repeating backgrounds, it will make any text un-selectable and any links un-clickable in the target element.
* html img#swoop {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='navCorner.png', sizingMethod='scale');
The next methods are great for deploying fixes site-wide if you have lots of PNG’s. First Twin Helix iepngfix.htc. This one is considered a hack, and will un-validate your css. However it works great and if you place it in a second stylesheet for IT your valid code will not be affected. There are some limitations though. For 100% dependability, your elements should not have any auto-widths or heights. Sometimes you’ll get flickering. It’ll display the broken png for a second before the script kicks in. Can’t be used on repeating background images. You can get the script here: http://www.twinhelix.com
img{
behavior: url(iepngfix.htc);
}
/* or you can target specific elements and their backgrounds /*
#header{
width: 800px;
height: 200px;
background: url(path/to/image.png);
behavior: url(iepngfix.htc);
}
The last is a Jquery method. With the jquery.ifixpng plugin you can replace all the images on the page or you can target certain elements on the page. For this fix you will need a blank or one pixel gif, Jquery and of course the ifixpng plugin. This fix also has its limitations. Always defaults to “background-position:top left” and you cannot reposition it. Also doesn’t work on repeated backgrounds.
Example - applying filters to .png for correct ie6 display
$(document).ready(function() {
// apply to all images
$(’img[@src$=.png]’).ifixpng();
// apply to target elements
$(’img[@src$=.png], div#header’).ifixpng();
});
If you still have questions, here is a good resource to start with.
min-width Property and IE
Always something with IE, huh? Say you wanted to have your page be scalable, but once the user rescaled the page to a certain width, the page would stop scaling. This property s called min-width and is used by most of the current browsers today. Again, min-width wont work in IE6. Thanks again Microsoft. You can make it work by using an IE Dynamic Expression to set the width.
div.something {
width: 100%;
min-width: 900px;
/* IE Dynamic Expression to set the width */
width: expression(document.body.clientWidth < 910 ? "900px" : "100%" );
}
IE6 Double Margin Bug & Clearing Floats
First lets get the easy one out of the way. If you have a floated element such as a div and you place margin-right or margin-left on that element, our most beloved IE6 will double that margin value. To fix this simply add display:inline; to your floating element. Thanks Jamye
Clearing floats is a whole other issue in itself. There are some many do’s and don’t of clearing floats. I remember when I used to clear floats by adding an empty div and add a clear element to it. Don’t try that by they way. Most of the time the problem with a float is the containing div. The containing div does not cover the floated element, thus resulting in pages that look so jacked up you want to go back to table design (j/k). When ever you float an element add an overflow:hidden property to it. Suddenly that div is now seeing the floating div. Also adding a hard width and height can fix this as well, but who works in absolutes (pun intended).
I know some people who just stay away from floats because they can’t get them to work. If you uses this simple method you will get your floats to work like you want them. After you have implemented both of these methods you will have some code kinda like this:
div.right-well-container {
overflow:hidden;
}
div.right-well {
margin: 10px 4px 0px 4px;
float: left;
display: inline;
}
Background Images on Empty Elements
From time to time I will be in the need to add a extra element or rounded corners on to existing code. Sometimes it is just easier to add an empty div to accommodate this change rather than recoding the bulk of your already finished code. However you may run into another IE6 bug that will add margin around the element. After multiple tests to see what is exactly causing the problem I found that it was the font size. My workaround has been to change the font size to 1px. This seems to get rid of the problem. I am sure there is a better explanation for what is going on, but I don’t have it. Feel free to comment below.
div#profile-top {
font-size: 1px;
height: 3px;
background: url(details_top.gif) no-repeat;
}
CSS links for beginners and experts
if you are getting into CSS it can be dawning at first, however once it clicks with you,you’ll have no problem tackling the hardest projects. I found out that the best program for a beginner to learn on is CSSEdit. While it is not a program for beginners, it helps you understand code and view items that cane be styled. Everybody has his or her own method to try to solve things and we all have our favorite tools. CSSEdit’s Preview feature in combination with the XRay can allow you to pull any site and look at the CSS and see how they set it up. When you are in XRay mode you simply select an element, and you’ll see its margins and padding (if any) and the space this element takes. At the top of the Preview page you see the all the parent elements with classes and id naming etc. Very kool stuff. Below are some links for you to get started.
http://veerle.duoh.com
She knows her CSS and has tons of links to CSS tutorials, examples, and more.
http://www.blog.spoongraphics.co.uk
A great site for anything design related. Here is a free CSS menu for you to dissect and understand.
For those experts out there check out the links below. See what other creative people like your self are doing with CSS.
http://www.cssartillery.com/
Is becoming one of my favorite CSS gallery sites
I just listened to episode 49 of net@night with Amber MacArthur and Leo Laporte. This week they had Brad Jefferson on the show. Brad is the co-founder of Animoto. I really got excited when I heard what Animoto is and how easy it is to use the service.
I have been creating video slide shows for years now. I used to build the entire slide show in Final Cut Pro and manually set the ken burns effect by hand. Over the years it is getting easier and easier to build high quality slide shows that look amazing with little effort.
I am currently making a slide show using iPhoto for my father in laws 60th birthday. I found it really easy to quickly create awesome slide shows in minutes with little effort. However, these slide shows look a lot like some of my first slide shows I ever created. They look good, but do not have very much depth and emphasis to match the music, and highlight certain photos. To do this I would need to go into Motion and spend an afternoon using 3D effects, transitions, and motion effects to make the slide show look truly amazing. Who has that kind of time though, and we are just talking about a photo slide show here.
Enter Animoto. Animoto allows me to create the types of videos I mentioned with roughly no effort on my part. Simply upload your photos to Animoto, or choose existing photos online (Flickr). Select a song from their music library, or upload your own. Animoto will analyze the song’s tempo and emotion, and add motion effects to match the beat. It is truly amazing. But don’t take my word for it, try it out yourself. Also check out what I quickly made in 5 minutes.
I really would like to use this for my photography business, however Animoto is really not set up for commercial use at the moment. Brad mentioned they are looking at a commercial version for professional use in the near future. When that comes out I will adopt Animoto for all of my slide show projects.
I’ve got to say, living in an iPhone world is great. I have an awesome phone, an even better iPod, and web browsing in Safari is the best on any mobile phone. Everything I mentioned is the default on all iPhone’s. These services are great, but I really want a phone that can do it all, and do it well. There is so much power packed into this tiny device, and I want to use all of it to its full extent. Jailbreak, is the answer to unlocking this power.
I really don’t want to talk to much about the process of Jail-breaking your iPhone. There are so many different ways of unlocking your iPhone its really just a matter of which option to choose. However for those of you who are missing out, one word, “ziPhone“.
Now that we got the housekeeping out of the way, lets talk about all of the great applications you can get from jailbreaking your iPhone. This list is in no particular order, nor is it a definitive list. This is simply a list of the applications I have fell in love with and keep using on a daily basis. I test drive a lot of applications. To be quite honest, most of the applications are stinkers. However, every now and then you will find an application that works perfectly, and makes you wonder it if was build by a developer working for Apple. These apps listed below are those types of applications. They are, the cream of the crop. So lets get down to business, shall we? Oh, and one last thing, everything here is FREE!
I recently read an article from PS3 Fanboy stating the reasons PS3 is relevant again. I found this article very interesting since the format war is over. Is the PS3 relevant now? Below is PS3 Fanboy’s reasons as well as what I think.
1) Blu-Ray won the Format War.
PS3 Fanboy
With Blu-Ray having won the format war, the PS3 is looking more and more tempting for AV-philes. Not only is it one of the cheapest Blu-Ray players on the market today, it’s completely future proof with future Blu-Ray profiles…
What I Think
They are right on. The reason I bought the PS3 is because of the Blu-Ray capabilities. Of course I am an avid gamer, but right now I see the PS3 as a Blu-Ray player only. Now that Blu-Ray won the format war more PS3’s will be sold as Blu-Ray only players. Lets face it, it is definitely the best valued Blu-Ray player.
2) High Quality PSN Games
PS3 Fanboy
The quality of games on the PlayStation Network speaks for itself. Sony seeks out the most innovative and experimental content for its downloadable game service such as flOw and Everyday Shooter… Finally, Super Stardust HD remains one of the system’s best titles - not bad for less than 10 dollars.
What I Think
This is where I dissagree. First off the playstation store (PSN) is a joke. It is basically a web page you have to navigate awkwardly with a controller. It is not intuitive nor is it user friendly. That aside lets chat about games. PSN does not have the amount or quality of games that its main competitor has in Xbox Live Arcade. Sure there are come good ones like Calling All Cars, and Everyday Shooter, but the majority of the games can be found on other networks where there are many more game offerings. What I care about is exclusives, and so far the exclusives on Xbox 360 far outweigh those on PS3.
3) Great DLC support for first party titles
PS3 Fanboy
First party PS3 games receive excellent downloadable content. Motorstorm, even a year after its release, still continues to receive updates in the form of new tracks and vehicles. Both Warhawk and Resistance receive free updates and improvements as well as purchasable map packs…
What I Think
Blah Blah Blah. Sounds like company PR to me. Downloadable content, to me, has been a way for publishers/developers to squeeze every last drop of money they can from you. I don’t think any company can really brag about their downloadable content unless it was free. I mean lets look at horse armor. Yeah that went over well. The best downloadable content I think have been the map packs and the additional songs you can download for Rock Band and Guitar Hero. Although I really don’t think these are good reasons why the PS3 is now relevant.
4) DualShock 3
PS3 Fanboy
The DualShock 3 reintroduces rumble to the PlayStation brand. SIXAXIS motion sensing is implemented into most new releases, with developers like Rockstar and Kojima Productions discovering that less is more…
What I Think
The DualShock 3 reintroduces rumble to the PS3, something it should have had from the beginning. Despite the new old rumble, the SIXAXIS control is very cool if it is used sparingly. I recently played through Uncharted, and Heavenly Sword and I thought the use of the SIXAXIS control was used very well. Still I don’t think this technology merits that much acclaim. Until there is a game that is revolutionary enough to take full advantage of the SIXAXIS I don’t it is that credible.
5) Value for money
PS3 Fanboy
Sony lowered the price during 2007 from the ludicrous $600 starting price tag to a much better value $400. The PS3 is one of the cheapest Blu-Ray players on the market and is guaranteed to contain a HDD, built in wifi and a free online service…
What I Think
I agree totally. The PS3 is a great value for any video lover. For the hardcore gamer, the jury is still out for me.
6) Regular firmware updates
PS3 Fanboy
Sony continually updates the system to improve the user experience. Over the last twelve months we’ve been given DivX support, backwards downloading, Remote Start, Folding@Home, themes, Blu-Ray profile 1.1, DVD upscaling and more…
What I Think
I think firmware updates are great, especially when they bring new features. However, PS3 has a long way to go in improving their system update process. When you first start up the system there is no indication that a firmware update is available unless you visit the system update or the Playstation Store. After you manually search and find an update you start the download, which in my experience has taken a very long time. When downloading an update you cannot do anything else on the machine until the download has completed. After the download has completed next the system starts the actual update (remember kids don’t turn off your system). the whole process is cumbersome and time consuming. Also don’t even get me started on the whole cross media bar (it should be scrapped).
7) Remote Play
PS3 Fanboy
PSP owners can interact with their PS3s even when they’re in a different room (or country) thanks to Remote Play. Once your PSP is synced up to your PS3 you can turn it on and off from anywhere with wifi access…
What I Think
Unfortunately I do not own a PSP so I cannot comment on that. However I do think that if you are a PSP fan, the PS3 ties in very nicely with that lifestyle. For me, my portable gaming device will be the iPhone.
8 ) Metal Gear Solid 4
PS3 Fanboy
The final chapter in the Metal Gear Solid saga is arguably the most anticipated PlayStation 3 title this year. Sony recently announced a worldwide June 12 release date for the game…
What I Think
While I am totally stoked for Metel Gear Solid 4, and even more excited for Killzone, I think that Sony need to secure more exclusives to make it relevant. Don’t get me wrong, those games are system sellers, however so are the dozens of blockbuster exclusive titles that have already been released on Xbox 360. Anyone ever heard of Halo 3? Just look at my list of top games, there is only one PS3 exclusive game. Most of the top games are on 360. Bottom line exclusives sell systems.
9) LittleBigPlanet
PS3 Fanboy
Originally shown off at GDC 2006, LittleBigPlanet captured gamers’ imaginations with its adorable characters and innovative gameplay. The biggest draw of the game, which sees its release later this year…
What I Think
I am not that excited about LittleBigPlanet. I think it looks like a fun game, but it is certainly not a system seller. I cannot imagine anyone going into BestBuy and saying ,”I’m gonna buy a PS3 to play LittleBigPlanet.” Seems to me LittleBigPlanet is more suited for the Wii audience. However I’ll reserve my final judgements until it comes out.
10) Home
PS3 Fanboy
Sony’s ambitious answer to Xbox Live is coming on in leaps and bounds recently. With news that first party titles will receive their own Home spaces, complete with mini games…
What I Think
If I wanted to play the Sims, I’d play the Sims. Home is a poor excuse for an Xbox Live competitor. I want to quickly jump online see if my friends are on and jump into a game. I am busy with work and home life, and I barely have enough time to jump into a long online game. I don’t need to waist any time. Here is what Sony should have done do have a decent competitor; re think your cross media bar , look at what Xbox has done, copy it, and make it better.
The bottom line is that Sony needs to secure more exclusive titles for it to become relevant. Right now I just see mine as a Blu-Ray player, that may one day will become a great gaming system. If a game is released for both systems I snatch up the Xbox version for the gamer points (I know mine is low but I still like them). Sony first party needs to step it up and produce some blockbuster games in a hurry.
If your an Apple fanboy/girl, you are aware that tomorrow Apple is holding a press conference. They are supposedly going to reveal (not release) the long awaited iPhone SDK (software development kit for you n00bs). Most iPhone users have been waiting for this since the iPhone was first released. This will allow third party developers to create applications specifically made for the iPhone. There is already a method for getting an application on the iPhone, but it requires the user to jailbreak the iPhone. However with a jailbroken iPhone, you already have access to some great apps that are extremely useful in your day to day life. Now with the SDK in hand developers can make these apps and many more available to all users of the iPhone and iPod Touch.
The announcement also brings speculation regarding gaming finally coming to the iPhone. Thus far gaming has only been allowed by Apple on the iPod classic and older models of the iPod. Needless to say the users are ready for Games on their iPhone. I have played several games on my once jailbroken iPhone. Many of these jailbroken games were sub par on graphics, but were extremely addicting and functional. Now that the SDK will be released it also allows the big studios to jump into the game. This could fix the problems with some of the sub par games as well has create a higher standard for independent developers to strive for. EA and id Games have been strong supporters of the Mac. You know they are anxious to get their games on the iPhone and iPod Touch. There have also been rumors around and announcement from EA. This is all speculation at the moment.
What possibilities lie in the iPhone? It has a gorgeous multi touch sensitive screen. The iPhone has several sensors in it, one to recognize when you have the phone next to your face, and the other is an accelerometer. The accelerometer can sense motion, and which way the device is begin held. The iPhone has a camera, speakers and a microphone. You add all of these together are you have the ability to have a highly interactive game in a small hand held device. Look at what the Nintendo DS is doing with their touch sensitive hand held.
I recently read a post highlighting an independent games developer that has made an iPhone game that uses some of the iPhone’s features. The game is called Trism. It’s a Bejeweled-like gem matching puzzle game. Pretty straight forward right? Take a closer look. This game uses the iPhone’s accelerometer to tell the gems which direction to fall.
This game is working on a Jailbroken iPhone. He mentions he wants to put it on the iPhone through the SDK.The game is still a work in progress, but shows you some of the capabilities for the iPhone in terms of gaming. Check out the video below, you will be amazed.