Give an old design a makeover by swapping out background images for fresh CSS3 styles

I am tasked with modernizing a website that is 3 years old, while keeping the overall look and feel the same. I need to update the coding technologies using advanced CSS3 techniques to make it more responsive and contemporary.

The original design featured transparency, embossing, and cut-out areas, which were first created in Photoshop and then translated into background tile images for coding.

One specific challenge I need to address involves:

Key elements to consider include:

  1. The header has a semi-transparent background that reveals the body's background, along with 3D-style borders featuring a horizontal gradient from left to right.
  2. The header's background (and borders) also have an embossed appearance with light and shadow effects in the upper-left and bottom-right corners.
  3. The logo and site name are positioned on top of the header background within a cut-out area.

Below is my current work-in-progress attempt to recreate these effects using only CSS3:

As you can see, there are still some elements missing, such as the emboss effect, border gradients, and most importantly, the cut-out area for the logo (which I have temporarily placed over an image from the original layout).

Can you provide assistance in achieving a result that closely resembles the original design?

Thank you.

htmlcssresponsive-designcss-shapes

Answer №1

Using SVG paths, you have the ability to craft intricate shapes:

<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>

You can enhance this simple shape by adding gradients, images, and more.

Answer №2

To create the raised effect, consider utilizing an inset box shadow or a background featuring a linear gradient.

To achieve a gradient border, you can leverage the border-image property along with a linear gradient value.

For creating a cutout effect on the logo area, one approach could involve using a parent div positioned accordingly, featuring a border radius, and complemented by a matching gradient background.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop capturing mouse and keyboard events within a specific div element on all web browsers

I manage a website with forms that have jquery autosave features and are updated using ajax. These forms include various types of input elements such as textboxes, jQuery UI datepickers, and time pickers... <div id="content"> <form id="line1"&g ...

javascriptjqueryhtml

Inconsistency in div height caused by positioning disparities

My demonstration shows two lines that should appear equal in height, but one ends up looking thicker due to its top position. Even just adjusting the top position by 1px can make a significant difference in how they look. Is there any way to prevent this u ...

htmlcss

How can I locate the first word using XPath?

When dealing with the following HTML / XML code: <div class="contentBlock"> <h2> </h2> <h1></h1> <h1>DBS055 - single module packages</h1> </div> I am interested in extracting only the code D ...

htmlxmlxpathnsindexpathdomxpath

Have I incorrectly implemented responsiveness on my website?

I created my HTML using Bootstrap 3.3.7: <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content= ...

htmlcssbootstrap-modal

Using jQuery to send a POST request with a multidimensional form array

I developed a form that compiles data from various inputs into a multidimensional array. By using the standard form submission function, I can easily navigate to the target page where a PHP script interprets the multidimensional array correctly and generat ...

phpjqueryhtmlajax

Code to achieve smooth scrolling from a hyperlink to a specific div element

<div style="border-radius: 10px; border: 2px solid #a1a1a1; padding: 10px 20px; width: 94%;"> <ul> <li>Listing of course details by country <ul> <li><a href="#bdpindia">India</a></li> <li><a href="#b ...

javascripthtmlcss

After clicking the submit button, how can I eliminate the following: "config.php?username=++psw&Text=psw&submit=send?" and remain on the same page?

Whenever I hit the submit button on my form, PHP completes its task but instead of staying on the page (or simply reloading it), I am redirected to the same URL with '/config.php?username=technologies.%0D%0A++&submit = Send ". Is there a way ...

phphtml

Using Clojure Hiccup for crafting stylish information in a unique manner

I want to create CSS style using hiccup by specifying the "top" and "left" variables to position an element. Currently, my code looks like this: (html [:div {:style (str "top" top ";left" left)} "some text"]) The code above is not very clean. It ...

cssclojurehiccup

Utilizing Ajax and Jquery to dynamically adjust CSS properties, dependent on data from a specific MySQL row

I've been working on a system to automatically update a Scene Selection page whenever a new number is added to the permission table in Mysql. The PHP for the login and retrieving the number from the members table is working fine. My issue now lies wi ...

phpjavascriptjqueryhtmlajax

Swiper is encountering issues with resizing images correctly while the sidebar is in view

I'm facing an issue with incorporating the Swiper slider on my webpage. While I have a sidebar displayed, the Swiper image does not resize properly when the screen resolution is set to 1680x1050. The image gets cut off, but when I hide the sidebar, th ...

jqueryhtmlcss

Using HTML5 to overlay text on an image with a hyperlink

I'm interested in adding a hyperlink on top of an image using HTML5. Can you provide some guidance on how to achieve this? Regards, Ravi ...

javascripthtml

Apply unique colors to each accordion title in CSS

I am working with a bootstrap accordion and I want to customize the color of the h4 titles for the elements within the DOM. My goal is to have distinct colors for the first 4 elements, then repeat those colors. .my-platform-title:nth-child(2n+1) { c ...

htmlcsstwitter-bootstrap

I am experiencing difficulties with my jQuery animation function as it does not seem to be functioning properly despite successful

Can someone knowledgeable in jQuery and JavaScript please help me understand why this code isn't functioning as expected? The goal is for the image with the id "previmage" to expand and then shrink when the changeclass function is triggered. However ...

javascriptjqueryhtmljquery-animate

Using jQuery to access specific elements within the DOM by navigating through the document structure

I'm currently facing a challenge with using jquery's parents/siblings functions to locate specific input elements. Despite my efforts, I can't seem to get it right. Here is the HTML structure I am working with: <div id="ExtrasOptions"&g ...

jqueryhtmlparent-child

Using jQuery to append text after multiple element values

I currently have price span tags displayed on my website: <div> <span class="priceTitle">10.00</span> </div> <div> <span class="priceTitle">15.00</span> </div> <div> <span class="priceTitle">20.0 ...

javascriptjqueryhtml

Is it possible to customize the background color for particular days in FullCalendar?

How can I set background colors for specific days? While experimenting, I discovered this method: $('.fc-day15').css('backgroundColor','black'); The only issue is that the colors appear on the 16th day in the calendar grid, ...

jquerycssfullcalendar

Text in a class button that is not skewed

I crafted a button for my website using a CSS class, aiming for a parallelogram shape by utilizing the skew function. The code worked like a charm, giving the button the desired shape. However, I encountered a dilemma where the text inside the button also ...

htmlcss

Avoid refreshing the page and maintaining the most recent data inputted

On my HTML page, I am trying to implement a button that submits a form using a function. I have set up field validations, and when I click the submit button, it shows an error message but clears out the values I entered and refreshes the form. What I want ...

phpjavascripthtmlmysql

How can I extract data from HTML popup tables and charts using Python?

Currently, I am in the process of gathering data from for a machine learning project related to MMA. Specifically, my goal is to extract the DraftKings opening odds for each fighter by accessing the odds listed under the DraftKings column. By clicking on ...

pythonhtmlweb-scrapingbeautifulsouppopupwindow

What is the syntax for creating a temporary variable within an Angular HTML component?

Can someone help me figure out how to call a function within a loop? Is there a way to store the return value of the function as a temporary variable? I want to use this return value for display purposes. Here is an example of what I am trying to achiev ...

htmlangulartypescriptangular-componentstypescript2.0