Mick Redman: text

Showing posts with label text. Show all posts

Monday, 16 May 2011

Neon text using GIMP

Here is another GIMP tutorial. How to add a neon effect to text.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font effects - Neon text</title>
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
color:#FFFFFF;
}
</style>
</head>
<body>
<img src="images/neonText.png" alt="neonText" />
<h1>Neon text example using GIMP</h1>
<h2>Prepare your gimp canvas</h2>
<p>Start with a new clean canvas lets say 640px width and 480px height.</p>
<h2>Add some text</h2>
<p>Choose a font you like but I recommend to use an italic text. Now type your word(s).</p>
<p>Right click on the layer with the text and choose Text to Path.</p>
<p>Go to the Edit menu and choose Stroke Path.</p>
<p>In the Stroke Path dialogue choose Stroke with Paint Tool and hit the Stroke button.</p>
<h2>Optional</h2>
<p>You may now need to resize the selection because the text comes too close to the edge and gets chopped off.</p>
<p>Go to Layer-Layer Boundry Size and increase the layer width, centreing the text within the increased layer.</p>
<h2>Back to the necessary</h2>
<p>Select Filters > Alpha to Logo >Neon and click on the OK button.</p>
<h2>Done!</h2>
</body>
</html>

Thursday, 21 October 2010

jQuery Text Shadows

The latest text-shadow attributes of course, don't work in IE. There is a way of producing text shadows without using images and that is through a jQuery plugin. You can get the plugin from here http://justinshearer.com/solidShadow/
It's not subtle. There is no opacity, but if you are careful about the width, direction and colours of your shadow, the appearance is very useable. Here is an example of how to use it...

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Text Shadows</title>
<style type="text/css">
h1
{
text-align: center;
font-size: 8em;
}
</style>
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script src="http://justinshearer.com/solidShadow/jquery.solidShadow.js"></script>
<script>
$(document).ready(function()
{
$('h1').solidShadow('inline','#000000','#CCCCCC','right',3);
});
</script>
</head>
<body>
<h1>Header 2</h1>
</body>
</html>

Friday, 27 August 2010

Rotating boxes without images

Most rotating box CSS examples do not work cross browser. I like to try and avoid simulating this with, for example, pictures created at an angle in a good graphics package (like GIMP). Today however, I found this web page http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/. Not all the functionality works at this stage, but enough to get going. You'll need to get hold of the JavaScript libraries first. You can also take off the backgrounds and just use the technique for rotating text. My example below is a simple one.

See demo.

<!DOCTYPE html>
<html lang="ene">
<head>
<meta charset="UTF-8">
<title>Rotate text</title>
<style>
body
{
font-family:Sans-serif;
}
#box1
{
position: absolute;
top: 45px;
left: 45px;
border: solid 1px #CCCCCC;
position: absolute;
width: 100px;
height: 100px;
padding: 10px;
-sand-transform:rotate(45deg);
}
#box2
{
position: absolute;
top: 45px;
left: 160px;
border: solid 1px #CCCCCC;
background:#a3a3a3;
width: 200px;
height: 200px;
padding: 10px;
-sand-transform:rotate(-25deg);
}
</style>
<script src="scripts/EventHelpers.js"></script>
<script src="scripts/cssQuery-p.js"></script>
<script src="scripts/sylvester.js"></script>
<script src="scripts/cssSandpaper.js"></script>
</head>
<body>
<div id="box1" style="-webkit-transform: rotate(45deg); ">
-sand-transform: rotate(45deg);
</div>
<div id="box2" style="-webkit-transform: rotate(-45deg); ">
-sand-transform: rotate(-45deg);
</div>
</body>
</html>

Monday, 16 August 2010

Big Text in the Background

Sometimes it is useful to design a web page with big text in the background of the main content. Below I have created a page which does that. The <h1> content is declared before the main page content and pushed to the back using position:absolute and z-index-1 in the CSS.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Big Text in the Background</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#999999;
}
h1
{
position:absolute;
left:60px;
top:-200px;
z-index:-1;
font-size:20em;
color:#F2D1F9;
}
#mainPage
{
margin:100px auto;
width:800px;
}
p
{
margin:20px;
text-align:justify;
}
</style>
</head>
<body>
<h1>The Big Text</h1>
<div id="mainPage">
<p>Pellentesque habitant morbi tristique 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. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>

Friday, 13 August 2010

Automatic menu selection using PHP

Suppose I have a website. In this case a PHP driven HTML5 website, although what I'm about to explain doesn't really require HTML5 and can be easily adapted.

See demo.

I have a menu. I have a text file called menu.txt which contains my menu items like this:

index.php,home
index2.php,Page 2
index3.php,Page 3

And what I want to do is call a PHP script which:

Reads the file.
Creates the menu tags from the file contents.
Automatically selects the page I'm looking at as the selected item in the menu.

I can then apply CSS as I like to the menu appearance using a different colour for the selected item.

Here is how I do it. First place the include 'navigation.php'; in your page script where you want the navigation to appear.
This is what navigation.php looks like:

<nav>
<ul>
<?php
/* get the contents of menu.txt */
$fileArr = file('includes/menu.txt');
/* get the name of the PHP file referred to in the URL */
$fname = basename($_SERVER['REQUEST_URI']);
/* if there isn't a PHP file extension in the URL, it must be root. Therefore call it index.php */
if(substr($fname,-4) <> ".php")
{
$fname = "index.php";
}
/* create the menu from the lines in menu.txt */
foreach ($fileArr as $line)
{
$menuitems = explode(",", $line);
echo '<li><a href="'.$menuitems[0].'" ';
/* Check the current pathname in menu.txt with the one in the current URL */
if($menuitems[0] == $fname)
{
/* If they are the same add the menuSelected class to the link */
echo 'class="menuSelected"';
}
echo '>'.$menuitems[1].'</a></li>';
}
?>
</ul>
</nav>

Hey presto! Have fun.