css based drop shadow effect

The drop-shadow effect is an used to provide that little bit extra to the formatting of your blocks. The following is a basic demonstration of how it can be achieved through the simple application of some CSS formatting. This removes the need for imagery to be cached, and enables the dimensions of the block in question to be altered without hassles. In turn this provides a decrease in the bandwidth requirements of your site which, if there are a large amount of blocks with shadows or other effects, can mount up very quickly in graphics intensive sites.

I did originally find this code elsewhere when I was doing some web design work, but I don’t recollect where from. I don’t claim original credit for this, and if it is yours, I apologise and and if you contact me I will reference you here immediately.

The CSS required is:

<style>
body {
margin: 0px;
padding: 20px;
font-family: verdana;
font-size: 12px;
}
#shadow-container {
position: relative;
left: 3px;
top: 3px;
margin-right: 3px;
margin-bottom: 3px;
}
#shadow-container .shadow2,
#shadow-container .shadow3,
#shadow-container .container {
position: relative;
left: -1px;
top: -1px;
}
#shadow-container .shadow1 {
background: #F1F0F1;
}
#shadow-container .shadow2 {
background: #DBDADB;
}
#shadow-container .shadow3 {
background: #B8B6B8;
}
#shadow-container .container {
background: #ffffff;
border: 1px solid #fff;
padding: 10px;
</style>

and then this is applied within the HTML as so:

<div id="shadow-container">
<div class="shadow1">
<div class="shadow2">
<div class="shadow3">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sem enim, iaculis eget tincidunt quis, ultrices vel tellus. Quisque semper ante eu turpis convallis eget pharetra ligula pulvinar. Vivamus quis neque mauris. Praesent sit amet felis id lorem fringilla adipiscing ut ut felis. Etiam at lectus elit, vehicula porta ipsum. Nullam in turpis mi, et interdum sapien. Cras vehicula, eros eget rhoncus hendrerit, ante massa tincidunt nulla, sed iaculis quam ipsum congue risus. Integer id velit erat, vitae malesuada ipsum. Maecenas pretium ligula ut ipsum laoreet in tristique mauris accumsan. Cras lacinia justo quis tortor fermentum adipiscing. Donec consectetur eros sit amet ante lacinia venenatis. Aliquam erat volutpat. Morbi in suscipit dolor. Vivamus pellentesque fermentum lorem in bibendum. Vestibulum porta commodo fermentum.
</div>
</div>
</div>
</div>
</div>

And there you have it, a CSS define drop-shadow for any blocks you wish to assign this to. This works equally well with rounded blocks, ie using:

-border-radius: 1em;
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
// -opera-border-radius: 1em;
// -khtml-border-radius: 1em;

as long as you allocate this rounding to each element of the shadow-container family.

Advertisements

the Stokely hack

The Stokely hack is a method of customising your CSS to the browser viewing your page at the time. You set the default attribute required and then, using the Stokelty hack, change the attribute for each browser in turn. The hack works by utilising syntactical quirks of each browser to enable only certain browsers to view certain attribute definitions. This is the most comprehensive version I have seen:

#hacked {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:black;
}
/*end*/
/*\*/
html*#hacked {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html #hacked {
color:green;
}
/*end*/

[sourced via stormdetector.com]

What’s happening here?

#hacked{
font-weight:bold;
font-size:14px;
color:orange;/*IE 5 for PC only*/
voice-family:"\"}\"";
voice-family:inherit;
color:black;/*all non-IE 5 browsers*/
}
/*end*/

/*\*/
html*#hacked{
[color:red;/*Affects older Firefox and Netscape browsers only. Seen also by IE5-6 and Safari for Macintosh, which is
addressed below.*/
color:blue;/*Affects Safari for Macintosh only (v1-3). See also by IE5-6, but thats addressed below. Also
hidden from older Firefox and Netscape browsers.*/
]color:green;/*Affects IE 7 only. Seen by IE5-6 but thats addressed below. Hidden from Safari and all
Firefox and Netscape browsers.*/
}/**/
.dummyend[id]{clear:both/*end hack using dummy attribute selector for IE5 mac, else error in CSS occurs!*/}

/*The above rule is hidden from IE for MAC, and read only by older Firefox and Netscape 6-7 and IE5-7 for PC,
and Safari on MAC, in general.*/
/*Newer Firefox and Netscape agents reads rule, but does not read any properties set within [], so is
unaffected by it, probably because it sees these as part of an attribute selector. Those will be hidden.*/
/*IE 7 on PC will correctly read all rules as it will ignore many characters before a property*/
/*Safari for MAC sees each [] as a character and not part of a selector, if one falls before a property.
These cause the property name following the character to not be read, but next line without "[]" property
is parsed.*/
/*use of [] will break all css selectors following the rule, if all are not closed, as Mozilla-Netscape
read the [] as part of a selector rule, so make sure they are all closed, using dummy selector.*/

/*\*/
* html #hacked{
color:green;/*Finally, be sure to reapply a fix that affects IE 5-6 only here. IE for Mac and IE 7 for PC
are not affected here, which means purple above should work only in IE 7 above!*/
}
/**/

With this, if you really needed to, you could have a different CSS for every browser, but my suggestion if you wanted to do that would be to not put every attribute through a Stokely hack, but instead use something like this browser ID script in PHP and then define your CSS based on that. That will dramatically reduce the bandwidth load of your CSS on pages as they will only be being passed the applicable CSS page.

For example, instead of <link rel="stylesheet" href="css/style.css" type="text/css" /> to call the CSS, instead put <?php include("css.php"); ?>. Then create a file called css.php. In this put something like:

<?php
require_once('browser.php');
$br = new Browser;

if(stripos($br->Name, 'ie')) {
echo '<link rel="stylesheet" href="css/style_IE.css" type="text/css" />';
}
else if(stripos($br->Name, 'XYZ')) {
echo '<link rel="stylesheet" href="css/style_XYZ.css" type="text/css" />';
}
.
.
.
.
else {
echo '<link rel="stylesheet" href="css/style.css" type="text/css" />';
}
?>

This will only place the appropriate CSS style-sheet into your page.

social bookmark generation

I thought it could be useful to post some basic social bookmarking scripting. This is nothing flash, and you can do a lot more with the various APIs available for each site, however this gives a good basic starting point.

The code I have put here will simply open a new window/tab (depending on user browser settings) which will open at the specific social networking/bookmarking site with pre-formatted and written information as appropriate.

<?
$actual = [INSERT YOUR PAGE URL HERE];

// del.icio.us it
echo '<a href="http://del.icio.us/post?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">del.icio.us</a> ';

// digg it
echo '<a href="http://digg.com/submit?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">digg</a> ';

// facebook it
echo '<a href="http://www.facebook.com/sharer.php?u=';
echo $actual;
echo '" target="_blank">facebook</a> ';

// reddit
echo '<a href="http://reddit.com/submit?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">reddit</a> ';

// stumbleupon it
echo '<a href="http://www.stumbleupon.com/submit?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">stumbleupon</a> ';

// tweet it
echo '<a href="http://twitter.com/home?status=Check out ';
echo $actual;
echo ' " target="_blank">twitter</a> ';

// email it
echo '<a href="mailto:?subject=Check out ';
echo $actual;
echo '&body=Check out ';
echo $actual;
echo '.">email</a> ';

// blinklist it
echo '<a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=';
echo urlencode($actual);
echo '&Url=';
echo urlencode($actual);
echo '" target="_blank">blinklist</a>';

// bluedot it
echo '<a href="http://bluedot.us/Authoring.aspx?u=';
echo $actual;
echo '&t=';
echo urlencode($actual);
echo '" target="_blank">bluedot</a>';

// magnolia it
echo '<a href="http://ma.gnolia.com/bookmarklet/add?url=';
echo $actual;
echo '&title=';
echo $actual;
echo '" target="_blank">magnolia</a>';

// netvouz it
echo '<a href="http://netvouz.com/action/submitBookmark?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">netvouz</a>';

// blogmarks it
echo '<a href="http://blogmarks.net/my/new.php?mini=1&simple=1&url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">blogmarks</a>';

// simpy it
echo '<a href="http://www.simpy.com/simpy/LinkAdd.do?href=';
echo $actual;
echo '" target="_blank">simpy</a>';

// diigo it
echo '<a href="http://www.diigo.com/post?url=';
echo $actual;
echo '&title=';
echo urlencode($actual);
echo '" target="_blank">diigo</a>';

// yahoo it
echo '<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=';
echo $actual;
echo '&t=';
echo urlencode($actual);
echo '" target="_blank">yahoo!</a>';
?>

I have used a default variable $actual for this version in PHP, however you can easily alter this to contain just hard-coded HTML (I don’t know why you would exactly, as then you will have to code each page individually), also I have generated all the HTML within the PHP script as I have taken this from a larger script with more dynamic variables being referred to. Simplicity, if this is all you are wanting to do, would be to strip the
<?php....?> surrounds and all the echoes; replacing each $actual with <?php echo $actual; ?>.

To replace the links with icons, you can try some of the following sites to get social network/bookmarking icons.

Please read the terms of use for each set of icons, and comply with licensing requirements.

If you are using icons, you can create a simple hover effect by wrapping the links as so:

<div id="bookmarks">
...
// insert bookmark links here
...
</div>

inserting the following into your CSS file:

#bookmark a img {
opacity: 0.8;
alpha.opacity: 80;
}

and then adding the following to each img in your bookmarks links:

onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8; this.filters.alpha.opacity=80"

For example, the following can be pasted into a blank document, and saved as an HTML document:

<html>
<head>
<style type="text/css" >
#bookmarks a img {
opacity: 0.8;
alpha.opacity: 80;
}
</style>
</head>
<body>
<div id="bookmarks">
<a href="https://whileloop.wordpress.com/2009/06/28/social-bookmark-generation/">
<img src="http://i572.photobucket.com/albums/ss166/ctwi001/blogging/whileloop/twitter.png" title="twitter" alt="tweet me" onmouseover="this.style.opacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.8; this.filters.alpha.opacity=80" />
</a>
</div>
</body>
</html>

Copy this code to a new TextPad or NotePad document, save it as HTML, and then open it in your browser. This provides a twitter icon which highlights on mouse over. The link when it is clicked on brings you to this page.

I will respond to queries in the comments, so ask away if clarification is required (I hope I’ve been clear, yet succinct) or you want assistance with further extensions to what I have started here.

today is a day is a day

Well, the site is definitely done now (except the final cronjob stuff – yep, it’s still hanging around!!) and I worked some hacks and fixes for dealing with Internet Explorer….ran trials in my 9 or 10 browsers, and the only fails were IE, Maxthon, and other IE-based browswers. Solved that by scripting two sets of css and JavaScript dependant on what the browser in use is. Why can’t Microsoft just build a real standards-compliant browser and be done with it?? I’m probably going to delay actually going live for another few weeks as I have two more exams to prioritise, then I fly out the following morning for a break, so realistically won’t get to confirm my testing on the live site ’til after I get back.

This morning I had the privilege of watching a pod of orcas swimming up along the coastline of the Waitemata Harbour, and back down again. They’d been inshore over-night, and then started moving around again. When I first saw them, they were surfacing quite a bit and display a lot of body and dorsal fin, as well as some white patches. By the time I raced home and got my camera, they’d calmed down a bit and were only surfacing enough to show a small amount of dorsal. Beautiful creatures, but unfortunately my pictures don’t show this to great effect. I’ll post one pic, just so you can see a bit, and also the beauty of the islands out in the harbour.

Orcas in the harbour - 24 June 2009

Otherwise, just been studying hard (trying to!) and getting ready for exams. Haven’t done much prep or planning for trip yet, but shouldn’t need much. I’ll be packing on Monday night after the exam, because I figure I don’t need sleep and can do that on plane. I’ll also be re-loading my laptop that night. I’ve got to install Office Pro once I can take my time…I still have to use MS because of specified programs for my Information Systems papers (MS Project is a required submission standard), but my other box is about to be re-built as a Linux and LAMP box. Again, just haven’t had the time to do it so far this year, and allowing time to remedy issues. It will happen, just all in good time.

In other news, what I predicted all along has come to be true for thestory about the Belgian girl who got 56 stars tattooed on her face. She has now admitted to lying because her father was angry (link here @ dailymail.co.uk). I knew no tattoist would “accidentally” or deliberately do 56 stars when only asked for 3. At least he has now been vindicated after a week of crap from everybody.

Best go back to the study, so I’ll just leave you with this great version of Katy Perry’s “Hot and Cold”:

Enjoy.

php for the soul, plus other stuff

Well, here we go. I came up with a “new” website concept on Saturday night so, you guessed it, my assignment got forgotten and I did an all-nighter. Long story short, it’s pretty much all finished, just doing touch-ups to it now. I’ll leave descriptions etc til it’s online, which is hopefully in next few days. Main issue is finding an available domain name!! I have finally gained an appreciation of the hatred felt for domain squatters. That, and how frustrating it is to attempt to name a blog….

Back to the other day, when I decided I better get it together and become another WordPress blogger, it was unbelievable how many 14 yr-old girls had decided to start blogs in 2004/2005 and made the first post then never again!! Seriously! And, before you say I was choosing dumb names (ie that 14 yr-old girls would choose), I will refer you to possible options:

  • myblog – 12 yr-old girl, couldn’t even post, only made comments to the default posts and pages (Sept 23, 2005)
  • qwerty – I take the “14 yr-old girls” bit back, nothing doing here (Nov 2, 2005)
  • ifelse – no idea who, China (end of 2005)
  • rofl – one hit wonder (Oct 23, 2005)
  • over9000 – Eastern European, the most used one so far (31 Aug – 27 Sept 2007)

I’ll stop there before I have a heart attack (check this out if you want one too!!). Anyway, moving on, I found a name (and not a bad one, may I say) and here it is.

In other news….my  RSS feed for this blog is up and rolling (Wahoo!), and I have got a whole lot of stuff done with php. So, here’s a lovely tid-bit as promised:

I’ve just been using
$ip=$_SERVER['REMOTE_ADDR'];
to get the ip of my site visitor. This is correct, but a bit of geeking the ‘net today led to this bit of work by scriptgoddess, and then built out a bit:
function getAddress() {
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip=$_SERVER['HTTP_CLIENT_IP'];
}
elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
}
else {
$ip=$_SERVER['REMOTE_ADDR'];
}
return $ip;
}

As a quick run down, if it doesn’t come absolutely clearly to you, we first check for $_SERVER['HTTP_CLIENT_IP'] (shared internet), and allocate that that as the address. If this isn’t available, we then move to $_SERVER['HTTP_X_FORWARDED_FOR'] (the ip a proxy was forwarding on behalf of), if required; otherwise we default to $_SERVER['REMOTE_ADDR']. This provides us with the most precise “real” ip address for the user visiting our site. The main hurdle we have overcome now is the inability to accurately map geo-demographics visiting your site. Purely using $ip=$_SERVER['REMOTE_ADDR'] will result in some ISPs and proxies claiming stupid volumes of traffic, while not allowing you to accurately target your content (and advertising!!).

I have to say I’m getting over the layout of my code in this theme (I just changed it twice), so I’m going to give up on posting code for now, and finish my web work. One of tomorrow’s tasks is now to find a new theme I like that supports displaying code in a useful manner.

twittering, blogging, and procrastinating

Well, today I sorted out my twitter account – style, colors etc – and started following some people. I resisted the urge to follow ICHCheezburger, MC Hammer, Ashton Kutcher, and Tony Hawk; although John Mayer was an easy pass. I’ve made the somewhat lucid decision to limit my twitterati (is that a word – well, it should be!) to people I actually communicate with and care what they are doing. I am now on “following” terms with engadget. You can already see the MySpace/facebook-esque groupie thing getting well hammered on twitter. Other than the well publicised race between Oprah, Ashton et al to be the first to have a million followers on twitter, it’s a bit ridiculous to see the 1.6 million and counting people who actually believe that Britney Spears is following them in return and actually tracks their twitters.

In the real world, I found a couple of neat css tricks, and re-learnt my command-line Java; as well as consolidating some of my php scripts for dynamic geo-location components for pages. They were a bit of a mish-mash, having been done as I taught myself, and it’s amazing how cleaned up I could get them in relatively little time.

I think tomorrow’s post will be something like “css for the soul” or similar, and basically be a spewing forth of my latest tid-bits of knowledge and cunning tricks and hacks. Not that I’ve come up with much myself recently, it’s more been a pulling together and pooling of the genius available on the web and through Google. Although, I’ve now been tapping into Wolfram|Alpha as well – it’s starting to get a bit of flack, but I think that’s cause it’s in a newbie phase. The whole intent is that it is to be a humanistic learning-engine, so everytime we search it the answers get better….anyway, it can’t do any worse than Cuil has done….I did just go check, and Cuil is still alive, we just hear nothing from it these days.