Design, CG Graphics & Inspiration

SCSS — a new icing from Sass

SCSS — a new icing from Sass

As I lately did almost no CSS/HTML jobs, I’ve missed the Sass3 release that implemented the SCSS extension (Sassy CSS). That’s a CSS extension without any syntax “distortion”, meaning that any valid CSS document is a valid SCSS document too. In this article, I’ll compare that release with some existing preprocessors, such as Sass and Less. Please note that the Sass syntax has been updated recently.

Read more…

  • April 2, 2011,
  • Splashnology Editors

Cross-browser box-shadow

Cross-browser box-shadow

Hi, dear readers!

Today I’d like to share with you an extremely simple cross-browser implementation of the CSS property “box-shadow”. The method is so simple and obvious that I was greatly surprised not to find a similar solution anywhere on the Web (though I’m absolutely positive that I’m not the first one to discover it).

Read more…

  • March 26, 2011,
  • Splashnology Editors

35 Fresh CSS3 Articles & Tutorials

35 Fresh CSS3 Articles & Tutorials

This is cool collection of most wanted, usefull tutorials and articles by CSS3. In this article you find out how make cool CSS3 Gradient Buttons, Sliding or bouncing Navigation without JavaScript, Slide effect menu with the Apple-Style and much more. Hope you like it. Thanks

Read more…

  • March 19, 2011,
  • Splashnology Editors

HTML 5 in Internet Explorer

HTML 5 in Internet Explorer

In brief: How to make the new HTML 5 tags work with Internet Explorer.

Web developers cry happily looking at HTML 5, which has finally arrived. Though most of its features, such as WebGL, multiple streams, and web sockets, are not yet supported by some browsers, we can already use its new, handy tags.

Read more…

  • March 10, 2011,
  • Splashnology Editors

Ambilight for the “video” tag

Ambilight for the “video” tag

Some high-end Philips TV sets have a cool feature, Ambilight. Basically, it is LED lighting that changes its color dynamically, depending on the television picture’s color. It is such a pleasure to watch movies on an Ambilight-enabled TV!

There are some implementations of such lighting in Adobe Flash. Why can’t we, web masters, do the same thing using scripts? It was another opportunity for me to check out what state-of-the-art web browsers can do, so I’ve made the following thing:

Read more…

  • March 10, 2010,
  • Splashnology Editors

To Copy or Not to Copy: The content CSS Property

To Copy or Not to Copy: The content CSS Property

I’ve decided to use a trendy CSS property, content, for my web project, to make webpages more “lightweight” and to improve the flexibility of tuning their appearance. As the project was only intended for web developers, I didn’t need to bother about supporting outdated browsers (IE 6 and 7). Alas, I was greatly disillusioned in that CSS property: though everything was displayed correctly, the end user’s experience was far from perfect.

Read more…

  • February 10, 2010,
  • Splashnology Editors

Adding support for HTML5 video

Adding support for HTML5 video

Hi everybody! In this article, I’ll tell you about one HTML5 video player. Probably you know that state-of-the-art web browsers already support HTML 5, which lets you embed video into a web document in such a way that a web browser doesn’t need any plugins to play it.

Read more…

  • February 6, 2010,
  • Splashnology Editors

HTML 5, Theora and more

HTML 5, Theora and more

I’ve read quite a few articles on HTML 5, Theora, and video tags, but most of them discussed theoretical rather than practical issues. On my site MJV-ART.ORG, I recently added an anime section, JV-Video, which is a small video hosting (similar to YouTube) based on HTML5/Theora. In this article, I’m going to tell you about the real problems that I encountered.

Read more…

  • February 1, 2010,
  • Splashnology Editors

Columnar Layout

Columnar Layout

There are many methods of making columnar layout. More than one web developer’s nose was blooded (fortunately, only virtually) in the holy wars over the superiority of one or the other technique. It should seem that everything is as clear as possible by now, but plenty of difficulties still arise here and there. I’d like to make my contribution to the common good, so I’ve spent some time on experiments that allowed me to create one more method, which has the following advantages and disadvantages:

Read more…

  • January 19, 2010,
  • Sergey Chikuyonok

Layout of Stretchy Websites

Layout of Stretchy Websites

In this article I will share with you a technique for laying out stretchy websites (actually, I have found out that I cannot make non-stretchy ones), which I’ve been using for the last 2-3 years. This technique, which can be used for creating sophisticated modular grids, is easy to use but somewhat difficult to understand, and it does have some drawbacks. Basically, this article might be useful for web designers too, as website layout should be correctly designed before actual coding is done.

Read more…

  • January 9, 2010,
  • Splashnology Editors

CSS3 transitions and 2D transforms

CSS3 transitions and 2D transforms

For richer user interfaces it is often desirable to include some animation to make an effect smoother or more appealing, or effects such as rotating elements and text. Traditionally in HTML pages the primary means to add animations was to use JavaScript to adjust the desired CSS property value over a given period of time. This works but can be slower as the JavaScript code is not hardware or software accelerated. What’s more, using JavaScript for animations creates more code to maintain. It has not been possible to apply effects such as text at an angle without resorting to using images or SVG.

Read more…

  • December 23, 2009,
  • Splashnology Editors

Making tabs with dl tag

Making tabs with dl tag

Once I needed to make tabs on the webpage. As it’s a rather routine problem, I didn’t want to reinvent the wheel, so I just googled a little bit to see how people solve it. All the solutions I found looked rather run of the mill, something like that:

Read more…

  • November 4, 2009,
  • Splashnology Editors

Universal Method of Block Decoration

Universal Method of Block Decoration

I asked my readers to think out a technique for laying out blocks with rounded-off corners and shadows. Take a look at the solutions I received, and you will see that most of them are very much alike: four elements in the corners and a somewhat odd-looking result, though there are some differences in block placement. Let’s take a detailed look at the way those techniques work and also find out why this article isn’t simply titled “Creating rounded-off blocks with shadows.”

Read more…

  • November 3, 2009,
  • Splashnology Editors

Sprites in the web. Part 1

Sprites in the web. Part 1

Nowadays there are a lot of pieces of news about CSS-sprites. However, all resources just crunch the same idea about saving a set of small pictures in the one to increase total page loading speed. This research in two parts will gather all my knowledge about sprites using features in the web.

Read more…

  • October 20, 2009,
  • Splashnology Editors

How to create 2 floating columns with the same height correctly

How to create 2 floating columns with the same height correctly

I want to share with you my approach to markup of double-columned templates where both columns must have the same height. It seems to be well-known and frequently discussed subject and every web-design resource provide to you at least a few ways to do it. But I must point your attention to one moment that described templates are like “bricks”, i.e. templates with fixed width and maximum one expanding column. I will show how to make two (or more) expanding columns and it will be not emulation like bold colorful border, but real full-scale column for which you can setup your background picture for example.

Read more…

  • June 20, 2009,
  • Splashnology Editors

Make Progress / Percentage Bar

Make Progress / Percentage Bar

What is jsProgressBarHandler?
jsProgressBarHandler is a Javascript based Percentage Bar / Progress Bar, inspired upon JS-code by WebAppers and CSS-code by Bare Naked App. Next to a structural rewrite of the WebAppers code, this javascript progress bar can easily be extended and tweaked just by setting a few parameters.

Read more…

  • May 18, 2009,
  • Splashnology Editors