scriptygoddess

I’ve been hunting around the last few days, looking for a good tutorial on how to make those glossy/glass-like buttons in photoshop. There are A LOT of tutorials out there. Some of them are just hard to follow. Others only seem to work best with one particular shape. But I did find this one that worked for me no matter what shape I’m using. As well, it’s incredibly simple and easy to follow. The one thing I added which I think helps the effect came from another tutorial I had seen - which was to add a drop shadow - about 75% opacity, 0 distance, and size: 7px.

(The tutorial is somewhat old (in internet years) - dated 2001 in the footer… Makes me wonder if the site is and will be still visible for too much longer…)

There was another one I found that was a little “fancier”. (Side note: I went through so many of these pages today, and now I can’t find the link to the one I’m thinking of. If someone recognizes these steps please make a note in the comments, and I’ll update the post with the appropriate credit link. I’ve even gone through every page in my history. I suspect that I’ve combined a number of tricks from a variety of different tutorials to come up with this one, but with all the sites I saw, I can’t be 100% sure.) I liked this trick - but it didn’t work as well with every shape I tried with it. So click the “read more” to see how to create buttons that look like this:

(Updated 6/2/07 A lot of this is similar to these two tutorials on Bartelme - which I actually DON’T remember seeing before writing this - but I was looking at his badges trying to figure out how he did them, when I wrote this. I hadn’t seen that he had a tutorial on them.)
(more…)

I had written this tutorial sometime ago with the intention of cleaning it up and posting it here. Finally getting around to this. The original purpose of the tutorial was to explain how to use session cookies to a friend of mine who was working on a form that was a number of pages long. I apologize if it seems like I’m starting in the middle of an explanation (I am a bit). The tutorial assumes you’ve created a few form pages that are connected to each other and that the end result will be taking the data from all the pages and dumping it into a database. This tutorial really focuses on just the session cookie piece and does not go into how to create the forms, or do the inserts for the database.
(more…)

A few months ago I made a post comparing a few shopping carts. Since then, a number of great comments, experiences, suggestions of other carts came about. At this moment, there are 79 comments on that post. It’s quite a bit to read through, so I thought I’d summarize the best I could the various carts mentioned, and “reviews” of those carts. (I’m also making a note of what the version was at the time of *this* writing). And most importantly, I’m trying organize all the information based on the cart. All comments below were snagged from that original post. In some cases I’ve taken only a snippet of a longer comment - just to take only the portion that relates to the current cart. In some cases - portions of comments may be duplicated if they related to more than one cart. If you have further comments, feel free to continue posting them on the original review (just to keep everything in one place). And I’ll keep bringing them over here and categorizing them under the appropriate cart as time goes on. Longer comments are shortened with a ** where some portions have been edited. In some cases people threw out a name of a shopping cart out there - so I’ve included the link below, even if I didn’t have any specific reviews of it. The one thing I am going to leave out, though, are the hosted solution options. If enough people feel strongly that I should include them in this list, then I’ll go back and add them in.
(more…)

Hit an interesting CSS thing today. A simple “float: left.” A simple clear: both.” Firefox understands it. Even IE 6 understands it. But what the heck is IE 7 doing??? See below.

Here is my example page.

Here is how Firefox and IE 6 render that page:

Here is how IE 7 renders it:

What’s with the blue box moving around?? I was trying to avoid adding a lot of extra markup, so I made an additional class to clear the third div - thinking the next one would “top align” the following div to that one - like firefox and IE 6 do. But in IE 7, that last div is still floating left to the first few DIVs as if I never cleared that third DIV. The only way to *really* clear it is to add the extra markup of <br clear=”all” />

See this example with the extra markup (you’ll only notice the difference between this page and the previous one if you’re running IE 7)

Anyone have any thoughts as to WHY? or how the extra markup can be avoided? I mean I know a simple <br /> tag isn’t the end of the world - but I know adding those just for “layout” issues is “bad”™

(One request I’ll make: when responding - if you’re going to suggest a solution, please make sure that you’ve actually downloaded the sample and tested it there before making your suggestion. In the past I’ve had people suggesting things before they even tried it themselves to see if it’d work. Heh.)

This is a great article/tutorial on how margins work in css (why/when then collapse, and why/when they don’t).

If you’re looking for inspiration, here is a nice long list of web design galleries.

Just found this really incredible list of color utilities via Digg.com:

colorschemes.org: Color Schemes, Color Palettes, Color Theory

WOW! I have a lot playing to do!!

For a long time I resisted the urge to put ads on the site. I’m sure you’ve noticed I finally caved in this past year. I’ve tried to keep it relatively unobtrusive. In one case I was contacted directly to put an ad up on one of my category pages in the content area. I didn’t want to put it at the top above the content. Ideally - I wanted it put in the middle in a separate div block, maybe after 3 or so posts, but only on the first category page. Here is the code I used to get that to work…

First, above the loop I added this:
<?php
$count = 0;
?>
This is to count the number of posts we’re on.

Then just after the end of the loop call (<?php while (have_posts()) : the_post(); ?>) but before you start the code for the posts, I added this:
<?php
if ($wp_query->get("page") || $wp_query->get("paged")) {
$onFirstPage = false;
} else {
$onFirstPage = true;
}
?>
That bit of code I got basically from this post on the support boards.

Then to determine if we should call the text for the ad (in this case I wanted it displayed only on category id #29), and to then display the ad…
<?php
if (is_category('29') && $count == 2 && $onFirstPage) {
?>
...ADVERTISEMENT TEXT OR IMAGE GOES HERE...
<?
}
$count++;
?>

Learn something new everday! I just added the following to the css for this site:
a {
outline: none;
}

Which will remove that little dotted line you get when you click on a linked image. I just learned that from Deziner Folio.

I got to that site because I recently installed the Sphere plugin for Wordpress - (which I found out from reading Matt’s blog) and Deziner Folio was one of the links that popped up from one of my css-related posts.

Incidentally, poking around there I also found a bunch of pre-made for-photoshop gradients and cool “badges” (starbursts, etc.) he was offering up free for the taking. As well as a really neat way to center a single div in the middle of the page using CSS.

I’m in the process of putting up a new design for this site. If you’re hitting the site right now - things may look a little funny while I get all everything worked out. Sorry for any inconvenience. Everything should be fine in the next hour or so.

So I think it’s all set up now. Feel free to leave a comment here if you notice anything really wonky.

Some notes about the new design -specifically the logo: I finally settled on a “real” logo. A butterfly of course. It’s been a theme that’s been consistent in almost all the designs for this site. Not sure how to explain why, but I wanted something to represent “goddess” - beauty, perfection, etc. without resorting to a pin up shot. In my mind, that’s how I see butterflies. To connect it to the code, the butterfly in the logo is made up of programming “pieces” - numbers for the antenna, curly brackets } { for the wings, a pipe | for the body. So that’s where that came from. I’m pretty happy with it. (hopefully, I’ll still be happy with it in a few months, I can be pretty fickle about my own designs) So much so that I even made a Cafepress Store with the logo. Not that I think anyone but me would really buy anything there - but you never know!