CSS3 games collection
- 20
- Sep
CSS3 games collection
Hello our readers. Have you even thought about creating own web games? I’m sure that most of you have already heard about newest technologies like html5, canvas, webgl, node.js. But I think, that before you start working with these new technologies – you should start developing games with the simplest DOM-based games (using pure HTML+CSS+Javascript). I would like to provide you a collection of such games. So you will be able to investigate and try them. Some of them even work without any javascript! Welcome to test them.
Read more
Сontent slider with jCarousel
- 18
- Sep
Сontent slider with jCarousel
Today we are going to develop a nice content slider with jCarousel. It is possible that you have already seen similar sliders before, and were looking forward to repeat it. Our slider consists of next elements: initial intro block, control buttons to navigate through the slides, slides itself, and carousel with images (thumbnails) in the bottom. Plus, we can see all the slides one after the other (in alternative layout). This slider works very well in all the most popular browsers (Chrome, Firefox, IE7-9 etc).
Read more
Active charts using Highcharts
- 14
- Sep
Active charts using Highcharts
If you are looking how to create active charts (or diagrams) with information – our new article is for you. I have browsed the web, and found one good and serious solution – Highcharts library. This is pure javascript library which offers interactive and intuitive charts. This library supports various of possible charts: area, line, spline, areaspline, pie, column and other. I think that this is the best way to produce information for viewers. In today’s demo I prepared several examples with different charts.
Read more
How to create a game using jQuery
- 12
- Sep
How to create a game using jQuery
Today we are making a simple puzzle game called “Fifteen”. The purpose of the game is to slide 15 square blocks around to form an image. The goal of this tutorial is to look at this simple browser-based game and explain how it was made line by line. It’s a great way to learn jQuery. For this tutorial, We will use a 2D image square-sliding game I created last week and I will go over each line of code to demonstrate the train of thought. I really do believe that breaking this game up into explanations on per-line basis will help you understand how to use jQuery in your own projects.
Read more
Fancy Image gallery – jqFancyTransitions
- 10
- Sep
Fancy Image gallery – jqFancyTransitions
In our new tutorial I would like to show you how to create a nice looking photo gallery with transition effects. I’m going to use a ready jQuery plugin – jqFancyTransitions. It is easy and effective jQuery plugin to display photos as photo slideshow with fancy transition effects (wave, zipper and curtain). There are a lot of ways to customize the result. All the possible options will be published at the end of this article.
Read more
CSS3 Loading elements – part 2
- 05
- Sep
CSS3 Loading elements – part 2
We received a lot of feedback on this article CSS3 Loading elements, so we decided to prepare the second part of this article. Where we will create 4 new loading elements. All of them use pure CSS3 animation and don’t use images. Let’s review them.
Read more
Pure CSS3 galleries collection
- 03
- Sep
Pure CSS3 galleries collection
In our new collection of web tutorials you can find a new collection of pure CSS3 photo galleries (it means – without using javascript). Most of them support ‘click’ behavior. Usually it means that you can get enlarged version of image (or other object) when you click on it. If you are looking forward to add similar CSS3 photo gallery at your website or you are learning how to develop similar galleries – our collection is for you.
Read more
3D CSS3 Book Generator with jQuery
- 30
- Aug
3D CSS3 Book Generator with jQuery
Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.
Read more
Webcam Video Capture in HTML5 and CSS3 filters
- 27
- Aug
Webcam Video Capture in HTML5 and CSS3 filters
As we know – HTML5 defines a new element called <video> for embedding video. Usually people use this element to embed a video into web page. It is very convenient. Because the <video> element is designed to be usable without any detection scripts. You can just specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support. Now, let’s imagine that we can use the same element to access a user’s camera and microphone. Our article opens these boundaries. I’m going to show you how to capture a video from your webcam in HTML5, and even more, I will show you how to pass this video into <canvas> object, and even – how to apply custom CSS3 filters to our video.
How to create an animated old letter
- 24
- Aug
How to create an animated old letter
Today we will create an animated old letter. In this letter, we will use an animated pen. When the pen dries out – we’ll dip it in the ink. And even more, we add the feature to emulate the errors that will be erased during typing. Now let’s look at the implementation.
