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 on Trending Technologies
Technical articles with clear explanations and examples
Transition shorthand with multiple properties in CSS?
We can add transitions to HTML elements using CSS. Before we start with the tutorial, let's understand what transition is. Basically, the transition is an element changing from one state to another state. For example, we change the dimensions of the element when users hover over the element. In CSS, we can add transitions to elements using two ways. First is to use 'transition-property', 'transition-duration', 'transition-timing-function', and 'transition-delay' all 4 properties together. The second is using only the 'transition' CSS property. The CSS 'transition' property is shorthand for the below CSS properties. Transition-property − It specifies ...
Read MoreToggle class by adding the class name when element is clicked and remove when clicked outside
Sometimes, we need to highlight an HTML element when we click it and return it to its normal state when we click outside the element. We can achieve this by toggling CSS classes on the element − adding a class when clicked and removing it when clicked elsewhere. In this tutorial, we will learn to add a class name to an element when users click it and remove the class name when users click outside the element. Syntax element.addEventListener('click', function() { element.classList.add('className'); }); document.addEventListener('click', function(event) { if ...
Read MoreSnowfall Animation Effect using CSS
We can create an animation using HTML and CSS. When we add animation to the webpage, it improves the UX of the application. We can create various animations using the CSS keyframes property and use it using the 'animation' CSS property. In this tutorial, we will learn to create a snowfall animation effect using CSS. Syntax .snow { animation: snow 7s linear infinite; } .snow:nth-child(2) { left: 20%; animation-delay: 1s; } @keyframes snow { 0% { transform: translateY(-100vh); ...
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 MoreHow to style a select dropdown with only CSS?
The element creates dropdown lists for forms, but its default appearance is limited. While complete customization of native select elements has restrictions, we can apply various CSS properties to improve their styling and create visually appealing dropdowns. Syntax select { property: value; } select option { property: value; } Key Properties for Select Styling PropertyDescription appearanceRemoves default browser styling borderControls border style and thickness border-radiusAdds rounded corners paddingControls internal spacing background-colorSets background color font-sizeControls text size Example: Basic Select Styling ...
Read MoreDifference between CSS and JavaScript
A website is developed using HTML. HTML provides the backbone and structure for the website. However, using HTML alone, we can't create our desired website. Cascading Style Sheets (CSS) adds a styling layer to the website, applying formatting, changing layouts, and making the website visually appealing. JavaScript is a programming language that makes websites functional and interactive, adding animations, pop-up screens, and user interaction features. What is CSS? CSS stands for Cascading Style Sheets. CSS is a language used to style HTML documents. Using CSS, we can change document styles such as page layout, colors, font styles, and ...
Read MoreWhich table property specifies the width that should appear between table cells in CSS?
In HTML, a table contains columns and rows. The table cells don't contain space between two cells by default. If we add some space between table cells, it can improve the UI of the table. In CSS, the border-spacing property adds space between table cells. We need to use the border-collapse CSS property with the separate value while using the border-spacing CSS property. Syntax table { border-collapse: separate; border-spacing: value; } Possible Values ValueDescription lengthSpecifies spacing in px, em, rem, etc. length lengthFirst value ...
Read More