Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Safari CSS Effects

April 24, 2004

After spending weeks on end coding around the quirky demands of today’s browser space, occasionally it’s nice to design for a completely controlled environment.

Mac OS X is proving more and more useful the further I dig in, and lately I’ve been playing with the built-in web server. Apache and PHP come pre-installed, you just have to turn them on.

I’m running my localhost web server from ‘Diemos’, the secondary partition that also stores my project files. Setting up aliases is proving useful, so that while my directory structure looks something like this:

- Projects
    |- Bright
        |- web
    |- mezzoblue
    |- (Other Projects)

- www
    |- bombay
    |- delhi
    |- wiki
    |- zen

- (Other Directories)

…I can point virtual directories outside of the ‘www’ directory, which serves as my root. So throwing all my Bright Creative .php files in /Diemos/Bright/web/ is accessible as http://localhost/bright/. Next step: virtual subdomains so I don’t need to keep setting a root addess variable in PHP.

Safari effects preview

Anyway. The point of all this is that I put together a very basic page to serve as my test site’s root index. My primary browser is Safari, so I took the opportunity to play with the new text-shadow CSS property. (Hit the thumbnail link if you’re not using Safari). Combining this with a bit of opacity (upcoming in CSS3, supported now) a bit of generated content, and some guaranteed, non-standard font choices, I’ve caught a glimpse of where CSS is going. I like it. A lot.

No images were harmed in the making of this page, it’s all pure CSS effects. Here’s to 2011, when we might even be able to use this stuff.


Reader Comments

1
#lama says:
April 24, 02h

I just wanted to see your home ;)
http://capture.danvine.com/results/21097.png

2
April 24, 03h

It is exciting stuff but like you say it will be very long time before we can comfortably use the cool things you have demonstrated. It is still risky to dump tables for layout, which really sucks.

3
April 24, 03h

I have been doing this for some time. I have set up MySQL and I use a database allong with a little PHP and DOM scripting to list all my current projects and a hidden list of my completed projects. As well as links to other useful stuff like PHPMyAdmin and my router.

I realize I could achieve the same goals by just using bookmarks, but it gets many more geek points doing it this way. And it really wows a client when I pull out my Powerbook and I can show them their entire (completed) site ready for their aproval without having to worry about wifi access or anything else.

It also makes development time way faster, and more enjoyable, especially from a table at Starbucks!

4
David Robarts says:
April 24, 03h

When you get your virtual subdomains working, please post about how to do it. I’ve been trying to figure that out. I agree that developing on a localhost web server is convienient.

5
Dave S. says:
April 24, 03h

“It also makes development time way faster, and more enjoyable, especially from a table at Starbucks!”

Very much so. The improved speed is a big plus, and now that the summer weather is starting in earnest around here, I don’t suspect I’ll be too hesitant to find a patio or park bench from time to time.

Jay Allen and Adam Greenfield recently weighed in on the ‘virtual office’ – http://www.jayallen.org/journey/2004/04/the_truly_virtual_office and http://www.v-2.org/displayArticle.php?article_num=703

6
leonard says:
April 24, 05h

If you’re going to be doing much development on your Mac, I wholeheartedly recommend Aaron Faby’s ( http://www.aaronfaby.com/ ) ‘Complete’ packages. These are much more full featured than what comes out of the box and have their own handy dandy preference panes:

Apache 2: http://www.serverlogistics.com/apache2.php
PHP4: http://www.serverlogistics.com/php4.php
Tomcat: http://www.serverlogistics.com/tomcat.php
MySQL: http://www.serverlogistics.com/mysql.php

7
April 24, 06h

I have to agree with Leonard. Aaron Faby’s packages are simply amazing. Not only are Apple’s PHP, Apache and MySQL builds limited, they are very hard to upgrade and or modify the base configuration without recompiling from source.

Aaron’s packages come complete and with access to all the configuaration files (ie. httpd.conf, my.cnf and php.ini). This makes adding extensions and virtual hosts much easier.

8
April 24, 07h

Evolt has a good tutorial on setting up virtual host under Mac OSX. If you’re not familiar with UNIX, I would suggest using BBEdit to edit the httpd.conf file. Note: use the Open Hidden File option in the File menu!

The tutorial can be found at http://www.evolt.org/article/comment/18/13138/

9
April 24, 07h

Opacity works in the latest Mozilla aswell now :). Shadow don’t yet, though, and the fonts chosen are probably all Mac fonts which are not present on Windows systems, so without good alternatives it doesn’t look half as nice as the screenshot ^_^. And also, somehow the white part of the selection bar has a 1 pixel red line on top of it. Ahwell.

One thing about the generated content… Why don’t you just use a counter? (content: counter(name) ” “) (http://www.w3.org/TR/CSS21/generate.html#counters)


~Grauw

10
April 24, 07h

David Robarts saith:
“When you get your virtual subdomains working, please post about how to do it. I’ve been trying to figure that out.”

I’m no Apache expert, but I’ve got this working on Windows XP. Anyone who knows more, feel free to fix my errors and security problems.

1) In your httpd.conf file, add or uncomment this line:

NameVirtualHost *

I think the asterisk might pose a security problem, but I don’t fully understand “the IP on which Apache receives requests” in a localhost setup, and that’s the only thing that works.

2) Below that, add as many <VirtualHost> blocks as you please. To wit:

<VirtualHost *>
DocumentRoot “C:/apache/sites/blog”
ServerName blog.test.sft
</VirtualHost>

.sft is a fictitious TLD that I made up for the purposes of subdomains. Since I use my own TLD, I can make up as many “domains” and subdomains as I please.


3) In WinXP, go to %systemroot%/Windows/system32/drivers/etc and open the “hosts” file. Add lines for all your subdomains, like so:

127.0.0.1 localhost
127.0.0.1 apache.sft
127.0.0.1 test.sft
127.0.0.1 blog.test.sft

Unfortunately, you can’t use wildcards in the hosts file. Mozilla respects them, but IE doesn’t.

I don’t know firsthand about the Mac OS equivalent of the hosts file, but a Google for “mac equivalent hosts file” seemed to yield some pertinent results.

After you’ve saved your hosts file, you should be good to go with as many fake domains and subdomains as you please. In the above example, http://blog.test.sft will show the contents of the C:\apache\sites\blog folder. :)

11
April 24, 08h

Leonard, those ‘Complete’ packages (http://www.serverlogistics.com/) are quite a find. Thanks!

12
Alex H. says:
April 24, 08h

2011? A bit optimistic, don’t ya think? ;)

13
Bruce says:
April 25, 01h

I’ve been running an Apache server on my XP system for some time now for development. Unfortunately, I ran into a problem developing a recent project for a client (http://www.ascam.co.uk), since the .htaccess files I used to make friendly URLs worked remotely but my local Apache set-up hated them, and ended up killing my computer.

Anyway, I used PHPdev (http://www.firepages.com.au), which is a great tool for developers.

BTW, I’ve been waiting for opacity for some time. The IE and Moz specific css commands just don’t cut it.

14
David House says:
April 25, 01h

I don’t have either of the first two fonts in the list, but I’d rather default to Georgia or Timse than a sans-serif font, as you’ve got in your stylesheet there.

15
April 25, 02h

Virtual Hosts? Get lazy!
Patrick Gibson has made available an excellent script for adding and removing them. You’ll probably have to tweak it a little for your setup, but that’s easy enough:
http://patrickgibson.com/news/andsuch/000091.php

16
April 25, 04h

And to think that there are people who think that CSS has no future.

Here’s a cheap trick I did with Safari’s text-shadow support and a bit of JavaScript:
http://dris.dyndns.org:8080/archives/533/index.html

I don’t advocate such effects, of course. ;) This was purely for my own amusement.

17
Sylvain Lelievre says:
April 25, 04h

For those who’d like to setup Mac OS X as a personal web development platform, you can read this useful article at sitepoint.com http://www.sitepoint.com/article/os-x-web-development
It explains how to enable and configure Apache using virtual hosts for multi-projects management.

And even if Aaron Faby’s package are cool, have a look at Mark Liyanage’ website where you’ll find other packages for PHP http://www.entropy.ch/software/macosx/php/ , MySQL http://www.entropy.ch/software/macosx/mysql/ , PostGreSQL http://www.entropy.ch/software/macosx/postgresql/ along with helpful forums http://www.entropy.ch/phpbb2/ if you have problems installing them.

If you want to go further and make your Mac a real webserver, this article on MacDevCenter.com http://www.macdevcenter.com/pub/a/mac/2002/08/23/jaguar_server.html can certainly guide you through the process.

18
Nick Cowie says:
April 25, 05h

Laurens Holst wrote:
>Opacity works in the latest Mozilla aswell now :)

One a PC yes, on a Mac no. In both the latest Firefox and Mozilla on a Mac an opacity value of less than 1 (or .99 in some cases) is treat as 0. In other words it is either solid (value 1) or invisible (value 0) and no where in between

19
beto says:
April 25, 09h

Looks gorgeously fantastic (in my Safari). This only makes the need to stick to IE as the primary browser for development in market terms even more dumb than it already is.

And I’ll definitely try using virtual hosts, that comes very handy for all my personal development needs.

20
April 25, 10h

In response to Paul, who said “it is still risky to dump tables for layout, which really sucks:”

If you have the patience, it doesn’t have to be risky at all. Just take the time to do it right, and rest assured knowing that one day, when tableless design becomes easier, you will have the upper-hand because you made things work even when it was difficult to do so.

I designed, developed and continue to maintain the following website, which uses no tables and has, thus far, been very successful:

http://www.pleasureunit.com/coldplay/

21
David Robarts says:
April 25, 12h

Thanks Lanny.

I used the Google search you suggested and found a site describing how to add a hosts file that blocks ad servers. I had already understood the apache side of things, but previously I thought the hosts file would be much more difficult. All I had to do was go into NetInfo Manager and duplicate the localhost entry in the machines directory and rename the copy to the name I wanted to use.

22
April 26, 03h

I’d avoid the (excellent) Aaron Faby for frequent tinkering and stick to the Apple & Mark Liyanage combo. They play a little better together, and Apple OS updates don’t trample on things quite as much.

If you’re heading down the virtual subdomains route, and assuming:

* you only want to look at them from your own network on which your machine has the address 10.0.2.1
* you don’t have a domain and name server set-up

You can quickly create dummy sites in OS X using netinfo manager, or the command line.

I’ve created a subdirectory of /etc/httpd called “virtualhosts” and added the following line to /etc/httpd/httpd.conf

Include /private/etc/httpd/virtualhosts

Then I’ve a dummy virtual host entry in the file

/etc/httpd/virtualhosts/dummysite

contents:


ServerName dummysite.demo
DocumentRoot “/www/dummysite/docs”
ErrorLog “|/usr/sbin/rotatelogs /www/dummysite/logs/error_log 86400”
CustomLog “|/usr/sbin/rotatelogs /www/dummysite/logs/access_log 86400” combined

Options FollowSymLinks IncludesNOEXEC Indexes
AllowOverride None
Allow from all

As you can guess, in my /www directory I’ve a dummy site

structure

+www+dummysite+docs+index.html
| |
| +logs
+host1
+etc

And then the following script called “demosite”
allows me to generate new demosites by typing

demosite host1 host2 etc.

at the command line

#!/bin/tcsh
foreach host ($argv)
echo “creating virtual host config”
sed s/dummysite/${host}/g /etc/httpd/virtualhosts.off/dummysite >/etc/httpd/virtualhosts/${host}
echo “creating virtual host site root”
mkdir /home/${host}
cp -r /www/dummysite/* /www/${host}/
echo “creating virtual host IP mapping”
niutil -create -u username -P password . /machines/${host}.demo
niutil -createprop -u username -P password . /machines/${host}.demo ip_address 127.0.0.1 10.0.2.1
echo “created virtual host ${host}.demo”
end


(adjust username, password and ip addresses to taste)
then view the sites from your machine by going to host1.demo or host2.demo

23
April 26, 03h

And make sure the following is all on one line…

sed s/dummysite/${host}/g /etc/httpd/virtualhosts.off/dummysite >/etc/httpd/virtualhosts/${host}

24
April 26, 06h

I’ve been using my powerbook for local development for a long time now, and the value of being able to illustrate why a PHP solution is the way to go for a client has been immeasurable.

As far as tableless design goes, I have’t used tables for layout in over a year and I don’t plan on going back.

25
dara says:
April 26, 11h

I agree with Adrian Simmons
>>Virtual Hosts? Get lazy! Patrick Gibson has made available an excellent script for adding and removing them.

I’ve been using his script for over a year now. It’s so easy. When I get a new project, I run the script to add (which amounts to giving it a name and deciding if you want it to install a folder for you). Then when I’m done. i archive the project to some back-up device, then run the delete portion of the script. It will even get rid of the folder if I want. makes life soooo easy, and gives me the time to concentrate on my projects rather than on dinkering in my system.

26
richie says:
April 27, 05h

i’ve used apache, php and mysql to act as a testing platform on my powerbook before but i find myself a little wary of leaving them on all the time.

i believe it’s quite possible when connected to the web for people to surf onto your computers local web server if they find your IP, say from referral logs? maybe a little paranoid but i would imagine that one of the benefits of using a local test setup is the privacy it allows

i’m fairly sure that “out of the box” activating the server allows access to anyone with such information

figure you might need to do some messing with the security settings the apache config file to prevent this? say the passwording of directories as a simple example or the blocking of all but your own IP?

if someones already commented on this forgive me, its late and i missed it :-)

27
richie says:
April 27, 05h

aha, it appears on rereading someone may have. though my understanding of such things makes me unsure! maybe my bad! :-/