Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
CSS Articles
Page 125 of 130
Fade In Left Big Animation Effect with CSS
To implement Fade In Left Big Animation Effect on an image with CSS, you can try to run the following code − Example .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: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } Reload page function myFunction() { location.reload(); }
Read MoreFade In Down Animation Effect with CSS
To implement Fade In Down Big Animation Effect on an image with CSS, you can try to run the following code − Example .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 fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } Reload page function myFunction() { location.reload(); }
Read MoreFade In Left Animation Effect with CSS
To implement Fade In Left Animation Effect on an image with CSS, you can try to run the following code − Example .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 fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } Reload page function myFunction() { location.reload(); }
Read MoreWhat is a page box in CSS?
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 MoreRole of media attribute on the LINK element
The media attribute on the LINK element specifies the target media of an external style sheet −Example
Read MoreHow to specify the target media within the document language with CSS
To specify the target media, use the media attribute −Example
Read MoreHow to specify the target media types of a set of CSS rules
The media attribute on the Link element specifies the target media of an external style sheet −Example
Read MoreCSS pitch property
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.
Read MoreFade Out Animation Effect with CSS
To implement Fade Out Animation Effect on an image with CSS, you can try to run the following code − Example .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(); }
Read MoreAchieve X-Ray effect with CSS
X-Ray effect grayscales and flattens the color depth. The following parameter is used in this filter − S.no Parameter & Description 1. XrayGrayscales and flattens the color depth. Example You can try to run the following code to create an X-Ray effect − Text Example: CSS Tutorials
Read More