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 Yaswanth Varma
Page 2 of 31
Display div element on hovering over tag using CSS
CSS can be used to make HTML hidden components visible when hovered over. Using the adjacent sibling selector (+), we can display any HTML element when the user hovers over an tag. This selector targets an element that immediately follows another element in the DOM. Syntax a:hover + element { display: block; } How It Works The technique uses these key components − Hidden element: Initially set to display: none Adjacent sibling selector (+): Targets the element immediately after the anchor :hover pseudo-class: Triggers when mouse hovers ...
Read MoreHow set the shadow color of div using CSS?
The CSS box-shadow property allows you to add shadow effects to any HTML element, including elements. This property creates a visual depth effect by adding shadows with customizable colors, positions, and blur effects. Syntax selector { box-shadow: h-offset v-offset blur spread color; } Property Values ValueDescription h-offsetHorizontal shadow position (positive = right, negative = left) v-offsetVertical shadow position (positive = down, negative = up) blurOptional. Blur radius − higher values create more blur spreadOptional. Spread radius − positive values expand, negative values shrink colorShadow color (hex, rgb, rgba, ...
Read MoreApply Glowing Effect to the Image using HTML and CSS
You have probably seen several special effects while browsing the majority of websites, which may be viewed when your cursor is over various images. We are going to process same in this article. Such images could serve as cards for our website. The task we are going to perform in this article is to apply a glowing effect to images using HTML and CSS. This effect can be accomplished by using the box-shadow property. Let's dive into the article to learn more about applying the glowing effect. Syntax selector { box-shadow: none ...
Read MoreCreate 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 Make Scrollbar Custom Arrows Work on Mobile Devices?
Custom scrollbars can enhance the visual appeal of your website by providing a unique user experience. While modern browsers support custom scrollbar styling through WebKit CSS properties, making these work consistently across mobile devices requires specific techniques. Syntax ::-webkit-scrollbar { width: value; } ::-webkit-scrollbar-thumb { background: color; } ::-webkit-scrollbar-track { background: color; } WebKit Scrollbar Properties PropertyDescription ::-webkit-scrollbarStyles the overall scrollbar element ::-webkit-scrollbar-thumbStyles the draggable part of the scrollbar ::-webkit-scrollbar-trackStyles the background track of the scrollbar ::-webkit-scrollbar-buttonStyles the arrow buttons on ...
Read MoreHow To Create A Text Inside A Box Using HTML And CSS
To create a text inside a box using HTML and CSS, we can use several approaches to add borders around text elements and create visually appealing boxed content. Syntax selector { border: width style color; padding: value; } Approaches to Create a Text Inside a Box Using span element with CSS Using CSS flexbox Method 1: Using Span Element with CSS Border This method uses a element with CSS border and padding properties ...
Read MoreHow to Make a Shape Like On Image in Pure CSS?
Creating custom shapes in CSS allows you to break free from the traditional rectangular box model. You can use the CSS clip-path property along with various shape functions to create visually appealing designs that clip portions of elements to form different shapes. Syntax selector { clip-path: shape-function(parameters); } Using Border Radius for Organic Shapes You can create irregular shapes by applying different border radius values to each corner of an element − .organic-shape { ...
Read MoreHow to Get this Text-Wrapping Effect With HTML/CSS?
The CSS word-wrap property allows long words to be broken and wrapped onto the next line when they exceed the width of their container. This prevents text overflow and ensures content remains within the designated boundaries. Syntax selector { word-wrap: normal | break-word | initial | inherit; } Possible Values ValueDescription normalWords break only at normal break points (default) break-wordAllows unbreakable words to be broken initialSets to default value inheritInherits from parent element Example 1: Text Wrapping Around Images The following example demonstrates text wrapping around ...
Read More