Found 8591 Articles for Front End Technology

Setting Line Height using CSS

AmitDiwan
Updated on 30-Dec-2019 12:10:35

96 Views

To set line height, use the line-height property. Followng are the property values −line-height: normal|number|length|initial|inherit;ExampleLet us now see an example − Live Demo div {    line-height: 1.9; } Demo Heading This is demo text. This is another demo text. OutputExampleLet us now see another example − Live Demo div {    line-height: 200%; } Demo Heading This is demo text. This is another demo text. Output

Understanding CSS Absolute and Relative Units

AmitDiwan
Updated on 02-Jan-2024 18:02:08

456 Views

The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc. These length units are categorised into Absolute and Relative Units. CSS Absolute Units The absolute length units are fixed in relation to each other. These units are used when the output format is already known. The following are some of the Absolute Length Units − Sr.No Unit & Description 1 cmcentimeters 2 mmmillimeters 3 ininches (1in = 96px = 2.54cm) 4 px *pixels (1px ... Read More

The CSS translate() Function

AmitDiwan
Updated on 28-Dec-2023 18:23:40

203 Views

The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function. Syntax The syntax is as follows − Transform: translate(x, y) Above, transform the element along with x-axis and y-axis. Translate an image In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property − .translate_img { transform: translate(50px, 20px); } Example Let us now see the ... Read More

Styling Lists with CSS

AmitDiwan
Updated on 30-Dec-2019 11:04:11

217 Views

Lists are ordered as well unordered. With CSS, you can set the set list item markers or an image for the markers. With that, with CSS, we can also set the position for list-item markers.Let us now see some examples −list-style-typeThe list-style-type is used to set the type of list-item marker.ExampleLet us now see an example wherein we are formatting ordered lists (ol) − Live Demo ul {    list-style-type: upper-roman; } Teams India Australia England West Indies South Africa Srilanka Outputlist-style-imageThe list-style-image property is used to set an image as the ... Read More

Text Decoration in CSS

AmitDiwan
Updated on 30-Dec-2019 10:54:26

101 Views

For text decoration in CSS, use the text-decoration property as a shorthand property for the following properties −text-decoration-line text-decoration-color text-decoration-styleExampleLet us see an example for text decoration in CSS − Live Demo .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example wherein we are using separate values − Live Demo p {    writing-mode: vertical-rl;    text-decoration-line: overline;    text-decoration-color: red;    text-decoration-style: wavy; } Demo Heading This is demo text. Output

Set Text Alignment using CSS

AmitDiwan
Updated on 30-Dec-2019 10:50:54

2K+ Views

To set text alignment using CSS, use the text-align property. Following are the possible property values −text-align: left|right|center|justify|initial|inherit;ExampleLet us see an example to set text alignment − Live Demo .demo {    -webkit-columns: auto auto; /* Chrome, Safari, Opera */    -moz-columns: auto auto; /* Firefox */    columns: auto auto;    text-align: justify; } Machine Learning Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of ... Read More

Word Spacing using CSS

AmitDiwan
Updated on 30-Dec-2019 10:42:42

89 Views

To set spacing between words, use the word-spacing property. The property values are as follows −word-spacing: normal|length|initial|inherit;ExampleLet us now see an example − Live Demo p.demo1 {    word-spacing: normal; } p.demo2 {    word-spacing: 10px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. OutputExampleLet us now see another example − Live Demo p.demo1 {    word-spacing: 3cm; } p.demo2 {    word-spacing: 40px; } Demo Heading Heading2 This is demo text. Heading2 This is demo text. Output

Applying Sepia Effect to Images using CSS3

AmitDiwan
Updated on 27-Oct-2023 14:37:19

367 Views

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 More

The CSS3 rotate3d() Function

AmitDiwan
Updated on 29-Dec-2023 15:01:10

108 Views

The rotate3d() function in CSS is used to rotate an element in 3D space. Set the amount and angle of rotation as parameter of rotate3d(). Syntax The following is the syntax of the rotate3d() method − rotate3d(x, y, z, angle) Above, x, y, z is the x-axis, y-azis, and z-axis. The angle is the angle of rotation − Positive angle − Clockwise rotation Negative angle − Counter-clockwise rotation Clockwise rotation of an element In this example, we have set the x, y, z axis. We have set the clockwise rotation with a positive angle − ... Read More

jQuery slideToggle() Method

AmitDiwan
Updated on 30-Dec-2019 10:03:33

292 Views

The slideToggle() method in jQuery is used to toggle between the slideUp() and slideDown() methods.SyntaxThe syntax is as follows −$(selector).slideToggle(speed, easing, callback)Above, the parameter speed is the speed of the slide effect. Here, easing is the speed of the element in different points of the animation, whereas callback is a function to be executed after slideToggle() completes.Let us now see an example to implement the jQuery slideToggle() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          $("p").slideToggle();       });    }); Exam Info Examination begins on 24th December. ... Read More

Advertisements