CSS3 Transition in Chrome and IE

The last image is rotated -15 degrees

The last image is rotated -15 degrees


I am using CSS3 transitions to do rotations. My observations:

  1. PNG and SVG images look sharp in Chrome. However, when they move, they go jagged. To fix this tendency in Chrome, you need to make a SVG file which is exactly the size you will display it on the page. Then in the CSS, you declare the size as well (I used just the width property). This exact size specification will make the SVG appear smoothly in IE 9.
  2. Any version of IE before 9 will either a) not display your SVG at all or b) show a red x box.
  3. The unpleasing way of doing things is to then make a JPG image which you can have animated in compatible browsers but will not move in non-modern browsers.

Resources

HTML and CSS Timeline Expirement

I have been on the hunt for timeline software that would for tracking my fictional characters. My partner-in-crime devised a beautiful timeline in Photoshop, but it was a real chore to keep updated. On Sunday night, I hit upon looking up a HTML and CSS version and came across this version on the dev.Opera website. I modified the code to come up with a version that closely mimics the work of my friend.

I worked feverishly for a few hours on my timeline but eventually became overwhelmed with the difficulty of maintaining this version as well. The problems:
Some issues I would like to bounce off others:

To create the five year time spans (indicted by the thicker border), there are five divs. I have to continuously copy and paste this five div structure to keep going sideways (I will have over a thousand cells when I am done!). When I add a character into the timeline, I have to go into each “year” div and then create the character’s div. If another character was also born in that year, I have to add them inside the same year div.

charactera


charactera

Then in the CSS, I have to create a simple margin-top rule to tell the new div/bar how far down to move. The problem becomes apparent when I think of every time a new character is added, every character below them will need to have their margin-top rule adjusted. This is clearly an issue!
The second problem is that those “types” on the side (e.g. Fire) will also need to be pushed further down the page with every new addition. So for instance, if there is a new character added in Fire, Water will need to be pushed down the page.

An ideal thing I would like to ultimately do would be to have a drop down selection box which would then only show characters of that type (or clicking on the text of a “type” would cause those characters to appear). Then someday I’d like to be able to simply type in character names and have only those listed appear. But those are bigger dreams waiting for me to learn advanced coding!

CSS Training in Facebook Chat

This is lifted from a Facebook chat I had with a friend as I talked him through the basics of CSS.

So, when you’re coding, you can only code down the page right? But your CSS can make images/areas appear wherever on the actual web page
So you need to keep the constraints of the HTML in place as you code and remember to think of the final page so you’d have something like:


< div id= "sidebar_right" >
Content
< /div >

< div style= "margin-top: -30px; margin-left: 20px; ">
< img src="picture.jpg" />

< div style = "margin-top: -50px; margin-left: 20px; ">
< img src ="picture2.jpg" />

I had to add in lots of spaces to get the code to appear on this page. This text is to be used as an example.

You have to give the pictures negative top margins so that you can pull them up the page instead of being below the sidebar.
The margin-left will move the images to the left of the item to the left of it
Adjust the numbers as needed
Make sense?

Do you know the difference between class and id in CSS?

  • id is where identify the div like
  • and I reference it using a #
  • is ONLY used for one item on the entire site. Which means that you can’t (or shouldn’t) call that id on any other page
  • In the CSS, it is referenced as #sample
  • can be repeated as many times as you want