Animating changes on a webpage using CSS transitions in conjunction with the

Can the border color of a simple line div be changed from top to bottom using GreenSock?

.line {
  position: relative;
  border: 1px solid #c3ced8;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  z-index: 1;
  top: -19px;
  margin: 0;
  left: 5.3px;
  margin-bottom: -30px;
}
<div class="line"></div>

Looking to use GreenSock library to change the border color from top to bottom.

Answer №1

If you want to achieve this effect, you can use the border-image: linear-gradient() property. Here is an example of how you can do it:

.line {
  position: relative;
  border: 1px solid;
  width: 0;
  height: 50px;
  display: block;
  content: '';
  z-index: 1;
  top: -19px;
  margin: 0;
  left: 5.3px;
  margin-bottom: -30px;
  -webkit-border-image: -webkit-linear-gradient(#f00, #00f) 1;
  -o-border-image: -o-linear-gradient(#f00, #00f) 1;
  border-image: linear-gradient(to bottom, #f00, #00f) 1;
}
<div class="line"></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

Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/ ...

When the user clicks on the body, I want the element to slide up, which will then slide down when the button is clicked

As a novice in Jquery, I am currently implementing a simple slide toggle on a button. Initially, the div is set to display none, and when the button is clicked, the slide toggle function is triggered. This works well. However, I also want the div to slide ...

Tips on how to personalize the print layout of an Angular 4 page when pressing ctrl+p

I am working on an angular4 app and I encountered an issue when trying to customize the print page view by pressing ctrl+p in the browser. The page that needs to be printed contains only Angular components, and my attempts to modify the print view using ...

My DIV elements are not adapting to the row and column breakpoints as expected. Can anyone help me understand why this is happening?

Currently, I am working on setting up a row of highlighted products on my website. It displays fine with 5 products on desktop view, but the challenge arises when it comes to viewing it on medium size devices where I want only 2 products to show, and event ...

Ways to ensure a row of floated images within a <div> container adjusts its size in sync with the browser

Struggling to resize four images inside a div as the browser window is resized? Frustrated that when the window is too small, the last image moves to the next row? Want them all to stay in one row? Despite searching for solutions, adjusting max-widths to 2 ...

Is there a way to position the table to the right of the registration text boxes?

https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...

Modify the appearance of the post-content's color and background when hovering

I am struggling to achieve the goal of changing the background of the search box to transparent and making the search icon white on hover. Any help or suggestions would be greatly appreciated! Below is the code where I want to apply the hover CSS effect: ...

Steps for positioning a z-indexed division

In my main wrapper, which has a fixed width of 960px, there is a login button located at the top right corner. When this button is pressed, a div layer opens directly below and in front of the main wrapper using z-index: 1. The issue I am facing is that I ...

Enable wp_star_rating for display on the front end

My goal is to incorporate the wp_star_rating function into a shortcode for use on the frontend of my WordPress website. To achieve this, I have copied the code from wp-admin/includes/template.php to wp-content/themes/hemingway/functions.php. I have includ ...

Unable to navigate through select2 dropdown if fixed div is present

I am facing an issue with select2 in my fixed div popup that acts like a modal. The problem is that when the select2 dropdown is open, I am unable to scroll the div until I close the dropdown. This becomes problematic on smartphones because the keyboard e ...

The image fails to display when using THREE.js and Panolens.js

Trying to create a 360-degree environment with informational buttons using THREE.js and Panolens.JS However, I'm unable to resolve why the image is not appearing. Continuously encountering the error: Uncaught ReferenceError: process is not defined. ...

Can anyone recommend any offline editors for HTML, CSS, and JavaScript similar to JSFiddle, jsbin, or codepen?

Is there an alternative to JSFiddle.net that allows users to experiment with Javascript, HTML, and CSS offline in a similar way? ...

The CSS does not display properly on iPad or mobile devices

Recently, I had the opportunity to design a website for a local music school. This project was a great learning experience that has shown me the importance of continuous improvement and practice. Check out the site here Initially, I wanted to make the w ...

The functionality of activating a button is not functioning as expected in AngularJS framework

Next to the question I have linked here, I am exploring a different approach. As a beginner in AngularJS/Cordova/Ionic, my goal is to achieve different outcomes when the "Eingepasst" button is clicked, each with unique logic compared to "Gewonnen" or "Ver ...

Creating a stunning visual effect by using CSS to fade images in and out

My current issue involves a UX switch that controls the effect on and off of pictures. http://plnkr.co/edit/JcPXpP0jE5GysBbZbrkp I am trying to achieve a smooth fade transition from one picture to another over 1 second, but I am encountering difficulties ...

Choosing the attribute value using jQuery/CSS

Looking for a way to retrieve attribute value using jQuery/CSS <dt onclick="GomageNavigation.navigationOpenFilter('price-left');"> I tried using $("dt[onclick='GomageNavigation.navigationOpenFilter('price-left')']") bu ...

Adjustable height for Divs placed between stationary Divs

As a beginner, I have a question that may seem simple to some. I want to create a layout with fixed divs at the top and bottom, but a flexible one in between. To help explain, I've created a sketch. If anyone could provide me with a starting point, I ...

Trouble with the Width of Selection Box Options

Encountering a peculiar issue with multiple select boxes in my project. Some of the options within the select box are exceeding the width of the box. Proper Dropdown View: https://i.sstatic.net/xDy6I.jpg Incorrect Dropdown Display: https://i.sstatic.ne ...

Create a dynamic calendar by integrating dates with Javascript and an HTML table

Recently, I decided to delve into web design again and embark on a challenging project for my father's baseball business. The main task at hand is creating a detailed calendar using HTML tables. After spending a considerable amount of time perfecting ...

Is it possible to establish a delay for requestAnimationFrame()?

My webpage has a very long layout with text in one column and a floating element in another. I want the floating element to follow the scroll of the window and return to its original offset once scrolling stops. The current code I have is: var ticking = ...