Welcome
Hi, and welcome to my personal bit of CSS Wizardry — my portfolio and blog. This page is a departure from normality. I usually craft websites that are completely usable across all browsers, that are high contrast, clear to read and put funtion over form. Flip that on it’s head and you get this! A site which uses transparent .pngs without an IE6 workaround, that puts near-black on black, and doesn’t use a ul for the navigation! Unless you disable CSS of course.
About
This micro-site is my own personal portion of the web, made solely for me, and to be shared with you. It uses transparent .png images so if you’re using Internet Explorer 6, this page is less than pretty. Taht said, Internet Explorer 7 and all other major browsers handle this site immaculately, except maybe Safari, but I got a cool workaround for that.
About Me
What is there to say? Well, my name is Harry Roberts (sound familiar? — that isn’t me) and I’m one of a rare breed of people lucky enough to absolutely love what I do. I am eighteen years old, and I work at one of the coolest places ever as a web developer (specialising in CSS, front-end development, accessibility, usability and semantics). I got into web design/development aged sixteen almost by accident and I haven’t looked back since.
About This Site
I may have mentioned briefly up there ↑ that I built this site entirely for myself. It is completely accessible, validate and semantic (What did you expect? Tables?) but is not built for IE6. The only reason for this is because it uses transparent png images and I haven’t used a hack or workaround for it. I could, and almost did, but then I rememebred this is my site, and people with IE6 need to get their act together if they want to see it properly. If you are using IE6, please upgrade, preferably to Firefox (you won’t look back), or if that isn’t viable, take a peek at my main website.
There also may be some issues with contrast, or lack thereof. This site is designed for 1024x768px monitors which is more-or-less standard now, but at this resolution some colours in the header overlap onto the background image. I think we can live with it.
Anyway, enough of this technical mumbo-jumbo, let’s get down to business. This site will play host to some of my neat little codes/scripts that I’ve come up with. You can have ’em, for free. They range fomr simple CSS creations to more useful PHP manipulations.
What I Do
I make web thingies professionally. I am a full time geek. Read the full story.
My Work
This is just one of many of my creations, to see them all, shoot over to my portfolio.
Whitley Journalism
The Codes
Finally, the bit you’ve all been waiting for. Now, I am by no means a programmer, so to a lot of you some of this will be less than impressive. But as a front-end developer I think they are pretty nifty, and will no doubt come in handy for any other developers who like little bits of stuff.
Automated Glyphs # Permalink
This little script will generate the HTML entity numbers for the first 1000 HTML glyphs.
<?php
for ($count=1; $count<=100; $count++){
if ($count&1){
echo "<p class=\"odd\">&#" .$count. "; = &#" .$count. ";</p>\n";
}
else{
echo "<p>&#" .$count. "; = &#" .$count. ";</p>\n";
}
}
?>
The Webkit Workaround # Permalink
This little snippet checks whether the browser is Safari, and if it is the <link> element gets executed. If not, it simply ignores everything within the braces.
I use this little code on here to fix a problem Safari (Win) seems to have with negative positioning. I hide elements like the semantic site navigation with left:-9999px but this doesn’t work in Safari. Take a look at webkit.css.
<?php
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Safari')){
?>
<link rel="stylesheet" type="text/css" href="webkit.css" />
<?php
}
?>
CSS Tooltips # Permalink
The following creates cross-browser, pure CSS tooltips.
The Markup:
<a href="http://google.com" title="Google">Google<span> Google</span></a>
The CSS:
a{
color:#09f;
position:relative;
overflow:hidden;
}
a span{
position:absolute;
bottom:15px;
left:10px;
border:1px solid #09f;
padding:5px 5px 3px 25px;
visibility:hidden;
white-space:nowrap;
}
a:hover span{
visibility:visible;
}
PHP Browser Detection # Permalink
This script allows you to dectect multiple browsers and do whatever you want with the information, I use a smaller, modified version on here.
<?php
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ){
if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Netscape') ){
$browser = 'Netscape (Gecko/Netscape)';
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') ){
$browser = 'Mozilla Firefox (Gecko/Firefox)';
}
else{
$browser = 'Mozilla (Gecko/Mozilla)';
}
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){
$browser = 'Internet Explorer (MSIE/Compatible)';
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Safari') ){
$browser = 'Safari';
}
else if ( strpos($_SERVER['HTTP_USER_AGENT'], 'Opera') === true){
$browser = 'Opera';
}
else{
$browser = 'Other browsers';
}
echo "<h2>You are running " .$browser. "</h2>";
?>
Randomised Colour & Content # Permalink
On this site I use a small script to randomise the colour and content of the <h1>.
Place the following in the <head>:
<?php
$taglinecolour = array('c0af29', 'a81a4f', '517f27', 'cf4f38', '7d135d', '9c1624');
shuffle ($taglinecolour);
?>
<style type="text/css">
#header h1 a span{
color:#<?php echo $taglinecolour[1]; ?>;
}
</style>
And this in the <body>:
<?php
$tagline = array('Making No Excuses', 'Saying Hello', 'Showing Off', 'Making Websites', 'Eating CSS For Breakfast', 'Living Life', 'Loving Work');
shuffle ($tagline);
?>
<h1><a href="./">Harry Roberts <span>— <?php echo $tagline[1]; ?></span></a></h1>
Here you have two arrays, one loaded with colour values, the other with text content. The shuffle() function randomises the order of the array contents and the <?php echo $taglinecolour[1]; ?> / <?php echo $tagline[1]; ?> will output the first item in the array, like taking the first card off of a freshly shuffled deck.
Secure Commenting # Permalink
This is more of a tip than a script. I learnt this recently while at work. Instead of using <!-- --> to comment out sections of a webpage, use the more secure PHP version:
<?php /* This is now commented out, and can’t be seen via "View Source" */ ?>
N.B. Your documents will need a .php file extension.
Run PHP as CSS # Permalink
If for whatever reason you need dynamic styles, you can manipulate entire CSS files with PHP. Make sure your stylesheet has a .php file extension and add the following at the very top:
<?php header("Content-type: text/css"); ?>
And link to it using the usual:
<link rel="stylesheet" type="text/css" href="style.php" media="screen"/>
Now you can run PHP to create dynamic CSS all within one file. However, this should be used sparingly as browsers treat .css and .php files differently. Where a .css file will be cached, a .php file won’t be, and will be requested each time a page reloads. Thanks to Matt for that last nugget of information.
Display Inline Content on Hover # Permalink
If you look at the ‘Permalink’ option on each of these entries you will see that when you hover over the hash (#), more text appears to the right. This is incredibly simple to do:
The Markup
<a href="#" title="Title">Link Text <span>Extra Text</span></a>
The CSS:
a{
color:#000;
text-decoration:none;
}
a span{
visibility:hidden;
}
a:hover span{
visibility:visible;
}
It really is as simple as that. Note the use of visibility as opposed to display. This is because display:none; won’t be picked up by some screen readers, visibility:hidden; will.