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 Yaswanth Varma
Page 20 of 31
Add more than one shadow to a text with CSS
Whether in graphic design, photography, or even on a web page, adding shadows is a powerful technique to create depth and visual interest. You can apply multiple shadows to text using CSS without needing external image editing software. CSS provides two main properties for creating shadow effects − text-shadow - for adding shadows directly to text box-shadow - for adding shadows to elements containing text To add multiple shadows with CSS, use a comma-separated list of shadow values. Syntax /* Multiple text shadows */ text-shadow: shadow1, shadow2, shadow3; /* Multiple box shadows ...
Read MoreCreate rounded image with CSS
Creating rounded images in CSS is achieved using the border-radius property. This property allows you to round the corners of any element, including images, making them appear circular or with softly rounded edges. This technique is commonly used for profile pictures, thumbnails, and decorative elements. Syntax img { border-radius: value; } Possible Values ValueDescription 50%Creates a perfect circle (most common for rounded images) lengthSpecific radius in px, em, rem, etc. %Percentage of the element's dimensions Example 1: Circular Image The following example creates a perfectly circular ...
Read MoreCenter links in a Navigation Bar with CSS
One of the most crucial components of a website or application is the navigation bar. It usually sits at the top of your application and makes it simple for users to navigate to the most important sections or pages of your website. The major sections of your website are essentially linked from a navbar. These links are commonly known as navigation items, and you can align them to the left, center, or right based on your design requirements. Syntax /* Method 1: Using Flexbox */ nav { display: flex; ...
Read MoreDifferences between CSS display: none; and visibility: hidden;
There are moments when you wish to visually hide elements in an application. There are several methods by which you can accomplish this. Using the visibility property with a hidden value (visibility:hidden;) or the display property with a none value (display:none;) are two common approaches. Both approaches make the element hide, but they have different effects on how it behaves. In this article we are going to learn about the differences between display:none; and visibility:hidden; CSS visibility:hidden The CSS visibility:hidden property hides an element while preserving its space in the layout. The element becomes invisible but still ...
Read MoreAdd shadow effects to text with CSS
The text-shadow property in CSS is used to add shadow effects to text, creating depth and visual appeal. This property helps make text stand out and gives it a three-dimensional appearance on web pages. Syntax text-shadow: h-shadow v-shadow blur-radius color; Property Values ValueDescription h-shadowHorizontal offset of the shadow (required) v-shadowVertical offset of the shadow (required) blur-radiusBlur distance (optional, default is 0) colorShadow color (optional, uses text color if not specified) Example 1: Basic Text Shadow The following example shows a simple shadow with horizontal and vertical offset − ...
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 MoreCreate blurred picture or text with CSS Filters
Users find websites with blurred backgrounds or text visually appealing. CSS filters provide a simple way to create blurred effects on images or text, enhancing visual appeal and achieving specific design aesthetics. The filter property allows you to apply various visual effects including blur, brightness, and contrast adjustments. Syntax /* Basic blur syntax */ filter: blur(radius); /* Text shadow blur syntax */ text-shadow: h-offset v-offset blur-radius color; Method 1: Using CSS Filter Property The filter: blur() function applies a Gaussian blur to any element. The blur radius determines how many pixels blend into ...
Read MoreFade Out Right Big Animation Effect with CSS
Animations never fail to attract people. When you present them with a painting and a video, they will always focus on the moving image since it is more visually appealing. The fade out right big animation creates a dramatic exit effect where elements fade away while sliding to the right with increased scale, adding visual impact to your web interfaces. Syntax @keyframes fadeOutRightBig { from { opacity: 1; transform: translateX(0); } ...
Read MoreCreate a Column Layout using CSS
Web developers can organize and structure content in a visually appealing way by utilizing CSS to create a column layout. Developers can define the number of columns by using the column-count property, while the column-gap property regulates the distance between them. This technique maximizes available space and improves readability, especially for webpages with a lot of text. Syntax selector { column-count: number; column-width: length; column-gap: length; column-rule: width style color; } Key Properties for Column Layout PropertyDescription ...
Read MoreFade In Animation Effect with CSS
CSS fade-in animation creates a smooth visual effect where elements gradually transition from transparent to opaque. This effect is commonly used to enhance user interaction by drawing attention to specific elements like buttons, images, or text when users hover over them. Syntax selector { opacity: initial-value; transition: opacity duration; } selector:hover { opacity: final-value; } Key Properties PropertyDescriptionValues opacityControls transparency level0 (transparent) to 1 (opaque) transitionDefines animation duration and timingTime in seconds (s) or milliseconds (ms) Example 1: ...
Read More