Mick Redman

Friday, 4 March 2011

Prettier navigation blocks Vertical

This is an effect used by designers to add a little texture to navigation block. It works horizontally just as well if you use border-left and border-right instead of border-top and border-bottom.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pretty nav blocks</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:sans-serif;
}
nav a, nav a:link, nav a:active, nav a:hover, nav a:visited
{
color:#FFFFFF;
}
nav a
{
display:block;
width:4em;
height:1em;
text-decoration:none;
background:#222222 url(images/buttonbg.png) repeat-x;
padding:1em;
border-top:0.08em solid #FFFFFF;
border-bottom:0.08em solid #CCCCCC;
text-align:center;
}
nav a:hover
{
background:#666666 url(images/buttonbg.png) repeat-x;
border-bottom:0.1em solid #CCCCCC;
}
</style>
</head>
<body>
<section id="mainContent">
<nav>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
</nav>
</section>
</body>
</html>

Wednesday, 2 March 2011

Nice CSS button

This demonstration relies upon css3pie in order to work in IE. You can get it at http://css3pie.com/
I have tried to use gradients and box shadow to a cool effect.
It seems like a lot of code for a button, but as it's a class, you can create many buttons on the same page with it.
Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SoM KI Box</title>

<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{

});
</script>
<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style>
body
{
font-family:Sans-serif;
}
.greenButton
{
float:left;
margin:1em;
}
.greenButton .outer, .greenButton .inner, .greenButton .outer:hover, .greenButton .inner:hover
{
position:relative;
behavior:url('scripts/PIE.htc');
}
.greenButton .outer, .greenButton .outer:hover
{
width:8em;
height:8em;
padding-top:0.2em;
padding-left:0.2em;
}
.greenButton .inner, .greenButton .inner:hover
{
border-radius:0.5em;
-moz-border-radius:0.5em;
-webkit-border-radius:0.5em;
width:7.8em;
height:5.8em;
padding-top:2em;
text-align:center;
}
.greenButton .outer, .greenButton .outer:hover
{
box-shadow:0 0 0.8em #CCCCCC;
-moz-box-shadow:0 0 0.8em #CCCCCC;
-webkit-box-shadow:0 0 0.8em #CCCCCC;
border-radius:0.62em;
-moz-border-radius:0.62em;
-webkit-border-radius:0.62em;
}
.greenButton .outer
{
background-image:-moz-linear-gradient(90deg, #64cc00, #8DE639);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#64cc00), to(#8DE639));
-pie-background:linear-gradient(90deg, #8DE639, #64cc00);
}
.greenButton .inner
{
background-image:-moz-linear-gradient(90deg, #8DE639, #64cc00);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8DE639), to(#64cc00));
-pie-background:linear-gradient(90deg, #64cc00, #8DE639);
}
.greenButton .outer:hover
{
background-image:-moz-linear-gradient(90deg, #C80043, #E33972);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#C80043), to(#E33972));
-pie-background:linear-gradient(90deg, #E33972, #C80043);
}
.greenButton .inner:hover
{
background-image:-moz-linear-gradient(90deg, #E33972, #C80043);
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#E33972), to(#C80043));
-pie-background:linear-gradient(90deg, #C80043, #E33972);
}
.greenButton a, .greenButton a:link, .greenButton a:hover, .greenButton a:visited, .greenButton a:active
{
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<section id="mainContent">
<figure class="greenButton">
<section class="outer">
<section class="inner">
<a href="getPageContext.php">Get<br />Page<br />Context</a>
</section>
</section>
</figure>
</section>
</body>
</html>

Tuesday, 1 March 2011

Yet another Slideshow

Below is the code for 2 pages with a slidehow. Why? I hear you ask, when there are so many slideshows out there. Why reinvent the wheel? Well the answer is because none of the wheels fit my needs.

I have been asked to look at re-doing a website which was a little dated. The site had an opportunity to use great pictures and there was a story behind each. If you want a picture which is partially covered by a semi-transparent comment, then there are plenty to be found.

If you want something which can choose different locations for you comments and style them as you please, then you will struggle to find something that suits your needs. So please feel free to use my code.

I have tried to keep the style information to a minimum.

See demo 1. See demo 2.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>


<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />

<style>
body
{
font-family:Sans-serif;
}
#slideshow #hiddenSlides
{
display:none;
}
#slideshow #slideWindow, #slideshow #textWindow
{
width:16em;
min-height:12em;
}
#slideshow #slideWindow img
{
width:100%;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.slideFunction = function()
{
$theCurrent = $('#slideshow #hiddenSlides img.current');
$('#slideshow #textWindow').html($theCurrent.attr('alt'));
$('#slideshow #slideWindow img').fadeOut('fast');
$('#slideshow #slideWindow img').attr('src', $theCurrent.attr('src'));
$('#slideshow #slideWindow img').fadeIn('slow');
$theCurrent.removeClass('current');
if($theCurrent.next('img').length)
{
$theCurrent.next('img').addClass('current');
}
else
{
$('#slideshow #hiddenSlides img.first').addClass('current');
}
}
$(document).ready(function()
{
$(this).slideFunction();
setInterval(
function()
{
$(this).slideFunction();
}
,4000);
});
</script>
</head>
<body>
<section id="slideshow">
<section id="hiddenSlides">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" alt="<h3>Band of fog</h3><p>By Cath Redman</p>" class="first current" />
<img src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df_m.jpg" alt="<h3>Wind farm</h3><p>Not mine. As soon as I find out who's it is, I'll reference it. I do know it's under the CC License</p>" />
<img src="http://farm6.static.flickr.com/5054/5487320064_bb84f10fae_m.jpg" alt="<h3>Searchings for Snackers</h3><p>by Nomadic Lass</p>" />
<img src="http://farm6.static.flickr.com/5298/5486895517_1a74882a1e_m.jpg" alt="<h3>Point of View</h3><p>By Nicholas_T</p>" />
</section>
<section id="slideWindow"><img /></section>
<section id="textWindow"></section>
</section>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Slideshow</title>
<style>
body
{
font-family:Sans-serif;
}
#slideshow
{
width:32em;
}
#slideshow #slideWindow, #slideshow #textWindow
{
display:inline;
}
#slideshow #hiddenSlides
{
display:none;
}
#slideshow #slideWindow, #slideshow #textWindow
{
width:16em;
min-height:12em;
}
#slideshow #slideWindow
{
float:left;
}
#slideshow #slideWindow img
{
width:100%;
}
h3
{
padding-left:14em;
}
p
{
padding-left:16.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$.fn.slideFunction = function()
{
$theCurrent = $('#slideshow #hiddenSlides img.current');
$('#slideshow #textWindow').html($theCurrent.attr('alt'));
$('#slideshow #slideWindow img').fadeOut('fast');
$('#slideshow #slideWindow img').attr('src', $theCurrent.attr('src'));
$('#slideshow #slideWindow img').fadeIn('slow');
$theCurrent.removeClass('current');
if($theCurrent.next('img').length)
{
$theCurrent.next('img').addClass('current');
}
else
{
$('#slideshow #hiddenSlides img.first').addClass('current');
}
}
$(document).ready(function()
{
$(this).slideFunction();
setInterval(
function()
{
$(this).slideFunction();
}
,4000);
});
</script>
</head>
<body>
<section id="slideshow">
<section id="hiddenSlides">
<img src="http://farm3.static.flickr.com/2160/2271589215_935b5bc2ce_m.jpg" alt="<h3>Band of fog</h3><p>By Cath Redman</p>" class="first current" />
<img src="http://farm5.static.flickr.com/4140/4947943522_5ba46ef4df_m.jpg" alt="<h3>Wind farm</h3><p>Not mine. As soon as I find out who's it is, I'll reference it. I do know it's under the CC License</p>" />
<img src="http://farm6.static.flickr.com/5054/5487320064_bb84f10fae_m.jpg" alt="<h3>Searchings for Snackers</h3><p>by Nomadic Lass</p>" />
<img src="http://farm6.static.flickr.com/5298/5486895517_1a74882a1e_m.jpg" alt="<h3>Point of View</h3><p>By Nicholas_T</p>" />
</section>
<section id="slideWindow"><img /></section>
<section id="textWindow"></section>
</section>
</body>
</html>

Monday, 28 February 2011

Come to think of it...

I'm back after a week break with the family, so this is my first post in a while. For those who follow my blog, you will have noticed that most of the time I'm pretty minimalist with my code. I do use the

font-family: Sans-Serif;

a lot. I have been perfectly satisfied with it's appearance and it's ability to demonstrate the possible with layouts and techniques. Looking at this post http://css-tricks.com/sans-serif/, it turns out that there is good reason to like this simple line of CSS.

Tuesday, 15 February 2011

Mobile friendly liquid layout #4

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 24</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;

}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>

Mobile friendly liquid layout #3

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 23</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img, nav a:hover
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header
{
padding-top:2em;
background:#000000;
}
nav a
{
display:block;
width:4em;
width:3em;
text-decoration:none;
text-align:left;
color:#000000;
}
nav a:hover
{
background:#0000FF;
color:#FFFFFF;
}
footer, header
{
height:8em;
}
#content, #picture, #text, nav
{
background:#FFFFFF;
}
#picture, nav
{
float:left;
width:20%;
}
#picture
{
min-height:10em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
header h1, header h2, header h3
{
color:#FFFFFF;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<section id="content">
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>

Mobile friendly liquid layout #2

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 22</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
header, nav
{
padding-top:2em;
}
#top
{
background:#000000;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:left;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
#top, footer
{
height:8em;
}
header
{
float:left;
width:50%;
}
#content
{
min-height:8em;
}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer, #content
{
clear:left;
}
header h1, header h2, header h3, nav a
{
color:#FFFFFF;
}
</style>
</head>
<body>
<section id="top">
<header>
<h1>Header</h1>
<h2>Sub header</h2>
<h2>Sub sub header</h2>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
</section>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>