Found 1594 Articles for CSS

What is a page box in CSS?

Lakshmi Srinivas
Updated on 16-Mar-2020 07:14:39

216 Views

You can specify the dimensions, orientation, margins, etc., of a page box within an @page rule. The dimensions of the page box are set with the 'size' property. The dimensions of the page area are the dimensions of the page box minus the margin area.For example, the following @page rule sets the page box size to 8.5 × 11 inches and creates '2cm' margin on all sides between the page box edge and the page area −     You can use the margin, margin-top, margin-bottom, margin-left, and margin-right properties within the @page rule to set margins for your page.Finally, ... Read More

Role of media attribute on the LINK element

Chandu yadav
Updated on 16-Mar-2020 07:14:04

147 Views

The media attribute on the LINK element specifies the target media of an external style sheet −Example    

How to specify the target media within the document language with CSS

karthikeya Boyini
Updated on 16-Mar-2020 07:13:23

108 Views

To specify the target media, use the media attribute −Example    

How to specify the target media types of a set of CSS rules

George John
Updated on 16-Mar-2020 07:11:48

174 Views

The media attribute on the Link element specifies the target media of an external style sheet −Example    

CSS media types

Samual Sam
Updated on 30-Jul-2019 22:30:22

128 Views

The following are the media types in CSS:S.noValue & Description1.AllSuitable for all devices.2.AuralIntended for speech synthesizers.3.BrailleIntended for braille tactile feedback devices.4.EmbossedIntended for paged braille printers.5.HandheldIntended for handheld devices (typically small screen, monochrome, limited bandwidth).6.PrintIntended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media.7.ProjectionIntended for projected presentations, for example, projectors or print to transparencies. Please consult the section on paged media.8.ScreenIntended primarily for color computer screens.9.TtyIntended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.10.TvIntended for television-type devices. Read More

CSS pitch property

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

125 Views

This property specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz.The possible values are −frequency - Specifies the average pitch of the speaking voice in hertz (Hz).x-low, low, medium, high, x-high - These values do not map to absolute frequencies since these values depend on the voice family.

CSS cue-after Property

karthikeya Boyini
Updated on 25-Jun-2020 12:20:39

83 Views

The cue-after property specifies a sound to be played after speaking an element's content to delimit it from other. The possible values include −url − The URL of a sound file to be played.none − Nothing has to be played.Example    

Fade Out Animation Effect with CSS

Arjun Thakur
Updated on 16-Mar-2020 06:56:33

543 Views

To implement Fade Out 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 fadeOut {             0% {opacity: 1;}             100% {opacity: 0;}          }          @keyframes fadeOut {             0% {opacity: 1;}             100% {opacity: 0;}          }          .fadeOut {             -webkit-animation-name: fadeOut;             animation-name: fadeOut;          }                           Reload page                function myFunction() {             location.reload();          }          

Fade In Up Big Animation Effect with CSS

Samual Sam
Updated on 25-Jun-2020 12:21:08

251 Views

To implement Fade In Up 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 fadeInUpBig {             0% {             opacity: 0;             -webkit-transform: translateY(2000px);          }          100% {             opacity: 1;             -webkit-transform: translateY(0);          }       }       @keyframes fadeInUpBig {          0% {             opacity: 0;             transform: translateY(2000px);          }          100% {             opacity: 1;             transform: translateY(0);          }       }       .fadeInUpBig {          -webkit-animation-name: fadeInUpBig;          animation-name: fadeInUpBig;       }                         Reload page                function myFunction() {             location.reload();          }          

Fade In Animation Effect with CSS

Yaswanth Varma
Updated on 08-Jan-2024 15:25:05

546 Views

We are aware that CSS offers a developer an excess of features. Some can only be attained by adjusting already-existing features, while others can be accomplished directly. For example, different animations can be applied to different website elements. One of these is fade-in animation. When hovering over an object in a fade-in animation, it appears to get darker. There exist numerous methods to accomplish this outcome. To draw attention to a certain button or image, we use this technique. We may achieve this by adjusting the element's opacity. Example Let's look at the following example, where we are going to ... Read More

Advertisements