Introduction

I love different experiments with JavaScript. They allow us to look in the future and see how exciting it will be. When you will be viewing this collection, probably you will think of the recent king Adobe Flash, and then you realize how fast CSS and JavaScript took the throne away from it. Modern browsers allow us to use a variety of different effects and animations without any limitations. However, the word "experimental" means a number of limitations, such as the incorrect displaying in some browsers (IE), in addition, these plugins will be as conceptual addition to the personal pages, and not for use in the large projects.

Introduction

In my opinion CSS3 Grid Layout Module is one of the most interesting modules in the CSS3 family. The official history of the module as a draft specification is a little less than a year. Also, in December, 2010, there was made the preliminary announcement about CSS Grid Alignment at TPAC 2010 written by Vladimir Yunev. It should also be noted that with a slightly different name and slightly different syntax, but with the same essence, it was declared as a WD as early as 2007. Today, the development of the final design of the module is in full swing, and the pre-implementation is already in Internet Explorer 10, and there is a hope that the support of the new features will also appear in future versions of other popular browsers.

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML markup

The structure of markup is very simple and intuitive. Create a container that will have our image and all the other information.

Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. (For some examples, we’ll need to add the mask element as a separate element and wrap the description in a devi with class content.)

This article will show some techniques to create effects using CSS3 on the example of the menus. The beauty of my idea is that it would simply compose elements, such as icons of the main title and secondary title, which will be animated by the cursor moving using only CSS transitions and CSS animation. We will consider a few different effects for the elements.

Icons that are being used in the demo are the typeface of Web symbols. The typeface is created by Just Be Nice studio.

HTML Layout

HTML menu structure will be as an unordered list where each element is a link, which includes the span with an icon and div with the main and secondary title:

<ul class="ca-menu">

<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Articles</h2>
<h3 class="ca-sub">Web development articles</h3>
</div>

...
</ul>

As we use the font for the icons, we will write the corresponding letter for the icon.

I would like to share a prototype of game that is created just in a few hours. I hope that it will inspire some of you! In the industry of single-player browser-based games, it seems that there is not enough imagination and the ability to tell the stories, perhaps I just have not seen such games ;), but I miss these games like Grim Fandango.

Below is given a screenshot of the demonstration that consists of the multiple nodes of DOM, which represents the component parts of the protagonist, birds, and the scene. Most of the animations are done by CSS transitions / animations, some of which are dynamic and use the library move.js.



I have not yet engaged in profiling of anything, but this demonstration is working without a break rather smoothly, and there are many aspects that can be optimized, starting with simply dumping jQuery.

The full list of changes and enhancements was released for NetBeans 7.1 beta.
We will focus on the most important changes that are related to PHP and the web development.

Support CCS3

There are supported and highlighted a new syntax, new elements and the pseudo-classes ...

Every day new standards of CSS3 and HTML5 enter more deeply into the life of web designers and web developers, and the browsers are becoming more compatible with these standards.



In connection with this event we would like to present you a selection of 10 buttons of CSS3 that will make your life easier during the layout and creation of the web applications.

In general, as any beginning programmer of JavaScript (2 years ago), I wanted to carry out everything myself. So there appeared a very fast regular expression of 280 characters.

A little history

Approximately one and a half years ago, I found out about the library “yass”, which has been the fastest tool to find DOM elements in a JavaScript through CSS selectors (reference to tests).
Then I had a terrible interest. I wanted to invent a way that will be even faster. At that time, I just was reading the book “Regular expressions- Library of programmer” the second edition of J. Fridley. It was summer, I was still a student and I had plenty of free time. Work has begun...

I decided to write an article because of the following expression, which can almost completely analyze the CSS selector query (even a little advanced, which goes beyond the standard CSS3):

/(?:(?:\s*[+>~,]\s*|\s+)|[^:+>~,\s\\[\]]+(?:\\.[^:+>~,\s\\[\]]*)*)|\[(?:[^\\[\]]*(?:\\.[^\\[\]]*)*|[^=]+=~?\s*(?:"[^\\"]*(?:\\.[^"\\]*)*"|'[^\\']*(?:\\.[^'\\]*)*'))\]|:[^\\:([]+(?:\\.[^\\:([]*)*(?:\((?:[^\\()]*(?:\\.[^\\()]*)*|"[^\\"]*(?:\\.[^"\\]*)*"|'[^\\']*(?:\\.[^'\\]*)*')\))?/g