Clever Geek Handbook

Re-run the old project replacing the background images with the new CSS3 rules

I need to update a 3 year old website that maintains the same look and feel and improvements in coding techniques using extensive CSS3 technologies to make it modern and responsive.

This was a design that used transparency, embossing, and clipping, originally laid out in Photoshop and then encoded using background tile images cut from the original.

Here's a detail that synthesizes the calls to the solution:

enter image description here

Here are the key topics:

  • The header has a semi-transparent background that shows the body alone, but also has 3D borders with a horizontal gradient from left to right.
  • The background of the title (and its border) also has an embossed look with highlights and shadows at the top left and right corners.
  • The site's logo and title appear above the header background in the clipping area.

Here's my actual WIP to recreate this with CSS3 only :

enter image description here

As you can see, there are still missing, embossing-effect , border gradients and most of all the logo > (at the moment I just placed the image taken from the original layout).

Can you help me get the most similar result in the original?

Thank.

+3


source to share


2 answers


You can create a 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>
Run codeHide result


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

+3


source


For embossing you can use an insert box shadow or a background with a linear gradient .

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



For the "logo clipping region", the idea would be to use a positioned parent div with a border radius and an appropriate gradient background.

0


source






More articles:


All Articles