CSS: Links marked with symbols

Without further added extras the hyperlinks are shown in the browser as colored and underlined by default in HTML. With CSS, the default look of the hyperlinks can be overridden and adapted to the individual needs.

Symbols are used for understanding

Link, which contains icon is not just a pretty extra for the eye, but is a helpful hint for the user what to expect behind the link. This is usually another HTML document, but can also be a document in other format, such as PDF, Word or text document, an image, a sound file or an archive file (Zip or Rar) which will be started for download. The user is free to activate the link or not. In the selection of symbols it is natural to make sure that they can be brought into a connection with the action.

Creating a Class: Version 1

How can you attach an icon to the link? The method is based on the browser versions that is primarily used by the target audience. The older the browser is, the more complex the CSS formatting is. The simplest way is to create a separate class for the link.

The class is assigned to the corresponding symbol as a background image and positioned right next to the text. The padding (padding) should be at least the width of the image respectively, but a few more pixels could be left for visual appearance.

Version 2 : The attribute selector

For those who still use older browsers CSS opens up 3 more viable options.

Introduction to the CSS Flexbox model

The calls for alternatives to Floats & Co. when we talk about the background of flexible site layouts are getting louder. One of these alternatives is the so-called Flexbox model of CSS, which should be very interesting in the light of “content choreography” and “responsive web design”. In this post I want to introduce Flexbox shortly and explain its basic functioning.

Why is Flexbox so exciting?

In responsive design, it is important the various elements of a web site to be flexible. The Flexbox model offers this extensive possibilities of which we could only dream of. You have the option to make flexible the elements both in height and in width according to different conditions. Boxes can be side by side in rows, together with each other or arrange them in columns, they can be positioned anywhere in the sequence and aligned to each other.

Attention, obsolete syntax!

When you are guys up with the theme Flexbox, you will quickly realize that different spellings exist. To do this you must know that the syntax has changed several times in the past. If you come across outdated sources, you can update the code with relatively little effort.

Whenever you display the command: box; in the properties box or display the command: FlexBox; you would see, it is legacy code! The current syntax is to display: flex or the properties start with flex. A very detailed article on this topic can be found on CSS tricks.

Calculations with CSS calc()

Modern web layouts are becoming increasingly complex and this is why the developers continue trying to optimize the code. Especially if the website uses Responsive design and several design patterns with different numbers of columns. This often leads to problems in the allocation of CSS classes. A nice way to rid the code of such unnecessary CSS classes allow calculation options using the CSS property calc(. The situation is similar when pixel values of percentage values need to be deducted. For example, to place banners in an otherwise liquid layout.

Calculating with CSS

The CSS property calc() allows the classical basic arithmetic. Please note that before and after a number the operator should leave space. Also, division by 0 will generate an error.

Example 1: Advertising in Responsive Design

The first example uses a simple subtraction of the width of the main content. The article element should in principle have a flexible width based on percentage values. However, the right banners must be placed with a fixed size in addition to the content, so we prefer to use calc() from the rigid width of the sidebar of 100%.

Example 2: Calculate design grid

The second example shows the calculation of a grid configuration with a variable number of columns in the different breakpoints.

Browser Support for calc()
The browser compatibility does not look so bad. Apart from Internet Explorer older than the 8th version, all modern browsers support the feature. A detailed list can be extracted from the website caniuse.com.

Browser support for CSS Regions

At the time of this post, browser’s support for CSS Regions is still extremely limited. Not a single desktop browser supports the function by default. However, it is available in Safari on iOS7+ regions, which should be especially interesting for magazine layouts on tablets.

In Chrome (desktop) CSS regions can be in the “experimental Webplattformfunktionen” – a portion of enabled developer tools. Here is what we need to do to start this function.

Support Table for Regions

Enable CSS Regions in Chrome. Open Chrome and give into the address bar :chrome://flagsa. I use parallel to the Chrome developer version Chrome Canary, so I do not burden them with experimental features on my main browser. After you enter the above-mentioned command, a tab with developer functions appears. You need to enable the feature from the button “Experimental Webplattformfunktionen activate”. Then you start the browser. From now on Chrome will use CSS Regions.

Enable CSS Regions in other browsers

By visiting the Adobe website you would find a guide for Opera & Co: Enable Cutting- Edge & Graphical layout features

CSS Regions polyfill

On its Web platform, Adobe provides an experimental polyfill for CSS Regions.

Use CSS Regions

Now let’s look at the CSS code. CSS Regions works with a source (region) and different target containers (Region Chains). All the elements are linked on a common identifier (Named flow), because it is possible to produce several independent chains.

CSS Blend Modes

The blend modes (including blending) from Photoshop are mostly known and enjoyed among users in the creation of popular photo effects. With CSS Blend Modes these effects can also be implemented on the Web. In this post we are going to look at the properties background-blend fashion and mix -blend mode operation.

The principle is very simple. Several HTML elements or CSS backgrounds are offset according to the selected blend mode. The background-blend-mode is used when different background images are combined in one and the same element (multiple backgrounds) is addressed on the needed place.

In contrast, when several elements are to be offset against each other, a div with the background color of the , the property mix-blend mode will be used.

Example: Image fade in color

The following example uses a div with two backgrounds. To set multiple backgrounds thanks to the CSS3 property “Multiple Backgrounds” is not a problem. The first wallpaper is a picture of the Ammonites, the second background is solid orange.

The CSS property for the Blend Mode pop-called background-mode: BLEND MODE. For Webkit Nightly still needs a vendor prefix to be written to the time of publication of this article. Since our example blended two backgrounds into each other, we need to write within background-blend-mode two blend modes separated with commas in succession.

The first blend mode applies the image of the Ammonites, the second blend mode refers to the background color.

CSS Regions

It is quite a challenging task a website with interesting content to be visually appealing and responsive. Complex and flexible magazine layouts with infographics, various text boxes, marginalia, etc. are often only achieved with considerable effort.

The problem: There is no way the related content to flow successively through multiple divs or article elements. CSS Regions provide a solution.

What are CSS Regions?

CSS Regions is a technology developed by Adobe for flexible web layouts. If you are familiar with InDesign, you should be aware of the problem with the overload texts. Once in a text frame in InDesign you need to house more content, if you have available space, you have the choice of a layout. Either the text should be cut off or you need to chain multiple text frames together and let the content of a frame flow into the next. This also makes it possible to easily add additional text at the beginning of a document.

CSS Regions are very comparable with overhang texts. In the HTML markup is a source container with the entire contents, as well as various structural elements into which flows the content. The content can be conducted in any order by the structural elements via CSS.

Tools for web workers: Nice work with CSS

Web 2.0 was full of shiny buttons, gradients, grinding. Although the trend is moving to a simple design, yet some of the “classic” style elements are retained and combined as an accent to the new elements. But what had formerly been presented as an image now can be designed solely by CSS. To do that, I introduce you to three useful tools.

CSSmatic

CSSmatic combines some tools that you otherwise have to gather together. These include corner radius, shadow and noise generator.
The operation is very easy through the slider and invites you to do some gimmicks.

Ui Live Tools

What should not be missed on a good site? A contact form and buttons. This provides Ui Live Tools. But not only a simple icon and Ribbon builders are also there. Again, there are sliders and color pickers that make the design an easy task.

Tools for web workers: Simple CSS

Like in HTML, the good editors are important to ease the work with the CSS. But CSS is limited by its main purpose, to give a colour and form of the HTML language. This forced a need for the designers and developers to build tools for impressive effects. However to insert effects, the basic HTML structure of a page must be valid. There are some handy tools which you can find in the net, doing the job and which I am going to present to you today.

Normalize.css

Browser render an HTML element always different, depending on the pre-defined browser settings. So, who wants to clear out his template, he will be well advised to use Normalize.css. This tool is also used by Twitter Bootstrap, the HTML5 Boilerplate and many others.

CSScomb

When you are working with several colleagues on a website, the CSS can be messed up.The remedy for such situations is the CSScomb. There is also an add-on as an extension for various text editors. :)

Inline Style Converter

They are usually avoided, but sometimes they are desired: inline styles. They are very maintenance-intensive – unless you use Inline Style Converter. Due to the Inline Style Converter properties, IDs and classes are added as inline style – so be sure nothing is forgotten.

Tools for web workers: animations with CSS

CSS animations are available, but a beginner in CSS needs lots of invested time to master it. Anyone who has dealt previously with animations, surely understands the long – line CSS. But for visual people like me, it is better to play with controllers and to see the outcome immediately. This thought was also in the minds of the others who developed a few great tools, four of which I present to you today.

Animate.css

Without any prior knowledge Animate.css offers a large collection of interesting and pretty animations, ready for use.
The website provides a practical library where all the animations can be viewed in an example object.

CSS Animate

With twisting, pulling and pushing you can quickly create your own animations with CSS Animate. Both on the drawing area to the left and on the right the states of the object can be edited.

Stylie

Another tool to create your own CSS animations is Stylie. A direct link to the object is available so it allows all settings that are made in the control panel, to be seen in the real time. The spatial arrangement is also done via dragging the object on the bar.

Tridiv

This is a 3D editor using CSS. This tool is less about animations, but rotating freely 3D objects after creating them. With this tool through a simple editor all forms can be created, moved and changed on the website where you will see some impressive examples of what CSS is now capable of.

Strict rules are good, flexible policies are better

Since the end of November, we at Aperto created new CSS coding guidelines. We needed to “refresh” the guidelines, created in 2004 and make them more contemporary. The new version of the guidelines suggests a slightly different approach than for example the GMX code guidelines by being formulated more freely and thus be more easily understood and generally well accepted. The advantage of such rules: the code is consistent and clear which facilitates collaboration.

The CSS should be valid.

Avoid “Hacks”: The use of CSS hacks should be reduced to minimum. Instead, the developer should search for solutions which support the work in all browsers. Hacks, filters or browser-specific rules/declarations should be provided with a comment (see documentation for user agent comments).

Sort Modular: The basic principle of the construction within a stylesheet is modular. The individual CSS rules are grouped by module on the site – not by element types (all headings, all lists, etc.). All elements that are important for example for the sidebar – whether headings, lists, containers, etc. – are bundled. So all fast area-specific editing options of the respective website are made possible.

Sort declarations: There are two ways of sorting (the chosen form should be maintained in a stylesheet).

Alphabetically or from outside to inside: Behavior of the box (float, position, clear, … > margin, border, padding > … ) .

Formatting:

Each declaration lies on its own line. Insert blank lines between modules (along with commentary, ergo “module > blank line > next comment module > blank line > next module”). Values should be with lowercase (#fff instead of #FFF, times serif instead Times Serif).