Found 601 Articles for Front End Scripts

Universal Selectors in CSS

radhakrishna
Updated on 30-Jan-2020 07:21:53

526 Views

A selector is an HTML tag at which a style will be applied. This could be any tag like or etc.With the type selector, set for HTML tags like h1, h2, h3, p, etc:h2 {    color: #FFFF00; }Rather than selecting elements of a specific type, the universal selector simply matches the name of any element type:* {    color: #FFFF00; }

Comparison of CSS versions

Lakshmi Srinivas
Updated on 30-Jan-2020 07:21:17

1K+ Views

Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning, and tables.CSS3 became a W3C recommendation in June 1999 and builds on older versions CSS. it has divided into documentation is called as Modules and here each module having new extension features defined in CSS2.CSS3 is ... Read More

How to define a measurement in screen pixels with CSS?

mkotla
Updated on 30-Jan-2020 07:27:48

144 Views

To define a measurement in screen pixels with CSS, use the px unit.Let us see an example:                            This div has relative positioning.          

Current Version of CSS

karthikeya Boyini
Updated on 30-Jul-2019 22:30:22

955 Views

CSS3 is the latest standard of CSS earlier versions (CSS2). Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning, and tables.CSS3 became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentation is called as Modules and here ... Read More

What is CSS and why it is used?

varun
Updated on 30-Jul-2019 22:30:22

228 Views

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in the display for different devices and screen sizes as well as a variety of other effects.Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.CSS is easy to learn and understand but it provides powerful control over the presentation of ... Read More

HTM5 checkValidity() method

Sravani S
Updated on 30-Jan-2020 07:08:40

273 Views

The HTML5 checkValidity() works in Google Chrome and Opera as well. This works as well:                    .valid { color: #0B7866; }          .invalid { color: #0B6877; }                            function check(input) {             var out = document.getElementById('result');                         if (input.validity) {                if (input.validity.valid === true) {                   out.innerHTML = "" + input.id + " valid";                } else {                   out.innerHTML = "" + input.id + " not valid";                }             }            console.log(input.checkValidity());          };                      Minimum:                                

HTML5 Canvas Transformation

Krantik Chavan
Updated on 30-Jan-2020 07:07:31

251 Views

HTML5 canvas provides methods that allow modifications directly to the transformation matrix. The transformation matrix must initially be the identity transform. It may then be adjusted using the transformation methods.ExampleLet us see an example of canvas transformation:                    function drawShape(){             // get the canvas element using the DOM             var canvas = document.getElementById('mycanvas');             // Make sure we don't execute when canvas isn't supported             if (canvas.getContext){                // use getContext to use the canvas for drawing                var ctx = canvas.getContext('2d');                var sin = Math.sin(Math.PI/6);                var cos = Math.cos(Math.PI/6);                ctx.translate(200, 200);                var c = 0;                                for (var i=0; i

How to save DIV as Image with canvas2image with extension in HTML?

Govinda Sai
Updated on 30-Jan-2020 07:05:15

513 Views

DIV content can be saved as image with the help of html2canvas function in javascript. DIV tag defines a section in HTML document. Example:    Hello world This shows division area named as cpimg. Html2canvas function saves div as an image with following code:html2canvas(document.querySelector(“#cpimg”)).then(canvas {    document.body.appendChild(canvas) });It saves the referred div section “cpimg” into the image.

How to use FastClick with jQuery Mobile the right way in HTML?

Lakshmi Srinivas
Updated on 30-Jan-2020 07:01:08

127 Views

There is no need to use 3rd party plugins like Fastclick. jQuery Mobile solved this with vclick event.JQuery works well on mobile and desktop and don’t have 300 ms delay$(document).on('vclick', '#impButton', function(){ });

Draw a circle filled with random color squares on HTML5 canvas

Sravani S
Updated on 30-Jan-2020 06:59:59

1K+ Views

When we need to fill a circle with 1x1 pixels, all with different colors in a browser, we can use a simple approach like this: Drawing all pixels with some random colors in a 200x200 grid on a canvas Changing composite mode Drawing circle on topLet us seen an example:var canvas1 = document.getElementById('canvas'), // getting canvas element    ctx1 = canvas1.getContext('2d'), // getting context    x, y = 0, // initializing x and y coordinates    diamet = canvas1.width,    radius = diamet * 0.6;    ctx1.translate(0.6, 0.6); //Making pixels sharper        for(; y < diamet; y++) { // x/y grid ... Read More

Advertisements