Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 More
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 More
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 More
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: drop shadow, blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, url. The drop shadow on an image can look like the following image − To add the drop ... Read More
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 More
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
CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc. color − This property is used to change the color of the text. font-family − This property is used to set the font face for an element. font-kerning − To make the character spacing uniform and increase readability, the font-kerning property is ... Read More
To create a tabbed navigation menu, start with a basic unordered list with the base class of .nav and add class .nav-tabs. The navigation tab looks like the following on a web page − Create a Navigation tab Create a navigation tab with nav and nav-tabs − Home About Products Contact Us Set the Current Page Above, we have set the Home as active, since we wanted it to be the current page − Home Create a Tabbed Navigation Menu with ... Read More
The mega menu includes the menus with dropdown menus. The dropdown will have a complete setup for creating rows and columns and adding content like this − The mega menu i.e., the full-width dropdown menu in a navigation bar appears like this − On clicking the Projects dropdown menu, the dropdown menu appears − Set the Navigation Menu We have set the menu links inside the Home About Contact Us More Info Style the Menu and Links The navigation menu ... Read More
To create a responsive navigation bar, the media queries are used. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. The navigation bar with dropdown looks like the following. The dropdown menu is having Contact Us, Visit Us, and About Us sub-menus − Style the Navigation Menu and Links The background color of the navigation menu are set here, with the links. The menu links are set with the display property inline-block. It displays an element as an inline-level block container − nav{ background-color: ... Read More