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 Pankaj Kumar Bind
Page 2 of 4
How to Convert JSON to ArrayBuffer in JavaScript?
In JavaScript, an ArrayBuffer is a kind of binary structure that enables the manipulation of raw binary data. While JSON represents data as strings, it is sometimes useful to convert JSON into an ArrayBuffer when working with binary APIs or when you need to optimize data transmission. In this article, we will explore two common methods for converting JSON objects into ArrayBuffers in JavaScript. Approaches to Convert JSON to ArrayBuffer Using TextEncoder: Suitable for UTF-8 encoding (recommended). Manual Conversion with DataView: Useful for handling specific binary encoding formats or custom ...
Read MoreHow to Create an SVG Drop Shadow?
A drop shadow enhances the appearance of an SVG by giving it a 3D effect or a sense of depth. SVG drop shadows can be created using SVG filters and the CSS filter property. SVG Filters: Provides fine-grained control over shadow properties. CSS filter: Applies shadows using simpler syntax. Syntax For SVG filters − For CSS filter − filter: drop-shadow(x-offset y-offset blur color); Method 1: Using the Element in SVG ...
Read MoreHow to Create a Blinking Effect with CSS3 Animations?
To create a blinking effect with CSS3 animations, there are several approaches you can use. Blinking effects are commonly used to draw attention to specific elements on a webpage, such as warning messages, buttons, or text. CSS3 animations make it easy to implement such effects with clean and reusable code. Syntax @keyframes animation-name { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } selector { animation: animation-name duration timing-function iteration-count; } ...
Read MoreHow to Make CSS Ellipsis Work on a Table Cell?
When dealing with long text in a table, ensuring that it doesn't overflow and ruin your layout is crucial. CSS provides solutions to add ellipses (...) to text that exceeds a cell's width, keeping your UI clean and readable. This article explores two approaches: using the display property and the table-layout property. Syntax /* Basic ellipsis properties */ selector { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: value; } Method 1: Using the Display Property The display property ...
Read MoreHow to Remove Focus Around Buttons on Click?
When building web applications, you may notice that clicking on buttons often leaves an outline or "focus ring" around them. This can be helpful for accessibility, but sometimes it's not desirable for specific designs. In this article, we'll explore several ways to remove the focus ring from buttons when they are clicked, without sacrificing accessibility for keyboard users. Syntax /* CSS approach */ button:focus { outline: none; } /* Or using focus-visible for better accessibility */ button:focus-visible { outline: 2px solid color; } Method 1: Using ...
Read MoreHow to Make the Middle Item Stay Centered?
Centering the middle item in a layout while ensuring it stays centered even when other items are removed is a common design challenge. This article explores CSS techniques to center the middle item using methods that maintain its position regardless of adjacent elements. Method 1: Using Flexbox with Auto Margins Flexbox offers a straightforward way to center an item within a container. By setting the middle item's margin property to auto, it remains perfectly centered without depending on adjacent items. Example ...
Read MoreHow to Make Flex Items Take the Content Width?
Flexbox is a powerful layout tool that allows us to align items within a container dynamically. However, sometimes you may want a flex item to take up only as much width as its content, rather than stretching to fill the available space within the container. In this article, we'll go over different techniques to make specific items within a flex container take up only the space needed for their content, without stretching to fill the available space. Syntax /* Method 1: Using align-self */ .item { align-self: flex-start; } /* Method 2: ...
Read MoreHow to Center a Background Image Inside a div?
When creating web pages, centering a background image in a div is a common design requirement. There are several CSS methods available, each suited for different scenarios. This article demonstrates various techniques to center background images inside divs regardless of screen size or container dimensions. Syntax /* Method 1: Background Position */ .container { background-image: url('image.jpg'); background-position: center; background-repeat: no-repeat; } /* Method 2: Flexbox */ .container { display: flex; justify-content: center; ...
Read MoreHow to Relatively Position an Element without It Taking Space in the Document Flow?
In standard CSS positioning, relatively positioned elements occupy space within the normal document flow even after being offset by top, left, right, or bottom properties. This can create a gap in the layout where the element would have naturally sat, disrupting the alignment or layout of other elements around it. In this article, we will position an element so that it appears relatively within the document but does not affect the design of surrounding elements, effectively making it "overlay" without creating extra space. Syntax .parent { position: relative; width: ...
Read MoreHow to Make a Child Div Element Wider than Parent Div using CSS?
In CSS, there are times when you want to stretch a child div element beyond its parent div, often for specific design requirements. While this goes against the normal flow where children are contained within their parents, CSS provides several properties to achieve this effect. Syntax /* Method 1: Using overflow property */ .parent { overflow: visible; } .child { width: value-larger-than-parent; } /* Method 2: Using positioning */ .parent { position: relative; } .child { position: absolute; ...
Read More