Linear-Gradient & Toggle~

Next, fancy CSS3 attribute, called: 'linear-gradient', which gives your background-image, nice gradient effect:

                               

If you want to see the code, just look below (you can find here also very simple and primitive jQuery code, which will made the circle disappear, when you will click on it):

Most useful changes in HTML5 joked on Me~

Of course we will find a lot of differences between the new HTML, and the older versions. I'm not going to describe them all, because it's obvious, that a long time ago, specialists did it. But I wanted to focus on one difference, which made me confuse, when I once needed to cut graphic for one website. I'm talking about the differences between <section> and <aside> elements. It started from, that I wanted to divide the footer into three columns. I gave my elements some classes (two of them was <section> elements, and the middle one was <aside>) and I typed relevant data in HTML and CSS files... 

..What a big was my surprise, when, after opening the site in a browser, I discovered, that two columns had completely opposite positions. It looked as the 'float:' values in my elements worked completely different. So I began to make various changes in CSS file, but without any result. I even wanted to give my tags, 'position: absolute;', but it would only give the code messy look.. 

..Suddenly I became aware of a very important information, which you can not forget, when it comes to HTML5: Now, in HTML5 tag called <section> stands before element <aside>, so by default, it is set to 'float: left;' (so <aside> is set to 'float:right;'), so even when I gave my <aside> 'float: left', it was still operate in a way, that was setting the center column, after the last column, which was defined by <section>.. 

..I wasted too much time, trying to find error, while enough to replace <section> with <aside>, at the beginning of my work, because in HTML5, you don't need to worry anymore about floats. So what's my advice for today?: Never forget about that! -,-

Jsfiddle.net - Test your code there~

My boyfriend show me a great site, called:

JSFIDDLE.NET

Where you can test your code, when you're writing some applications in JavaScript or write comething in CSS and HTML.  At the description of the site you can find an identification as: 'mootshell', and it's in 100% right identification, because at the site you can test in a very simple, and what is more important easy way to check your snippets before implementing them. It is also, a good way to put some results of your work, which you normally can not put into your private site, for example on blogger (where only the most simple CSS properties are working), because of a frame ('iframe') with result, which is available on jsfiddle.net and which you can put then, in your HTML code of your private site.

Little, sweet menu in CSS3 with using 'nth-child'~

In CSS3, I found 'nth-child' as very useful property. See by yourself (but remember don't use IE browser, because CSS3 doesn't work as it should works on Internet Explorer!):

The code doesn't look too much complicated, because the main trick, that I used, is contained in 'nth-child':

Sliding effect in CSS3 without JS help? No problem! ;)

Somebody of you can have no clue, of the possibilities that CSS3 is offered. By using only CSS3 you can get very nice effect of sliding text and make a beautiful slider. All because of special CSS3 properties, called 'transition' and 'overflow', which combined together, give the following effect:

The code is very simple: