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
Front End Technology Articles
Page 447 of 652
Create a 3D Text Effect using HTML and CSS
In web design, 3D text effects add depth and visual appeal to content. The text-shadow property is the primary CSS tool for creating these effects by applying multiple shadows with different offsets and colors to simulate depth. Syntax text-shadow: h-offset v-offset blur-radius color; To create a 3D effect, we apply multiple text-shadow values separated by commas, each with different offset positions to build up layers of depth. Example 1: Simple 3D Text with Hover Effect The following example creates a basic 3D text effect that appears on hover − ...
Read MoreDesign a Vertical and Horizontal menu using Pure CSS
The menu is a crucial component of any website. It helps visitors find content and directs them to key sections. CSS is excellent for creating stunning navigation menus that can be displayed either horizontally or vertically. In this article, we'll design vertical and horizontal menus using Pure CSS framework with HTML and tags. Syntax Pure CSS menu uses the following basic structure − .pure-menu { /* Base menu container */ } .pure-menu-horizontal { /* Horizontal layout modifier */ } .pure-menu-list { ...
Read MoreDifferent ways to hide elements using CSS
There are instances when you simply don't want every element of your website to be exposed. In other words, you don't want every template element of a page, post, header, or footer displayed every time it appears. And while it might appear that you need to update the template or theme code each time you want this omission to happen, that's not actually true. In fact, with only CSS, you may rapidly hide parts of your website. And it's really not that difficult. Let's dive into the article for getting better understanding of the different ways to hide elements ...
Read MoreHow to Create Image Accordion using HTML and CSS?
An image accordion is a popular web interface element that allows users to expand and collapse image sections for an interactive browsing experience. This technique creates a smooth, space-efficient way to display multiple images where only one section is fully visible at a time. Syntax .accordion-container { display: flex; } .accordion-item { flex: 1; transition: all 0.3s ease; cursor: pointer; } .accordion-item:hover { flex: expanded-ratio; } What is an Accordion? An accordion ...
Read MoreHow to create a CSS3 property for each corner?
CSS3 provides several methods to create custom corner styles for elements. This allows designers to move beyond simple rectangular shapes and create more visually appealing interfaces with unique corner treatments. Syntax /* Method 1: Border-radius */ border-radius: top-left top-right bottom-right bottom-left; /* Method 2: Individual corner properties */ border-top-left-radius: value; border-top-right-radius: value; border-bottom-right-radius: value; border-bottom-left-radius: value; /* Method 3: Clip-path */ clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4); /* Method 4: Mask-image */ mask-image: gradient-function; Method 1: Using Border-radius Property The border-radius property allows you to specify different radius ...
Read MoreHow 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 More