Creating a unique CSS grid layout with custom borders

Just a quick question, I'm wondering how you would approach creating this type of effect using CSS?

https://i.sstatic.net/rYCJn.png

The concept revolves around building the grid using bootstrap. As the screen size decreases, the grid transitions to 2 columns and then to 1 on mobile devices. When there are 2 columns, only the middle and bottom lines should remain visible.

Do you think this layout is achievable with CSS?

.icon-grid{
  -webkit-filter: drop-shadow(10px 8px 30px #222);
  filter: drop-shadow(1px 8px 10px #222);

padding: 75px;
border-right: black 2px solid;
border-bottom: black 2px solid;


}

<div style="color: black" class="row">
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
    
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
    
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
        
   
</div>

htmlcssdrupalbootstrap-4

Answer №1

If you want to create a box-shadow effect without blurring or resizing, you can achieve this by adjusting the parameters:

Here's a basic example that you can customize to fit your needs. Simply adjust the offset and spread radius values as needed:

.icon-grid {
  box-shadow: 5px 0 0 -3px gray, 0 5px 0 -3px gray;
  padding: 75px;
}
:nth-child(4) .icon-grid {
  box-shadow: 0 5px 0 -3px gray;
}

/* demo purpose */
.row {
  width: 1080px;
  margin: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="color: black" class="row">
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
    
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
    
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>
        
   
</div>

For more information on box-shadow, you can visit: https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Feel free to experiment with this code on Codepen: https://codepen.io/gc-nomade/pen/LLyJZO (5 rows) https://i.sstatic.net/MMF3c.png

Answer №2

Everything seems to be functioning properly, but don't forget to add Bootstrap CSS and JS to your code.

<div style="color: black" class="row">
    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

    <div class="col-md-3 col-sm-6 col-xs-12"><p> <img alt="" class="icon-grid" src="https://cdn-accept-www.enfocus.com/sites/combell-accept-www.enfocus.com/files/media/product-pages/pitstop-pro/low-resolution.png"></p></div>

</div>

Answer №3

Implementing flexbox and unique border styles using pseudo classes.

* {
  box-sizing: border-box;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

li {
  list-style: none;
  padding: 1em;
  width: 25%;
  position: relative;
}

li:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 50%;
  left: 25%;
  height: 2px;
  background-color: #ccc;
}

li:before {
  content: '';
  position: absolute;
  right: 0;
  height: 50%;
  top: 25%;
  width: 2px;
  background-color: #ccc;
}
<ul>
  <li><img alt="" class="icon-grid" src="https://customimage1.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage2.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage3.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage4.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage5.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage6.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage7.com"></li>
  <li><img alt="" class="icon-grid" src="https://customimage8.com"></li>
</ul>

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

Tips for adding a picture to a server and applying CSS filters to enhance it

I recently came across a set of CSS filters that can be applied to images by simply specifying the filter ID. Now, I'm looking to create a button that will allow me to save the edited image (with the filter applied) to a designated file location. I&a ...

javascriptphphtmlcsscanvas

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring the power of Javascript for number lookup

I am currently working on a coding project using TypeScript and JavaScript to locate a specific number provided by the user within a list. The goal is to display whether or not the number is present in the list when the 'search' button is pressed ...

javascripthtmltypescript

R code for extracting data without using CSS path

Hey there, I'm reaching out because I'm struggling to figure out how to extract data from a webpage (""). Learning how to scrape data is my current project, and I'm specifically trying to gather contact information (Office, Fax, email) from ...

cssrwebweb-scraping

Tips for aligning bootstrap labels in one line while allowing horizontal scrolling within a column in Bootstrap

Check out this code snippet here. <div class="row"> <div class="col-xs-6"> <div class="input-group"> <div type="text" class="form-control"> <span class="label label-default">Default</span> &l ...

htmlcssbootstrap-4

After the initial iteration, the .length function ceases to function properly when

A validation method is set up to check the length of a user input field. It functions properly on the initial try, but does not update if I go back and modify the field. $("#user").blur(function () { if ($("#user").val().length < 3) { $("#userval ...

javascriptjquerycss

Seamless animation with Angular 4

I'm working on creating a dynamic Homepage in Angular 4 with various cards such as stats, charts, etc., all enhanced with animations. One interesting feature I've implemented is the ability to toggle chart cards to expand to full screen by clicki ...

cssangulartypescriptanimationangular-animations

Expansive Carousel Feature with Ng Bootstrap

In my Angular 5 application, I am utilizing the Carousel component from "@ng-bootstrap/ng-bootstrap": "^1.1.2". I am trying to display pictures in full screen but when I press F11, the image appears like this. I am unsure of which CSS properties to apply ...

javascriptcssangularbootstrap-4carousel

Troubleshooting: Custom HTML Attribute in Angular 8 Component HTML Not Functioning as Expected

I have a unique situation in my Angular 8 application where I utilize custom HTML attributes and then use jQuery to fetch those attributes for various styling purposes such as setting background images and adjusting the height of div elements. Below is th ...

javascriptjqueryhtmlangularangular8

Is there a way to specify the dimensions of the canvas in my image editing software based on the user-input

Here is the code and link for my unique image editor. I would like to allow users to enter the desired width and height of the selection area. For example, if a user enters a width of 300 and height of 200, the selection size will adjust accordingly. Addit ...

javascriptjqueryhtmlcss

Utilizing JavaScript: Passing a parameter into a function to be used with getElementById()

Implementing a feature that displays statistics by incrementing rapidly until reaching their final value when the element is in view, creating the illusion of a rising number. Encountering some difficulty in passing the necessary parameters to identify th ...

javascriptjqueryhtmlcssparameters

Using Bootstrap, Express, and Node.js to create a login form

As I am new to node.js and express, I am still trying to understand the basic functionality. Currently, I have a simple sign-in form where I want to load another HTML page and call a node.js function upon clicking the sign-in button. What would be the best ...

htmlnode.jstwitter-bootstrapexpress

Issues arise when trying to use the Jquery append() method in conjunction with Angular

We are currently utilizing jquery version 1.9.1 and angular version 1.2.13 for our project. Our wysiwyg editor is functioning well, as we are able to save HTML into the database and load it back using the jquery append function successfully. However, we ar ...

javascriptjqueryhtmlangularjs

What could be causing the jQuery Mobile DOM element to return 'undefined' when using .val()?

Currently, I am experimenting with Jquery Mobile and facing an issue where my Form elements are returning 'undefined'. I suspect that the problem lies in the fact that my form may not be created when the onclick() function is triggered by the Mem ...

javascriptjqueryhtml

Preserving the position of inline text

I've been working on a button design that I want to make look more realistic by moving the text down 1px inside the button when it's pressed. To achieve this effect, I added an extra pixel to the top and removed one from the bottom. However, the ...

htmlcss

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Carousel with Horizontal Scrolling (Pause)

I stumbled upon this incredible "Pause Scroll (Horizontal) Parallax" created by Khaled on Codepen. One thing that has been puzzling me is how to make it run multiple times. It appears that when you try to apply it more than once, the duplicates ...

htmljquerycssstickyhorizontal-scrolling

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

What happens if the document.ready function fails to execute?

Many JavaScript developers have encountered a situation where page elements are not available in the document.ready event because it fires too soon, especially when most parts of the page are loaded dynamically with AJAX. Currently, I am working with Drupa ...

javascriptjqueryajaxdrupaldrupal-7

Disabling a jQuery function on an external page: Step-by-step guide

I have encountered a challenge while trying to load an anchor tag on an external page using a specific method: <a href="page.html#div> This method is meant to link me to another page's particular div. <div name="div"> stuff </> H ...

jqueryhtmlhyperlinkanchorautoscroll