Design
Web work I do, new styles on exscale and some 3D.
There are 30 articles published in this category. Please try the search if you can't fint what you're looking for.
aFramework Install
Thursday, November 13, 2008
Last few weeks I've been working on aFramework's installation wizard whenever I've had some spare time.
The entire config-handling has been rewritten and is now completely dynamic. This allows the installation wizard to adapt to whatever sites the user selects for installation.
I've set up a demo-page so please have a look and tell me what you think. The demo won't actually install anything but it looks and behaves exactly the same as the real thing.
I should mention that both the logo and the icons are temporary (possibly even the entire design). A mate of mine is working on some new stuff but I kind of liked those dark icons I found on iconspedia.com so I felt it was time to stick it online.
- Comments are off
- Filed under aFramework, Design, Development
Mogr - your mobile starting point
Thursday, February 21, 2008
I just released a beta of my latest project, Mogr ('Mo' is for mobile, 'g' is for google and the 'r' adds to the web 2.0:iness and stands for RSS:) also, Mog is a creature from Final Fantasy).
Mogr is meant to be your mobile starting point and is very simply a list of your favourite feeds packaged in a neat interface that should fit your mobile phone nicely.
There's also a search-bar that lets you query your favourite search-engine.
Feeds are cached for an hour and site-favicons are cached forever (well, till i manually clear the file). All information you save on the site (your feeds, search-engine and other various settings) are stored in a cookie so there's no need for any sign-up.
Simply surf over to mogr.pixlperfik.com and add your feeds.
Suggestions or feedback? Please use the comments
The CSS3 Advanced Layout Module
Monday, November 19, 2007
I've only looked briefly at the new CSS3 advanced layout module, but what I've read seems really cool.
Using floats, absolute/relative positioning and (negative) margins you can create basically any layout without the use of tables. But many times your markup still reflects your layout.
The markup exscale.se consists of is pretty much limited to 1, 2 or 3 column layouts due to the grouping of all sub-content widgets in the #sub-content div and everything else in the #content div. Using the new layout module I could place every widget in the #wrapper-div and still create fluid, scalable 1, 2, 3, 4, whatever-column layouts. I could move widgets around however I felt like without ever touching my markup.
With the new layout module in CSS3 complete separation of content and design is possible.
- Continued...
- Comments are off
- Filed under CSS, Design
We've Moved
Monday, November 05, 2007
Just a simple "We've Moved" image I used on some site ages ago..
Silver Ball
Thursday, November 01, 2007
A basic silver ball inspired by some old Hugo Boss cologne. The reflection is from "Our House".
A Lot Going On
Tuesday, October 30, 2007
You may notice it's been kind of quiet here for a while.
That's because during the past few weeks I've been busy moving from Stockholm (and Web Guide Partner) to London (and Yahoo!).
I've also been working quite a bit on the site, both back-end, front-end and on a new design.
- Continued...
- Comments are off
- Filed under Design, Javascript, Site News
My Old Room
Monday, October 29, 2007
This is how the "Dream Flat" started out and is basically a copy of my old room at my parent's house.
eXscale Mosquito
Sunday, October 28, 2007
This one is used on the "Mosquito 3"-style. I like how the lighting worked out on this one.
Dark is Back
Tuesday, August 14, 2007
I decided to brush up and update my old style "Dark" that I made back in March of 2006.
I've added quite a lot of widgets to my sub-content area since then and this style doesn't really look good with more than a few of them visible so you won't have access to everything if you use it.
I think this is the best one I've made and I know it's one of the most popular ones among visitors (well, perhaps not so much anymore since i added the JoshuaInk-style) so I felt it was time to get it back online.
Select it from the style switcher, styles page or just click the thumb.
Enjoy.
CSS Boxar Med Rundade Hörn, Toning Och Skugga
Thursday, May 24, 2007
I denna korta artikel tänkte jag beskriva ett sätt att bygga boxar med rundade hörn, skuggor och toning med enbart en div och ett rubrik-element.
Boxen kommer såklart vara flexibel i höjd, men däremot ha en fast bredd. Krävs flexibel bredd så krävs fler än 2 bakgrundsbilder, vilket då (i nuläget) kräver fler än 2 element.
Om några år (förhoppningsvis) så kommer browsers ha stöd för flera bakgrundsbilder i ett element, och då kan vi bygga hur avancerade boxar vi vill med en enda div, men i dagsläget får vi antingen nästa div:ar, eller nöja oss med fast bredd.
Boxen i exemplet kommer att se ut såhär:
Men kan som vanligt enkelt ändras genom att pilla lite i CSS:n och ändra bilderna.
Boxen kommer bestå av två bilder, den ena placerar vi i div:en, och den andra i rubrik-elementet.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Design
Bra CSS-Menyer
Sunday, March 11, 2007
Med den här guiden ska jag försöka förklara hur man med CSS kan bygga menyer som kan se ut i princip hur som helst, utan att använda något mer än de obligatoriska HTML-elementen ul, li och a.
Jag har sett många exempel på dåliga CSS-menyer, och ska nu försöka bevisa att man sällan behöver förstöra sin HTML med en massa divs och spans för att göra snygga menyer.
Vill du kolla in koden direkt kan du göra det här.
Den färdiga menyn i exemplet ska bli såhär:
Men kan enkelt ändras till vilket utseende som helst genom att ändra bilderna och tweaka CSSn därefter.
- Continued...
- Comments are off
- Filed under (X)HTML, CSS, Design, Semantics, Web Standards
A Really Old School Design
Thursday, February 01, 2007
Just finished coding this really old-school design i initially made a couple of years ago.
It looks horibble, but it was a pretty good CSS excersise to get my current HTML to look like that through CSS.
I actually had to use some JS aswell to add a div for the bottom-left image in the content-area (home/archives etc).
I had the 2 year old source code zipped up and saved for reference, but the page wouldn't render properly in FF, which isn't strange when you consider the code; table based design, inline styles, attribute values without quotes etc.
I tried it in IE7 and there it rendered just fine. Too bad IE has better support for crappy code, than for modern standards.
Anyway, it's pure CSS now so check it out on the styles page or click here to apply it right away
Laters
- Comments are off
- Filed under CSS, Design, Old School, Web Work
Luleå Renhållningen AB
Monday, November 13, 2006
Made this one quite some time back, must've forgotten to post about it.
XLNT Catering
Monday, November 13, 2006
Recently finished coding this for a friend at work. She designed it, but she asked me to code it.
I got to create my own kind of "sifr", but instead of flash i use a php-generated png image. Unfortunately you can't copy or select the text, but the text-to-image replacement is done using javascript so all the headings are proper text in the HTML.
As you can see (if you've checked the site out) the menu item pointing to the page you are currently on always needs to be furthest to the left. I solved this using a body-id and an id for each menu-li, and then positioning the selected menu item absolutely at left: 0; together with padding in the #nav ul.
Check the css is you're really interested.
Some Flash Stuff
Sunday, October 08, 2006
I made some flash menus and stuff quite some time back. They've just been wasting space in a folder on my hard drive, so i thought i'd stick em on here.
I'm no flash-guru so don't expect anything über.
Also included in the code is a valid way of embeding flash-movies in your HTML documents, if you've been looking for that. It's taken from A List Apart's excellent Flash Satay article
- Comments are off
- Filed under Design, Other, Web Standards
CSS3 Multiple Background Images
Sunday, October 08, 2006
I quite recently found out that Safari for Macintosh supports multiple background images in one element. I immidiatly got very excited and created this box using 12 jpg-images, a div and a h2.
The box is stretchable in any direction (including text-resizing).
At work i get to create plenty of boxes in almost every design and i constantly have to bloat my HTML with unnecessary spans and divs. I wish all browsers could support multiple background images now! That would make my job so much easier =)
Anyway, check it out, it wont look very cool if you're not on safari tho.
Northern Hunting Lapland
Sunday, October 08, 2006
Made this a while back, code was pretty bad so i recently shaped it up a bit. Have a look.
Ajax Scan
Tuesday, October 03, 2006
Ajax-Scan is a php/javascript (ajax) directory-listing script. It works like "explorer"on windows.
Ajax-Scan is still a bit under construction, but when i'm happy with it i'll release the code.
- Comments are off
- Filed under Accessibility, Ajax, Design, Javascript, PHP
Naked Day!
Wednesday, April 05, 2006
Why does this web site look like one from the early 80's you may ask, well today is the first annual CSS naked day, and i felt like participating.
Edit: unfortunately I have to end naked day early as I'm leaving my computer behind and flying to India. And i don't want it to be "naked" while I'm there :/
Lots of new stuff!
Wednesday, March 29, 2006
After my latest poll, i found out from those of you who voted that you wanted more PHP-scripts and 3D-work.
So, here's a massive update including 2 new scripts, 1 new image, a new category in the archives for various web-work i do (including 3 posts), part 1 of a 3 part article about "the ultimate website". For those of you who actually want to learn something :) Part 2 and 3 will be released shortly.
And this new design. As usual IE won't play nice, but if you're a FF-user you should see that the menu follows you when you scroll.
The header image is selected randomly from 3 different images, so surf around a bit to see them all.
For those of you who liked a previous design more, you can always change in the styles-section. I also added a quick style switcher in the sub content, which is now located on the bottom.
That's it for now.
I'm off to India the 6th of april, and will be there for 6 weeks. I need to work a bit from there, so i'll probably write something on here aswell.
Laters
Lamp & Mates
Wednesday, March 29, 2006
This is one of those projects that just grew and grew. I started out creating the lamp, added the keyboard, monitor, speakers etc and I even made an animation with it all (2 week render-time on 2 machines) that I submitted to an MTV contest. Didn't win tho...
- Continued...
- Comments are off
- Filed under 3D Work, Design
Lagerkvist & Söner
Wednesday, March 29, 2006
My dads company's website got a re-design and code brush-up recently. Here's the outcome.
Techniques used
- PHP
- MySQL
- CSS
- XHTML
Our Life as Elderly
Wednesday, March 29, 2006
I made, and then re-made this one a while back.
Techniques used
- PHP
- MySQL
- XHTML
- CSS
Bar1.se re-design
Wednesday, March 29, 2006
Re-designed & programmed Bar1's website some time back. I made a couple of different styles, but the final colours were up to the client.
Techniques used
- PHP
- MySQL
- XHTML
- CSS
R2 with my lamp
Wednesday, March 15, 2006
Here's the old R2-toy hanging around with an office-lamp.
And there's an animation too! :)
lamp_r2.avi (2.5 Mb)
Another design
Tuesday, March 07, 2006
I just finnished re-coding my RoundedEdge design that i used for a previous version of exscale.se.
It only works in modern browsers that support png-transparency, so no IE.
Check it out in the styles-section or use the style-switcher
New design, and new contents
Tuesday, February 28, 2006
I've changed the design, i've reprogrammed all my old designs (once again(!)) to CSS (although last time to PHP), so you can view exscale.se in all of it's previous forms from the styles section.
Of course IE needs to fuck with me and not display the perfectly valid CSS properly on this new design. For some reason i have to add a border-top to my #header, otherwise #headers background-image won't show up in IE6 Win. The really weird part is that for some other reason IE places the background-image BEHIND the border. Or -1px Y. So the gray border in the image doesn't show in IE. Sorry for this, but if you still use IE i seriously suggest you get a modern browser right now.
The reason for the blog-like appearance of this new version of exscale.se is that i wanted a place where i could not only show my 3D work, but also write about stuff like web standards, php, css and whatever. Don't expect daily posts, I'm no real blogger.
Some articles will be written in swedish, because i believe there are enough articles about some subjects in english.
Have fun, leave a comment. I'm working on new stuff, should be up soon.
The Office
Friday, February 24, 2006
Was gonna make an animation of this initially but render-time was a right joke and the animation wasn't really that cool so I trashed the idea.
- Continued...
- Comments are off
- Filed under 3D Work, Design
Dream Flat
Friday, February 24, 2006
An attempt to create my dream flat in Lightwave. Unfortunately I'm no architect so it didn't exactly turn out like my dream. Still kind of liked the lighting/render.
- Continued...
- Comments are off
- Filed under 3D Work, Design
