Daily CSS Images Challenge

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

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

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

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

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

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!

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

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

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

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.