CSS/HTML:

15 Jun 2010

72

Creating Fancy Checkmark Icons with Pure CSS3

I was recently working on a personal project where I wanted to implement some cool “checkmark” icons like you see at left to spice up my unordered lists. I could’ve done it quite easily with the list-style-image property, but I was trying to keep my images and http requests to a minimum, so I wanted to figure out another way to do it (plus, the challenge sounded kind of fun).

I had just seen Nicolas Gallagher’s awesome¬†pure css social media icons, though, and I thought, “If he can do that, than I could certainly create a simple check icon with just css3″. I did figure it out with some experimenting and testing, and today I’m going to show you how to achieve the same effect.

25 Feb 2010

26

6 Smashingly Practical CSS3 Effects You Can Use Right Now

css3

CSS3 is developing fast, and the most exciting part is seeing all of the intriguing and attractive effects that are being invented to solve real design problems. With the combined creativity of the design community, CSS3 has quickly traveled through the zone of interesting speculation and into the territory of time/resource saving practical everyday use.

Today, we’re going to look at 7 impressive, concrete, real-life effects and techniques that you can implement in your next design. This isn’t going to be the usual overview of features – these are all specific techniques that will help your design work to be more advanced and effective. Let’s dig in!

10 Feb 2010

12

350+ Amazing CSS3 Resources – All You’ll Ever Need to Become a CSS3 Master!

css3 resources

Knowledge of CSS3 is fast becoming a crucial element of any web designer/developer’s skillset, which means that it’s an excellent time to start learning, if you haven’t already! A solid knowledge of CSS3 has a large market value and will take you a long way towards success, giving you an image of competence and authority.

Thankfully, there’s a huge amount of terrific tutorials and resources available – if you can find them. Here you’ll find an amazing ‘ultimate’ toolbox of over 350 of the best tuts and tips out there. Get ready to be amazed!

09 Nov 2009

10

HTML 5 Overview and Resources Showcase

html5-thumb

When first looking to learn web design the amount of terms you’re faced with can be daunting which is why it’s important to focus your learning on specific languages and techniques.

If you’ve been learning web design or development recently, or even if you’re a veteran of the web sector, you’re sure to have heard people mentioning HTML 5 here and there. So what is HTML 5? Well, this article is supposed to act as a what’s what of HTML 5, giving you an overview of just what HTML 5 is trying to achieve and where you can find more information on some specifics of the language.

04 Jun 2009

2

Predefined Variables in PHP: For complete beginners

This is an overview made for beginners: and introduction to predefined variables in PHP. We’ll go over what they are, where you’ve probably seen them, and how and when to use them.

What are predefined variables?

Predefined variables in PHP are exactly what they sound like — variables in the PHP language that have been defined already. They can use used in any PHP script, with no need to create them yourself. They serve a purpose that is commonly used among programmers repeatedly, such as passing information from a form to a PHP script ($_POST would be used for this).

Here is the list of currently defined variables in PHP. Of course, you don’t need to understand all of these quite yet, but they can come in handy for any PHP developer.

All of these variables interact with the current server in some way. This means their purpose is to either get information from the server (e.g. Find the IP address of the user) or translate information to the server (e.g. send a user’s information from a form through the server to be handled by a PHP script.)

Let’s now get a closer look at some of the most commonly used predefined variables.

$_SERVER

This variable is an array of values, with the values containing information about the server.

If you don’t know what an array is, it’s quite simple: it is a collection of values, put into one component. For example, an array of numbers would be “1, 4, 6, 3, 3″. All these numbers can be stored in one place, called an array. The array can then be assigned to a variable name, like “$numbers”. There are more formal definitions of an array, as this definition may not be 100% ‘accurate’. However, it’s a good outline and way to think of arrays.

Let’s say we’re creating a fluid layout, and because different browsers handle pixels differently, we want to determine the browser type of the user so we can lead them to a specified stylesheet. This way, we can make sure a fluid layout never breaks.

In the PHP $_SERVER array (collection), there is one piece called “HTTP_USER_AGENT”. This piece of the array (index of the array) contains the user’s browser information. We can call it like so:

$_SERVER["HTTP_USER_AGENT"];

To see it in action, let’s echo it out:

<?php
     echo $_SERVER["HTTP_USER_AGENT"];
?>

The code above will return browser information in the form of a string. My browser information looks like this:

Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
     (.NET CLR 3.5.30729)

I won’t get too into it, but from here on we can see how we can use this information to specify a certain stylesheet for a user. If we store that String in a variable, (or part of the string), and send it through an if/else statement, we can give the user the correct stylesheet.

Note: This is just pseudo code below!

$browserType = $_SERVER["HTTP_USER_AGENT"];

if $browserType = "Mozilla..."
     then [switch user to the Mozilla Firefox stylesheet]

else if $browserType = "Internet Explorer..."
     then [switch user to the IE stylesheet]

else [use the default stylesheet]

Here are some of the other indexes in the $_SERVER array:

  • Get the user’s IP Address: REMOTE_ADDR
  • Get the hosting server’s name: SERVER_NAME
  • Retrieve the referrer URL: HTTP_REFERER
  • Retrieves the server identification string: SERVER_SOFTWARE
  • Retrieves the pathname of the current running script: SCRIPT_FILENAME
  • Retrieves the current page URL: SERVER_PROTOCOL
  • Retrieves how the script was requested (Did it use “Get” or “Post”): REQUEST_METHOD

If you don’t understand what they do based on the general description given above, do some more research on them, as well as try them out!

$_POST

This predefined variable is very commonly used, and incredibly useful when working with forms. You’ve probably seen this one before if you’ve ever tried to learn PHP.

The $_POST variable is linked to a method in PHP, called “post”, respectively. This method is often used in forms that need to send data to a PHP script. An example of this would be a sign up form: the user enters in data to the form, the form uses the post method to send it to the specified script, and the script can then process the data.

<form method="post" action="phpscript.php">

Easy enough, right? Well in order to carry the input from the form over to the script (in the example above, ‘phpscript.php’), it puts the data in an array, and assigns that array to a variable: $_POST. So, the $_POST variable contains all the data sent through the post method.

To specify the names of the indexes in the $_POST array, we clarify names in the input tags within the form:

<form method="post" action="phpscript.php">
<input name="username" type="text" />

After using the name=”" attribute, we can easily find that data in our $_POST variable array:

$_POST['username']

We have retrieved the data from a form, sent it to a PHP script, and can now work with it inside the PHP script. Using that, we can assign the username to a variable with in our PHP script, manipulate it, or send it to a database.

$_GET

The $_GET variable is very similar to the $_POST variable in that it can work with forms and a PHP method called “get”.

<form method="get" action="phpscript.php">

The difference is that the get method will send information through the URL, like so:

http://example.com/?name=Kayla&website=http://webitect.net

Let’s break that up a bit. We can see the example website: http://example.com. Then, we see a question mark (?). This question mark means that everything following it within this URL is now associated with the form, and contains the variables. We then see “name=Kayla”. This would be if I were to create an input field named “name”, and input “Kayla” for the variable to be passed:

<form method="get" action="thankyou.php">
<input name="name" type="text" />

Next, an ampersand (&) that will connect all the field names and variables. Finally, our second piece of data, named “website” with a value of “http://webitect.net”.

The URL will go to the page where the form wants us to go (the location of the action=”" attribute). In our case, ‘thankyou.php’. It can display a thank you message, or whatever other type of content you’d like to display. In addition, this page can retrieve data with PHP:

$_GET['name']

A better example of $_GET in action is:

<h1>Hello, <?php $_GET['name']; ?>!</h1>

Of course, that’s fairly useless, but you see how it could be used if needed. The point of $_GET is to easily pass information from a form that the user enters, and provide it to the next page. This is helpful for any sort of non-secure information, such as number of items to add to a shopping cart, or posting a website to a database.

You would not, however, ever want to use $_GET for a signup form or anything that uses secure information. Otherwise, important information (like a password) would be sent through the URL, and could be seen by anyone that could view the computer screen.

Conclusion

Hopefully with a more in-depth overview of these three predefined variables, it can get you started in understanding the rest of them. A great place to get started is the PHP Manual itself.

In a future tutorial I really want to go over the $_COOKIE variable, and how one can use cookies to identify users and work with specific users to the programmer’s advantage.

17 Jan 2009

3

All About the New CSS3

It took about 10 years, but CSS3 has finally been created. Hopefully, soon, CSS2 will be no more. I’m sure most of you are like me, you don’t care about what version of CSS you’re using, as long as you know how to use it. That’s why the introduction of CSS3 didn’t appeal to me at first. I soon found out though, that there may be a bit I want to learn about it.