2

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
image
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.
0
Sparks 8 january 2013, 14:26

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.
image
Here are its demo effect and writing process.
0
Killer 3 december 2012, 22:22

How do you imagine a popular Twitter Bootstrap CSS framework will look like, if it was from Google? Let’s meet Plusstrap.
image
0
Killer 15 october 2012, 14:53

Introduction


image
In my opinion CSS3 Grid Layout Module is one of the most interesting modules in the CSS3 family. The official history of the module as a draft specification is a little less than a year. Also, in December, 2010, there was made the preliminary announcement about CSS Grid Alignment at TPAC 2010 written by Vladimir Yunev. It should also be noted that with a slightly different name and slightly different syntax, but with the same essence, it was declared as a WD as early as 2007. Today, the development of the final design of the module is in full swing, and the pre-implementation is already in Internet Explorer 10, and there is a hope that the support of the new features will also appear in future versions of other popular browsers.
0
Sparks 25 april 2012, 5:21

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.
image
+1
Killer 27 march 2012, 11:49

image

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Please note that this will only work properly in modern browsers that support the CSS3 properties in use.

HTML markup


The structure of markup is very simple and intuitive. Create a container that will have our image and all the other information.

Inside the view insert an element with the class mask that will be responsible for our effects driven by CSS3 and inside it we will put a title, description and a link to the full image. (For some examples, we’ll need to add the mask element as a separate element and wrap the description in a devi with class content.)
0
Killer 5 january 2012, 15:36

image

This article will show some techniques to create effects using CSS3 on the example of the menus. The beauty of my idea is that it would simply compose elements, such as icons of the main title and secondary title, which will be animated by the cursor moving using only CSS transitions and CSS animation. We will consider a few different effects for the elements.

Icons that are being used in the demo are the typeface of Web symbols. The typeface is created by Just Be Nice studio.

HTML Layout

HTML menu structure will be as an unordered list where each element is a link, which includes the span with an icon and div with the main and secondary title:
<ul class="ca-menu">

  • <span class="ca-icon">A</span>
    <div class="ca-content">
    <h2 class="ca-main">Articles</h2>
    <h3 class="ca-sub">Web development articles</h3>
    </div>
  • ...
    </ul>

    As we use the font for the icons, we will write the corresponding letter for the icon.
    0
    Sparks 26 december 2011, 16:05

    Browsers and standards are in the eternal race. Because there is mismatching in the standards due to different ways of rendering pages, a lot of time of a web designer goes to make up these mismatching (using hacks). As a result, the designer deals with the browsers instead of effective work, losing precious time of work.

    A cross-browser is a feature of website that displays and works in all popular browsers identically.

    Hack is a correction of a bug or addition of a new feature through the use of other undocumented or incorrectly realized feature. (c) Lurkmore

    Dirty hack is a quick solution to any problem in the short term, which negatively affects a code of inner beauty and clashes with its internal structure. (c) Lurkmore
    0
    Sparks 7 november 2011, 13:51

    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
    Tags: Css, html
    0
    Killer 23 september 2011, 15:49

    Every day new standards of CSS3 and HTML5 enter more deeply into the life of web designers and web developers, and the browsers are becoming more compatible with these standards.

    image

    In connection with this event we would like to present you a selection of 10 buttons of CSS3 that will make your life easier during the layout and creation of the web applications.
    Tags: button, CSS3, html5
    +1
    Siera 15 september 2011, 12:02
    1 2