Tips for creating a dual-gradient background split effect on a div element?

Let's say I have a UI card with the following CSS properties:

.card {
  flex-direction: column;
  height: 20rem;
  width: 14rem;
  border-width: 1px;
  border-radius: 0.375rem;
  border-color: #444;
  border-style: solid;
  margin: 1.25rem;
}

.card-header {
  display: flex;
  justify-content: center;
}

.card-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="card">
  <div class="card-header">
    <span>header</span>
  </div>
  <div class="card-center">
    <span>center</span>
  </div>
</div>

Click here for code snippet.

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

I am looking to replicate this design effect:

Design reference image.

The objective is to create a blue gradient with adjustable dimensions using JavaScript based on user input.

Is there a method to accomplish this?

htmlcss

Answer №1

If you're looking to manipulate size using scripting, my suggestion would be to utilize a pseudo-element for this purpose. By doing so, you can easily adjust the positioning properties according to your requirements. While the border could potentially be incorporated into the gradient itself, I have chosen to define it separately.

.card {
  position: relative;
  flex-direction: column;
  height: 20rem;
  width: 14rem;
  border-width: 1px;
  border-radius: 0.375rem;
  border-color: #444;
  border-style: solid;
  margin: 1.25rem;
}


.card:before {
  position: absolute;
  content: '';
  left: 0;
  top: 20%;
  bottom: 0;
  width: 100%;
  border-top: 3px solid pink;
  background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,
    rgba(125,185,232,0) 100%);
}

.card-header {
  display: flex;
  justify-content: center;
}

.card-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="card">
  <div class="card-header">
    <span>header</span>
  </div>
  <div class="card-center">
    <span>center</span>
  </div>
</div>

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

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

<select data-ng-init="selectedItem='previewWidth = 1920; previewHeight = 1080'" data-ng-model="selectedItem" data-ng-change="GetNewData(); {{selectedItem}}"> <option value="previewWidth = 1920; previe ...

javascripthtmlangularjstwitter-bootstrap

Styling a jQuery Chosen Select Box: Tips and Tricks

I am currently utilizing jQuery chosen plugin for my multi-select box. However, I am facing some challenges with customizing the styles defined in the chosen.css file as they are proving to be quite stubborn to override. Removing the entire chosen.css file ...

jquerycssjquery-chosen

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

Creating a unique SVG pattern starting from the center

I'm currently working on implementing a grid pattern that spans the entire viewport, following this solution. Although the grid starts from the top-left corner of the viewport, my goal is to have it start from the middle of the screen instead. This w ...

javascripthtmlsvg

Is there a way to isolate the highlighted text from an HTML document?

I am in search of a solution to extract all the bold snippets within the content of an HTML document. The task needs to be performed on the server side using Java, rather than on the client-side browser. The text appearing as bold on the page may be due t ...

javahtmlparsingjsoup

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...

csshtmlaccessibilitysection508wcag2.0

The CSS drop-down menu on the website is not operating as intended

Whenever I attempt to use the menus by hovering over them, the sub menu briefly appears but disappears before I can access it fully. I've experimented with adding margins and adjusting the z-index in different locations, yet I am still unable to pinpo ...

cssdrop-down-menu

Maintain the height of the image equal to the height of the

I've been facing challenges with adjusting the height of this image to match the div container. I've experimented with various height properties such as max-height, min-height, normal height, auto, and 100%, but none seem to be providing the desi ...

htmlcss

"Enhance Your Website with Dynamic Text Effects using JavaScript

Is there a way to continuously animate text during the loading process of an AJAX request? I've tried implementing various methods, such as using a setTimeout function or an infinite loop, but nothing seems to work for repeating the animation once it& ...

javascripthtmlcssanimation

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...

htmlangulartypescript

Loading a webpage once the loading bar has completed

Is there a way to modify the JavaScript code for my progress bar that loads from 1 to 100 percent so that it automatically redirects to another page when reaching 100%? Here is the current JavaScript code: var i = 0; function move() { if (i == 0) { ...

javascripthtmlcss

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

There are two div elements with display: table-cell property: <div> This is a table cell </div> <div> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Som ...

htmlcss

Struggling to make a variable pass in an Ajax post script

Having trouble passing the "filename" variable from main.php to save_sign.php. Can anyone provide assistance? main.php <? $filename="222222"; ?> <script> $(document).ready(function() { $('#signArea').signat ...

javascriptphpjqueryajaxhtml

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

phphtml

The layout consists of two divs: one with a fixed height, while the other dynamically adjusts to occupy the

I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...

htmlcss

Exploring the realm of external variables and scoping within a jQuery function

I am facing an issue with the following code, where I want to execute test() every time the window is resized. var i = 0; var test = (function() { console.log(i++); })(); $(window).resize(function() { test(); }); Code: http://jsfiddle.net/qhoc/N ...

javascriptjqueryhtml

Some elements in the DOM appear to not be rendering even though they are present in the HTML source code

As a newcomer to web development, I have stumbled upon a perplexing issue. In my usage of d3.js (specifically the script found here), I have been attempting to incorporate additional features. I modified my JavaScript code to include a simple <p> ele ...

javascripthtmld3.js

Using jQuery Datepicker, showcase two distinct datepickers on a single page

Currently, I am utilizing the jQuery [Datepicker][1] on a website, but I am facing challenges when attempting to display two datepickers on the same page in different manners. The first one should only appear once you click the text box, and once a date i ...

javascriptjqueryhtmlwebdatepicker

Is there a way for me to view the specifics by hovering over a particular box?

Whenever I hover over a specific box, detailed information appears, and when I move the mouse away, the details disappear. HTML <nav> <div> <div class="nav-container"> <a href="./about.html" ...

javascriptcss

Transferring the input value to a different input field with Keyup in Angular 9

Is there a way to instantly pass data from one input field to another in Angular? I am facing some issues with this. How can I troubleshoot this problem? Component.ts export class AppComponent { number = ''; //initialized the text variable ...

javascripthtmlangularjsangularangular9