TIFFANY'S BLOG .notes.about.pixels.and.stitch.: 2012

Saturday, 4 August 2012

Knitted Baby Mary Jane Shoes

My friend just had her second little girl so I had a good excuse to pick up my needles again. I wanted to use this pattern from Design by Marte Helgetun but couldn't seem to get the pattern right so I made up my own and turned out like Mary Janes. I also made a little leather label and embossed her name on it. And the results are below.

Wednesday, 6 June 2012

Knitted Baby Loafers

Here are a pair of baby loafers I made for my friend's little baby boy a while back. Adapted from the "grayson loafers" pattern, I made the back a little higher and initialed the soles with his first and middle name.

Annoyingly, they were lost in the post on the way to America and he never got them!

Sunday, 13 May 2012

Livingstone Studio Website

Livingstone Studio is where I had my very first job out of college. The place and people are both equally lovely and over the years, I have been fortunate to have kept the wonderful contact. So when Inge, the lady behind it all asked me to help with their website, I was more than happy to work with her and the team again.

The existing website was a single page shown as one image. Inge wanted something clean and very simple with only a few pages to give a brief overview of the gallery for new visitors and information for existing customers.

We looked at a few options and the left side navigation with content in the right was the best option.

Here is the layout of the site.

And an example of one of the pages, the Collection page.

To view more pages visit my website, or go directly to the Livingstone Studio website .

It is well worth taking a peek inside this special little gallery to see what wonderful things they have if you are around the Hampstead area. I always love going there.

Saturday, 12 May 2012

Sticky Footer Finally Conquered!

I've been searching and testing out different codes to get my footer to stay at the bottom (aka sticky footer) for weeks and finally, I found a simple solution here. It has been incredibly useful for me and I can now spend my evenings doing something else!

The CSS:

html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0; height:
100px; width: 100%;
}

The HTML:

<!DOCTYPE html>
<head>
<title></title>
</head> <body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>

Saturday, 7 April 2012

Introducing: Visual Identities for Small Businesses

I went on my occasional walk down row of bookstores on Charing Cross Road. A bit sad to see them slowly closing down one by one over the year so I do try to go there whenever I can and hope that my small purchases will make some sort of difference.

One book a came across was Introducing: Visual Identities for Small Businesses. It has such beautiful identity and packaging designs and ideas, using the vintage retro touches that I love to use as well. It'll make any designer drool with awe.

To see more images and information of this lovely book, go to the publisher gestalten's site.

Wednesday, 28 March 2012

Image Grid linking to Text List using CSS only

On one of the client projects I'm working on at the moment, I have been asked to make an image grid gallery with text listed on the side of the grid. All the images have a slight opacity and when hovered over, the image will show full opacity, and the text related to the image would also be highlighted. I looked at various sites to see if I could adapt the code but I couldn't get it to work the way I wanted to. But after a lot of testing, I finally managed to come up with something that I'm happy with and works the way it's supposed to. I combined the bits from oneextrapixel, cssplay (the demo was pretty much what I wanted but it used image links in the css), and the image opacity trick from bloggerstop.

I put the image and text in a list and initially I fixed each image individually like the cssplay method but then I fixed the text instead which gave better flexibility. I'm pretty sure this isn't the most refined way to do this. But it serves my purpose for now. I would have liked to have two separate lists. One for the images and the other for text, and get them to interact together somehow but maybe in the future I will figure that one out.

To view a working example, please visit this pen. As with the rest of the codes I have given out, if there are any errors, do let me know please.

Wednesday, 21 March 2012

Changing Opacity on Image upon Hover using CSS

This is a really easy and good way to change your image from some opacity to full opacity when hovered over, and got it from here.

Tuesday, 13 March 2012

MAMP

Today, I installed MAMP. I have been getting a lot of requests to build websites that can be easily edited, and although HTML and CSS have served me well in building websites so far, I need to integrate CMS as well. After some research, I have come to a conclusion I need to learn how to build on Wordpress. I've used Wordpress before to set up blogs but stopped using it because it didn't seem as user friendly as Blogger with its millions of functions I didn't seem to need. But now, I'm going back to it as it seems worth learning for building websites that people can easily update.

I was told by a friend that MAMP was a really good program to use to test build a Wordpress site remotely. She showed me how to set it up but I forgot! So I watched this video which has much more set up processes than I remember, but it was easy to follow and now I'm all set up.

Saturday, 10 March 2012

Pure CSS Image Gallery with Next and Previous Buttons

I have been searching high and low to find an image gallery with previous and next buttons for a project I am working on. I thought it would a pretty easy thing to find since it was a really simple feature but the only place I found a decent example was here on CSS Play which is an amazing site to find lots of CSS goodies.

I later added the images and changed a few more things to suit what I was working on but I thought since it was something I couldn't find easily, may there were others would would like a basic template. Here is a pen to a demo, HTML, and CSS code.

Of course, change things to suit your design. So I hope you find this helpful and should you find any errors, please let me know.

Tuesday, 6 March 2012

CSS Accordion Menu

I needed to make a vertical navigation menu as part a website and again, I wanted to find a method that didn't use Javascript. And if CSS can do a similar trick, why not?

I found really good and easy to follow instructions here. And there is a slightly more jazzed up version that slides out.

I used the normal one as I preferred the old school style and here is the result.

When you hover over, the submenu pops up. It's not going to be used now, but at least I now know how to do it!

Sunday, 4 March 2012

Pure CSS Slideshow

I've been looking for a way to create an image slideshow for my website to show recent work. Usually, JavaScript is used to make it but since I'm still learning HTML and CSS, I wanted to see if there was a way to use just that to get a similar effect.

There are actually quite a lot of different versions out there, some pretty impressive, but I was looking for a simple slideshow with clear instructions and ended up using this one below tweaking a few things to suit my website.

The obvious things I changed were the images, the button colours, the size of the slider, font, text, and various other things. I also added a link to enable the image to change to the next one when clicked on. There were a few things I would have added but after fiddling around for ages and getting no result, I'm going to live without the extras.

But I am very pleased I found this slider as I would have never been able to create it from scratch! (Not now at least.)

Monday, 27 February 2012

CSS Anchors

I've known how to make hyperlinks from day one but it's taken me this long to finally learn how to make an anchor link! But it's pretty simple, just using HTML.

This is how I've been using it on a website which has a contact and about section at the bottom.

I used this code if the anchor's on the same page:

<a href="#about">ABOUT

And this code if it's on another page:

<a href="http://site.com/page.htm#about">ABOUT 

This code is placed just above my "ABOUT" section:

<a id="about" name="about section"></a>

Thursday, 23 February 2012

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.

Saturday, 18 February 2012

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.

Saturday, 14 January 2012

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

Wednesday, 4 January 2012

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.

TIFFANY'S BLOG .notes.about.pixels.and.stitch.