Add Special Colored Corner to Body or Text in CSS

Lakshmi Srinivas
Updated on 16-Mar-2020 07:35:44

461 Views

CSS3 Rounded corners are used to add special colored corner to body or text by using the border-radius property.ExampleLive Demo                    #rcorner {             border-radius: 25px;             background: #8AC007;             padding: 20px;             width: 200px;             height: 150px;          }                     Rounded corners!    

Set Different Font Families for Screen and Print with CSS

Samual Sam
Updated on 16-Mar-2020 07:34:02

2K+ Views

The following example specifies different font families for screen and print. The next CSS uses the same font size for both screens as well as a printer.Example    

Create an Attenuated Shadow with CSS

Ankith Reddy
Updated on 16-Mar-2020 07:31:18

156 Views

Shadow filter is used to create an attenuated shadow in the direction and color specified.The following parameters can be used in this filter −S.NoParameter & Description1ColorThe color that you want the shadow to be.2DirectionThe direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).0 = Top45 = Top right90 = Right135 = Bottom right180 = Bottom225 = Bottom left270 = Left315 = Top leftExampleYou can try to run the following code to implement shadow filter −Live Demo                         Text Example:       CSS Tutorials    

CSS speak Punctuation Property

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

76 Views

The speak-punctuation property specifies how punctuation is spoken.The possible values are −code − Punctuation such as semicolons, braces, and so on are to be spoken literally.none − Punctuation is not to be spoken but instead rendered naturally as various pauses.

Wiggle Animation Effect with CSS

Samual Sam
Updated on 16-Mar-2020 07:29:20

599 Views

The wiggle effect move or cause to move up and down or from side to side with small rapid movements.ExampleYou can try to run the following code to implement the winggle animation effect −Live 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;           ... Read More

CSS Speak Numeral Property

George John
Updated on 16-Mar-2020 07:28:32

118 Views

The speak-numeral property controls how numerals are spoken.The possible values aredigits − Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven".continuous − Speak the numeral as a full number. Thus, "237" is spoken "Two hundred thirty seven". Word representations are language-dependent.

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.

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

CSS Orphans 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

Usage of Page Break 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 −    

Advertisements