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
Web Development Articles
Page 78 of 801
Auto Grow a Textarea with JavaScript in CSS
Using JavaScript, we can set our TextArea element to automatically grow with its content. The following examples illustrate how we can achieve the above scenario. Let us say the following is our TextArea before adding content − The following is the TextArea after adding content − The following is the same TextArea that auto grows itself after adding more content − Auto Grow a Textarea Example Let us see how to auto grow a textarea − * { ...
Read MoreApplying Sepia Effect to Images using CSS3
The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The sepia sets the sepia effect to an image. To set the sepia effect in CSS3, use the ...
Read MoreAligning elements using the position property in CSS
We can align elements using the CSS positioning schema methods (fixed, relative, absolute and static) and properties (left, right, top and bottom). To align elements in CSS, use the position property. The position can be set using the following values − static relative fixed absolute sticky For example, the following is achieved by aligning divs on a web page using the position property − Align Elements With Absolute and Relative Positions Example Let’s see an example to align elements using the positioning schema. We have shown the absolute and relative positions here − ...
Read MoreAlign Flex Items along Cross Axis using CSS3
We can easily align the flex items along cross axis, but first let us understand what cross axis is. The cross axis is perpendicular to the main axis. The main axis is like the flex direction − Create a Container div First, set the divs inside a container(flex container) − First Div Second Div Third Div Style the Container and Make it Flexible The flex container becomes flexible by setting the display property to flex. The flex items are aligned using the align-items property − ...
Read MoreAdvance CSS layout with flexbox
CSS3 provides a layout mode Flexible Box, commonly called as Flexbox. Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. It includes the container, flex items, etc. The container has the following properties − flex-direction flex-wrap flex-flow justify-content align-items align-content Here are all the Flexbox examples in a single image. It uses the flex, flex-wrap, justify-content, align-items, etc. − Style the Parent Container We have styled the parent container here. The flex container becomes flexible by setting the display property to flex ...
Read MoreAdjusting the Image Contrast using CSS3
The filter property is used to set visual effects, such as drop shadow, contrast, brightness, saturation, shadow to images in CSS. The following is the syntax − Syntax filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); As you can see above, with the filter property, we can set the following effects: contrast, drop shadow, blur, brightness, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. To adjust the contrast of an image in CSS3, use the contrast value for filter property. The contrast ...
Read MoreAdjacent Sibling Selectors in CSS
The CSS adjacent sibling selector is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the first selector. The + sign is used as a separator. For example, the direct next element is selected here with the adjacent sibling selector concept − Syntax The syntax for CSS adjacent sibling selector is as follows − element + element { /*declarations*/ } Adjacent Sibling Selector Example Example The following example illustrate CSS adjacent sibling selector − ...
Read MoreAdding Hyphens to Text with the CSS hyphens Property
Using the CSS hyphens property, we can specify how hyphens are added in text. The hyphens property values can be − none − The words not hyphenated manual − The words are hyphenated at ‐ or The default. auto − The words are hyphenated where the deciding factor is the algorithm The hyphen can be set like this − It can also be set like this. Totally depends on the text form − Let us see some examples − Words are Hyphenated Manually The following example illustrate CSS hyphens property where the word are hyphenated ...
Read MoreAdding Borders to Tables in CSS
Borders can be easily set on a table with CSS using the border property. Specific borders can also be set, such as left border, right border, top border, etc. With that, the border style, width, colour, etc, can be set for the left, right, top, and bottom positions. For example, here, the left border is set with a different style and color compared with all the other locations − For example, here, the top border is set with a different style and color compared with all the other locations − Syntax The CSS border property is used to ...
Read MoreAbsolute Positioning Using CSS
We can define positioning of an element in CSS as absolute which renders the element relative to the first positioned (except static) parent. Elements with positioning method as absolute are positioned by CSS Positioning properties (left, right, top and bottom). The position property has the following values − static relative fixed absolute sticky Here is how we position an element with absolute positioning, relative to the first positioned parent − We need to set absolute positioning. For that, use the position property − position: absolute; Positioned Elements as Absolute Example In this example, we have ...
Read More