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
CSS Articles
Page 115 of 130
CSS3 Resize Property
The CSS3 resize property allows users to resize elements by dragging from the bottom-right corner. It provides control over which dimensions can be resized by the user. Syntax selector { resize: value; } Possible Values ValueDescription noneUser cannot resize the element (default) horizontalUser can resize horizontally only verticalUser can resize vertically only bothUser can resize in both directions Example 1: Both Directions The following example allows users to resize the element in both horizontal and vertical directions − ...
Read MoreSet the border image as rounded, repeated and stretched with CSS
The border-image-repeat property is used to set how the border image is repeated, stretched, or rounded along the border edges. This property controls the behavior of the border image segments between the corners. Syntax selector { border-image-repeat: value; } Possible Values ValueDescription stretchThe border image is stretched to fill the area (default) repeatThe border image is repeated to fill the area roundThe border image is repeated and scaled to fit the area perfectly spaceThe border image is repeated with spacing to fill the area Example 1: Round ...
Read MoreSet the image path with CSS
The CSS border-image-source property is used to set the path of an image that will be used as a border around an element. This property allows you to replace traditional solid borders with custom images for more creative styling. Syntax selector { border-image-source: url(path-to-image) | none; } Possible Values ValueDescription url()Specifies the path to the image file noneNo image is used (default value) Example: Setting Image Border Path The following example demonstrates how to set an image path for creating a decorative border − ...
Read MoreCSS border-image property
The CSS border-image property allows you to use an image as the border of an element instead of the standard border styles. This property is useful for creating decorative borders using custom images. Syntax selector { border-image: source slice width outset repeat; } Possible Values PropertyDescription sourceThe image to be used as border (url or gradient) sliceHow to slice the border image (in pixels or %) widthThe width of the border image outsetHow much the border extends beyond the border box repeatHow border image is repeated (stretch, repeat, round, ...
Read MoreTada Animation Effect with CSS
The CSS tada animation effect creates a playful shaking motion that combines scaling and rotation transforms. This effect is perfect for drawing attention to elements like buttons, notifications, or call-to-action items. Syntax @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .element { ...
Read MoreCSS :first-letter pseudo-element
The CSS ::first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. It's commonly used to create elegant drop caps and eye-catching text effects that draw attention to the beginning of a paragraph or section. Syntax ::first-letter { property: value; } Properties That Can Be Applied The ::first-letter pseudo-element supports the following CSS properties − Property TypeProperties Font Propertiesfont-family, font-size, font-style, font-weight Color & Backgroundcolor, background-color, background-image Border & Marginborder, margin, padding, float Text Decorationtext-decoration, vertical-align, line-height ...
Read MoreSwing Animation Effect with CSS
The swing animation effect creates a pendulum-like motion that moves an element back and forth or from side to side while rotating around a fixed pivot point. This animation simulates the natural swinging motion of an object suspended from above. Syntax @keyframes swing { keyframe% { transform: rotate(angle); } } .element { animation: swing duration timing-function iteration-count; transform-origin: top center; } Example The following example demonstrates a swing animation applied to a colored box that rotates back and forth like a ...
Read MoreCSS :before pseudo-element
The CSS :before pseudo-element is used to insert content before an element's actual content. It creates a virtual element that appears as the first child of the selected element, allowing you to add decorative or informational content without modifying the HTML structure. Syntax selector:before { content: value; /* other properties */ } Example 1: Adding Text Content The following example demonstrates how to add text content before paragraph elements − p:before { ...
Read MoreRotate Out Down Left Animation Effect with CSS
The CSS rotate out down left animation effect creates a rotating exit animation where an element rotates 90 degrees clockwise around its bottom-left corner while fading out. This animation is commonly used for dramatic exit effects in web interfaces. Syntax @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreRotate In Up Right Animation Effect with CSS
The CSS rotateInUpRight animation creates a rotation effect where an element rotates in from an upward-right position. The element starts at -90 degrees rotation and gradually rotates to 0 degrees while fading in from transparent to fully visible. Syntax @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { ...
Read More