W Toku

Convert Image-Based Buttons to Flexible CSS buttons

PROJECT SUMMARY:

This is a very simple project for someone with strong CSS experience and modest graphics experience.

This page ([url removed, login to view]~kdweprop) has two buttons, one for email and one for download. Those buttons currently use CSS to achieve the rollover effect. The basic button is dark gray with white text. During the "hover" condition, the button changes image to light gray with black text. Both have decorative touches that must remain.

Your Objective:

Make the button text and associated rollover-effect pure CSS. Enable us to make new buttons through code, or change the button text without requiring new graphics.

This project is primarily a change to the CSS file, although the button text will be created in the HTML file. Use float. Position:Absolute is not acceptable. Buttons might be used in different places on the page in the future.

## Deliverables

PROJECT PLAN:

There are four (4) deliverables and five (5) specific tasks for this project. Once those tasks are complete,

you will deliver two code files, one HTML and one CSS and two graphics files if you must create them. The project plan below is accompanied by the QA tests which must succeed for this project to be accepted.

Deliverables:

1) updated CSS file (CSS code replacing graphic)

2) updated HTML file (button text in HTML)

3) blank basic background button (preferably code, not an image)

4) blank hover background button (preferably code, not an image)

Tasks:

1) Create a blank button "basic" image either as a graphics file, or (preferably) eliminate the graphics altogether and do some CSS magic.

2) Create a blank button "hover" image either as a graphics file, or (preferably) eliminate the graphics altogether and do some CSS magic.

3) Code the CSS for incorporating new button text on the basic image.

4) Code the CSS for incorporating new button text on the hover image.

5) Include maintainence documentation through comments

You may use a 'blank' version of the graphic, providing the button text can be changed in the HTML. If you can make a button like the one shown without using graphics, that would be amazing.

Comment in your bid whether or not you're amazing. Bids that do not comment on your amazingness will be discarded. Bids that brag about how amazing you are without saying specifically *why* you're amazing at this sort of project will be discarded. Not being amazing will not be held against you. Explaining with a valid reason why you would avoid using your amazing skills for this particular task will get you extra points.

Resources:

1) Rollover effects for buttons are already coded in current CSS file.

2) The [url removed, login to view] file may be downloaded from the live site.

3) The CSS file may be downloaded from the live site.

QA Tests:

All testing will be done initially on Firefox 3. Cross-browser functionality is required.

Base Code Tests:

1) Have references to the buttons-with-text images been eliminated from the code?

2) Can the button text be changed through the HTML?

3) Does the code avoid using "position:absolute"?

4) Can the button style be modified in the external CSS file without impacting other styles?

5) All styles defined in external CSS file - NO styles/layout/design defined in the HTML file

6) If images are created - are they referenced in the correct images directory?

7) HTML is valid, no errors - based on online HTML validator ([url removed, login to view])

8) CSS is valid, no errors - based on online CSS validator ([url removed, login to view])

9) Are there comments/instructions in the HTML file how to add new buttons?

10) Are there comments/instructions to the external CSS file how to add new buttons?

11) Do the CSS buttons have the same look and feel as the original images?

Browser Rendering

1) Do the buttons function as they did in the sample? (Firefox 3)

2) Do the buttons display as they did in the sample? (Firefox 3)

3) Is the updated button text properly aligned in the button? (Firefox 3)

4) Do the buttons function as they did in the sample? (IE6)

5) Do the buttons display as they did in the sample? (IE6)

6) Is the updated button text properly aligned in the button? (IE6)

7) Do the buttons function as they did in the sample? (Safari) (Simulator: [url removed, login to view])

8) Do the buttons display as they did in the sample? (Safari) (Simulator: [url removed, login to view])

9) Is the updated button text properly aligned in the button? (Safari) (Simulator: [url removed, login to view])

Umiejętności: CSS, Inżynieria, MySQL, PHP, Zarządzanie projektem, Architektura oprogramowania, Testowanie oprogramowania, Tłumaczenie, Usługi hostingowe, Administracja serwisami WWW, Testowanie serwisów WWW, XML

Zobacz więcej: xml to xml online, xml online validator, text effect online, task five, simulator c++ online, rollover css, qa online, online qa testing, online qa, online firefox browser, new graphics styles, image in html 5, html 5 buttons, how to use css, how to make text graphics, how to graphics, how to get firefox version, how to get experience in graphic design, how to do graphics, how to create graphics online, how to create a directory using php, graphic image design online, graphic design referenced, graphic design defined, firefox float

O pracodawcy:
( 2 ocen ) United States

Numer ID Projektu: #3323557

Przyznane użytkownikowi:

teddz

See private message.

$24.65 USD w ciągu 2 dni
(33 Ocen)
4.3

5 freelancerów złożyło ofertę na średnią kwotę w wysokości $26 do tego projektu.

stevebryant

See private message.

$17 USD w ciągu 2 dni
(520 Ocen)
6.7
ecodes

See private message.

$34 USD w ciągu 2 dni
(111 Ocen)
6.5
spidyinfotech

See private message.

$29.75 USD w ciągu 2 dni
(86 Ocen)
4.8
webxite

See private message.

$25.5 USD w ciągu 2 dni
(4 Ocen)
0.3