HTML/CSS

Submitted by: 
CSS animation-play-state In this tutorial we are going to learn about animation-play-state . So, what is animation-play-state? The animation-play-state property specifies whether the animation is paused or running . Syntax of this property: animation-play-state : paused | running | initial | inherit ; Property Values paused - specifies that the animation is paused. running - specifies that the...
Submitted by: 
This is a simple Responsive Web Page using CSS Carousel . In this tutorial you will learn how to create a responsive web page and has a carousel design that makes the picture or the banner move or having a slideshow of every picture. As I said the Carousel plugin is a component for cycling through elements , like a carousel (slideshow) . I will show you the example code and images below. Sample...
Submitted by: 
In this article, we are going tackled about Animation Iteration Count in CSS . What is animation-iteration-count? Let's discuss a animation-iteration-count . The animation-iteration-count property specifies how many times an animation should be played. Syntax of this property: animation-iteration-count: number | infinite | initial | inherit ; Property Values number - it specifies a number that...
Submitted by: 
This simple tutorial will teach you how to make a Navigation Bar through CSS script in horizontal and vertical postion . A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that...
Submitted by: 
In this article, we are going to create Twitter Heart Button Animation with CSS3 . Twitter has released a new heart button, it's a replacement for the favorite button. This heart button it's a cool animation effect for click action. This article will help you how to create this using CSS3 and jQuery. Creating Markup Displaying example of a news feed. Copy and paste this HTML source code to your...
Submitted by: 
In this tutorial, we are going to learn about animation-duration. So, what is animation-duration? The animation-duration property specifies how many seconds or milliseconds an animation takes to complete one cycle. This property has a syntax: animation-duration: time | initial | inherit ; Property Values time - it specifies the length of time an animation takes to finish. The default value is...
Submitted by: 
What is a @keyframes in CSS3? The @keyframes rule is used to create animations. In general, an animation in CSS3 is defined as changing from one CSS style to another. Structure: @keyframes name { selector { styles ; } } Property Values: name – it’s specifies the name of the animation. (required) selector – it’s specifies that percentage of the animation duration. (required) Possible Value: 0 –...
Submitted by: 
What is animation in CSS3? The animation property is a shorthand property that allows to setting six of the animation properties at once. It has a following syntax: animation : name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | initial | inherit ; Property Values: name - it’s specifies the name of the keyframe you want to bind to the selector...
Submitted by: 
Analog Clock Using HTML/CSS This is a simple analog clock created using HTML and CSS3 only, with no images involved. As such, you can easily customize the size of the clock and its colors etc. The analog clock works in IE9+ and all versions of other browsers, including on mobile. Hope this work will help you in your project. HTML Source Code < div id = "liveclock" class = "outer_face" >...
Submitted by: 
Simple Stopwatch in HTML/CSS with JavaScript This is an example of a simple stopwatch . It has the ability to keep track on an individual event, especially in a sports event. Try this yourself. This is easy to learn project. It has 3 buttons to operate this stopwatch. These are: Start Stop Pause Hope this simple work will help you in your future project. Enjoy! Source Code Kindly copy the source...

Pages