Overwrite Inline Styles with CSS

We often find ourselves in situations when we want to overwrite a style we don’t have access to, it’s hard to find or we want to rewrite with CSS a style that has been written in the HTML code or has been set with Javascrpt.
In this article we’re going to discuss the strength of different style declarations and how can we overwrite them.

Let’s say we have the sentence below to start with.

<p>This is our <span id="highlighted">demo text</span>.</p>

Continue reading “Overwrite Inline Styles with CSS”

HTML5 Rubik’s Cube

html5 css3 rubiks cube The Rubik’s Cube is a three-dimensional mechanical twisty puzzle, invented more than 40 yars ago in Hungary by Erno Rubik. It is estimated that more than 350.00 cubes were sold, making this simple yet so hard toy the most famous puzzle game of the World so I think there’s no need to describe it in more detail.
When it comes to modelling this cube on the web we can use a canvas or simply build the 54 little colored faces using rotated and transformed div elements in HTML5 and CSS3. There are for example online Rubik’s Cube solvers where the visitor inputs the colors of the scrambled cube and the program throws out the rotations needed to get the cube fixed. A HTML5 Rubik’s Cube can be used to demonstrate nice patterns, scrambles or we might want to build our own online Magic Cube to play with.

Continue reading “HTML5 Rubik’s Cube”

HTML Editor

Keeping our source code clean is very important not only for SEO, but a tidy source is easier to maintain, and it loads faster. Unfortunately most of the WYSIWYG editors, including Microsoft Word leaves a very dirty code once converted to HTML. In this article we’re going to present the best free online HTML editor we could find out there which respects the Web Standards.

On the home page of HTML5-Editor.Net we can see two big text areas next to each other. We can use the one on the right to compose our article with a nice visual editor and in the meantime we can see and edit the source code on the left side. The fact that we can see the code and the result side by side simultaneously proved to make us very efficient.
Continue reading “HTML Editor”

The Most Simple Progress Bar

The most simple yet sufficient little progress bar widget using HTML-CSS-JavaScript. It is a graphical control element to visualize the progression of the change of a JavaScript variable inside a range (usually 0-100). Use this to indicate download, file transfer, or installation progress. The graphic is accompanied by a textual representation of the progress in a percent format as well.

You can see the preview below how the responsive widget displays, but of course you can customise its view:

Continue reading “The Most Simple Progress Bar”