Fading Text Animation Effect Using CSS3

Nikhilesh Aleti
Updated on 27-Sep-2024 17:45:31

5K+ Views

Fading is a visual representation of a gradual transition between two states of visibility. We can perform fading animation using the @keyframes rule and opacity property in CSS3. In this article we are having two div boxes with some written content in the child div. Our task is to apply fading text animation effect using CSS3. Types of Fading Animation There are two types of fading animations which are listed below: Fade-In Text Animation Fade-Out Text Animation Fade-In Text Animation Fade-in text animation makes a text appear gradually from ... Read More

Make an Area Unclickable with CSS

Geetansh Sahni
Updated on 27-Sep-2024 12:48:35

20K+ Views

To make an area unclickable with CSS, we can use various CSS properties, which we will be understanding in this article. We will be discussing three different approaches to make an area unclickable with CSS. In this article we are having a rectangular area, our task is to make an area unclickable with CSS. Approaches to Make an Area Unclickable Here is a list of approaches to make an area unclickable with CSS which we will be discussing in this article with stepwise explaination and complete example codes. Unclickable Area using pointer-events property ... Read More

Design Loan EMI Calculator Using HTML, CSS, and JavaScript

Kalyan Mishra
Updated on 26-Sep-2024 17:41:46

11K+ Views

To design a Loan EMI Calculator, we will be using HTML to create basic structure of EMI loan calcualtor, CSS to design the UI and JavaScript to add functionality of calculating the EMI based on user input of amount, rate per annum and time in months. In this article, we will be understanding the stepwise process and code of how to design a loan EMI calculator using HTML, CSS and JavaScript. Structuring Loan EMI Calculator using HTML Designing UI of Loan EMI Calculator using CSS Adding ... Read More

HTML5 Input Types You May Not Be Using

Deepak Subhash
Updated on 26-Sep-2024 11:25:48

178 Views

An HTML5 input type enhances user experience and minimizes the requirement for JavaScript validation. Some HTML5 input types that are rarely used but can noteworthily improve form on websites are listed below. HTML5 input type ValuesInput TypePurposeNumeric keypads are displayed on mobile browsers, thereby enhancing UX on devices.Any specific date can be picked from a calendar, securing proper format.It minimizes the complexities of entering inputs for month/year related data. For example, setting up the expiry date of credit cards.It unifies the selection of files directly into the form and can specify the acceptable file types.It can be used to ... Read More

Set Input Type Date in DD-MM-YYYY Format Using HTML

Arunachalam K
Updated on 26-Sep-2024 10:46:49

4K+ Views

To set the input type date in dd-mm-yyyy format using HTML. Discover simple techniques to customize date formats for better user experience and data consistency. Creating intuitive web forms is crucial for enhancing user experience, particularly with date inputs. Although HTML5 introduced the feature for easy date selection, it generally formats dates as YYYY-MM-DD. This can be inconvenient for users in regions that prefer the DD-MM-YYYY format. This article will guide you on various methods to implement date input in the DD-MM-YYYY format utilizing HTML, JavaScript, and external libraries. Approaches for Implementing DD-MM-YYYY Format To achieve a ... Read More

Select All Child Elements Recursively Using CSS

Tarun Singh
Updated on 26-Sep-2024 10:33:19

13K+ Views

To select all child elements recursively using CSS, we have used universal selector(*) with parent selector. In this article we are having eight paragraph elements out of which six are wrapped inside div container, our task is to select all child elements recursively using CSS. Steps to select all child elements recursively using CSS We will be following below mentioned steps to select all child elements recursively using CSS: We have used eight paragraph elements and six paragraph elements are wrapped inside div container. All the six paragraph elements are direct child elements ... Read More

Check if a Substring is Present in a Given String in Java

Shriansh Kumar
Updated on 25-Sep-2024 18:44:28

1K+ Views

Suppose you are given two strings, your task is to write a Java program that checks whether the second string is the sub-string of the first one. String in Java is an immutable sequence of characters and sub-string is its small portion. Example Scenario: − Input 1: str = "The sunset is beautiful"; Input 2: sub_str = "sunset"; Output: res = found!! Using Iteration In this approach, the idea is to use a nested for loop and an if block. The outer for loop will iterate over the characters of the main string. For each starting position i, ... Read More

Reverse Each Word in a Sentence in Java

Shriansh Kumar
Updated on 25-Sep-2024 18:27:47

3K+ Views

Given a sentence or string, write a Java program to reverse each word in that sentence. Each word in that sentence should be reversed and at the same time, they should be in the same order as before. Let's understand the problem with an example − Example Scenario: Input: orgnl_sen = an apple is red Output: modfd_sen = na elppa si der Using Iteration First, split the given sentence into an array of words using the space character as the delimiter. Use a for-each loop to iterate over each word. Then, iterate through the characters of each ... Read More

Java Program to Reverse a String

Shriansh Kumar
Updated on 25-Sep-2024 18:03:35

2K+ Views

Given a String, let's say "str", write a Java program to reverse it. In reverse string operation, we need to display the individual characters of string backwards or from right to left. Here, String is a datatype that contains one or more characters and is enclosed in double quotes(“ ”). Let's understand the problem with an example − Example Scenario: − Input: str = "Java Program"; Output: reversed_string = margorP avaJ For better understanding refer to the below illustration − Reverse String .main { background-color: rgb(151, 231, 89); ... Read More

Create a Box Filled with Color in HTML and CSS

Aman Gupta
Updated on 25-Sep-2024 16:17:43

9K+ Views

To create a box filled with color in HTML/CSS, it can be achieved with HTML as we can create a simple frame of the box with the help of HTML and to fill the color we can use the CSS property. We will be discussing two different approaches to create a box filled with color. In this article, we are having a div or we can have any block element and our task is to create a box filled with color in HTML/CSS. Approaches to create a box filled with color Here is a list of approaches to create a ... Read More

Advertisements