Found 1566 Articles for CSS

CSS pause-after property

Chandu yadav
Updated on 16-Mar-2020 07:27:55

94 Views

This property specifies a pause to be observed after speaking an element's content. The possible values are −time − Expresses the pause in absolute time units (seconds and milliseconds).percentage − Refers to the inverse of the value of the speech-rateproperty. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-after of 100% means a pause of 500 ms and a pause-after of 20% means 100ms.

Aural Media with CSS

Arjun Thakur
Updated on 16-Mar-2020 07:25:00

122 Views

Aural rendering of documents is mainly used by the visually impaired. Some of the situations in which a document can be accessed by means of aural rendering rather than visual rendering are the following.Learning to readTrainingWeb access in vehiclesHome entertainmentIndustrial documentationMedical documentationWhen using aural properties, the canvas consists of a three-dimensional physical space (sound surrounds) and a temporal space (one may specify sounds before, during, and after other sounds).

CSS azimuth Property

Lakshmi Srinivas
Updated on 16-Mar-2020 07:26:11

156 Views

The azimuth property sets where the sound should come from horizontally. The possible values are listed below:angle − Position is described in terms of an angle within the range -360deg to 360deg. The value 0deg means directly ahead in the center of the soundstage. 90deg is to the right, 180deg behind, and 270deg (or, equivalently and more conveniently, -90deg) to the left.left-side − Same as '270deg'. With 'behind', '270deg'.far-left − Same as '300deg'. With 'behind', '240deg'.left − Same as '320deg'. With 'behind', '220deg'.center-left − Same as '340deg'. With 'behind', '200deg'.center − Same as '0deg'. With 'behind', '180deg'.center-right − Same as ... Read More

Set printing double-sided documents with CSS

Chandu yadav
Updated on 26-Jun-2020 07:07:38

383 Views

When printing double-sided documents, the page boxes on the left and right pages should be different.ExampleIt can be expressed through two CSS pseudo-classes as follows −    

Orphans CSS Property

karthikeya Boyini
Updated on 16-Mar-2020 07:24:26

178 Views

In typographic lingo, orphans are those lines of a paragraph stranded at the bottom of a page due to a page break, while windows are those lines remaining at the top of a page following a page break. Generally, printed pages do not look attractive with single lines of text stranded at the top or bottom. Most printers try to leave at least two or more lines of text at the top or bottom of each page.The orphans property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page. The widow's property ... Read More

Controlling Pagination with CSS

George John
Updated on 16-Mar-2020 07:21:39

290 Views

To control pagination, use the page-break-before, page-break-after, and page-break-inside properties.Both the page-break-before and page-break-after accept the auto, always, avoid, left, and right keywords.The keyword auto is the default; it lets the browser generate page breaks as needed. The keyword always forces a page break before or after the element, while avoid suppresses a page break immediately before or after the element. The left and right keywords force one or two page breaks, so that the element is rendered on a left-hand or right-hand page.Using pagination properties is quite straightforward. Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. ... Read More

Usage of page-break-before, page-break-after, and page-break-inside properties in CSS

Samual Sam
Updated on 16-Mar-2020 07:22:40

352 Views

Suppose your document has level-1 headers start new chapters with level-2 headers to denote sections. You'd like each chapter to start on a new, right-hand page, but you don't want section headers to be split across a page break from the subsequent content. You can achieve this using following rule −     Use only the auto and avoid values with the page-break-inside property. If you prefer that your tables not be broken across pages if possible, you would write the rule −    

Paged Media in CSS

Lakshmi Srinivas
Updated on 16-Mar-2020 07:20:51

117 Views

Paged media differ from continuous media in that the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages that are displayed on computer screens, etc.The CSS2 defines a "page box", a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas −The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for a layout that occurs between page breaks.The margin area − It surrounds ... Read More

Role of size property in CSS to set the size and orientation of a page box

Ankith Reddy
Updated on 16-Mar-2020 07:19:41

98 Views

The size property specifies the size and orientation of a page box. There are four values which can be used for page size auto - The page box will be set to the size and orientation of the target sheet.landscape − Overrides the target's orientation. The page box is the same size as the target, and the longer sides are horizontal.portrait − Overrides the target's orientation. The page box is the same size as the target, and the shorter sides are horizontal.length − Length values for the 'size' property create an absolute page box. If only one length value is specified, ... Read More

Fade In Left Big Animation Effect with CSS

karthikeya Boyini
Updated on 16-Mar-2020 07:18:58

144 Views

To implement Fade In Left Big Animation Effect on an image with CSS, you can try to run the following code −ExampleLive Demo                    .animated {             background-image: url(/css/images/logo.png);             background-repeat: no-repeat;             background-position: left top;             padding-top:95px;             margin-bottom:60px;             -webkit-animation-duration: 10s;             animation-duration: 10s;             -webkit-animation-fill-mode: both;             animation-fill-mode: both;          }          @-webkit-keyframes fadeInLeftBig {             0% {                opacity: 0;                -webkit-transform: translateY(-2000px);             }             100% {                opacity: 1;                -webkit-transform: translateY(0);             }          }          @keyframes fadeInLeftBig {             0% {                opacity: 0;                transform: translateY(-2000px);             }             100% {                opacity: 1;                transform: translateY(0);             }          }          .fadeInLeftBig {             -webkit-animation-name: fadeInLeftBig;             animation-name: fadeInLeftBig;          }                           Reload page                function myFunction() {             location.reload();          }          

Advertisements