There are lots of things I play around with on the odd time, little hits and tips to do something slightly better, or slightly worse. As well as little things which I think might be cool- but turn out totally crazy. Where and when do these things happen? Why when I decided its time for a new layout- which seems to be almost every time. Today is just one of those things which I’ve looked over in the past (in fact this I looked at today) to make part of the layout, but it seems it wasn’t meant to be…
Today I’m going to teach? (I think thats a horrible word- especially considering this isn’t really nothing great, least how I’ve coded it – and the fact I bitched to a few people I know on the internet for little hints as well to get this particular CSS done) how to make an angle navigation- which you can use and adapt to various things.
First I created a “header” div, which contains a few settings I wanted for the whole header. Which included font type, size, etc.
div#header{
width:800px;
background-image:url(‘images/header.png’);
background-repeat:no-repeat;
height:300px;
overflow:hidden;
border:5px solid #000;
padding:5px;
background-color:#0F0;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#000;
}
The most important thing here is the overflow tag, because that removes the excess from the angle navigation. Your width and height tags are also important, because thats how big you want the section.
I have also added an excess image background, which you can either replace with your own, or remove the CSS.
The container div tag I made, is where all the magic happens. This puts the div on an angle, keep in mind the CSS used has various default settings built in which might not suit what your doing, for example playing around with this code today, I have noticed that it copies the properties outside the div tags (meaning the center tag I had) and centered it there. It also is very limited in how it is positioned etc. I haven’t really bothered to go into it, so it could well be more adaptable then what I’ve experienced, but yeah.
div#container {
width:100%;
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
-o-transform:rotate(-55deg);
}
As you can see, this div contains the 100% width (which makes the effects we have adapted to the links flow through the div frame. Remember the overflow tag in what ever div your got as its object- so it removes the excess from this action). You also have the transform CSS, we are doing a simple rotating transform. But there are other transforms you can do. (NOTE: THE TRANSFORM CSS CODE DOESN’T WORK IN INTERNET EXPLORE, AND I DO NOT KNOW/PROVIDING A FIX FOR THE BROWSER)
Just before I forget, some settings for the unordered list CSS.
ul {
list-style: none;
margin: 0;
padding: 0;
}
Normally I don’t use lists for navigation- in fact I haven’t ever used lists for navigation in a long time besides learning how its done. So its not something I know on the top of my head, but its something I can easily work out. Anyway the reason we are using lists for navigation here today is because we are making the navigation more detailed then a simple row of links.
While normally background, padding, and other things like borders can be added, by using lists we can use the CSS which is built around that, which allows more things like linking- widths etc. Least thats my understanding on how they work differently to a normal a:link or what ever, and thats how I’ve worked it out to work as well…
div#container li a {
height: 32px;
height: 24px;
text-decoration: none;
border-top:5px solid #000;
}
div#container li a:link, div#container li a:visited {
color: #000;
display: block;
background-color:#3C0;
padding: 8px 0 0 10px;
}
div#container li a:hover {
color: #000;
background-color:#FFF;
padding: 8px 0 0 10px;
}
Above is something easily to understand, its the CSS for the link settings for the main navigation (I’m going to add in a sub-navigation to this code tutorial as well).
The style for these links is a colored background (the testing here I’ve used a limish green) with a big black top border of 5px. I’ve also added in a hover of white.
That is really all there is to that code (oh and we have put the a:link, and a:visited together with a coma, because they are the same code).
We then add in another bit of CSS, this time its for the sub-navigation. (I’ve only used it once in this code, so there is no linking to special parts using say a class or id tag).
div#container ul ul li {
height: 36px;
text-decoration: none;
}
div#container ul ul a:link, div#container ul ul a:visited {
color: #000;
display: block;
background-color:#900;
padding: 8px 0 0 10px;
}
div#container ul ul a:hover {
color: #000;
background-color:#FFF;
padding: 8px 0 0 10px;
}
Notice that because its a deeper bit of code then a normal unordered list, it doubles up in the identifiers so it can see that its for any list which is within a list. (which is what we are using for the backbone here for the navigation).
Right now if you where to put that into a HTML document, everything will show up- which is good, but the problem here is that the sub navigation also shows up. What we are going to do is put in a bit of code which hides the subnavigation until you mouse over one of the list points which has that subnavigation.
li ul {
display: none;
}
li:hover > ul {
display: block;
}
Wow! Thats all the CSS done.
You can either put that in a <style></style> in your HTML’s header, or you can make an external stylesheet.
You can change the title of the links to suit what you want (I originally was testing it with 5 links, but then I added in the sub navigation and just copied the segment of code for the original link :/)
But anyway, I’m going to be nice and upload the preview of what I’ve done- click here!
Sometime ago, there was this thing called 2D, and everything used it- there was 2D games, 2D movies, 2D animation- and even got forbid a 2D plane of existence for these 2D worlds. But then someone decided to jack up the world and make everything 3D, and we started seeing more then just that other line over there- which seemed good in the beginning, but soon things started becoming 3D, 3D games, 3D movies, 3D animation- oh and now 3D planes of existence for these 3D worlds. It seems everything is now 3D, but did we sacrifice the charm of the mediums for advancements in “viewing” technology?
Me beaning me, I have a retro fetish of such- and decided, what if we drop everything and go back in time- 2D everything yay! The past now is 3D, the present is 3D but the future- is 2D! Err maybe not, but you get the idea. I think. Or maybe I shouldn’t write articles at night time :/
Because I was bored, for this “retro” outlook of such, I made Another Code: 2 Memories sprites for the Game Boy Color- well at the end of the day more the original Game Boy, and not really that appealing of sprites (I got pretty bored). Oh and clearly I wasn’t following sprite rules or anything like that for the hardware limitations… :/
Note that I obviously got bored making these mock ups, so I just made it B/W and a rush job as well…
Anyway, my point I think- if I even had a point, was to prove that something which uses a touch screen and all those other fangled new technology pieces could be scaled down into a more 2D sprite world. I think…
I could of done better, but I got sick of making it- especially considering it was going to be used for an article- and not some magical artwork.
My point which I think I tried to talk about before, was scaling down this 3D video game with all its advancements and make it 2D and bring into it some charm. AKA the charm you get when you look at some dopey little sprites and think “hey the people put lots of emotion into making these little things I take for granted” not “oh great, it looks like that FPS I played the other day- you sure this isn’t the same game…”
I think what I’m trying to say is, back in the day everything looked different because the games as someone said when I was talking to them about this where “drawn”, meaning they all looked different, everyone/every game had their own unique style and direction, where as now- pretty much the same engine is used by every man and his dog.
Today I check out one of CINGs final titles before they went bankrupt, before I go all go-go-ga-ga and make a review, lets explore the game- first impressions and where they clearly have gotten a little bit of their ideas from- and what they should of copied more of. Because clearly this game plays like an American TV cop drama.
The reviews of CINGs Again are far few and thin, what is covered in most of them is a draining quality from the almost legendary sleeper hit developer. Lack of a “game”, horrible “paragraphs” and even people picky enough to say that the photo cut outs of actors are just plain ugly because its not “Hotel Dusk”.
Trying to remove the idea that they have created something awesome in the past, the highly regarded Hotel Dusk and its sequel Last Window (yet to be released outside Japan) have created high expectations from Gamers of what to expect from a Cing title.
Unboxing and the first 5 minutes of Again (DS)
CINGs first Nintendo DS title- Another Code, was less of a hit then its little brother Hotel Dusk, which climbed through the ranks and became a highly regarded title- but even then was a solid and interesting experience. It later went on to become a series- with its sequel for the Nintendo Wii.
Another Code was riddled with a few problems, especially the Nintendo DS original, but that didn’t stop it from been a good game. The problem with Again is it seems Cing has back stepped design wise into the riddled mess that was Another Code. While Another Code R did improve design wise and flush out the errors and little rough edges, it didn’t seem to do well commercially- which was the same fate Again suffered in Japan, and with reviewers giving the game the brown thumb, possibly the result for America.
Design wise Cing decided to keep with what Hotel Dusk and numerous other games achieved with the “story book” style side on approach for the Nintendo DS. But the control method unlike Hotel Dusk when moving around, is much less solid and though out- overall it feels very tacky- but at the end of the day does work- but is a very much a “it will do” attitude.
But those little grips are for the review, and dispute them I’m enjoying the game quite well.
My direction for the review (if I’m going to take an offensive or defensive score wise) I haven’t decided yet either…
But anyway onto my observation- it appears yes it does play like an American TV drama.
With the lack of gameplay in between at the end of the day (it is really a glorified spot the difference puzzle wise) its like reading a script for a TV pilot- in that while it seems to have premise, it could do what heaps of work- but still is pretty solid and alright.
It seems the game has taken a few things from Medium (the “visions”), Cold Case (those characters don’t look all that original), NCIS (the lab girl is totally like Abby, okay maybe not by much though….), okay maybe I’m grasping at a few straws but it does have heaps in common with what Americans watch on TV every day.
The only problem it seems in possibly a move to appeal more to the international croud, is that it seems they have “copied” the wrong TV shows.
The whole paranormal aspect of “J’s” seems to have been ripped right out of Medium, in the scene he experiences things and everyone believes his shit and none of that weird shit- when instead, it should of been more like “Life on Mars/Ashes to Ashes”, in that even the beholder doesn’t know what the hell is going on- though the mentioned TV shows do focus on a different paranormal aspect, the basic principles still could of been incorporated over.
Instead of bizarre white haired teenagers and god forbid a red head in the mist of that, all the characters pretty much look like the cast of Cold Case, and possibly even NCIS to a degree.
Also in some ways things seem reused in the “personality” aspect of CING’s past characters- eg. there is this newspaper writer who is personality and relationship wise to the main character to like that junkie guy from Hotel Dusk (names escape me atm).
Oh I could go on about these TV relationships, but fuck I’m tired. Just look for my review in the coming month or two.
