Creating Unique Designs with Multiple Shapes and Elements using Clipping Masks

I have a design piece to create that I initially built using three separate square div containers with independent background images. However, this method feels rigid to me as it requires chopping up and restaging a new image each time it needs to be changed, in addition to being bulky. Ideally, I would like to use a single image across each element container for easier updates and to reduce unnecessary server requests. Any suggestions for a more dynamic approach, possibly involving JavaScript? Your help or guidance in this matter would be greatly appreciated. Below is the current structure of how it is built, with a snippet of the design mockup for reference:

https://i.sstatic.net/8N6A2.png

HTML

<div class="grid-container">
  <div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div>
  <div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div>
  <div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div>
</div> 

CSS

.gi {
  background-position: center center;
  background-size: cover;
  width: 32.333%;
}
.grid-1 {
  margin-right: 1%;
}
.grid-2 {
  margin: 0 1%;
}
.grid-3 {
  margin-left: 1%;
}

Answer №1

It turns out I discovered a clever workaround instead of using clipping. I decided to create two pseudo borders within a wrapper containing the desired background image. Each border was given the appropriate background color to act as dividers. Check out the solution and jsfiddle link below!

HTML

<div class="social-blocks flex" style="background-image: url(http://localhost:8888/sts-store/wp-content/uploads/2016/01/eric.jpg)">

    <div class="social-block auto-ar oneone flex align-center-center block-1" style="height: 381px;">
        <div>facebook</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-2" style="height: 381px;">
        <div>twitter</div>
    </div>
    <div class="pseudo-margin"></div>
    <div class="social-block auto-ar oneone flex align-center-center block-3" style="height: 381px;">
        <div>instagram</div>
    </div>
</div>

CSS

.align-center-center {
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -o-justifty-content: center;    
}
.flex {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
}
.social-block {
    width: 32.333%;
    overflow: hidden;
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 28px;
    font-style: italic;
}
.social-blocks {
    margin-bottom: 2%;
    background-position: center bottom;
    background-size: cover;
}
.social-blocks-bg {
    width: 100%;
}
.pseudo-margin {
    width: 2%;
    background-color: rgb(247,247,247);
}

https://jsfiddle.net/942g38qv/8/

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

Integrating AJAX functionality into a PHP webpage with various options selected

I'm a beginner coder looking for some assistance. Currently, I have a page with four select inputs, each with two options. When all selections are made and the submit button is clicked, a specific song out of 16 based on the choices will play in an a ...

Learn how to execute JavaScript code in Selenium without launching a web browser

I am currently using the Selenium API for web scraping on pages that contain JavaScript code. Is there a way to retrieve the code without having to open a web browser? I am still learning how to use this API Is this even feasible? ...

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

Troubleshooting: Select2 Search Functionality Error

After working with the select2 plugin for some time, everything seemed perfect until now. I have a page with 3 selects that load data and function properly, as well as multiple selects inside a popup. The appearance is good, but the search field is not al ...

Interact with users on a website by using PHP to process form data

Here is the code snippet I am struggling with: <form action="profiles.php" method="POST" name="SearchSimple" id="SearchSimple" > <input name="search" id="s" style="width: 150px;" type="text"> <a style="display: inline-block; widt ...

Ways to troubleshoot CORS issue while working with pseudo API?

While utilizing a mock API, I encountered the familiar error message: "No 'Access-Control-Allow-Origin' header is present on the requested resource.". Despite watching videos and reading articles on this issue, the solutions provided we ...

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

I'm currently working on a script for a back to top button that will be placed in the footer of my website. However, I'm running into an issue where I'm getting an error message saying "Cannot read property 'top' of undefined". Any ...

The appearance of the Bootstrap button is not displaying correctly

My current button looks like this: https://i.sstatic.net/PyP8v.png As seen in the image above, there is something strange at the back of the button. How can I resolve this issue? I am working on a small project using Django and Bootstrap. Thank you in a ...

steps for transferring a shallow copy of an array to a function

How can I adjust this code so that when I press each button, the console.log displays a different slice of the array instead of always showing me the last 20 elements? for (var i = 0; i < array.length; i++) { var b; var NewArr = []; ...

Exploring the process of transferring a variable from Frontend to Backend via a GET API in ReactJS with an Express API

When working with my freight Shipment table, I need to access the email of the logged-in user in order to perform some frontend tasks. However, I am struggling to retrieve this information using the Axios.get() method and use it to query my MySQL DB. In t ...

Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

In my pages, I have a menu where the landing page menu is initially highlighted. However, when I move to the next menu, the previous landing page highlight remains instead of being removed while swapping the menu. I am using Angular.js and angular ui-route ...

Is it possible to iterate over an enum using Object.entries<T>(Enum).map() in TypeScript, or does it only function with string-based enums?

Currently, I am in the process of developing a react form that requires users to select options related to a job. These options are represented by enums, with some being string-based and others number-based. For instance, here is an example of a string-ba ...

I'm having trouble understanding why I am not receiving any response with the "form.submit()" function inside xhr.onreadystatechange() in JavaScript/AJAX

When I try to use the form.submit() function in response to xhr.onreadystatechange, it doesn't work as expected. Below is my login form: <form action="user_home.php" method="post" id="loginForm" > <tr> <td colspan=2>Members ...

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

Exploring Hover Effects in Reactjs and Material UI

I've been working with reactjs and material ui, but I'm having trouble changing the background color of selected items in various components, like in the SelectField. <SelectField floatingLabelText="Choose a sport" value={this.state.val ...

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

Is there a better method to determine the width when utilizing the jQuery UI resizable feature for improved efficiency?

I'm currently working on a website that features a resizable sidebar. I want the icons and text within the sidebar to shrink proportionally when the user resizes it. Right now, I have implemented an if statement to check if the sidebar's width fa ...

Using ES6 classes in Express routes: It is not possible to create the property 'next' on the string '/'

I'm currently working on integrating routes using classes in my express js application controller class User { constructor (){ this.username = 'me'; } getUsername(req,res){ res.json({ 'name& ...

Preventing the dispatch function from being overwritten by an empty state

Scenario: I am currently exploring the concept of React/Redux and aiming to understand the data flow. The process involves axios dispatching actions -> reducers setting state to props -> Component rendering. As a newcomer to the Frontend world, ...

Dynamically Alter Notification Background

I have created a demo page with some code for a smart notification. The issue I am facing is that even though the CSS is initially set to black, I want to dynamically change it to a random color upon creation. When I try to do this in the inspector, it w ...