Quantcast Steps to making the edges fade wawy on a photo ? - digitalFAQ Forum
Go Back    Forum > Digital Photography > Photo Cameras: Buying & Shooting

Reply
 
LinkBack Thread Tools
  #1  
10-24-2011, 03:07 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
I would like to use one of my photos as a backdrop image on a web page for my project.

I would like the edges to be soft instead of the regular hard edge of my photo.

In my Web coding class, we are doing project 1, where we use the html from this site; http://www.csszengarden.com/

the site has different web designs that all used the same html code, but each site is different because they used their own CSS.

in my class we are supposed to do the same thing; use the html, but create & customize our own css to make it our own.
Reply With Quote
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
10-25-2011, 04:03 AM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,319
Thanked 371 Times in 340 Posts
Quote:
Originally Posted by Sossity View Post
I would like to use one of my photos as a backdrop image on a web page for my project.
Generally speaking, using a photograph as a background is more often bad design than good.

I know two photographers that used to do it -- then stopped. It just didn't look good, and distracted from their work on display.
http://www.jessespeer.com and http://www.dustydoddridge.com

Quote:
I would like the edges to be soft instead of the regular hard edge of my photo.
This is generally done on the image itself, in Photoshop. It's a simple filter applied to the edge of the image, after the image has had its canvas expanded some, and a background applied (all white, black of gray, in most cases).

I'm not readily aware of any CSS that would instruct a photo to be blurry on edges. And even if there were, I would expect it to be erratic code, meaning all browsers would display it differently (and you'd have to "hack" the CSS and/or HTML to make it cross-browser compliant). That's a serious can of worms, and takes forever. If you ever wondered why digitalFAQ.com's redesign took so long, this is it. IE6 vs IE7 vs IE8 vs Mozilla/Firefox 3+ vs Webkit/Safari 4+ vs Webkit/Chrome. Even now, some of the H1-H6 tag spacing is wrong in IE7 and Chrome, but it's very minor (few pixels at most). IE7 is being phased out anyway.

Quote:
In my Web coding class, we are doing project 1, where we use the html from this site; http://www.csszengarden.com/
Any way to see the full "project 1" specs/requirements?

Quote:
the site has different web designs that all used the same html code, but each site is different because they used their own CSS.
Yep. That's the basis for many WordPress themes.
You want to separate content from wireframe/coding from design. It's good practice.

Quote:
in my class we are supposed to do the same thing; use the html, but create & customize our own css to make it our own.
Yep. It's a mix of using unique images, as well as CSS (because CSS calls images in many cases).

- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #3  
10-25-2011, 04:40 PM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
Here is some of the content I copied from the project 1 page from my class.

Quote:
Basic Guidelines for CSS Zen Garden Site
You will be tasked with following the guidelines of the CSS Zen Garden project as closely as possible for Project-1. This is no small task, depending on your layout decisions. Read this page carefully.

Should you decide to actually submit your design for consideration, you will need to follow these standards as closely as possible. They have become more flexible with the standards because this online designer showcase is about 10 years old now, but still very, very relevant!

The Base HTML File

Attached Files:
File Download HTML base file (13.109 KB)

Download the file below and use it as your base for designing the Zen Garden project page. NOTE: You are supposed to use existing HTML, ids, and classes for your styling rules. Try to work as much as possible just within the provided framework.

In fact, you won't change ANY content.

(You might have to right-click the downloadable file above to save the file to your computer if it shows the file in this window when clicked normally.)

Previous Student Work

Here's a simple list:
Quote:

The guidelines if a student wants to actually submit their project to the CSS Zengarden project;

css Zen Garden

Submission Guidelines

Before submitting:

Have you tested in as many browsers as you can? Windows and Mac? (a good answer: yes)
Can you scale your fonts up a few levels? (a good answer: yes)
Do you get a horizontal scrollbar at 800x600? (a good answer: no)
There have been many garden/asian imagery themes. In order to be considered, yours would need to be exceptional.
Same goes for intentional horizontal-scrollbars.

While none of the above points alone disqualifies a design, please try to address as many as possible before submitting.

As well, keep in mind that I have a purpose: the Zen Garden is about showcasing high–end CSS design. The cream of the crop will become official Garden designs, so treat this as you would any other portfolio piece.

Only official submissions will be added. If your design is borderline, but not quite there, I will take the time to send you a personal critique and make suggestions for how you can improve it. In both cases, personal communication is guaranteed.

Please don’t be offended if I don’t choose yours, as sometimes even very good design doesn't make it into the Zen Garden for one reason or another.

Notes on Copyright

While you retain copyright of your images, submitting a design to the Zen Garden requires open licensing of your CSS file so that your work may be shared, studied, and enjoyed by everyone else.

The only exception to the above is that by submitting you agree to extend a limited license of your images to the CSS Zen Garden and its proprietor, Dave Shea, for the purposes of display and promotion of the site. The images will not be re-sold or re-used in any context other than the original Zen Garden design you have submitted, although this design may be reproduced in other media such as magazines or books for the sake of promoting the project.

And finally, by submitting your design, you grant the Zen Garden perpetual license to re-use your images under the above terms. You may decide to re-sell or later re-use your images, which is perfectly acceptable under the terms of this license, but you may not revoke the original license to the Zen Garden. In plain English: if it goes in, it stays in.

Return to the css Zen Garden | mezzoblue Home
The rest of the project in my class is a series of links to videos the instructor created, & I am not sure how you would get into my blackboard page to see the assignment.
Reply With Quote
  #4  
10-26-2011, 11:01 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 11,917
Thanked 2,170 Times in 1,870 Posts
I'm having a hard time understanding what's going on here.

Moving forward, be sure to use the QUOTES function to quote something copied/pasted from elsewhere.
And if the original location had headlines/etc, try to use Bold marks to recreate the appearance of what was copied.
Use - to recreate bullet points.

I've edited your post, to try and "fix it", but I'm still having a hard time following what's going on here.

I've removed the Blackboard link -- it won't work unless you're a logged-in student.
I'm not sure if the URL has any identifying information in it (student ID, for example), so that's the main reason for removal.

__________

I will say this ... I would never agree to:
Quote:
And finally, by submitting your design, you grant the Zen Garden perpetual license to re-use your images under the above terms. You may decide to re-sell or later re-use your images, which is perfectly acceptable under the terms of this license, but you may not revoke the original license to the Zen Garden. In plain English: if it goes in, it stays in.
I'd tell the teacher to get bent. If they want my work, they can pay for it.

__________

If you're supposed to fade an image with CSS only, it can't be done. Not that I've seen.

- Did my advice help you? Then become a Premium Member and support this site.
- For sale in the marketplace: TBCs, workflows, capture cards, VCRs
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Errors on the edges of converted VHS tapes? admin Capture, Record, Transfer 1 04-20-2012 01:24 AM
Steps to use Paragon Snapshot for Mac OS back up ? Sossity Computers 1 10-25-2011 03:54 AM
JVC HR-S9911U picture color fade problem. gzmachine Video Hardware Repair 7 03-05-2011 10:14 AM
Extending the edges to bleed area manthing Project Planning, Workflows 2 04-02-2010 03:50 AM
Near perfect conversion steps myron Capture, Record, Transfer 1 05-07-2004 02:46 AM

Thread Tools



 
All times are GMT -5. The time now is 06:47 PM