Photoshop Question posted in
The official user guide can be found here.

Re-vamp an old design, replacing background images with new CSS3 rules – Photoshop

I have to re-vamp a 3 years old website mantaining substuntially the same look&feel while upgrading coding technologies with extensive CSS3 techniques, to make it modern and responsive.

This was a design that used transparency, emboss and cutted areas, originally crated in Photoshop, and then coded using background tile images cutted from original one.

A detail, that synthetizes challenges to solve is shown here:

enter image description here

Here the the key topics:

  1. Header has a semi-transparent background that shows the body’s one, but has also 3D-look borders with an horizontal gradient from left to right.
  2. Header’s background (and its borders) has also an emboss look with light and shadows in upper-left and down-right corners.
  3. Logo and site name are over the header background in a cutted area.

Here, my actual WIP to re-create this with only CSS3:

enter image description here

As you can see, are still missing, emboss-effect, border-gradients and above all….. logo cutted area (for the moment I simply placed over an image, taken by original layout).

Can you help me to get the most similar result to original one?

Thank you.

Tags:

2

Answers


  1. 0

    For the emboss you can use an inset box shadow, or a background with a linear gradient value.

    For the gradient border you can use the border-image property with a linear gradient value.

    For the “logo cutted area” an idea would be to use a positioned parent div with a border radius and a matching gradient background.

    Login or Signup to reply.
  2. 0

    You can create the shape using SVG paths :

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="110" width="600" viewBox="4 4 92 16">
    <path d="M 5 6 a 1 1 0 0 1 1 -1 h 14 a 4.2 4.2 0 0 0 8 0 h1 a 1 1 0 0 0 1 1 h 49 a 1 1 0 0 0 1 -1 h14 a 1 1 0 0 1 1 1 v 10 a 1 1 0 0 1 -1 1 h -88 a 1 1 0 0 1 -1 -1z" fill="none" stroke="black" stroke-width="0.6" />
</svg>

    To this basic shape, you can fill gradients, photos, etc.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search