| Web development blog, news and tutorials

Home > Monthly Archives: April 2012

Page 1

Transforming Elements in 3D Using CSS3

CSS Apr 30, 2012 one comment

With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D.

In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page.

Create a Page with an Image Element

Create a basic page with a CSS section in the head area, as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> /*CSS here*/ </style> </head> <body>  </body> </html>

We will use an image to demonstrate the effects. Add the following code to the body section of your page, altering the source attribute to use your own image file:

The click listener JavaScript function is purely for demonstration, so that you can see the effect as it happens. In your own pages you will of course need to incorporate the transform effects with any other functionality you have in place.

Style the Page

Add the following CSS code in the style section to apply default styling to your image element:

img { margin:50px; /*general version*/ transition: 2s; /*browser specific versions*/ -moz-transition: 2s; -webkit-transition: 2s; }

We apply a margin of 50px to accommodate the image as it rotates, but depending on the size of your own image, you may wish to alter this. When the user clicks the image, the browser will apply the 3D transform. To make this happen gradually so that you can see the effect unfold, we apply these transition properties making it last two seconds.

Notice the prefixes used in addition to the standard transition syntax – you will also see this throughout the transform code. The 3D transforms are not yet supported in Internet Explorer or Opera, so our CSS prefixes only need to accommodate Firefox, Safari and Chrome.

Rotate the Image

You can rotate your image element with a 3D effect by specifying the X, Y or Z axis. To start with, let’s use the X axis by adding the following CSS code:

.transformed { /*General*/ transform:rotateX(180deg); /*Firefox*/ -moz-transform:rotateX(180deg); /*Chrome, Safari*/ -webkit-transform:rotateX(180deg); }

Open your page in the browser and click the image to see the 3D effect. To see the rotation working on the Y axis, alter your CSS as follows, rotating the image 300 degrees as a variation:

.transformed { /*General*/ transform:rotateY(300deg); /*Firefox*/ -moz-transform:rotateY(300deg); /*Chrome, Safari*/ -webkit-transform:rotateY(300deg); }

To rotate the image 270 degrees on the Z axis, add the following:

.transformed { /*General*/ transform:rotateZ(270deg);...

Saya says: I liked it very simple and nice- If you suggest any other tutorial please let me know

DeveloperDrive.com now powered by MaxCDN

Miscellaneous Apr 27, 2012 one comment

A faster website leads to happier visitors. While you can make a million changes to your site’s code to speed up load times, there are some things that are just beyond your control. Things like network issues between where your site is hosted and where your visitors are. So what can you do to overcome things like network latency? Easy! You can use a service like MaxCDN which is a Content Distribution Network.

We recently teamed up with MaxCDN to deliver even better performance to our blog. MaxCDN delivers your site’s static file through hundreds of servers around the globe, rather than just from a single host server. That means your visitors are getting your content from the city closest to them, rather than one on the other side of the globe. An added benefit to this decreased load time is an increase in search engine rankings (Google has shown that page speed is a major factor in their ranking algorithm)!

We recommend MaxCDN as it’s easy to integrate into your existing website and words with WordPress, vbulletin, phpBB, OS Commerce, Magento, Joomla and many more. MaxCDN also plays well with your current hosting service.

A faster site can lead to a lot of huge benefits. Happier visitors means increased conversions and more revenue. Amazon has found that a tenth of a second of load speed is worth one percent of sales! That’s amazing, to say the least!

MaxCDN is a great service for any site worried about load times for visitors around the globe. Stop losing out on repeat visitors and conversions because your site is loading slowly.

Check them out! http://www.maxcdn.com/

...

Think360 Studio - Web Design says: Hi. How can we take this maxCDN . I'll definitely try to use it in my next Project. But i have 1 question, that how we get...

PHP Ad Tracker: Entering Ad Banner and Client Data

PHP Apr 26, 2012 2 comments

In our last session, we showed how to list the ad banner data and client data. In this session, we will examine the form that allows administrators to enter ad banner data.

First, we include the class_ads.php file and instantiate the ads class:

<?php require_once("class.ads.php"); // instantiate ads class $oAds = new ads;

Next, we assign a value for the $id variable by suing the setID function in the ads class:

// check for id if ($id) { // assign unique id $oAds->setId($id); }

If the form has posted data, we assign values to each of the variables according to the data posted in the form fields:

if ($_POST) { // if form was posted // assign page variables $iClientId = $_POST["clientid"]; $sTitle = $_POST["title"]; $sUrl = $_POST["url"]; $sPath = ""; $sClient = $_POST["client"]; $sContact = $_POST["contact"]; $sEmail = $_POST["email"]; $sPhone = $_POST["phone"];

We can also check if the ad title is no longer than 200 characters using a separate validInput function:

// validate ad title if (!validInput($sTitle, 1, 200)) { catchErr("Enter a valid ad title"); $FORMOK = false; }

We can also check if the ad URL has a valid format using a separate validURL function:

// validate ad url if (!validUrl($sUrl)) { catchErr("Enter a advertisement URL"); $FORMOK = false; }

We can also check if the file has been properly uploaded with the is_uploaded_file function and that the file has a valid name and extension with a separate validFile function. If the file does not have a valid name, we can assign a name by a combination of a random number and the current date:

// check for uploaded file if (is_uploaded_file($_FILES["banner"]["tmp_name"])) { // get file extension if (!$sExt = validFile("banner")) { $FORMOK = false; } else { // generate random...

Tom says: Great post, I find many important stuff at your blog.

Learning LESS: An Introduction

CSS Apr 24, 2012 24 comments

Today, I’m proud to start a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let’s you use variables, mixins, nested rules, and even functions within your CSS. It’s extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won’t type CSS again without using LESS.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

So with that laid you, you’ve got a lot of great stuff to look forward to. Let’s get started on our introduction to LESS.

What Is LESS and Why Should I Care?

In my dealings on the web, I have found that there are three types of people when it comes to dealing with LESS (or any other CSS preprocessor). There are the I’ve never heard of it people, the Yeah, I’ve tried it, but it’s not for me, and the Yup! I love it people.

My goal after this blog series is to make you fit into that last category.

According to Wikipedia, LESS is:

a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.

LESS has been around since 2009 and has really ramped up in the past few months, getting widespread use by projects large and small, including Bootstrap, from Twitter, the most popular project on GitHub.

As we progress through this series, you’ll get a better grasp on what LESS really is, and what it can be used for, but in short, it allows you to create a powerful library of variables, quick CSS3 effects, and much more.

What Resources Are Out There?

There are plenty of places you can read up about LESS, but you might as well make your first stop the source, http://lesscss.org, the home base of LESS. They will help guide you through setup, some intro to the code, steps to process your LESS files, and much more.

Smashing Magazine also posted a intro to LESS and how it compares to SASS, which is another popular CSS preprocessor.

A simple Google search on LESS will bring up a lot of other tools, tips, and tricks, but nothing is better than getting your hands dirty in actual code and learning from the ground up.

Is This Server Side or Client Side?

Good question, and the answer to that is it can be both. Or neither.

To implement LESS using a client side method, save all of your files as type.less and incorporate them into your document just like you would a CSS file.

Once you’ve got all of your LESS files loaded up, it’s time to call the LESS JS file which compiles all of your LESS files to one CSS stylesheet.

And that’s it for client side! Be sure that you call the less.js file after you include your .less stylesheets.

Unfortunately, I won’t go in to details on how to set up LESS on the server side simply because I don’t work with server side much, and I wouldn’t want to lead you astray. Instead, I’ll go in depth on the third method, which I highly recommend. Do neither client or server side.

Using LESS.app for Mac OS X

One of the most powerful clients that I use when coding in LESS is the LESS.app for Mac OS X (Sorry, Microsoft users – although give SimpLESS a try). The LESS.app compiles your LESS files into a CSS stylesheet in development, and even gives you the option to minify your CSS to save file size. This makes creating styles extremely powerful, because you can utilize dozens of LESS files, compile them to one stylesheet, minify it and publish to your server.

To use LESS.app, simply drag your development folder to the app window and LESS.app will automatically find all of your LESS files. You can then specify which ones you want to convert to CSS, where to save them (in your development folder) and whether or not to minify the CSS.

Pretty cool stuff, that’s for sure.

So take a few minutes out of your day today and in the coming days to check out LESS, the LESS.app, and some of the other resources out there.

Coming up next in the blog series, Learning LESS: Using Variables. See you next time.

...

Alex Ball says: Absolutely. So, like I mentioned in the article, I don't so much on the server side, so I guess I can't really speak to that...

Hot deals

See all deals →

20 One-Page Responsive Templates with Parallax Effect - only $19!

Magnolia: 150+ Professional Infographic Elements - only $9!

Beautiful Solomon Font Family (12 fonts) - only $9!

3,000 Items! MEGA Design Bundle (worth over $1,000) - only $49!

Creating First Animations With CSS3 Using Keyframes

CSS Apr 23, 2012 5 comments

One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment – great news if you’re developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple first animation using CSS3 keyframes.

Our animation is going to feature a childish cartoon bus moving along the X axis, speeding up in the middle before slowing down again. The bus and wheels will be separate images, with the wheels spinning as the bus moves. These are our image files:

Here is a screenshot from the final animation:

Create a Web Page

Let’s create an HTML5 page as follows:

<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>

Add the image elements to the body section of your page, including the bus and two copies of the wheel:

We will use the class attributes to apply styling to the image elements.

Apply Default Styling

Start your CSS3 code by adding style properties for the container “div” as follows:

/*background element*/ div { width:600px; height:220px; background: linear-gradient(top, blue, green); background: -moz-linear-gradient(top, blue, green); background: -webkit-linear-gradient(top, blue, green); }

Here we simply apply a gradient background together with dimensions. Notice that the prefixes we are using only include the default syntax plus versions for Mozilla and Webkit (Safari and Chrome). Internet Explorer and Opera do not yet support the techniques we will be using in this tutorial so we will not be targeting them.

Now add properties for the initial style of your wheel images:

/*initial properties*/ .f_wheel { position:absolute; top:160px; left:190px; } .b_wheel { position:absolute; top:160px; left:50px; }

We use absolute positioning to make sure the wheels and bus are displayed correctly and will move together. Add the initial styling for the bus image:

/*bus properties*/ .bus { position:absolute; top:50px; left:30px; /*animations*/ }

We are going to add more properties in this block, indicating the animations we want to apply to the bus element.

Indicate the Animations

Our bus moving and wheel spinning animations are going to be specified using CSS3 keyframes. We will define the animations in dedicated keyframes sections, but we also need to tell the browser to apply these animations to particular elements. Add the following to your existing “.bus” declarations:

animation: moveBus 5s ease-in-out forwards;...

FeliciaCorrine says: So finally animation is possible using CSS3. It will surely eliminate the extra cost associated with using third party services....

Get the Most Out of HTML5′s Native Audio

HTML5 Apr 19, 2012 3 comments

Lots of excitement surrounds HTML5′s native audio element. It promises cross browser standardized support for playing audio clips embedded directly in our web pages. With this new element, gone are the days of including a third party plug-in like Flash, QuickTime, or Silverlight. Of course, we’re not quite there yet.

Currently, the <audio> element is supported in these browsers: iOS 4+, Android 2.3+, Opera Mobile 11+, and

As web developers, we must be careful to include fallback support for older browsers in order to make sure all users get the best experiences from our sites. In this post, I’ll review the <audio> elements attributes and show how to get the most out of HTML5′s <audio> while still providing support for those pesky old web browsers.

Using <audio> in Your Page

The <audio> element works a lot like <img> by using a ‘src=”audio.mp3″‘ attribute to point to where the file exists. Here’s how:

This markup also includes the controls attribute which displays an audio control bar on the page. Notice the control display renders differently by browser. When laying out your web page, make sure to test it in all major web browsers to verify the layout is not compromised. Here are examples of how this control renders in common browsers.

<audio> Attributes

The <audio> element comes with several attributes used to specify how the element performs.

src

As shown in the example, the ‘src’ attribute indicates what audio file to load into the page. It is similar to the ‘src’ attribute of the <img> element. This is supported by all the major web browsers.

controls

When included, this attribute specifies that the audio display controls will be shown on the page. This is supported by all the major web browsers.

autoplay

When included, this attribute specifies that the audio file will automatically begin playing upon loading of the page. This is generally considered poor page design. If you decide to use this feature, make sure to have a way for the page visitor to quickly turn the sound off or down. This is supported by all the major web browsers.

loop

When included, this attribute specifies that the audio file will continue playing from the beginning once it ends. This is supported by all the major web browsers.

preload { auto | metadata | none }

This attribute specifies when the audio file should be loaded in the page. This one is only supported by Firefox, Chrome, and Safari.

auto = file loads as the page loads.

metadata = loads only the file’s metadata as the page loads.

none = the page visitor must initiate the file before the file begins to load.

Here’s an example:

Falling Back Techniques

HTML5′s <audio> performs differently by web browser because there is not yet an adopted standard for this element. This means not only does the web developer/designer need to author the page for older browsers by including plug-ins like QuickTime or Flash, but she/he must accommodate all the various audio file types supported by the various browsers. Fortunately, the <audio> element provides plenty of ways to do this.

First let’s examine how to offer alternatives for page visitors who cannot play audio files.

<audio src="audio.mp3" controls > <p>Your browser does not support native audio. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p> </audio>

Web browsers will automatically ignore the <audio> element and display the <p> element instead. And for web browsers that do support <audio>, the <p> element is ignored. Note that you do not need to stick with the <p> element, any HTML will work as long as it is inserted between the <audio> tags.

The <audio> element also allows the fallback to plug-ins like Flash. So, if the visitor’s web browser does not support <audio>, it can instead process the file using a plug-in. Here’s how…

<audio src="audio.mp3" controls> <object data="mediaplayer.swf?audio=audio.mp3"> <param name="movie" value="mediaplayer.swf?audio=audio.mp3"> <p>Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p> </object> </audio>

Notice how included in the <object> tag is the markup to accommodate those visitors who cannot play the file using Flash.

Even More Fallingback

Unfortunately, web developers/designers must also deal with codec standards among the web browers. The different...

Bastian says: It is a shame that we can't use the audio element with just one source file. I just don't want to provide every single audio file...

PHP Ad Tracker: Site Administration Ad Banner Data Form

PHP Uncategorized Apr 17, 2012 2 comments

If you have read any of the other posts in this series you know that we have done quite a bit with our PHP ad tracker.

In this session, we will look at the HTML form that calls these actions.

First, we create the HTML table that will hold the form header:

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td><b>Developer Drive Advertisements Administration</b></td> </tr>

Next, we specify the operation (add/edit/delete/deactivate) for this form and display that operation:

<tr> <td> To <?php print $op ?> this item in the system, please complete the form below.</td> </tr>

If any errors occurred, we display them in red

The form action will call the routines we outlined in last week’s session. When the user submits the form, the form will also carry the requested operation and the ID number for the ad banner.

<form action="<?php print SELF ?>?op=<?php print $op ?>&id=<?php print $id ?>" method="post" name="devdriveform" enctype="multipart/form-data">

The form calls the getClientsList function from the class file and creates a drop down menu listing each client’s name and ID number. If the ID number in the client table matches the number in the query string, then the menu highlights that option as selected.

<table border="0" cellpadding="0" cellspacing="0"> <?php $aClients = $oAds->getClientsList(); if (count($aClients)) { ?> <tr> <td><div>Client:</div></td>...