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

Daily CSS Images Challenge

2017-01-12T00:06:00.003+00:00

When this popped into my inbox, I thought it was a good way to discipline myself to learn rather than reading and storing the months of articles and tutorials.

"Each weekday for 50 days you will be sent an email challenge to create a pure CSS image."

So day 1, I received this.

I thought at first it was a typo and it was meant to be "Cube" as the tagline suggested it was simple plus the first task should be easy. But after a bit of research on their twitter page at other entries, "Cub" was correct. So a baby animal was the first task? I felt like quitting already especially after viewing the complicated designs of others!

Okay... I'll start super simple. No shame to that I say to myself... I have to start somewhere. Did a quick image search for animals created with shapes and chose a few simple ones that I liked the look of. (Plaguarisim alert - credit to the original artists) I knew triangles were not easy in css so I stuck to anything with circles, squares/rectangles.

Chose the hippo and llama and redrew them. Then calculated the number of shapes I would need for each.I liked the llama better and it had less shapes. I decided since I was doing such few shapes to make the task a bit harder and try make them scalable. So it would change it's size according to the screen width.

Whilst tinkering with percentages long after midnight, I was doubting my decision! But I perserved and finished.

See the Pen Llama Cub #dailycssimages - day 1 by Tiffany Ong (@ongtiffany) on CodePen.

So 1 down... 49 to go. Pleased and proud but not sure how long I can keep this up.

Quick way to out all tagged or untagged posts on your tumblr site

2015-10-31T21:50:00.000+00:00

This website gives you a code enabling you to put a tag cloud in your tumblr site to show the tags it has. I didn't need a tag cloud but I needed to find all the tags on my tumblr site and this was a quick way of finding it without having to go through the api or looking through any scripts.

Also found another site that shows any untagged posts which is very useful if you forget to tag some.

Map Tile Layer Library

2015-08-10T21:19:00.000+01:00

I made a reference list to the some of the map tile layers I found online since I am working on a quite few map projects using leaflet.js and wanted to have them all in one place for easy access.

Available on this pen.

Knitted Baby Mary Jane Shoes

2012-08-04T00:14:00.000+01:00

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.

Knitted Baby Loafers

2012-06-06T22:53:00.001+01:00

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!

Livingstone Studio Website

2012-05-13T23:54:00.000+01:00

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.

Sticky Footer Finally Conquered!

2012-05-12T00:46:00.003+01:00

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>

Introducing: Visual Identities for Small Businesses

2012-04-07T10:39:00.000+01:00

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.

Image Grid linking to Text List using CSS only

2012-03-28T00:03:00.000+01:00

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.

Changing Opacity on Image upon Hover using CSS

2012-03-21T16:50:00.001+00:00

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.

MAMP

2012-03-13T16:42:00.000+00:00

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.

Pure CSS Image Gallery with Next and Previous Buttons

2012-03-10T20:10:00.000+00:00

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.

CSS Accordion Menu

2012-03-06T22:31:00.000+00:00

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!

Pure CSS Slideshow

2012-03-04T17:27:00.000+00:00

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.)

CSS Anchors

2012-02-27T23:48:00.003+00:00

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>

Box Shadow (Right and Left Only)

2012-02-23T13:58:00.000+00:00

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

2012-02-18T22:28:00.001+00:00

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

2012-01-14T19:06:00.000+00:00

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

2012-01-04T00:02:00.000+00:00

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

2011-11-26T18:34:00.001+00:00

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

2011-11-26T17:43:00.001+00:00

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

2011-11-25T00:13:00.001+00:00

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)

2011-11-21T19:08:00.001+00:00

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

2011-11-09T01:26:00.000+00:00

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.

Error: Embedded data could not be displayed.

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

2011-11-06T18:15:00.002+00:00

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!