Box Shadow (Right and Left Only)

Here is a CSS code to create shadows only on the left and right of a box which wasn't too easy to find. I found this one on a forum so I thought it might be useful for someone else. All the values can be changed to your liking but below is a sample.

div { width: 400px; height: 400px; 

box-shadow: 6px 0 4px -4px #222 , -6px 0 4px -4px #222; 

 -moz-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222; 

-webkit-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222;} 

Understanding the code goes a bit like like this:

     x-offset (right[+] or left[-])

     y-offset (bottom[+] or top[-])

     blur 

     spread

     colour

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Update:

Since this seems to be a post that is viewed a lot, I thought I'd add a pen as well. I changed the values a little from the code above.

Text Editor Search

I've started hand coding a few websites and naturally it's taking me a lot longer. A simple navigation bar which would easily have taken me less than an hour to do in Muse, can take me a day or even two if I'm unsure which design to settle with. It could be bit frustrating if I was counting the hours but I'm taking it in its stride and know it's all part of the learning process. And I have been learning a lot.

One thing I have been trying out since I have started hand coding is a good free text editor.

I started out using gedit which I was pretty happy with until I watched a tutorial (one of many) where the demonstrator was using this program called Coda. The feature it had might have been around for ages but to a newbie coder, the automatic html tag closing ability, was a revelation! The program wasn't free but I thought, let's download the demo version and if it's as great as it looks, it'll be worth considering. The first first hours was nice. Almost as if some twin sister was there to finish off my sentences. But the novelty wore off as I realised the default program preview wasn't the same as browser preview. Maybe if I fiddled around a little more, read some help forums, I would have figured out why the program preview was viewing differently. But I had just wasted an entire day's work and since Coda wasn't even free, it was in the bin for me.

I downloaded another free text editor the next day after some research and advice. This time, Textwrangler. Very much like gedit and serves it's purpose but I was itching for something a little bit better and different, since this was the program I was to use 8-12 hours for the next few months (yes, that is my plan. Not spending everyday trying out different programs.)

Koda looks so very nice and if it had an easier way to change its features instead of having to go into the CSS file each time, it would be a nice one to use.

At the moment I'm using a trial version of Textmate and I'm liking it a lot. It has the closing tag feature and its has everything that I would want, except it isn't free. 

So my search still continues for a suitable free text editor! But if not, I just might just buy this program as it has proved to be pretty efficient so far.

Customised Hiragana and Katakana Wallpaper

I've had another request to customise a wallpaper but this time from someone I've never met! This time it's a Katakana one. But I was looking at the Hiragana ones I did before and I realised that the background pixel resolution of those were not good so decided to make another one since I now know not just my partner will be using them!

I have taken out the older versions so here is the Katakana wallpaper, and the new version of Hiragana wallpaper with a better background resolution. I've reduced the character chart size down slightly to give just a little a bit more space for your desktop icons (if you are anything like me, and have loads). Changed the original Katakana chart to make the characters pop out a little, giving a slight 3D effect.

Please feel free to download and use them. I hope they will help you learn Japanese faster!

Download Katakana Wallpaper Here
. Downloads


Download Hiragana Wallpaper Here
. Downloads

Hand coding

I've been researching the right way to build website and it seems the proper way is to hand code from scratch. So since I had a nice long Christmas break ahead of me, I decided to go the whole way and start learning HTML5 and CSS.   

I've finished reading the book "Build Your Own Website The Right Way Using HTML & CSS" and there is sure a lot to take in! I can understand why people shun away from coding as it takes so much more time to set up a website than using a wysiwyg web design program. But it's in my nature to find out the intricacies of things so here I am starting out the fairly tedious process of learning how to code.

I have begun to code a version of my website and it'll be a while until I can say it is finished, but it's part of my learning process and it will enable me to be a better, (hopefully) wiser designer with a bit of developer's skills. 

Moving from Photoshop to Fireworks

Now that I'm working on more web based work, I've been hearing a lot of the advantages of Fireworks to Photoshop, and its links to Dreamweaver. I've been a Photoshop user for years and it's a bit hard to change to using a different program but after reading up on a few articles, I think I should give it a go.

This is a video that I have found incredibly useful:

Creating a template with working navigation bar in Fireworks and transporting to Dreamweaver. He uses the old fashion HTML table method but it's good to know how to do it. 

Moving from Muse to Dreamweaver

I've almost finished my website, still have quite a few things to complete it but I'm not going to finish it. I have used the programme Muse which has proved great for starting out and has been a fantastic programme to get my foot into website design but I really want to learn more coding and get the hang of the slightly more "professional" stuff so I'm moving over to Dreamweaver. I've heard it'll take a lot longer to set up a website in Dreamweaver but I think it'll be worth it in the long run. 

At the same time, it will give me the excuse to work on another design for my website. This is the present look at the moment which I'm happy about but would like to see what else I can do with the next.

Digital Design Job Opportunities

I've been hunting up and down for a better job. Not that I can't stand my present job, (with the terrible economy at the moment, I know I'm lucky to have something) but I would like to find something more challenging as I feel I have learnt my fill and can't progress much much in this company. 

I'm sure there are many, like me who have found it hard to find a job and even though I might be increasing my competition, I feel like it would be nice to list the places I have found useful to search for job openings. These aren't the usual job sites, like reed, monster, or the tons of creative recruitment agency sites popping up all over. They are the ones that have the title "Job Boards". Either stand alone or within a website (usually design related). And they are mostly UK/London based.

I'll be adding more along the way but if anyone has any good links that I might have missed out, do let me know. Hopefully, these links will lead someone to their perfect job and hopefully soon, mine too.

Blog Embedding (Update)

I found another code to embed one website (in my case, a blog) in another website. This one makes more sense than the previous one and it's shorter as well. I found out the correct term is an iframe.

I amend the code a little to make it more "user" friendly but here is the original source. The website link, height and width should be changed to your requirements.

The default of the iframe gives a scrolling bar if the website height is more than the height of the iframe. But by adding a little extra code, the scroll bar disappears!

I'm still trying to figure out how to remove the nab bar on blogger, not on the blogger site itself but on the iframe. I know you can remove it by amending the html of the page, but I wonder if you can just remove it by hiding a few pixels from the iframe.

I am also not completely happy with embedding the blog through iframe and would like to find out how to embed it (easily) without the iframe and without the blogger background.

Blog Embedding

I have embedded lots of stuff into the Finn Bonel website I have been working on. There are lots of easy instructions online for embedding a twitter feed, youtube video, google map, etc. but not very many about how to embed a blog into a website. I scoured the web for days (not full days) and found lots of complicated methods that needed lots of coding, some also needed javascript, some that needed sign ups to place rss feeds, I was ready to learn a bit of javascript when I came across this website which provided such a simple html code.

The instructions are to change the bits in bold to your requirement, although I'm not too sure what the first set of measurements do as changes the object size in compose mode but doesn't affect the object size in the browser.  But I just keep them the same to be safe. It would be really good to figure out how to get the embedded site to fit to scale because at the moment, the site is the same scale as you would see in your browser and scrollbars have to be used which is a little difficult to navigate if you have to use both horizontal and vertical scrollbars.

The "Error: Embedded object could not be displayed." message seems unnecessary as it does not appear anywhere, but I assume it appears should your link not work. But it is a very useful code to have and will be using it more, especially once I figure out how to fit the site to scale. 

Not Free, Freelance

I'm meant to be working on my own website but a freelance job came up so my website is on hold.  I cannot complain too much as it is paid work! It's for a music artist, Finn Bonel, which I'm collaborating with my colleague at work to get his website up and running. It's been a good project so far and I've been integrating all the social media stuff into the website although I still need to figure out how to embed a blog into a website which sounds easy... but it's not so straight forward.

I'm still using Muse to get the work done but I am itchy to use a bit more of Dreamweaver as I know it's a bit more professional and the script is much cleaner in the end. It probably will make the website load faster and I'll pick up a bit more html/css/etc. that way too. But I think I'll have to master Muse first before moving on to Dreamweaver, although I'm also afraid I'll get so used to the ease of Muse!