Tips for incorporating shapes and decorative elements into your page design effectively

I have searched everywhere on the internet but couldn't find an answer to this question.

The question is simple: How can I add shapes or decorations to a page layout without causing it to look broken inside a responsive container?

Click here to view the image! I am struggling to find a way to add shapes without messing up the code or breaking the responsiveness of the container. If anyone has successfully done this, please share your method. Thank you in advance, and I hope this information helps someone else.

htmlcssbootstrap-5

Answer №1

To ensure proper positioning, it is recommended to add position: relative to the parent element and then utilize position: absolute; with relative units.

Additionally, it's important to assign a lower z-index for the decorative elements:

section {
    background-color: rgb(69, 83, 95);
    display: inline-block;
    position: relative;
    width: 70vw;
    height: 70vh;
}

.content {
    z-index: 2;
}

.element {
    position: absolute;
    z-index: 1;
    color: white;
}

.element1 {
    top: 20%;
    left: 20%;
}

.element2 {
    top: 80%;
    left: 30%;
}

.element3 {
    top: 50%;
    left: 70%;
}
<section>
    <span class="element element1">+</span>
    <span class="element element2">*</span>
    <span class="element element3">*</span>
</section>

Answer №2

When it comes to decorations without any specific meaning that needs to be conveyed to a screen reader, it's best to use them as background images. This can be done with SVGs or gradients, positioning and sizing each one relative to the dimensions of the main element using percentages.

By doing this, you can maintain a responsive design without adding unnecessary elements to the HTML.

While each decoration may appear separate, if they overlap, the one listed first in the background-image property will be displayed on top of those that follow.

Your CSS will likely include lines like:

background-image: url(svg1), url(svg2), url(svg3)...;
background-position: x1% y1%, x2% y2%, x3% y3%,...;
background-repeat: no-repeat no-repeat;
background-size: w1% h1%, w2% h2%, w3% h3%,...;

To determine the correct percentages, simply measure the image with any unit and divide by the width or height of the main element, then multiply by 100.

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

Send properties to the makeStyles function and apply them in the CSS shorthand property of Material UI

When working with a button component, I pass props to customize its appearance: const StoreButton = ({ storeColor }) => { const borderBottom = `solid 3px ${storeColor}`; const classes = useStyles({ borderBottom }); return ( <Button varian ...

javascriptcssreactjsmaterial-uijss

Ensure that the following div remains positioned beneath the current one

After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...

htmlcss

jquery activating the toggle function to switch between child elements

I'm facing a challenge where I can't use .children() in this scenario, as it won't work since the elements aren't technically children. Here's the snippet of HTML that I'm working with: <p class="l1">A</p> ...

javascriptjqueryhtml

Updating the navigation with a dynamic CSS class using jQuery

Hey there, I'm on the lookout for a simple and discreet method to dynamically add an "active" class to a navigation menu based on the current directory. Unfortunately, I am unable to modify the body tag with a custom class, ruling out a pure CSS solut ...

jquerycss

Ways to trigger a modal programmatically in the backend code?

My goal is to trigger the display of a modal when a button is clicked. The modal should be shown by clicking this button: <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1 ...

c#htmlcssasp.net

Tips for nesting an anchor tag within another tag

After reviewing various inquiries on this platform, it has been commonly believed that embedding an anchor tag inside another anchor tag is not achievable. However, I recently stumbled upon a website that successfully accomplishes this and I am curious to ...

html

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Linking text to specific spot on image

I am seeking a solution to anchor a text input box to a specific spot on an image. Although I can achieve this using CSS, the problem arises when I resize my window and the alignment of the input box is lost. While I want to allow some resizing of the win ...

htmlcss

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

Hello, I am currently using an accordion with Bootstrap 4 and Vue.js. Here is the code snippet: <div class="faq_accordion" role="tablist"> <b-card no-body class="mb-1"> <b-card-header header-tag=" ...

csstwitter-bootstrapvue.jsbootstrap-4

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

javascriptjquerycsswordpressgif

What is the best way to align text on the right side of a mui AppBar/Toolbar component?

How can I modify the menu bar to include a log out button on the right side? Here is the current code: <main> <AppBar> <Toolbar> <Typography style={{ marginRight: 16 }} variant="h6" className=" ...

cssmaterial-uitailwind-css

Having trouble locating the search bar element on Walmart's website?

I'm currently working on a bot that needs Selenium to interact with the search bar on Walmart's website, where it will input the name of a specific product and perform a search. However, I've encountered an issue where no matter what method ...

javascriptpythonhtmlseleniumweb-scraping

Guide to creating a square-shaped Bootstrap popup box

Is it possible to change the shape of the bootstrap popup box from rectangular to square? I need it to be a square box. Any help would be greatly appreciated. Thank you in advance. For reference, here is an example: https://i.sstatic.net/APZNt.png < ...

htmlcssbootstrap-4

Is there a way to bring my popup closer to my button?

Check out my jsfiddle example here: https://jsfiddle.net/annahisenberg/ft10ersb/34/ Currently, I have the following code: <div id="more_options_popup" style={{ left: this.ref.current.offsetLeft - 140 + "px", top: this.ref.current.offsetTo ...

javascriptcssreactjsdrag-and-drop

Utilizing LessCss for color transparency and variable declarations with @vars

I'm attempting to create a function using LessCss, but I am encountering an issue: .transparent-border (@alpha:.15, @color:'0,0,0', @type: solid, @size:1px) { @val: @size @type rgba(@color, @alpha); border: @val; } The problem er ...

csssyntax-errorless

Implementing a JavaScript file and ensuring W3C compliance

I recently purchased a template that included a javascript file in the main page with the following code: <script src="thefile.js?v=v1.9.6&sv=v0.0.1"></script> Upon inspection, I noticed there are two arguments at the end of the file ...

javascripthtmlw3c

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

javascripthtmlcssreactjsmaterial-ui

Is It Acceptable for CSS Code to Contradict Default CSS Code?

Imagine if my CSS looks like this: div { margin: 0; overflow: auto; padding: 1%; text-align: center; word-wrap: break-word; } This is supposed to be the default styling for all div elements. But what happens if there's another div with conflicting c ...

htmlcss

Incorporating jQuery to seamlessly add elements without causing any disruptions to the layout

I'm looking to enhance the design of my website by adding a mouseenter function to display two lines when hovering over an item. However, I've encountered an issue where the appearance and disappearance of these lines cause the list items to move ...

javascriptjqueryhtml

Uploading Blobs using JavaScript and FormData

Currently, I'm encountering an issue with uploading a blob generated in JavaScript to my server. The main concept involves a user uploading an image, which is then center cropped and downsampled using JavaScript before being transmitted. Although the ...

ajaxhtmlfile-uploadxmlhttprequestmultipartform-data