Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
In electrical and electronics engineering, the closed path followed by the electric current is known as electric circuit. Every electric circuit is composed of many circuit components such as sources of power, resistors, capacitors, inductors, diode, etc. Therefore, the circuit components are the basic building blocks of an electrical or electronic circuit.Depending upon the power delivering or absorbing ability, the circuit components can be classified in following two types −Active componentsPassive componentsThe most significant difference between active components and passive components is that an active component can supply power to an electric circuit, whereas a passive component cannot deliver power, ... Read More
Linear gradients are used to arrange two or more colors in linear formats like top to bottom. To add transparency, use the RGBA() function and define the color stops. At least two color stops should be mentioned. Let us first see the syntax. Syntax The following is the syntax to create Linear Gradients − background-image: linear-gradient(dir, colorStop1, colorStop2, colorStop3, ...); Above, the dir is the direction i.e., from − Left to Right Right to Left Diagonal Top to Bottom Linear Gradient Beginning From Right to Left The following is the code to set transparent linear gradient ... Read More
The transition shorthand property allows us to specify transition-property, transition-duration, transition-timing function and transition-delay as values to transition property in one line − transition-duration − Specifies how many seconds or milliseconds a transition effect takes to complete transition-property − The name of the property the effect is on transition-timing function − The speed curve of the transition transition-delay − Set the delay for the transition effect in seconds Remember, you need to set the CSS property on which the effect is applied and the duration as well. Let’s say we will convert a shape to oval on mouse ... Read More
CSS3 has support for RGBA, HSL, HSLA, and other color values. Additionally, more than 100 color names are also provided. CSS3 RGBA The CSS3 RGBA color value is for Red, Green, Blue and Alpha. The alpha is the color opacity i.e., a number between 0.0 and 1.0. Here, 1.0 would be for full opaque. Here, we can see the difference in opacity created with the Alpha parameter in RGBA. Example Let us now see an example to set the background color on a web page using the RGBA color values − ... Read More
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 Set a Parent div First, set a parent div and style the container with display flex. The flex container becomes flexible with display flex. Wrap the flex item with the flex-wrap: wrap − .container { display: flex; ... Read More
With the introduction of the following text-decoration properties, we can now style text in more ways than before. The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly. Syntax The syntax of CSS text-decoration is as follows − Selector { text-decoration: /*value*/ } The text-decoration Shorthand Property The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, etc. Example Let us see an example to use the shorthand property to decorate text − ... Read More
Use the RGBA() values for CSS transparency. Set the alpha channel parameter to specify the opacity for color − .transparent { background-color: rgba(0, 0, 255, 0.582); } RGBA color value includes the rgba(red, green, blue, alpha). Here, the alpha is to be set for transparency i.e. − 0.0: fully transparent 1.0: fully opaque Transparency With RGBA The following is the code for implementing CSS transparency using RGBA. Here, we have set the alpha parameter to a value 0.582 for transparency − Example ... Read More
To show how to put an icon inside an input element in a form using CSS, use the Font Awesome. For adding the font awesome icons on a web page, include the CDN − Place Icons Inside an Input Element We have used the Font Awesome icons here for Username, Email and password − Icon for the Username For the Username, the following icon is included − ... Read More
We can style the file upload button using the CSS pseudo element ::file-selector-button. However, the full support of this pseudo element is limited to Firefox and Firefox Android. The ::-webkit-file-upload-button is used to support Safari, Chrome and Opera. Syntax The syntax of CSS file-selector property is as follows − Selector::file-selector-button { attribute: /*value*/ } Selector::-webkit-file-upload-button { attribute: /*value*/ } Style File Upload Button With ::file-selector-button The following example illustrate CSS file-selector-button selector. On hover, we have styled it like this − input[type=file]::file-selector-button:hover { cursor: grab; ... Read More
Using the CSS :not() pseudo-class, we can refine our styling by selecting those elements which do not have a specific value or does not match a selector. Select Elements not Having a Child Selector To select elements not having a child selector, use the :not pseudo-class in CSS. Here, we have a child selector. The CSS child selector is used to select all the child elements with a particular parent element. It selects all the elements that are children of i.e. div>p But we have selected elements not having this div>p − p:not(div>p) { ... Read More