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 Krantik Chavan
Page 4 of 18
Create Hoverable Buttons with CSS
The CSS :hover pseudo-selector is used to apply styles to an element when a user hovers their mouse over it. This creates interactive hoverable buttons that change appearance on mouse hover. Syntax selector:hover { property: value; } Example: Basic Hoverable Button The following example creates a hoverable button that changes color and border style when hovered − .btn { background-color: yellow; color: black; ...
Read MoreArrow to the top of the tooltip with CSS
The CSS bottom property combined with border styling can be used to create an arrow pointing to the top of a tooltip. This creates a visual connection between the tooltip and its trigger element. Syntax .tooltip::after { content: ""; position: absolute; bottom: 100%; left: 50%; border-width: size; border-style: solid; border-color: transparent transparent color transparent; } Example The following example creates a tooltip with an arrow pointing ...
Read MoreCSS animation-direction property
The CSS animation-direction property is used to set whether an animation should be played forwards, backwards, or in alternate cycles. This property allows you to control the playback direction of keyframe animations. Syntax selector { animation-direction: value; } Possible Values ValueDescription normalAnimation plays forward (default) reverseAnimation plays backward alternateAnimation plays forward, then backward alternate-reverseAnimation plays backward, then forward Example: Reverse Animation The following example demonstrates the reverse value, which plays the animation backward − div { ...
Read MoreShorthand property to set all the animation properties with CSS
The CSS animation property is a shorthand that allows you to set multiple animation properties in a single declaration. It combines animation duration, name, timing function, delay, iteration count, direction, fill mode, and play state into one convenient property. Syntax selector { animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name; } Possible Values PropertyDescriptionDefault animation-nameSpecifies the name of the @keyframes rulenone animation-durationSpecifies how long the animation takes0s animation-timing-functionSpecifies the speed curveease animation-delaySpecifies when the animation starts0s animation-iteration-countSpecifies how many times to ...
Read MoreCSS Transition property
The CSS transition property allows you to create smooth animations when CSS properties change. It combines all four transition-related properties (transition-property, transition-duration, transition-timing-function, and transition-delay) into a single shorthand declaration. Syntax selector { transition: property duration timing-function delay; } Possible Values PropertyDescriptionDefault propertyCSS property to animate (or 'all')all durationAnimation duration (s or ms)0s timing-functionSpeed curve (ease, linear, ease-in, etc.)ease delayDelay before animation starts0s Example: Basic Height Transition The following example creates a smooth height transition when hovering over a box − ...
Read MoreRoll In Animation Effect with CSS
The CSS roll in animation effect creates a smooth rolling motion where an element slides in from the left side while rotating. This animation combines translation and rotation transforms to simulate an object rolling into view like a wheel or ball. Syntax @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; ...
Read MoreWrite an example to establish MySQL database connection using PHP script?
In PHP, you can establish a MySQL database connection using MySQLi or PDO extensions. The old mysql_connect() function is deprecated and should be avoided. Here are modern approaches to connect to MySQL database. Using MySQLi (Procedural) The MySQLi extension provides an interface to access MySQL databases − Using MySQLi (Object-Oriented) The object-oriented approach provides better code organization − Using PDO PDO (PHP Data Objects) provides a database-agnostic interface − Comparison Method Object-Oriented Prepared Statements Database Support ...
Read MoreMongoDB Regex Search on Integer Value?
To perform regex search on integer values in MongoDB, use the $where operator with JavaScript regex testing. This allows pattern matching on numeric fields by converting them to strings during evaluation. Syntax db.collection.find({ $where: "/^yourPattern.*/.test(this.fieldName)" }); Sample Data db.regExpOnIntegerDemo.insertMany([ { "StudentId": 2341234 }, { "StudentId": 123234 }, { "StudentId": 9871234 }, { "StudentId": 2345612 }, { "StudentId": 1239812345 } ]); { ...
Read MoreQuerying internal array size in MongoDB?
To query internal array size in MongoDB, use the $size operator. This operator returns the number of elements in an array field and can be used within aggregation pipelines to count array elements for specific documents. Syntax db.collection.aggregate([ { $group: { _id: yourObjectIdValue, fieldName: { $first: { $size: "$arrayFieldName" } } } ...
Read MoreUpdate field in exact element array in MongoDB?
To update a specific element in a nested array in MongoDB, use the $ positional operator to match the parent array element, then target the nested array element by its index position using dot notation. $ Positional Operator + Index Targeting ActorDetails[0] — Not Matched ActorName: "Johnny Depp" MovieList[0]: "The Tourist" MovieList[1]: "Public Enemy" ...
Read More