CSS – onezeronull.com

Feb82022

Randomize background of a webpage

3 min. reading

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.

Jan202022

Full-screen vertically and horizontally centered text in CSS

adminCSS, HTML0 Comment

2 min. reading

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.

Oct152020

Insert a line break before an element using CSS only

adminCSS0 Comment

< 1 min. reading

To achieve this you need two things:

use the \A escape sequence character in content part of ::before selector and
add white-space: pre; style to the same selector.

This will force new line before that page element.

Same goes for ::before selector of course.

Oct62016

Disable CSS transitions and animations… temporarily or permanently!

adminCSS, JavaScript, jQuery2 Comments

3 min. reading

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.

Aug32015

Quick mobile UI review

adminCordova, CSS, JavaScript0 Comment

3 min. reading

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.

May282015

Slight difference in HTML elements’ semi-transparency

adminCSS0 Comment

2 min. reading

There’s a slight difference in making HTML elements semi-transparent using:

opacity attribute and
alpha channel

I was not aware of that difference, therefore I posted this short article to keep that fact in my memory.

Oct102014

Make a webpage looking like terminal or command-line

adminCSS, HTML, JavaScript0 Comment

2 min. reading

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).

Oct32014

Fastest way to make rounded images in CSS

adminCSS0 Comment

< 1 min. reading

I never knew, that to make a beautiful circle image, out of normal box picture or div, all you have to do, is to set border-radius to 50%. Add proper border and padding to get a really cool effect.

Nov282013

Use your custom TTF font cross-browser

adminCSS, HTML0 Comment

< 1 min. reading

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:

TTF to EOT: http://www.kirsle.net/wizards/ttf2eot.cgi,
TTF to SVG: http://www.freefontconverter.com/,
TTF to WOFF: http://ttf2woff.com/.

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

Apr192013

CSS and JS minifier/beautifier that rocks!

adminCSS, JavaScript0 Comment

< 1 min. reading

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!

Mar122013

Background image that fills entire viewport

adminCSS, HTML0 Comment

2 min. reading

If you want to have image in page background that will fill entire viewport, no matter what screen orientation, aspect ratio or dimensions are, then using CSS3 background-size: 100% or background-size: cover won’t help you.

In fact, to solve this problem, you can’t use pure CSS and you must help yourself with a block element.

Feb152013

Self-adapting images in responsive design

adminCSS, HTML, JavaScript0 Comment

5 min. reading

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.

Oct12012

Nice colorsets for maps using Colorbrewer

adminCSS0 Comment

< 1 min. reading

I was looking for a good colorset generator to plot many polylines on Google Maps in nice color schemes.

Colorbrewer turned to be the best one for me.

You can use this generator for any purpose of course, but it seems to be designed for maps coloring in general.

Sep292012

An app-like full screen layout in CSS

adminCordova, CSS, HTML0 Comment

2 min. reading

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.

Sep262012

Normalize.css. A modern alternative to CSS resets

adminCSS0 Comment

2 min. reading

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.

Sep112012

Two-state button with HTML, CSS and jQuery

adminCSS, HTML, JavaScript, jQuery0 Comment

2 min. reading

To express 0-1 state checkboxes are mostly used in websites. A two-state button used instead can be a bit more nicer and interesting. You can create it in HTML, CSS and Javascript/jQuery quite easy.

Here, is how to do this.

Aug212012

Changing look of website, if Javascript is disabled

adminCSS, HTML, JavaScript0 Comment

2 min. reading

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…

Feb52012

Multi-column lists without using Javascript

adminCSS, HTML0 Comment

2 min. reading

This article shows how to display multi-colum ordered and unordered lists using CSS and HTML. This is an example taken from csswizardry.com blog with my small corrections and modification.

Sep22007

Completely block printing of your HTML file or webpage

adminCSS0 Comment

< 1 min. reading

This extremely simple piece of CSS style / code:

@media print
{
    body
    {
        display: none;
    }
}

will completely prevent printing of your webpage or HTML file. No matter what browser or “trick” will your user use, as long as give piece of software supports CSS styles — nothing will be printed.