Web Development Articles - Page 519 of 1049

The property opacity is the ultimate and modern solution and works for Firefox 0.9+, Safari 2, opera 9+, IE 9+ and every version of Google Chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. The filter property is for IE browsers from 5 to 9 to give opacity like effect.Following is code for image opacity using CSS for all browsers −Example Live Demo body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } img {    width:270px;    height:200px; } .transparent{   ... Read More

The text-overflow property is used in CSS3 to determine how overflowed content that is not displayed is signalled to users. Syntax The following is the syntax of the text-overflow property − text-overflow: value; The value can be clip, ellipsis, string, and initial. You can set any text using the string value. The ("...") t is shown for the clipped text when the ellipsis value is used. The following is the code for handling text overflow in CSS3 − Clip the Text In this example, the overflow text is clipped and cannot be accessed using the text-overflow property with ... Read More

To set the size of the radial gradient, use the radial-gradient() function. This function sets a radial gradient as the background image. The second parameter in the function is to be set as the size you want as in the below example − background-image: radial-gradient(40% 50px at center, rgb(30, 255, 0), rgb(0, 195, 255), rgb(128, 0, 32)); Possible values are farthest-corner (default), closest-side, closest-corner, and farthest-side. Following is the code for setting the size of the radial gradients using CSS. Let us first see the complete syntax of the radial gradient. Syntax The following is the syntax of ... Read More

To create CSS3 Transition Effects, use the transition property. Following is the code for creating transition effects using CSS3 −Example Live Demo .container div {    width: 300px;    height: 100px;    background: rgb(25, 0, 255);    border: 2px solid red;    transition: width 2s; } .container:hover div {    width: 100px; } Transition effects example Hover over the above div to reduce its width OutputThe above code will produce the following output −On hovering above the div −

To implement JavaScript Auto Complete / Suggestion feature, the code is as follows −Example Live Demo    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;    } JavaScript Auto Complete / Suggestion feature    var tags = ["orange", "apple","pineapple","guava","mango","pomegranate","litchi",];    let check;    document.querySelector(".fruits").addEventListener("keyup", (event) => {       let value = event.target.value;       document.getElementById("datalist").innerHTML = "";       tags.forEach((item) => {          if (item.toLowerCase().indexOf(value.toLowerCase()) > -1) {             var opt = document.createElement("option");             var sel = document.createTextNode(item);             opt.appendChild(sel);             document.getElementById("datalist").appendChild(opt);          }       });    }); OutputOn typing something in the input field −

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis. The following are some of the methods of CSS3 3D Transform − S.No. Value & Description 1 matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)Used to transforms the element by using 16 values of matrix 2 translate3d(x, y, z)Used to transforms the element by using x-axis, y-axis and z-axis 3 translateX(x)Used to transforms the element by using x-axis 4 translateY(y)Used to transforms the element by using y-axis ... Read More

A paragraph can be bordered easily on a web page with HTML and CSS. With that, to border the paragraph, we can also use an image. To create border images in CSS, use the border-image property. The following is the syntax of the border-image property − Syntax border-image: value; The value can be − border-image-source − The source of the image to be set as border border-image-slice − Slice the border image. The image is slice in the following sections− four corners, four edges and the middle. border-image-width − width of the border image border-image-outset − ... Read More

The rounded corner of an element is set on a web page using the border-radius property in CSS3. You can set the shape of the rounded corners with − length − Set shape of the corners in length units. Default is 0. Read about length units % − Set the shape in percentage Let us see two examples to set rounded corners for a container and an image. Create rounded corners We have two divs here to show the difference between a normal and a container with rounded corners − Rounded Corners Default corners Example The ... 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

For multiple transitions, use the CSS3 transition property, which is a shorthand property. It sets the property, duration, timing, and delay of the transition in a single line. Let’s say we changed the width and border-radius for the transition. transition: width 2s, border-radius 2s; Set the container div To begin with, set a parent div − Set the transition The transition is set using the transition property for the width and border-radius properties. The duration set is 2 seconds − .container div { width: 300px; ... Read More