Posts in category HTML/CSS
HTML5 Game Development – Lesson 6
- 06
- Jan
HTML5 Game Development – Lesson 6
This is our next game development article. We continue a series of articles on game development in HTML5 using canvas. Today this is quite complete game example – it will reincarnation of old computer game – Battle City. I will teach you to use alternative array-maps plus I will show – how to detect collision of active object (Tank) with environment (array based map).
Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 5.
Read more
Analog Clock with Pure CSS3 (without javascript)
- 05
- Jan
Analog Clock with Pure CSS3 (without javascript)
Today – another one great article – we are going to create pure CSS3 Analog Clock without any javascript (we are going to use power of CSS3 with animations to build it). Our clocks have three arrows on the face – hour, minute and second. Each of them – a narrow rectangle rotated to the desired angle. How it works in result? – Easy, I am using necessary delays for all these arrows. How exactly – read on.
CSS3 Optical Illusions
- 04
- Jan
CSS3 Optical Illusions
Today I have prepared something interesting to you. This is demonstration of several optical illusions in CSS3 (without use any images or javascript). Welcome to test results.
CSS3 multilevel menu with transition and animation
- 03
- Jan
CSS3 multilevel menu with transition and animation
In our new tutorial we’ll create a new nice CSS3 menu with interesting behavior, where I use css3 transition and animation. This is UL-LI-based multilevel menu.
CSS3 Animated Photo Slider
- 27
- Dec
CSS3 Animated Photo Slider
Today I have prepared new great CSS3 demonstration. This is 3D slideshow where I have used WebKit CSS 3D transforms. On the demo you will see a free-floating 3D object with photos. Hint – you have to use Chrome or Safari browser to see all these delights.
Read more
CSS3 Christmas Tree with Snow
- 26
- Dec
CSS3 Christmas Tree with Snow
Today we will continue use CSS3 in drawing complex shapes. We will create very nice CSS3 Christmas Tree demonstration. We will be drawing the tree, six colored balls on it, three snow hills and snowfall.
Read more
HTML5 Game Development – Lesson 5
- 20
- Dec
HTML5 Game Development – Lesson 5
Finally I decided to prepare next Game-development article. We continue a series of articles on game development in HTML5 using canvas. Today I prepared musical example (it will something like program – synthesizer) with alternative DOM-based dialogs on CSS3. Why I added separated dialogs – easy, mostly because CSS have much more possibilities to play with text and styles of standard elements, then it can make result JS code smaller, and can increase result speed of example. So, you can apply nice custom styles for these dialogs with full power of CSS3 (as example – I customized scrollbar with css3).
Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 4.
Read more
How to Create a Pure CSS3 Slideshow
- 19
- Dec
How to Create a Pure CSS3 Slideshow
Today we will develop cool css3 slideshow (without any javascript). Slideshow will contain left and right navigation buttons, images, and tracker bar. We have to use left/right buttons or extra tracker bar to navigate through images.
Read more
CSS3 Drop Caps
- 14
- Dec
CSS3 Drop Caps
Today is design orienting article. I am going to tell you about making nice-looking drop caps with css3. I sure that you have been already saw these big letters in each children’s book of fairy tales. Especially in old books. To repeat this effect some webmasters separated this first letter (into own DOM element) and applied special own styles for it. But, this is not necessary in case of CSS3. We can use :first-letter selector to select necessary first symbol. Lets take a look to result that we can achieve
Creating photo album with jQuery Chop Slider
- 06
- Dec
Creating photo album with jQuery Chop Slider
Today I will tell you about new impressive jQuery slider – Chop. This slider have already had quite 200 different transition effects. Here are many 2D and 3D effects. Plus, here are you can find even few NonCss3 effects (to old IE browsers) and five effects for mobile browsers (for cellphones). Plus, we can create our own new transitions (if you want).
Read more
