13 {{ upvoteCount | shortNum }}
13 {{ upvoteCount | shortNum }}

How to code a site like this?

by Gurujyot
11 replies
  • WEB DESIGN
    • |
Hi,

My first post, forgive any transgression .. I occasionally customize Wordpress templates or help a client with their sitebuilder design, although I don't consider myself a 'web designer'.. I'm Ok with HTML/CSS, some javascript.

I'd like to offer local businesses a design similar to this:
http://www.crunchbase.com/assets/ima...2/143162v1.jpg

Note the extensive transparency and reliance of high quality images. I've sent this and links to similar designs around, and I get enthusiastic responses, and people ready to pay me to make them a site like this.

Is there an easy way to do this, or would I have to hand code something loaded with .png ?

G.
#code #site
  • Profile picture of the author Azlan
    Hi Gurujyot,

    I think you need to check the css3 alpha transparency, but there's always disadvantage this latest technology we have today so i guess you need to us .png for browser that don't have support of the css3 alpha transparency that's make your code work both old and new browser.
    Signature

    New WSO - Coming Soon...

    {{ DiscussionBoard.errors[6740677].message }}
    • Profile picture of the author Gurujyot
      Azlan,

      Makes sense, thanks for the clear answer. Sometimes the simple solution is right in front of us..
      {{ DiscussionBoard.errors[6832855].message }}
  • Profile picture of the author rangerover
    Banned
    [DELETED]
    {{ DiscussionBoard.errors[6832960].message }}
    • Profile picture of the author Gurujyot
      rangerover,

      With all due respect, I'm here looking for serious advice. I see you're new here. Your above post speaks volumes to your inexperience in web development. I don't even know where to begin.. please review other threads and posts here to get a feel for what constitutes a legitimate post or reply.
      {{ DiscussionBoard.errors[6833074].message }}
  • Profile picture of the author dsimie
    Search the similar design in wp themes. OR you have to do the desgin hand coding. Strong CSS and wp theme coding knowledge needed.
    Signature
    http://www.bestseowebdirectory.com
    http://www.seoptimizationtools.com
    {{ DiscussionBoard.errors[6833304].message }}
  • Profile picture of the author Rustyryan
    I will suggest google as google is the answer for any type of problem and query . So google what you want to do.
    {{ DiscussionBoard.errors[6833591].message }}
  • Profile picture of the author manohar1310
    its hard to tell the exact design with the help of a img.
    Here's a trick i follow for copying competitor design(works most of the time)
    See the page where the design is situated.Right click and see the source code of the entire page.
    Now search for the word on the frame(eg:spicy coconut french) and you can see a code.
    Mostly is the code which is being used for the effect.
    If it does not work.Copy any line from the code you just got and paste in google and search.you will find similar sites which will help you.If you are lucky and it turns to be a plugin/addon or a theme than you will get it instantly.
    {{ DiscussionBoard.errors[6833673].message }}
  • Profile picture of the author Roomi
    First learn CSS3 then call yourself master in designing
    {{ DiscussionBoard.errors[6833700].message }}
  • Profile picture of the author SteveJohnson
    That particular site was done using alpha transparency in the container background, at least the large container. Note that this is different than opacity, which also affects the text.

    Code:
    #container { background: rgb( 0, 0, 0, 0.75) }
    Also, you need to specify the background color in rgb, not hex, to take advantage of alpha transparency.
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[6834524].message }}
  • Profile picture of the author luxl85
    Just check its css and code source. and you will know many thing.
    Signature

    My resource: Amazon sale

    {{ DiscussionBoard.errors[6834894].message }}
  • Profile picture of the author copilu0
    You can do this with alpha transparency but be careful with different browsers issue.
    Signature
    Snow Blower Garage
    Electric Toothbrush Reviews
    {{ DiscussionBoard.errors[6836358].message }}
  • Profile picture of the author Big Squid
    The second you start designing with advanced (even semi-advanced) css techniques, you'll got to bed every night cursing IE.
    {{ DiscussionBoard.errors[6841059].message }}

Trending Topics