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
HTML Articles
Page 146 of 151
How 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 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 MoreWhat is the difference between overflow: auto and overflow: scroll in CSS?
In CSS, the overflow property controls how content that exceeds an element's dimensions is handled. When content overflows, you can choose to show scrollbars automatically or always display them. The auto and scroll values provide different scrollbar behaviors. In this tutorial, we will learn the difference between the auto and scroll values of the CSS overflow property. Syntax selector { overflow: auto | scroll; } Overflow: auto The overflow: auto property shows scrollbars only when the content actually overflows the container. If the content fits within the element's dimensions, ...
Read MoreShake a Button on Hover using HTML and CSS
To shake a button on hover using HTML and CSS, we should have basic understanding of CSS animations and keyframes. We will be understanding how to utilize CSS animation and keyframes to apply shaking effect to a button on hovering. Syntax .button:hover { animation: shake-name duration timing-function iteration-count; } @keyframes shake-name { 0%, 100% { transform: transform-function(start-value); } 50% { transform: transform-function(end-value); } } Method 1: Rotational Shake Effect The following example creates a button that shakes by rotating left and ...
Read MoreProgramming a slideshow with HTML and CSS
Programming a slideshow using HTML and CSS, we should have a basic understanding of HTML and CSS animations. Slideshow displays a series of content in a sequential manner with smooth transitions. In this article, we will discuss how to create a slideshow using HTML and CSS without using JavaScript. We are having a set of div elements having textual content or images as slides. Our task is to program a slideshow using HTML and CSS. Basic Syntax /* Container for the slideshow */ .slideshow-container { overflow: hidden; width: ...
Read MoreHow to break a line without using br tag in HTML / CSS?
To break a line without using br tag in HTML/CSS is useful when you want to create line breaks while preserving the semantic structure of your content. This approach gives you more control over text formatting without cluttering HTML with presentation tags. Syntax /* Method 1: Using white-space property */ selector { white-space: pre; } /* Method 2: Using HTML pre tag */ text content Method 1: Using white-space Property The CSS white-space property controls how whitespace and line breaks are handled inside an element. Using white-space: pre preserves ...
Read MoreHow to Create Image Lightbox Gallery using HTML CSS and JavaScript?
An image lightbox gallery is a web feature that displays images in an enlarged overlay format, allowing users to view images without navigating away from the main page. When a user clicks on a thumbnail image, it opens in a modal window with navigation controls and a close button. Syntax /* Gallery container */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; } /* Lightbox overlay */ .lightbox { display: none; position: fixed; ...
Read MoreHow to Create Image Hovered Detail using HTML & CSS?
Creating image hover effects with detailed text overlays adds interactivity and visual appeal to your website. By combining HTML structure with CSS styling, you can create engaging hover animations that reveal additional information when users move their cursor over images. Syntax selector:hover { property: value; } The :hover Selector The CSS :hover selector is used to select and style an element when the user hovers their mouse over it. It works in combination with other selectors to target specific HTML elements and apply styles when the cursor is positioned over ...
Read MoreHow to create Image Folding Effect using HTML and CSS?
The Image Folding Effect is a popular CSS technique that creates a visually appealing paper-folding animation on images. This effect divides an image into segments that skew when hovered, simulating the appearance of folded paper. It's achieved using CSS transforms and the :nth-child selector. Transform Property The CSS transform property applies 2D or 3D transformations to elements. It can move, rotate, scale, and skew elements without affecting the document flow. Syntax transform: function(value); Common transform functions: translate() − moves an element along the x and y axis. rotate() − rotates an ...
Read MoreHow to set checkbox size in HTML/CSS?
To set checkbox size in HTML/CSS, we can use several CSS properties to control the dimensions and scaling of checkboxes. By default, checkboxes have a small size that may not be suitable for all designs. Syntax input[type="checkbox"] { width: value; height: value; /* OR */ transform: scale(value); /* OR */ zoom: value; } Method 1: Using Width and Height Properties The most straightforward approach is to use the width and ...
Read More