demosthenes.info

• Slash PNG Sizes
• Wrapping Text to A Curve With CSS
• Automatic PHP Portfolio

Mar 12 2011

CSS3 Animated Image Galleries: Cross-fade and Slideshow Effects

• 0 comments

The image galleries we are about to explore descend from, and share code with, the earliest, simple, CSS gallery I introduced in this blog: a div with position: relative applied, and absolute positioning applied to images inside it. Both examples – a cross-fade and slideshow effect – use the same basic markup. In a compatible browser, mouseover each image to see an example of the associated effect. The photographs used were taken by Patrick Coin, licensed under Creative Commons.

The markup for both examples is exactly the same:

1. <div id=“gallery”>
2.         <img src=“wooly-sunbonnet.jpg” alt=“Wooly Sunbonnet” />
3.         <img src=“nettleleaf-sage.jpg” alt=“Nettleleaf Sage” />
4. </div>

... it is only the CSS that changes between them. Note that for both examples to work, the images must be of the exact same size. It is probably easiest to crop the images to the same dimension using PhotoShop before applying the techniques you see here.

CSS3 Cross-fade Gallery

The applied CSS:

1. div#gallery { position: relative; }
2. div#gallery img { width: 400px; height: 400px;
3. position: absolute; left: 0;
4. -webkit-transition: all 2s ease-in-out;
5. -o-transition: all 2s ease-in-out;
6. -moz-transition: all 2s ease-in-out;
7. transition: all 2s ease-in-out;  }
8. div#gallery img:hover { opacity: 0; }

Very simply, the position: relative declaration makes the div the baseline origin of any elements with position: absolute set inside it. With the second image stacked upon the first, the hover and applied transition works to cross-fade the images.

CSS3 Slideshow Gallery

The slideshow is similar, and again uses images of the same size. The containing div now has a set height and width, with any overflow hidden:

1. div#gallery, div#gallery img {
2. width: 400px; height: 400px; overflow: hidden; float: left; }
3. div#gallery img { -webkit-transition: all 2s linear;
4. -o-transition: all 2s linear;
5. -moz-transition: all 2s linear;
6. transition: all 2s linear;  }
7. div#gallery img:hover, div#gallery img:hover + img {
8. -webkit-transform: translate(0, -400px);
9. -moz-transform: translate(0, -400px);
10. -o-transform: translate(0, -400px);
11. transform: translate(0, -400px); }

The CSS is relatively straightforward: the containing div and images inside have the same qualities, so their base styles may be grouped under the first style declaration: float applied to the images removes any trace of a gap between them. Hovering over the first image moves it up 400 pixels (the height of the image) while the paired adjacent selector ensures that the next image moves in the same way, at the same time.

Note that both techniques shown here only work on pairs of images: useful for “before and after” comparisons or as an animated alternative to image swaps and CSS sprites. Transitioning a sequence of images greater than two requires more advanced code, which we will explore presently.

Tags

• CSS3
• webdeveloper4

Mar 10 2011

Simple HTML 5 Animated Menu Bar With CSS 3

• 0 comments

• Home
• About Us
• Products

CSS3 animation can be used to enhance many features of a site, including menu bar navigation. This example shows how a simple primary navigation bar, built with HTML 5, can be enhanced and animated with CSS3 in a way that gracefully degrades for older browsers.

First, the markup, which is very simple: as the <nav> element should only be used once on a page, we don’t even need to add an id attribute:

1. <nav>
2. <a href=“#“>Home</a>
3. <a href=“#“>About Us</a>
4. <a href=“#“>Products</a>
5. </nav>

We’ll add a background image and a few other basic CSS properties to the navigation bar. It is important to remember that while our background images can be any size, we should always crop them to the size that is actually going to be used; otherwise we are loading a giant image and only using a fraction of it. We’ll also add a small shadow to the link text to distinguish it from the background image.

1. nav { background: url(clouds.jpg) no-repeat; padding: 1em 0; }
2. nav a { text-decoration: none; color: #fff; padding: 1em;
3. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
4. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7); }

We’ll also add a hover state to the links, which brings in semi-transparent background:

1. nav a:hover { background: rgba(0, 0, 0, 0.7); }

Next, we’ll add an animation component to the default link state, to fade it in over time:

1. nav a { text-decoration: none; color: #fff; padding: 1em;
2. font-family:“Trebuchet MS“, Arial, Helvetica, sans-serif;
3. text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);
4. -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;
5. -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }

You may notice a small gap between the background blocks of adjacent links. This is the same problem we encountered in our very first horizontal navigational bar, and solved in the same way: removing the carriage returns from the between the links:

1. <nav>
2. <a href="#“>Home</a><a href=“#“>About Us</a><a href=“#“>Products</a>
3. </nav>

The result: if the browser understands CSS3 animation, the background fades in and out behind each link on hover. If the browser does not understand CSS3, the visitor will still see a link background; it just lacks animation.

As a final note: the techniques we've discussed here could be applied to an XHTML page equally well; I have used HTML5 only for the purposes of illustration. As always, CSS is appearance, HTML is the markup of data, and the two remain separate.

Tags

• CSS3
• HTML5
• webdeveloper4

Mar 09 2011

Introduction to CSS3 Animation

• 2 comments

In a compatible browser, mouseover the image above to see an example of CSS3 animation. Photograph of Spartan C3 biplane provided by San Diego Air & Space Museum archive, licensed under Creative Commons.

CSS be used for more than the mere transformation of elements; it can also be used to animate them. You should be aware that CSS transitions are very much in draft. Safari / Chrome / Mobile Safari have the best support for CSS3 animation; the ability is also in Firefox 4 and Opera 10.

This new ability in CSS definitely rubs up against JavaScript, which has traditionally been used for animation on web pages. However, animation still falls under the purview of CSS: remember, CSS is about the appearance of elements. That includes animation. The domain of JavaScript is behavior, which is now defined at a deeper and (in some ways) more basic level. If you want to highlight alternating rows of a table, that’s CSS (the way something looks). If you want the data in the table to be sortable based on different criteria, that is JavaScript (the way something acts on a page).

The principles of CSS animation are very simple:

1. Set up the default state of the element in CSS.

2. Define how the element will appear in its final state.

3. Write in a transition routine, written in CSS3, triggered by an event.

4. In the routine, specify the period of time for the transition. Optionally, you can also set what properties of the element should change during the animation, and the rate of change.

You can transition most every CSS property you can imagine, and some you likely cannot. Animating properties like opacity, to create fade in and fade out effects, or CSS3 transforms, like rotate, translate and scale, are obvious… but you can also animate color, background, shadow, width, height, z-index, columns, line-height and font-size, to name just a few.

Let’s say we have an image with an id of biplane on the page. We want to bring the page to life by having this image rotate slightly when the user places their mouse over it. If we were to do this without animation, but still in CSS3, the code would be very simple:

1. img#biplane { width: 500px; height: 415px;
2. border: 20px solid #ffe;
3. -moz-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
4. -webkit-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
5. box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3); }
6. /* sets up the basic visual properties for the image */
7. img#biplane:hover {
8. -moz-transform: rotate(7deg); -o-transform: rotate(7deg);
9. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

This works fine, except for the fact there is no transition between one state and the other: the image “jerks” when it rotates, as it moves in a single step. Let’s smooth this transition with more CSS3. At the very basic level, we need to specify only one property: how long it takes for the element to animate between its original state and the new orientation, a draft property called transition-duration:

1. img#biplane:hover {
2. -webkit-transition-duration: 1s;
3. -moz-transition-duration: 1s;
4. -o-transition-duration: 1s;
5. transition-duration: 1s;
6. moz-transform: rotate(7deg); -o-transform: rotate(7deg);
7. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

That’s it. Up-to-date browsers will transition the rotation of the image over 1 second; older browsers, such as Firefox 3.6, will still rotate the image, just without any transition between the two states.

Those closely observing the movement of the image will have noticed that the animation is automatically eased in and out: the rotation starts off slow, speeds up to reach a terminal velocity, and then slows down before it comes to rest (increasing the amount of rotation and/or the time taken to do so may enhance your perception of this).

Animation in CSS has automatic easing. I will discuss the concept of “ease-in” and “ease-out” in another article; for now, simply recognize that animation in CSS3 has built-in organic, natural motion. If you want a more “mechanical” feel to the motion, you can achieve it by changing a property known as the transition timing function to linear:

1. img#biplane:hover {
2. -webkit-transition-duration: 1s;
3. -moz-transition-duration: 1s;
4. -o-transition-duration: 1s;
5. transition-duration: 1s;
6. -moz-transition-timing-function: linear;
7. -o-transition-timing-function: linear;
8. -webkit-transition-timing-function: linear;
9. transition-timing-function: linear;
10. -moz-transform: rotate(7deg);
11. -o-transform: rotate(7deg);
12. -webkit-transform: rotate(7deg);
13. transform: rotate(7deg);
14. }

It’s possible to set the timing function to other values, or even to mathematically plot out Bezier function easing curves:

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)

Finally: if you’ve used the code above, you’ll see that the transition works on mouseover, but not when you move the mouse off the element: when that occurs, the image jerks back to its original position. To solve this problem, we do something that may appear counter-intuitive at first: we move the transition information out of the :hover state declaration and into the default state. At the same time, we should recognize that this code is getting a little long, even for CSS3: transition properties, like everything else, can be shortcut. Let’s move the code and re-write it at the same time:

1. img#biplane { width: 500px; height: 415px;
2. border: 20px solid #ffe;
3. -moz-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
4. -webkit-box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
5. box-shadow: 10px 10px 3px rgba(0, 0, 0, 0.3);
6. -webkit-transition: all 1s ease-in-out;
7. -moz-transition: all 1s ease-in-out;
8. -o-transition: all 1s ease-in-out;
9. transition: all 1s ease-in-out; }
10. img#biplane:hover {
11. -moz-transform: rotate(7deg); -o-transform: rotate(7deg);
12. -webkit-transform: rotate(7deg); transform: rotate(7deg); }

Perhaps the easiest way to think of this is that we previously indicated that the transition only occurred on the way to the hover state; with this change, we are indicating that the transition affects all effects, over a 1 second period, using ease-in and ease-out, both to and from the default state.

Tags

• CSS3
• webdeveloper4

Mar 08 2011

Course Overview: Cascading Style Sheets (CMPN 266, Continuing Education, SAIT)

• 0 comments

Duration:

1 three-hour night class per week for 6 weeks

Prerequisite:

A passing grade in CMPN 215

Description

This course provides learners with the skills to present pages in an attractive manner with CSS.

Evaluated Components

• Two in-class quizzes (few multi-choice options, closed-book), worth 10% each, for a total of 20%
• One in-class or homework exercise (open book), worth 20%
• One assignment (creating and uploading a website) worth 40%
• One professionalism mark, worth 20%. Half of this mark is attendance (detailed below) and half is attitude (your participation in the class and interaction with your instructor).

Expectations of Students

Expectations for students are the same as for CMPN 215.

Expectations of Instructor

Expectations for your instructor are the same as for CMPN 215.

Tips for students

• Time management is the most valuable skill you have.
• SAIT has more resources than you are probably aware of. We have counseling services, health services, faith centres, student tutoring and groups. Help is there for you, but you have to choose to use it.
• Remember that I cannot and will not judge your work based on the effort you feel you have put in, how hard you have tried, or the hours you have spent. All I can evaluate is the work you give to me. That work will and must be judged on its merits, not your own.
• Conversely, you should not feel that a poor evaluation of your work is necessarily a reflection on you, or a judgement of your worth.

Tags

• CSS

Mar 07 2011

CSS3 2D Transformations: Skew, Scale, and Translate

• 0 comments

Compared to rotate, the remaining 2D transformations in CSS3 are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying the width and height of images, or positioning elements using relative or absolute position. The primary advantages of using the new CSS3 values is that they are more direct, and can be animated with great ease.

skew

skew is probably the trickiest of these to understand, as its values (in degrees) don't appear to apply in the ways that one might expect. To me, the easiest way to consider skew is to think of the values as “pulling” on opposite sides of the element box to create the angle specified:

As this would appear in a CSS declaration:

1. img#car { -moz-transform: skew(21deg); -ms-transform: skew(21deg); -o-transform: skew(21deg); transform: skew(21deg); }

By default, skew is in the horizontal (x) direction. You can also skew in both directions at once ( skew(21deg,10deg) ) or in separate directions ( skewX(21deg), skewY(10deg) ). Negative skew values will tilt the element in the opposite direction. Used together, and with careful positioning, it is possible to produce a “box” effect from three equally-sized images, a hint that 3D effects are achievable in CSS3.

scale

scale is a simply a scalar value: a multiplier by which the size of the element is decreased or increased:

1. img#car { -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); }

As with rotate and the other CSS3 transformations, a scaled element does not influence its surroundings.

Why would I use CSS3 scale when I have width and height?

Because width and height only directly influence the size of images: using the properties on anything else, such as a <div> constrains the shape of the element, but does not scale it. Try putting an image and several paragraphs in a div and applying width, height and scale to see the differences.

Again, scale can be constrained to the x and y values alone, via scaleX and scaleY.

translate

translate moves the element from its current location. In this respect, it is very similar to relative positioning. The property doesn't offer many advantages over relative positioning in itself, but it can be animated very smoothly in CSS3... examples of which we will explore next.

1. img#obj { -moz-transform: translateX(2em); -ms-transform: translateX(2em); -o-transform: translateX(2em); transform: translateX(2em); }

Tags

• CSS3
• webdeveloper4

Mar 06 2011

Course Outline: Cascading Style Sheets (CMPN 266, Continuing Education, SAIT)

• 0 comments

1. Introduction to Cascading Style Sheets

   Introduction

   XHTML is about the semantic markup of data; CSS is the appearance of that data. Using XHTML alone will make a functional web page; CSS can make it beautiful.

   Learning Outcome

   Outline the origins and fundamental concepts of Cascading Style Sheets (CSS).

   Objectives

   1. Discuss the history of CSS.
   2. Describe browser support for CSS.
   3. Discuss the importance of structure/style separation.
   4. Diagram the order of CSS influence: inline, embedded, and linked.
   5. Explain basic CSS syntax and write a simple CSS declaration.
   6. Describe the cascading mechanism and inheritance
   7. Discuss media type support in CSS.
   8. Create an external style sheet.
   9. Write a comment in a style sheet.

2. CSS Color & Units

   Introduction

   In order to create pattern and structure, color and proportion, via CSS color specifications and measurements, are used.

   Learning Outcome

   Use CSS qualities of color and units to modify the appearance of XHTML elements.

   Objectives

   1. Define the four methods by which color may be defined in CSS.
   2. Define the five absolute and three relative units of measurement that can be used in CSS.
   3. Describe concrete and fluid philosophies of web design, and the appropriate units of measurement for each.

3. CSS Selection Techniques

   Introduction

   So far we have learned how to use CSS to alter the appearance of basic elements, such as paragraphs and elements. However, there will always be occasions when you need to drill down to unique, specific uses of markup on a page. CSS has a number of selection methods to achieve this.

   Learning Outcome

   Use CSS selection techniques to gain access to different elements in an XHTML document.

   Objectives

   1. Describe basic and advanced selection techniques.
   2. Use class and ID attributes.
   3. Apply style rules to text elements using various selection techniques.

4. CSS and Images

   Introduction

   Images, by themselves, are rendered perfectly in XHTML. However, it is only with CSS that we can position images with any kind of precision relative to text and each other, and place images in the background of elements.

   Learning Outcome

   Use CSS to modify the appearance of inline images and place images in the backgrounds.

   Objectives

   1. Describe basic and advanced selection techniques.
   2. Use class and ID attributes.
   3. Apply style rules to text elements using various selection techniques.

5. Customising the appearance of tables, forms and lists

   Introduction

   Even when they are used correctly in a web page, tables, forms and lists tend to be presented plainly. CSS can be used effectively to customise the appearance of these elements so that they retain their meaning but look like anything the designer wishes.

   Learning Outcome

   Use CSS to modify the appearance of inline images and place images in the backgrounds.

   Objectives

   1. Customise the appearance of lists.
   2. Modify the appearance of table elements.
   3. Customise the appearance of an XHTML Strict, semantic form.
   4. Create a navigation menu for a web site using XHTML and CSS.

6. Layout in CSS

   Introduction

   CSS can also be used to layout entire pages through the rules you have already learnt, together with judicious use of the div tag to group multiple XHTML elements together.

   Learning Outcome

   Use box properties together with float and position to achieve advanced web page layout.

   Objectives

   1. Describe the use of box properties, float and position in CSS.
   2. Use divs to create a complex web page layout.
   3. Customise the appearance of an XHTML Strict, semantic form.
   4. Use absolute positioning to overlay elements on a web page

7. Advanced CSS: CSS Levels 2 & 3

   Introduction

   CSS has continued to grow and be developed on. CSS2 is a well-supported addition to the CSS we have learnt to this point; CSS3 while still in draft as of this writing, has a number of exciting features, many of which are supported in cutting-edge browsers.

   Learning Outcome

   Use CSS Levels 2 and 3 to achieve advanced web page layouts.

   Objectives

   1. Describe CSS Levels 2 and 3 and browser support.
   2. Describe proprietary browser versions of draft CSS 3 properties.
   3. Apply pseudo-classes to style portions of elements.
   4. Apply advanced selectors for more precise selection of elements

Tags

• CSS

Mar 05 2011

New Blog Features: Upcoming Events & Feature Bar

• 2 comments

As promised, two new features for the blog this weekend:

• “Upcoming Events” now heads up the sidebar (or appears immediately under the colophon, for those not signed in). All visitors to the blog will see events of broad interest; signed-in users who are current students will see additional events that pertain to them, such as dates for upcoming quizzes and assignments in classes they are taking with me. (Specific student calendar entries are yet to be made; everyone is currently between classes or assignments).

• A feature bar at the top of the page directs visitors to a random array of past articles. The current selection is not yet great, but will broaden with time, producing greater variation: with almost 300 blog entries, there are a great many to choose from.

I also added a brief but authoritative statement regarding ads at the bottom of the sidebar. I believe that everyone experiences plenty of “advertising impressions” during the course of a day, online and off, and have no desire to add to that deluge. Suffice it to say that despite encouragements to “monetize” this blog, you will never see advertising anywhere on this site. It will remain completely free for use, with its content licensed under Creative Commons, forever.

I hope you find the new features useful, and welcome any feedback or suggestions in the comments.

Tags

• sitenews

Mar 04 2011

3DSMax Architectural Visualisation

• 0 comments

One of the areas in 3D I enjoy most is visualization, particularly the design, lighting and rendering of exterior architecture. When I have the opportunity, I like to be paid for it, too. This is a draft render for a proposed 8-plex condominium project by Traverse Developments. The model was built and rendered in 3DSMax, with foliage added from the Onyx library and sky rendered by Ozone.

Tags

• 3D

Mar 03 2011

Invoicing for Multimedia Work

• 1 comment

An invoice is a specification of, and request for, payment for services rendered. Invoices are simple to complete, but just like contracts, they need to communicate expectations clearly and concisely. In the case of invoices, the following information is required:

1. Contact information for both parties.

2. An invoice number, if you expect to do repeat business with the client.

3. Specification of the work completed.

4. Statement of due date for payment.

5. Means by which payment will be accepted (usually credit or cash)

6. Clarification if this is a partial payment for ongoing work.

A typical invoice would look something like the following. As before, this invoice does not constitute legal or accounting advice, and I have no responsibility for losses or damages incurred.

Invoice No. #001

From: (your name and address)

To: (client's name and address)

For:

Web development
            40 hours @ $45 per hour            $1,800                       

Photography
            20 hours @ $40 per hour               $800

Total                                                      $2,600

The hours billed in this invoice represent 60% of the total estimated work for development of the website for XYZ, per the contract signed on ___(date)___.

Payment by cheque or cash is accepted. Payment is requested within 14 days of receiving this invoice.

With thanks in advance,

(your name)

Be sure to break down the work completed by hours. You should include travel and meeting time if they have been specified as chargeable units in the contract.

Should You Charge GST?

Under current Canadian law you only need to charge GST if you make above $30,000 a year via the work. If you are freelancing fulltime, this is a real possibility, and you should register for GST in order to charge the tax and remit it to the government. If you are only working on a casual or part-time basis, it is not usually necessary to charge GST. However, some feel that charging GST makes the freelancer "look more professional", and some businesses will insist that you do so for their own tax and accounting purposes. It is also possible (depending on income levels) for some of the GST you charge to be refunded to you. GST registration is online and free.

Tags

• webdeveloper2

• Showing 1 – 9 of hundreds
• >
• Oldest

This content by Dudley Storey is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 Canada License.
Site written in XHTML 1.0 Strict, CSS Levels 1, 2 & 3