HTML/CSS

  • Submitted by: 
    This is a simple script written in HTML/CSS. It uses JavaScript to enable its dynamic behavior. Every time you refresh the page, you will get a new set of quadratic equations with answers. It has a little bug in the script and I encourage anyone interested to help me fix it. Have fun. Blessing from the pearl of Africa (Uganda) For more information viist our facebook page: SourceCode Ltd Email :...
  • Submitted by: 
    Social Media Image Rolling Effect In this tutorial, we are going to learn how to make Image Rolling Effect using the power of CSS3 not only in the Social Media Image but also to all images you want or in the text. This image rotates in both sides. To rotate those image, kindly hover the cursor to automatically rotate. In this project, it contains simple CSS3 coding to have this effect. You can...
  • Submitted by: 
    Hello, dear developers. I have developed this source code to demonstrate how to code a three column layout website design. I have used external Cascading Style Sheet. This Template contains one HTML file called index.html and one CSS file called style.css Download and use for free. Take a look for the source code. Markup Code <!-- Content Section --> <section class = "container" >...
  • 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: 
    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: 
    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