Christopher Joice

Pure CSS Expanding side menu

Christopher — Fri, 11 May 2012 23:16:39 +0000

Here is a slightly complex, but very effective, pure CSS3 animated side menu. Thanks to CSS3Please and Colour Scheme Designer for making my code easier, and Dark Social Icons for the icons.
See a demo to the left.

Twitter Facebook Wikipedia Last.fm

HTML code is simple:

<div id="sideMenu">
        <a href="https://twitter.com">Twitter<img src="/wp-content/uploads/socialLogos/twitter02_dark.png" alt="twitter logo"/></a>
        <a href="https://facebook.com">Facebook<img src="/wp-content/uploads/socialLogos/facebook_dark.png" alt="facebook logo"/></a>
        <a href="https://wikipedia.org">Wikipedia<img src="/wp-content/uploads/socialLogos/wikipedia_dark.png" alt="wikipedia logo"/></a>
        <a href="https://last.fm">Last.fm<img src="/wp-content/uploads/socialLogos/lastfm_dark.png" alt="last.fm logo"/></a>
    </div>


		Twitter
		Facebook
		Wikipedia
		Last.fm

CSS is a little more complex:

div#sideMenu {
/* Position the menu */
    position: fixed;
    top: 30%;
    left: -2.2em;
/* set a narrow width to keep things tidy */
    width: 3em;
/* add a little padding, so hovering near will triger the expansion */
    padding: 2em 2em 2em 0;
/* set the animation for the whole menu */
    -webkit-transition: all 0.5s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.5s;  /* FF4+ */
    -ms-transition: all 0.5s;  /* IE10 */
    -o-transition: all 0.5s;  /* Opera 10.5+ */
    transition: all 0.5s;
/* make sure it stays on top! */
    z-index: 2147483647;
}
div#sideMenu:hover {
/* on hover, show a little more of the menu */
    left: 0;
}
div#sideMenu > a {
/* general stuff to make it look good */
    font-family: sans-serif;
    -webkit-border-radius: 1em; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    border-radius: 1em; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
    /* useful if you don't want a bg color from leaking outside the border: */
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #67E300;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#67E300), to(#439400)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, #67E300, #439400); /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image: -moz-linear-gradient(top, #67E300, #439400); /* FF3.6+ */
    background-image: -ms-linear-gradient(top, #67E300, #439400); /* IE10 */
    background-image: -o-linear-gradient(top, #67E300, #439400); /* Opera 11.10+ */
    background-image: linear-gradient(to bottom, #67E300, #439400);
    display: block;
    line-height: 2.5em;
    width: 220px;
    position: relative;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px #DDDDDD;
    width: 220px;
    color: #333;
/* set an animation when hovering over each item */
    -webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.5s ease-out;  /* FF4+ */
    -ms-transition: all 0.5s ease-out;  /* IE10 */
    -o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
    transition: all 0.5s ease-out;
/* set the start point as mostly hidden */
    left: -170px;
}
div#sideMenu > a > img {
/* fix the position of the image to the right */
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    right: 1em;
    top: 0.5em;
}
div#sideMenu > a:hover {
/* on hover, show the whole menu item */
    left: -1.5em;
}

div#sideMenu {
/* Position the menu */
	position: fixed;
	top: 30%;
	left: -2.2em;
/* set a narrow width to keep things tidy */
	width: 3em;
/* add a little padding, so hovering near will triger the expansion */
	padding: 2em 2em 2em 0;
/* set the animation for the whole menu */
	-webkit-transition: all 0.5s;  /* Saf3.2+, Chrome */
	-moz-transition: all 0.5s;  /* FF4+ */
	-ms-transition: all 0.5s;  /* IE10 */
	-o-transition: all 0.5s;  /* Opera 10.5+ */
	transition: all 0.5s;
/* make sure it stays on top! */
	z-index: 2147483647;
}
div#sideMenu:hover {
/* on hover, show a little more of the menu */
	left: 0;
}
div#sideMenu > a {
/* general stuff to make it look good */
	font-family: sans-serif;
	-webkit-border-radius: 1em; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
	border-radius: 1em; /* Opera 10.5, IE9, Saf5, Chrome, FF4+, iOS 4, Android 2.1+ */
	/* useful if you don't want a bg color from leaking outside the border: */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	background-color: #67E300;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#67E300), to(#439400)); /* Saf4+, Chrome */
	background-image: -webkit-linear-gradient(top, #67E300, #439400); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image: -moz-linear-gradient(top, #67E300, #439400); /* FF3.6+ */
	background-image: -ms-linear-gradient(top, #67E300, #439400); /* IE10 */
	background-image: -o-linear-gradient(top, #67E300, #439400); /* Opera 11.10+ */
	background-image: linear-gradient(to bottom, #67E300, #439400);
	display: block;
	line-height: 2.5em;
	width: 220px;
	position: relative;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px #DDDDDD;
	width: 220px;
	color: #333;
/* set an animation when hovering over each item */
	-webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
	-moz-transition: all 0.5s ease-out;  /* FF4+ */
	-ms-transition: all 0.5s ease-out;  /* IE10 */
	-o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
	transition: all 0.5s ease-out;
/* set the start point as mostly hidden */
	left: -170px;
}
div#sideMenu > a > img {
/* fix the position of the image to the right */
	width: 1.5em;
	height: 1.5em;
	position: absolute;
	right: 1em;
	top: 0.5em;
}
div#sideMenu > a:hover {
/* on hover, show the whole menu item */
	left: -1.5em;
}

Union Flag

Christopher — Sat, 07 Apr 2012 15:02:20 +0000

Not sure why I started doing this, but I’ve made a basic Union Flag in HTML and CSS.

The css is quite simple

div.flag {
    width:      192px;
    font-size:  0px;
}
div.flag > p {
    width:  10px;
    height: 10px;
    margin: 0;
    border: 1px solid black;
    display:inline-block;
}
div.uk > p.b {
    background: #002B7F;
}
div.uk > p.w {
    background: #FFF;
}
div.uk > p.r {
    background: #CE1126;
}

div.flag {
    width:      192px;
    font-size:  0px;
}
div.flag > p {
	width:	10px;
	height:	10px;
	margin:	0;
	border:	1px solid black;
	display:inline-block;
}
div.uk > p.b {
	background:	#002B7F;
}
div.uk > p.w {
	background:	#FFF;
}
div.uk > p.r {
	background:	#CE1126;
}

And the HTML is very repetative

<div class="flag uk">
        <p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p>
        <p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p>
        <p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p>
        <p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p>
        <p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p>
        <p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p>
        <p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p>
        <p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p><p class="r"></p>
        <p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p><p class="w"></p>
        <p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p>
        <p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p>
        <p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p>
        <p class="w"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="w"></p>
        <p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p><p class="r"></p><p class="w"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="b"></p><p class="w"></p><p class="r"></p>
</div>

Pure CSS Segmented Buttons

Christopher — Sun, 18 Sep 2011 21:18:00 +0000

So, I was playing around with some CSS the other day, and was challenged to make some buttons “look like a mac”, specifically, the segmented ones shown on Wikimedia (I don’t have a mac!) What I managed to get working are some buttons, which are actually radio buttons, so standard HTML form elements, which look like this:


MaleFemaleOstrich

It should work on Firefox, Chromium, and other css3 browsers. The HTML is pretty simple, and nothing special. Notice the labels attached to the input elements. The edge labels have a class defined to allow rounded corners.

<form>
<input id="male" type="radio" name="sex" value="male" checked="checked" />
    <label for="male">Male</label>
<input id="female" type="radio" name="sex" value="female" />
    <label for="female">Female</label>
<input id="ostrich" type="radio" name="sex" value="ostrich" />
    <label for="ostrich">Ostrich</label></form>



	Male

	Female

	Ostrich

The CSS is a little more complex…

/* Hide the Radio button itself */
input[type="radio"] {
display:    none;
}
 
label {
    font-family: 'Bentham', arial, serif;
    font-size:  1.2em;
 
/* force the elements to line up alongside one another */
    display:    inline-block;
 
/* A little border */
 
    border: solid 1px black;
 
/* give it some space */
    padding:    0.2em;
 
/* Nice gradient background */
/* Both default and selected are taken from http://ux5.co/2011/useful-css3-gradients-apple-osx-colors/ */
 
background: #bdc6cd; /* Old browsers */
background: -moz-linear-gradient(top, #eef6f9 0%, #bdc6cd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eef6f9),
color-stop(100%,#bdc6cd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef6f9',
endColorstr='#bdc6cd',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* W3C */                            
 
/* Small bit of shadow */
  -webkit-box-shadow: 2px 2px 4px #000; 
     -moz-box-shadow: 2px 2px 4px #000; 
          box-shadow: 2px 2px 4px #000; 
}
 
/* Apply this style to a label which is linked to an input box, which is checked or slected */
input:checked + label {
 
color:      white;
 
/* change the background to  a nice blue gradient */
background: -moz-linear-gradient(top, #5792d1 0%, #2f5e9e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5792d1),color-stop(100%,#2f5e9e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5792d1',endColorstr='#2f5e9e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* W3C */
}
 
/* round the corners of each end */
label.leftend {
border-top-left-radius:         5px;
-moz-border-radius-topleft:     5px;
 
border-bottom-left-radius:      5px;
-moz-border-radius-bottomleft:  5px;
 
border-right:                   none;
}
label.rightend {
border-top-right-radius:        5px;
-moz-border-radius-topright:    5px;
 
border-bottom-right-radius:     5px;
-moz-border-radius-bottomright: 5px;
 
border-left:                    none;
}

/* Hide the Radio button itself */
input[type="radio"] {
display:	none;
}

label {
	font-family: 'Bentham', arial, serif;
	font-size:	1.2em;

/* force the elements to line up alongside one another */
	display:	inline-block;

/* A little border */

	border:	solid 1px black;

/* give it some space */
	padding:	0.2em;

/* Nice gradient background */
/* Both default and selected are taken from http://ux5.co/2011/useful-css3-gradients-apple-osx-colors/ */

background: #bdc6cd; /* Old browsers */
background: -moz-linear-gradient(top, #eef6f9 0%, #bdc6cd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eef6f9),
color-stop(100%,#bdc6cd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef6f9',
endColorstr='#bdc6cd',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #eef6f9 0%,#bdc6cd 100%); /* W3C */                          	

/* Small bit of shadow */
  -webkit-box-shadow: 2px 2px 4px #000; 
     -moz-box-shadow: 2px 2px 4px #000; 
          box-shadow: 2px 2px 4px #000; 
}

/* Apply this style to a label which is linked to an input box, which is checked or slected */
input:checked + label {

color:		white;

/* change the background to  a nice blue gradient */
background: -moz-linear-gradient(top, #5792d1 0%, #2f5e9e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5792d1),color-stop(100%,#2f5e9e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5792d1',endColorstr='#2f5e9e',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #5792d1 0%,#2f5e9e 100%); /* W3C */
}

/* round the corners of each end */
label.leftend {
border-top-left-radius:			5px;
-moz-border-radius-topleft: 	5px;

border-bottom-left-radius:		5px;
-moz-border-radius-bottomleft:	5px;

border-right:					none;
}
label.rightend {
border-top-right-radius:		5px;
-moz-border-radius-topright:	5px;

border-bottom-right-radius:		5px;
-moz-border-radius-bottomright: 5px;

border-left:					none;
}

VirtualBox and Harddrives

Christopher — Thu, 21 Apr 2011 10:02:24 +0000

Whilst playing with VirtualBox I came across a recurring error, which failed almost silently. I was installing XP and Fedora on one virtual drive, which was given ample space to accommodate both, but Fedora repeatedly failed to find enough space to automatically partition. Upon investigation I found the drive had enough space, yet still no luck. So I increased the size of the virtual drive, still no luck, increased it again, no luck. It turns out that the issue wasn’t the virtual drive that was too small, but my real hard drive that didn’t have enough space to fit the virtual drive on! I thought it interesting that the error would show up within the virtual machine, rather than being highlighted on the host as the issue was on the host side. Yet another example of errors which don’t always mean what they say…

Most of a day

Christopher — Fri, 25 Mar 2011 22:16:42 +0000

23 hours in the life of my camera. Most of a Day

Self Signed Certificates

Christopher — Sun, 13 Feb 2011 00:37:10 +0000

I recently set up self signed HTTPS for my sites, and I have to say it was very easy and it got me wondering about the issues of “trust” in security and networking. Certificates in this context provide two main things: end to end (ish) encryption, and trust. The first is simple, data is encrypted at the application level and passed over the network to the server, where it is decrypted. All very nice, especially if passwords etc. are involved. Trust however is somewhat more complex. My self signed certificate provides me, or anyone using it, with endless warnings from my browser, because the identity cannot be verified. Who said it can’t? Trust is complex. Certificates work on a chain of trust, and at some point we have to just decide to trust (for no better reason than “because we do”), the root of the chain. This leads to issues. Over the years there have been many root nodes, and most of them are now not trusted, but how does this affect me? I can pay for a certificate, in which case somebody decides I am me and I can be trusted. i.e. they verify my identity. But why should I trust them? Because I paid them? My self signed certificate provides the same level of encryption as any paid for offering, so why is it less trusted? Mostly, because I didn’t pay. However, consider this. I trust me. I signed my own certificate. No one else has ever touched it. My thought is that a self signed certificate, for me, is more secure than a paid for one.

Snow

Christopher — Thu, 02 Dec 2010 18:27:00 +0000

Well it would seem that once again we are all going to die from a little frozen water. However, it makes for some nice photos without even leaving the house!

Snow covered bins

This photo was processed with Vignette for android. It’s much more feature rich than RetroCamera, but the demo is limited in it’s output resolution.

Mist

Christopher — Sat, 20 Nov 2010 09:22:54 +0000

There are times when I wish I carried a proper camera with me all the time …

A misty factory by night.

RetroCamera

Christopher — Wed, 20 Oct 2010 12:21:32 +0000

I’ve been playing with retroCamera for android, and I’m impressed. Although I think it could have more advanced settings for each camera, it has a very nice interface which is both intuitive and elegant. I also like the old school photography being brought to modern technology, obviously better isn’t always better! As a side note, these photos were taken in the same place as the other photo of Green’s Windmill, but the wind was from a different direction, hence the sails are a different way around.

Pinhole Camera shot of Green's Windmill

Little Orange Box shot of Green's Windmill

Green's Windmill, shot with The Bärbel camera

Green’s mill

Christopher — Mon, 18 Oct 2010 22:14:33 +0000

Green's Windmill, Nottingham

This is Green’s windmill in Nottingham. I thought it looked pretty good in the evening light, and the play park there has a really good slide! The Mill is a working science centre with lots of interesting things to play with, worth a visit if you are in the area