Interactive

Our website incorporates interactive effects to make the user interface more intuitive and engaging. These dynamic features enhance user experience by providing visual feedback and smooth transitions, helping users navigate and interact with the site more naturally and efficiently.

Button

All buttons apply the TranslateY and Box Shadow to show upward effect

Hover the button to check effect.
Sample

Filled Buttons

Effect
Translate Y: -5px
Background: Split
Box shadow: 0 5px 10px rgba(0, 0, 0, 0.1)

Outline Buttons

Effect
Translate Y: -5px
Box shadow: 0 5px 10px rgba(0, 0, 0, 0.1)

Card

All cards apply the TranslateY and Box Shadow to show upward effect

Card with Image

Used in news list

Sample
Hover the card to check effect.
10/01/2024-10/17/2024
Title
Text
Read more...
Effect
Translate Y: -5px
Image: Enlarge
Box shadow: 0 10px 20px rgba(0, 0, 0, 0.1)

Card without Image

Used in resource list

Sample
Hover the card to check effect.
Title
Last update：10/01/2024
Date：
10/01/2024-10/17/2024
SIG Category：
  • ＃ Tag
Resource Type：Type Name
Detail
Effect
Translate Y: -5px
Box shadow: 0 10px 20px rgba(0, 0, 0, 0.1)

Gradient Effect Card

Cards used to emphasize specific content. For example, ICT market place page.

Sample
Hover the card to check effect.

Title

Sub Title

Title Title Title Title Title Title
Text Text Text Text Text Text Text
Title Title Title Title Title Title
Text Text Text Text Text Text Text
Title Title Title Title Title Title
Text Text Text Text Text Text Text
Effect
Gradient: 148deg, #01CFC8, #055FDD

Section

We use subtle fade-in effects for some sections' headings and content. This creates a smooth, visually appealing transition that draws attention to key elements as users scroll through the page, enhancing both the aesthetics and the overall user experience.

Sample

Welcome to SIGs Guideline

Explore the various sections to discover best practices and code examples
that will help you create visually appealing and user-friendly web experiences.

Play
Effect
Animation: ani-fadeIn
Duration: 2s
Text animation delay: .5s

Animation effect ani-fadeIn code as follow:

Sample Code

/* CSS */
@keyframes ani-fadeIn{
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

/* Apply @keyframes in the section */
section.mainview h1,
section.mainview p{
    animation: ani-fadeIn 2s ease-in-out forwards;
}
section.mainview p{
    opacity:0; /* Initiate <p> as invisible */
    animation-delay: .5s; /* Show <p> after <h1> */
}