- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
77 Views
This property specifies a pause to be observed before speaking an element's content. The possible values aretime − Expresses the pause in absolute time units (seconds and milliseconds).percentage − Refers to the inverse of the value of the speech-rate property. For example, if the speech-rate is 120 words per minute (i.e. a word takes half a second, or 500ms), then a pause-before of 100% means a pause of 500 ms and a pause-before of 20% means 100ms.
97 Views
The CSS background property is used to set all the background image properties in one section.ExampleYou can try to run the following code to implement the background property:Live Demo #demo { background: lightblue url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg") no-repeat fixed top; } www.tutorialspoint.com Tutorials Point originated from the idea that there exists a class of readers ... Read More
158 Views
The CSS background-size property is used to specify size of the background images.ExampleYou can try to run the following code to implement the background-size property in CSS:Live Demo #demo { border: 5px dashed green; padding: 10px; background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg"); background-size: 200px 100px; } www.tutorialspoint.com ... Read More
289 Views
Wave effect is used to give the object a sine wave distortion to make it look wavy.The following parameters can be used in this filterS.NoParameter & Description1AddA value of 1 adds the original image to the waved image, 0 does not.2FreqThe number of waves.3LightThe strength of the light on the wave (from 0 to 100).4PhaseAt what degree the sine wave should start (from 0 to 100).5StrengthThe intensity of the wave effect.ExampleYou can try to run the following code to set wave effect −Live Demo Text Example: CSS Tutorials
69 Views
Use the border-bottom-left-radius property to set the border of the bottom left corner. You can try to run the following code to implement the border-bottom-left-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-bottom-left-radius: 45px; background: blue; padding: 20px; width: 200px; height: 150px; } Rounded corners!
154 Views
To implement Fade Out Right 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 fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } animation-name: fadeOutLeft; Reload page function myFunction() { location.reload(); }
61 Views
Use border-bottom-right-radius property for setting the border of the bottom right corner. You can try to run the following code to implement border-bottom-right-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-bottom-right-radius: 45px; background: orange; padding: 20px; width: 200px; height: 150px; } Rounded corners!
73 Views
Use the border-top-right radius property in CSS to set the top right radius border. You can try to run the following code to implement border-top-right-radius property −ExampleLive Demo #rcorner { border-radius: 25px; border-top-right-radius: 45px; background: orange; padding: 20px; width: 200px; height: 150px; } Rounded corners!
96 Views
To implement Fade Down 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 fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } Reload page function myFunction() { location.reload(); }