Really simple and amazing CSS-effect

Recently I have come across a really simple and amazing in implementation rollover effect for the buttons on CSS menu. Its creator is some Japanese under a nickname ksk1015 in Twitter.

Here are its demo effect and writing process.

Today I want to offer to umumble lovers this small set of applications that are intended to increase productivity while working with the frontend. If you will not find your favorite app here, then you are very welcome to make some comments!

Form Builder

This beautiful form builder helps you to create the most marvelous CSS login boxes and other input items in very short time. Besides the forms on the website of this project, you can create other equally beautiful CSS elements including buttons and ribbons.

How do you imagine a popular Twitter Bootstrap CSS framework will look like, if it was from Google? Let’s meet Plusstrap.

Here are seven tools that can significantly simplify the life of a web developer, coder or designer.






1. Wordmark.it



This is a tool for selecting fonts. Wordmark.it allows you to see how a sentence looks like with all the fonts installed on the computer. It downloads quickly and has convenient filters. Unfortunately, there is no way to set the background color and letters.

I would like to talk about the image replacement techniques. I think almost everybody was faced with some moments in the layout, for example, when you want to use the graphic object for the page title, and at the same time to keep the text below for the search engines and the printed version. I think no one wants to break semantics of the page.

The CSS syntax is simple, and in order to understand it is not necessary to have a doctorate degree in the field of IT. However, this is one of the few popular languages, which is not logical. Unlike other web programming languages such as JavaScript and PHP, the problems are not solved by the usual logic in the CSS. Algorithms such as “if X, then do Y, otherwise do Z” or “select all Y, then make with them X” cannot be implemented in a language like the CSS. This language created for the mounting, a language for designers, rather than developers. Some of the most experienced programmers spent a lot of effort in order to learn the CSS.

Learning of CSS begins with the classes and ID, as well as the use of. and # for the direct indication of elements. This is enough to build the fully functional website, but it is not enough flexible solution in the case of a complete change of design. Let us take a look on an alternative approach to control such elements that hard to reach.

Adjacent sibling combinator

Let us start with the selector, which is handy in the difficult situations. The adjacent sibling combinator is indicated by a combination of two elements with a symbol +:

h1 + p

Units of length are two categories: absolute and relative.
Absolute units include:

• inches (in)
• centimeters (cm)
• millimeters (mm)
• points (pt)
• pica (pc)

In the terms of CSS’ specification: 1pt = 1/72in and 1pc = 12pt.
In the property of font-size specification of negative value in units of length, for example: 25cm is unacceptable.
Why Absolute? Because they represent a real value in the physical world – standards.
These units work with the mechanism of output, which has an actual physical size, for example: printing, we will use such units.
But those units have no meaning for the monitors, there is certain conditionality, but it's really just conditionality.
Relative units include:

• em (font-size)
• x-height (ex)
• px (pixels)

When it comes to the font rendering on the Web, the designer cannot do much. For example, how the font looks on the screen. For the most part, it depends on the operating systems, browsers, typefaces’ design, font files, and on whether these files are supplemented by the instructions for the most unexpected scenarios of the rendering. But sometimes the CSS properties can affect how the font looks like.


Note: the screenshots shows the font rendering in Safari 5 on MakOsi 10.6.

Font size

Slight changes of the font size can greatly affect the appearance of the typeface

First of all, there is the property of font size. Rasterization of vector contours for the font sizes that adequate to the modern screens means that each letter is represented by only the handful of pixels. Therefore, a small difference in the font size can greatly affect the appearance of the typeface.