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
How to create different device looks (smartphone, tablet and laptop) with CSS?
Creating different device looks (smartphone, tablet, and laptop) with CSS allows you to showcase responsive designs or create device mockups. This technique uses CSS styling to mimic the appearance of real devices with borders, rounded corners, and proper proportions. Syntax .device { position: relative; width: device-width; height: device-height; border: border-width solid color; border-radius: corner-radius; } Example 1: Smartphone Device The following example creates a smartphone-like appearance with a home button ? ...
Read MoreHow to create a custom scrollbar with CSS?
Custom scrollbars allow you to style the appearance of scrollbars to match your website's design. Using CSS pseudo-elements, you can customize the scrollbar's width, colors, and hover effects. Syntax /* Webkit-based browsers only */ ::-webkit-scrollbar { width: value; } ::-webkit-scrollbar-track { /* Track styling */ } ::-webkit-scrollbar-thumb { /* Handle styling */ } ::-webkit-scrollbar-thumb:hover { /* Handle hover styling */ } CSS Scrollbar Properties PropertyDescription ::-webkit-scrollbarDefines the overall scrollbar container ::-webkit-scrollbar-trackStyles the scrollbar track ...
Read MoreHow to create a browser window example with CSS?
Creating a browser window mockup with CSS is a great way to showcase web content in a realistic browser interface. This involves styling elements to resemble the typical browser components like window controls, address bar, and content area. Syntax /* Browser window structure */ .browser-window { border: solid color; border-radius: radius; } .browser-header { background: color; padding: value; } .browser-controls { display: inline-block; border-radius: 50%; } Example The ...
Read MoreHow to stretch elements to fit the whole height of the browser window with CSS?
To stretch elements to fit the whole height of the browser window, use the height property and set it to 100%. This technique requires setting the height on both the HTML document and the container element. Syntax html, body { height: 100%; margin: 0; } .container { height: 100%; } Method 1: Using Percentage Height The most common approach is to set the HTML document and body to 100% height, then apply the same to your container element − ...
Read MoreHow to create different shapes with CSS?
CSS allows you to create various geometric shapes on web pages using properties like border-radius, border, and clip-path. These properties can transform simple HTML elements into circles, rectangles, squares, triangles, and more complex shapes. Syntax /* Basic shape properties */ border-radius: value; border: width style color; clip-path: shape-function; Create a Circle A circle is created by setting border-radius to 50% on a square element − .circle { width: 100px; ...
Read MoreHow to create arrows with CSS?
With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property. Syntax .arrow { border: solid color; border-width: 0 width width 0; display: inline-block; padding: size; transform: rotate(angle); } Basic Arrow Structure The foundation of CSS arrows uses border ...
Read MoreHow to add transition on hover with CSS?
The CSS transition property allows you to create smooth animations when an element's properties change, such as on hover. Transitions provide a way to control the speed and timing of these changes, making your website more interactive and visually appealing. Syntax selector { transition: property duration timing-function delay; } selector:hover { /* Properties to change */ } Transition Properties PropertyDescription transition-propertyThe CSS property to which the transition is applied transition-durationHow long the transition takes to complete (in seconds or milliseconds) transition-timing-functionThe speed curve of ...
Read MoreHow to center a button element vertically and horizontally with CSS?
To center a button vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This creates perfect centering for button elements within their container. Syntax .container { display: flex; justify-content: center; align-items: center; height: value; } The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; ...
Read MoreHow to center an element vertically and horizontally with CSS?
To center an element vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This is one of the most reliable and modern methods for achieving perfect centering. Syntax selector { display: flex; justify-content: center; align-items: center; } The Justify-content Property In CSS, the justify-content property is used to align flex items horizontally along the main axis. The syntax is as follows − selector { display: flex; justify-content: value; ...
Read MoreHow to zoom/scale an element on hover with CSS?
To zoom/scale an element on hover with CSS, we can use the transform: scale() function or the zoom property. These techniques create smooth hover effects that enhance user interaction by making elements appear larger when the mouse cursor hovers over them. Syntax /* Using transform scale */ selector:hover { transform: scale(value); } /* Using zoom property */ selector:hover { zoom: value; } Method 1: Using transform scale() The transform: scale() function is the recommended approach as it's part of the CSS3 standard and provides better ...
Read More