Support Table for Regions
To enable CSS Regions in Chrome. Open your Chrome browser and type into the address bar chrome://flagsa. I use the Chrome developer version called Chrome Canary, so I do not burden my main browser with any experimental features. After you enter the command, chrome:flagsa, a tab with the 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.
To enable CSS Regions in other browsers
By visiting the Adobe website you can 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.
How to 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 well known and enjoyed amongst web designers 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 of 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 into one and the same element (multiple backgrounds) is then placed on multiple backgrounds.
In contrast, when several elements are to be offset against each other, a div with the background color of the property mix-blend mode will be used.
It is quite a challenging task to design a website that has interesting content and is visually appealing and responsive. Complex and flexible magazine layouts with infographs, various text boxes, marginalia, etc. are often only achieved with considerable effort.
The problem: There is no way for related content to flow successively through multiple divs or article elements. CSS Regions provide a solution.
What is CSS Regions?
CSS Regions is a technology developed by Adobe for flexible web layouts. If you are familiar with InDesign, you are probably aware of the problem with the overload texts. In a text frame, using InDesign, where you need to house more content you have the choice of layout. Either the text is be cut off or you need to chain multiple text frames together and let the content of one frame flow into the next. This also makes it possible to add additional text at the beginning of a document.
CSS Regions is comparable to overhang texts. HTML markup is a source container for the entire content, as well as various structural elements into which flows content. The content can be arranged in any order by the structural elements via Cascading Spread Sheets ( CSS).
Tools for web workers: Nice work with CSS
Web 2.0 was full of shiny buttons, gradients and grinding. Although the trend is moving towards a more simple design, some of the “classic” style elements have been 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 combines some tools that you would otherwise have to put together. These include corner radius, shadow and noise generator.
The operation is very simple, using the slider and encourages you to experiment with various gimmicks.
Ui Live Tools
What should never be missing on a good web site? A contact form with link buttons. This is exactly what Ui Live Tools provides. Again, there are sliders and color pickers that make the design an easy task.
When you are working with several colleagues on a website, the CSS can be messed up. The remedy for such a problem is the CSScomb. There are also an add-ons as extensions for various text editors. 🙂
Inline Style Converter
Inline Style Converters are usually avoided, but sometimes they may be necessary: The problem with inline styles is that they are very maintenance-intensive – unless you use Inline Style Converter. The Inline Style Converter properties include, IDs and classes that are added as inline style – to be sure that nothing is forgotten.
Tools for web workers: Simple CSS
Like in HTML, good editors are important to ease the work load. CSS is limited by its main purpose which is to give colour and form to the HTML language. To insert special effects, the basic HTML structure of a page must be valid. There are some handy tools that you can find on the internet, to do this job.
Browsers always render an HTML element differently, depending on the pre-defined browser settings. So, if you want to create a template, you will be advised to use Normalize.css. This tool is used by Twitter, Bootstrap, the HTML5 Boilerplate and many others.
Even with no prior knowledge of animation creation, Animate.css offers a large collection of interesting, relevant and fun animations, ready for immediate use.
The website provides a practical library where all the animations can be viewed easily.
With twisting, pulling and pushing you can quickly and easily create your own animations with CSS Animate. The drawing area to the left and right of the animation can also be edited.
Another tool to create your own CSS animations is Stylie. A direct link to the object is available which allows all settings that are made in the control panel, to be seen in real time. The spatial arrangement is also done via dragging the object onto the bar.
Tridiv is a 3D editor that uses CSS. This tool is less about animation, but creates and freely rotates 3D objects. 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, to the GMX code guidelines, for example. CSS guidelines are being formulated more freely and are thus more easily understood and accepted. The advantage of these guidelines is that 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 a 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 construction within a Style Sheet 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.