Randomize background of a webpage

Suppose that you have a landing page (or just a cool background) and you have some many versions of it, and all so beautiful, that you can’t decide which one to show. Some kind of weird solution is to show them all in a random manner.

If you wish to achieve something similar to this then all you need is a really short piece of HTML, JavaScript and CSS. All can be put to a single file.

Since I like a clean and easy solution, this one use pure-JavaScript. No jQuery stuff etc. included.

Read More “Randomize background of a webpage”

Full-screen vertically and horizontally centered text in CSS

This is as easily as adding one single div:

<div class="css-vh-center">
    Hello World <br />
    Hello World <br />
    Hello World <br />
</div>

and styling it properly:

.css-vh-center {
    position: fixed; /* or absolute */
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

All the glory goes to this Stack Overflow answer.

Note that this is not using flex-box solution (see the above linked answer for details), so should work even in older pre-IE8 browsers.

Read More “Full-screen vertically and horizontally centered text in CSS”

Disable CSS transitions and animations… temporarily or permanently!

There’s a fairly easy way to diable all transformations, transitions and animations introduced in CSS3, which often are being used in a nasty way, just as Flash animations were used ten years ago and as .gif images were used twenty years ago.

This can be done purely in CSS, when disabling them permanently or with a little bit help from Javascript (actually jQuery or Zepto), when willing to disable them just for some time or event.

This article also show how to set styles for absolutely every element in document.

Read More “Disable CSS transitions and animations… temporarily or permanently!”

Quick mobile UI review

Here is a quick review of some mobile UIs that you can use to develop your mobile application, if you’re developing HTML-like mobile apps.

Note that I don’t like jQuery Mobile for being ugly and slow and I don’t like paid full-featured stuff like Sencha or Kendo. You won’t find them here. I like fast and beauty mobile apps (possibly written in PhoneGap).

So you will find performance-first, beauty-second UI frameworks here. With special emphasis on being PhoneGap-oriented. Only quick review without any unnecessary blah-blah.

Read More “Quick mobile UI review”

Make a webpage looking like terminal or command-line

So, you’d like to make a webpage that looks like terminal or command-line, right?

With a little bit of HTML, CSS and Javascript, it is as easy as snapping a finger. Note, that I underlined “looks like”, because we’re going to do just a look & feel. This will not be a full-blown command line interpreter, where you can enter commands and get results. It will only be a simple, cool-looking… thing.

This article is a slight port of the code that can be found at fludotlove.com (done by Nathan Marshall).

Read More “Make a webpage looking like terminal or command-line”

Use your custom TTF font cross-browser

I had some troubles with Font Awesome library and found solution for them in this Stack Overflow answer.

It also contains links to on-line services for converting .ttf files (officially supported in CSS3 only) to .eot, .svg and optionally to .woff, to make your TTF font supported in a large variety of web browsers:

After conversion use CSS styles as in mentioned answer to get all things working together.

CSS and JS minifier/beautifier that rocks!

I definitely love and adore Avivo’s CSS/JS Minifier/Beautifier. Mostly for options that similar tools lack. Like: braces on own line, preserve empty lines and ability to select intend character.

It has a small bug in CSS Beautifier. Every : is beautified to : (with space), which breaks pseudo-classes like :hover and and pseudo-objects like ::before. But, this can be easily fixed (manually; simple find-and-replace in text editor).

So, even with this, Avivo’s tool is just fabulous!

Self-adapting images in responsive design

In my humble opinion, responsive design is a future. One layout, carefully designed, will look beautiful and by user-friendly, no matter, which device user will use to view it. Of course, you can craft responsive designed website by hand, but the easiest way is to use some framework. But what about non-framework elements, like for example images? How to style them, what size should they have, to be responsive and look exactly like other, framework elements, on any device?

There are at least few approaches to solve this problem, among which one or two are not that famous.

Read More “Self-adapting images in responsive design”

An app-like full screen layout in CSS

Usually mobile applications have a header and a footer, both of a fixed height, and remaining body, that fills the rest and contains entire application content. No matter if main application content is long enough to produce vertical scrollbar or not, header and footer are always visible and always have fixed height.

A layout like this can be build in pure CSS and HTML. Thus it is useful for PhoneGap applications developers.

Read More “An app-like full screen layout in CSS”

Normalize.css. A modern alternative to CSS resets

Nearly every webdeveloper knows, what CSS reset is. Basically, this is a carefully crafted CSS file that makes browsers render all elements more consistently and in line with modern standards. In other words, they try to make your page look similar in all browsers. Today, I came across Normalize.css, a project by Nicolas Gallagher and Jonathan Neal, and wanted to share my thoughts.

Read More “Normalize.css. A modern alternative to CSS resets”

Changing look of website, if Javascript is disabled

There is a nifty trick, that allows you to change look&feel of your website and even hide certain elements on it, in case user has disabled Javascript in his or her browser.

Facebook is not working, when Javascript is disabled and world collapses, when Facebook is not working, thus no one serious is disabling Javascript nowadays.

Yet, I still think that a good web developer should be prepared for everything. Even for JS turned off…

Read More “Changing look of website, if Javascript is disabled”