Topic: A Web Dev's Time-Killing Activities  (Read 2914 times)

0 Members and 1 Guest are viewing this topic.

K

  • 五月雨を あつめて早し
  • 最上川
  • LOOK AT ME
  • Nickname: Keith
A Web Dev's Time-Killing Activities
« on: October 12, 2011, 08:28:12 am »
Behold, Touhou items reproduced in HTML+CSS3.

Made this one evening after dinner for some reason. It looks shiny, I guess.
Cross-browser compatibility? Well, I hear it behaves absolutely marvelously in browsers that aren't Chrome! It probably also looks really nice on systems that don't have the Meiryo font. (Short answer: No. Not-so-short answer: I never got around to taking this silly little diversion from a few weeks ago extremely seriously.)

I swear, it should look something like this:
Quote
(Image removed from quote.)

Bio

  • resident walker
  • LOOK AT ME
  • Nickname: PIe
Re: A Web Dev's Time-Killing Activities
« Reply #1 on: October 12, 2011, 08:34:18 am »
They're boxes in IE. Checking in Firefox Aurora.

E: Works in Aurora as it does in chrome.
« Last Edit: October 12, 2011, 08:37:34 am by Biohazurd »
Re: A Web Dev's Time-Killing Activities
« Reply #2 on: October 12, 2011, 10:43:39 pm »
They're boxes in IE. Checking in Firefox Aurora.

E: Works in Aurora as it does in chrome.
but than again, IE isn't known for it's standards support  (in fact, I think that only IE9 has CSS support at all!)

Drake

  • *
  • LOOK AT ME
Re: A Web Dev's Time-Killing Activities
« Reply #3 on: October 12, 2011, 10:50:57 pm »
ie is dumb and stuff

but yeah this is awesome

A Colorful Calculating Creative and Cuddly Crafty Callipygous Clever Commander
- original art by Aiけん | ウサホリ -

Jq1790

  • Wow I'm back to playing this game.
  • Let's puzzle together again, Karin!
  • LOOK AT ME
Re: A Web Dev's Time-Killing Activities
« Reply #4 on: October 12, 2011, 11:26:48 pm »
You people need more recent IE...*doesn't use those silly things like FireFox and Chrooooooome*  I'm seeing the pics perfectly fine.
If you're a Pazudora player and aren't on #puzzleandlibrarians, come join us!

KrackoCloud

  • I don't mean to be greedy...
  • ... but white rice is my favorite food.
  • LOOK AT ME
Re: A Web Dev's Time-Killing Activities
« Reply #5 on: October 13, 2011, 12:46:21 am »
It looks very nice and crispy. Like something from a board or card game!
Fortunately, I don't see what's wrong when I use Chrome.

Romantique Tp

  • Yellow Member
  • *
  • LOOK AT ME
  • Nickname: Romantic Tp
  • Gender: The best one.
Re: A Web Dev's Time-Killing Activities
« Reply #6 on: October 13, 2011, 12:49:20 am »
You people need more recent IE...*doesn't use those silly things like FireFox and Chrooooooome*  I'm seeing the pics perfectly fine.

Here's a cap from that silly most recent version of IE.
The items do show up, but there are no shadows and the corners aren't round.

Jq1790

  • Wow I'm back to playing this game.
  • Let's puzzle together again, Karin!
  • LOOK AT ME
Re: A Web Dev's Time-Killing Activities
« Reply #7 on: October 13, 2011, 02:58:42 pm »
I'm CONFUUUUSED! [ Guests cannot view attachments ]
If you're a Pazudora player and aren't on #puzzleandlibrarians, come join us!

DX7.EP

  • Red shroom
  • *
  • Smooth Charisma
  • LOOK AT ME
  • Nickname: The_EP!
  • Gender: None to speak of.
Re: A Web Dev's Time-Killing Activities
« Reply #8 on: October 13, 2011, 03:56:07 pm »
I'm CONFUUUUSED! (Attachment Link)
It still looks off, especially in the bottom corners of the items.

Gotta love IE and MSFT for stubbornly pushing their own standards and ignoring everyone else's....

*doesn't use those silly things like FireFox and Chrooooooome*
IE is silly from the web developer's standpoint, though.
C:\DOS\> ayayaya.mid
Bad command or file name

C:\>_
  • Sanmaat (site of personal tat)

KFCbbQ

  • Taking over the world.
Re: A Web Dev's Time-Killing Activities
« Reply #9 on: October 13, 2011, 04:40:24 pm »
Viewing this on a tablet and it looks fine except the alignment is slightly off

Drake

  • *
  • LOOK AT ME
Re: A Web Dev's Time-Killing Activities
« Reply #10 on: October 13, 2011, 04:52:01 pm »

A Colorful Calculating Creative and Cuddly Crafty Callipygous Clever Commander
- original art by Aiけん | ウサホリ -

K

  • 五月雨を あつめて早し
  • 最上川
  • LOOK AT ME
  • Nickname: Keith
Re: A Web Dev's Time-Killing Activities
« Reply #11 on: October 14, 2011, 05:56:40 am »
If you see them as squares, then whatever browser you're using really doesn't like border-radius. I probably should've thrown more vendor-specific prefix variants into the stylesheet. (for an example of prefix overload, take a look at anything with the word "gradient" in it)

There are bound to be slight positioning/alignment issues, especially if you zoom in/out. If you look really closely, the arcs formed by the rounded corners of the white border won't quite line up with the arcs formed by the rounded corners of the outer edge of the item. The white border will also show its flaws if you keep zooming in. I probably have a vague idea how to fix some of these things.

I know for a fact that this page doesn't exactly look perfect on my Android phone. Font issues totally throw off text alignment. No Meiryo = font alignment issues. Embedding a 1.6 MB webfont also doesn't seem to go over too well with the Android browser.

Fortunately, I don't see what's wrong when I use Chrome.
Yeah, Chrome is my main browser, so I did 99% of the eyecandy testing there.

I'm CONFUUUUSED! (Attachment Link)
...well, wow. That's an interesting one. Hello little grey boxes, what in the world are you doing there?

Summary of most issues encountered so far: HOORAY WEB STANDARDS! (well... we're getting there. Slowly. Maybe.)
« Last Edit: October 14, 2011, 06:35:53 am by K »

Grimarg

  • B-but you haven't promoted me yet!
  • Thanks Aoshi for the avvy! :3
  • LOOK AT ME
  • Nickname: XiEx-Grim
Re: A Web Dev's Time-Killing Activities
« Reply #12 on: October 14, 2011, 12:20:33 pm »
awesome, i need to change the browser font, but still awesome
 

SMF 2.0.15 | SMF © 2017, Simple Machines
Theme based on ModernDark64 design by BlocWeb
Page created in 0.066 seconds with 52 queries.