Christoffer Wadensten

Teach by day, code by night.

Jan 082014
 

A nice feauture in CSS3 is the box-shadow. Instead of working with tedious PNG-images you can add shadows to any element with the CSS property box-shadow.

The syntax works like this:

box-shadow: <offset-x> <offset-y> <blur> <spread> <color> <inset>

  • The offset settings will set the angle of the shadow. Where it will be cast in relation to the element.
  • Blur with set how much the shadows blurs out from its defined position.
  • Spread will set the size of the shadow. By default the same size as the element. This number can be negative to set a smaller shadow.
  • Color can be any  format. i.e. black, yellow, #FFF, rgb(255, 240, 240) or rgba(0, 0, 0, 0.7)
  • Using the inset option will cast the shadow inside the element instead of outside.

Here are some examples:

Continue reading »

Jan 022014
 

Here is a super simple navigation bar. Customize it for your site, with colors and fonts.
This is just a super simple base recipe:

First the html:

<ul class="menubar">
 <li><a href="#">hem</a></li>
 <li><a href="#">info</a></li>
 <li><a href="#">tjänster</a></li>
 <li><a href="#">kontakt</a></li>
</ul>

We end up with this as our base structure:
1

Continue reading »

Jul 092013
 

Here’s a super simple function that generates humanly readable passwords by weaving random consonants and wovels.

The generated passwords are by no means secure. I did this for an application used to launch game servers and wanted to make the passwords be easy to communicate over Skype. Continue reading »

May 082013
 

This is an enhanced version of this

It’s a VERY simple php gallery. You could develop it in any direction. This one only supports jpg, but that could be augmented as well.
Here’s what it does:

  • Allows the user to choose an image and enter a title (or caption).
  • Uploads the image to a folder on the server.
  • Creates a thumbnail
  • Enters the filename and caption in a MySQL database.
  • Output all the images.

Continue reading »

Apr 062013
 

To prevent a Phonegap-wrapped app from opening external links in the apps webview, use javascript to open the link in the external browser.

This works on Android (probably other platforms as well)

<a href="#" data-rel="external" target="_blank" onclick="window.open('http://www.jymden.com', '_system')">Jymden</a>