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.

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>

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.

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.

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!

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

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>

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.

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.