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

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>