Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Nikhilesh Aleti
69 articles
How to create Olympics logo using HTML and CSS?
The given task in this article is to create an Olympics logo using only HTML and CSS. The "Olympic logo" consists of five interlocked circles with five different colors: blue, black, red, yellow, and green. These five colored rings represent the five inhabited continents of the world − Africa, the Americas, Asia, Europe, and Oceania. Approach Setting up the Logo Container − We start by creating a element with the class name olympic-logo. This serves as the container for the Olympic symbol. We set its width, height, background color, position, and margin to achieve the ...
Read MoreFlip the text using CSS
To flip the text using CSS, we will be using CSS transform property. Flipping is a technique that transforms or mirrors an element on particular axis (horizontal or vertical). We will be understanding three different approaches to flip the text using CSS. Syntax selector { transform: scaleX(-1); /* Horizontal flip */ transform: scaleY(-1); /* Vertical flip */ transform: rotateX(180deg); /* Mirror effect */ } Method 1: Horizontal Text Flip using scaleX Function To horizontally flip the ...
Read MoreFading Text Animation Effect Using CSS3
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. Syntax @keyframes animationName { from { opacity: startValue; } to { opacity: endValue; } } selector { animation: animationName duration; opacity: initialValue; } ...
Read MoreCreating an Animated Side Navbar using HTML and CSS
A Navigation Bar is a GUI element which allows users to navigate through a website or application. It is typically a list of links at the top or side of the screen and assists users in navigating to various areas or pages within the website. In this article, we will create an animated side navigation bar using HTML, CSS, and JavaScript. The sidebar will slide in from the left when opened and smoothly close when dismissed. Syntax #sidebar { width: 0; transition: width 0.5s; } #sidebar.open { ...
Read MoreCreate a Letter-Spacing Animation Effect using HTML and CSS
In this article, we are going to create a letter-spacing animation effect using HTML and CSS. To do so, we have CSS letter-spacing property and CSS @keyframes rule. CSS Letter-spacing Property The letter-spacing property in CSS is used to set the horizontal spacing between the text characters. If we assign a positive value for this property, the character spaces will spread farther apart. If we assign a negative value for this property, it brings the characters closer together. Syntax Following is the syntax of CSS letter-spacing property − letter-spacing: value; ...
Read MoreConvert an image into Blur using HTML and CSS
In general, blur is a visual effect that happens when the viewer cannot see the details of an object clearly. It creates a soft, out-of-focus appearance that can be used for artistic or functional purposes. In HTML, we can apply the blur effect to elements on a webpage (such as images) using CSS properties. To do so, we use the filter property along with the blur() function. This function applies a Gaussian blur effect to the image element, which makes it softer and less defined. Syntax selector { filter: blur(radius); } ...
Read MoreDisplaying XML Using CSS
XML is a markup language which stands for Extensible Markup Language, designed especially for web documents. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable, allowing developers to create custom tags. In this article, we are displaying XML content using CSS to style and format XML elements for better presentation in web browsers. Syntax To link CSS to an XML file, use the following declaration at the top of your XML document − Steps for Displaying XML using CSS Follow these steps ...
Read MoreDoes overflow: hidden create a new block formatting context in CSS?
The block formatting context (BFC) is a part of the web page layout in CSS where elements are positioned and interact with each other. In simple words, it is like a container that defines a set of rules for how elements should behave inside the container. In this article, we are going to see "Does overflow: hidden create a new block formatting context (BFC) in CSS?" The answer is yes because in CSS, the overflow: hidden property can create a new block formatting context (BFC). When an HTML element has an overflow value other than visible (the default ...
Read MoreDesign a Portfolio Webpage using HTML and CSS
To design a portfolio webpage using HTML and CSS can be useful to showcase your best works and attract attention of professionals in collaborating or hiring you. Portfolio website serves as a platform to display your work and demonstrate your skills. It has the same purpose as a CV (Curriculum vitae). The portfolio website will showcase them with engaging visual images and often more detailed than a hand-written CV. In this article, we will learn and understand how we can design a portfolio webpage using HTML and CSS through stepwise explanation and example code. Why Create a Portfolio ...
Read MoreDesign a transparent login/Sign Up webpage using HTML and CSS
In HTML, the login forms are used to collect information about the user and have a button to send the details for server-side operations. The login form contains basic information such as Name, Date of birth, Email, Mobile number, Gender, Address, etc. Nowadays, HTML forms are used in almost every website on the Internet to gather user information. In this article, we are going to design a transparent login form on a webpage using HTML and CSS. Syntax .transparent-element { background: none; background-color: transparent; ...
Read More