- 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 8894 Articles for Front End Technology
775 Views
To create pulse effect with CSS, you can try to run the following codeExampleLive 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 pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } Reload page function myFunction() { location.reload(); }
196 Views
To create a light speed out effect with CSS, you can try to run the following code: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: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: 0.25s; animation-duration: 0.25s; } Reload page function myFunction() { location.reload(); }
51 Views
The !important rule provides a way to make your CSS cascade. It also includes the rules that are to be applied always. A rule having a !important property will always be applied, no matter where that rule appears in the CSS document.ExampleFor example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red: ExampleIf you want to make sure that a property always applied, you would add the !important property to the tag. Therefore, to make the paragraph text always red, you should write it as follows :Live ... Read More
660 Views
To create a light speed in effect 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: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: ... Read More
175 Views
To create hinge animation effect 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: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; ... Read More
202 Views
Users find a website with a blurred background to be visually good-looking. But have you ever considered how this blur is made specifically? Well, it's quite easy. Let's look at how to use the CSS background blur property to do it. Using CSS filters to generate blurred effects on images or text is a common web development method to improve visual appeal or achieve certain design sensibilities. The rendering of items on a webpage can be altered, including blurring, with CSS filters. When using the CSS filter: blur() property on images, make necessary adjustments to the blur radius. For example, ... Read More
88 Views
This property specifies a sound to be played as a background while an element's content is spoken. Possible values could be any of the followings −URI − The sound designated by this is played as a background while the element's content is spoken.mix − When present, this keyword means that the sound inherited from the parent element's play-during property continues to play and the sound designated by the uri is mixed with it. If the mix is not specified, the element's background sound replaces the parent's.repeat − When present, this keyword means that the sound will repeat if it ... Read More
556 Views
The flip effect is used to create a mirror image of the object. The following parameters can be used in this filterS.NoParameter & Description1FlipHCreates a horizontal mirror image2FlipVCreates a vertical mirror imageExampleTo set flip effectLive Demo Text Example: CSS Tutorials