Design, CG Graphics & Inspiration

Pixel Distortions with Bilinear Filtration in HTML5 Canvas

Pixel Distortions with Bilinear Filtration in HTML5 Canvas

In this post I want to describe simple methodology of pixel image distortion on “clean” javascript in 2D – Canvas without the use of the special libraries and shaders, by the direct access to the pixels of the image. I hope, it will be interesting and useful both for general development and for the decision of some tasks.

Read more…

  • February 22, 2012,
  • Stdit

50+ New HTML5 Websites

50+ New HTML5 Websites

Are you ready to get a new portion of inspiration? We have no doubt that it’s so! As a lot of new HTML5 sites have appeared since we did our last review on 70 Original HTML5 Markup Websites, we would like to share with you the best examples of the recent HTML5 websites. Perhaps, some of these might give you great ideas on how to enhance your own web site.

Read more…

CSS3: Life Without Prefixes

CSS3: Life Without Prefixes

Prefixes are a good thing. They help browser developers in realization of new possibilities. But with them developers’ lives get even more difficult. There are a lot of prefixes, and sometimes there are distinctions in syntax.

The problem is obvious. We need to find a method to facilitate the work with prefixes.

Of course, it would be unreasonable stop using prefixes. But it’s quite possible to shift a duty of their generation on specially existing for this purpose instruments. I tried to enumerate the possible variants.

Read more…

  • February 14, 2012,
  • Renat Rafikov

40+ New Tools and Services for Web Designers and Developers

40+ New Tools and Services for Web Designers and Developers

Last year, in summer we published a very informative roundup Timesaving Tools and Services for Web Developers with numerous handy resources. Such services, generators and frameworks are in a popular demand, especially among people who value their precious time. In this post you’ll find a lot of helpful things, except that it hasn’t any of jQuery plugins, as previously we’ve presented to you a showcase of 50 New jQuery Plugins For Web Developers.

Read more…

  • February 13, 2012,
  • AndrewG

Great Dozen of Advices to the Beginning HTML Coders

Great Dozen of Advices to the Beginning HTML Coders

Introduction

I am a freelancer. Previously, I didn’t think much about how and what coders do. I was responsible for the server, and my friend was coding and managing with the content. Quite recently I wanted to try to understand “what’s what”. A couple of days ago I came across the material that I liked very much. It was a clear example of what and how to write. Unfortunately, I cannot share the link, because I don’t remember where this manual is situated. Though, it was possible to memorize it, I went another way – I summarized it and made some notes. So, you are welcome to look through my notes.

Read more…

  • February 9, 2012,
  • Michael Davydenko

Dive into CSS3

Dive into CSS3

Everyone who was ever interested in CSS3 has already tried it. Now we can generate rounded corners and drop shadows without any superfluous efforts.

But it’s just a superficial level. I had to look into the new possibilities of browsers in more detail, to answer the arising questions like: to what extent gradients with a great number of colour transitions have the cross browser compatibility, where and how is it possible to apply at once a few shadows to the block, for what browsers prefixes of properties are used specifically etc.

In addition, I was interested in support of CSS3 on mobile platforms, unstudied possibilities of CSS3, and also generators that create a cross browser code. I tried to fill in some blanks and collect useful information for those, who only prepares to go deeper.

Read more…

  • February 7, 2012,
  • Renat Rafikov

Float Mania: Explanation of How CSS Property Float Works

Float Mania: Explanation of How CSS Property Float Works

As previously I was asked for several times: “why float is displayed wrong?”, I decided to write this note, which would explain typical situations a beginning coder runs into, and when someone asks me again simply to give a link to this article.

Read more…

  • February 1, 2012,
  • Jean Louis

On the Sails of HTML5: How New Technologies Change Modern Web. Part 2

On the Sails of HTML5: How New Technologies Change Modern Web. Part 2

You can read the first part of this article here

A3. Agile

The third A is Agile. The world is difficult and sometimes it is not enough to be simply accessible and adaptive to some different, but general parameters. A site must be flexible and the making of technological decisions must be flexible too.

Read more…

  • January 25, 2012,
  • Constantin Kichinsky

On the Sails of HTML5: How New Technologies Change Modern Web. Part 1

On the Sails of HTML5: How New Technologies Change Modern Web. Part 1

What is HTML5?

Today, from a number of those people who are somehow related to web development, only lazy ones haven’t heard about HTML5. You won’t be mistaken, supposing that at every modern conference, where some questions about web are being discussed, almost for sure, there might be something about HTML5. Practically every large company, related to web, whether it is Google, Apple, Microsoft, Amazon, Adobe, Oracle, Facebook, Yandex or Mail.ru. says something in favor of HTML5, makes a declaration of love and adherence to advancement and development of HTML5. Yeah! (Opera and Mozilla, undoubtedly, are in this list too.)

Read more…

  • January 24, 2012,
  • Constantin Kichinsky

Sliding Panel on CSS3 with iframe inside

Sliding Panel on CSS3 with iframe inside

I want to share some little experience of how to create a sliding panel on CSS3 with iframe inside and how to overcome unpleasant surprises of IE. It seems to me that this decision could be good for adding a feedback form on the site, or a chat with a consultant etc.

Read more…

  • January 18, 2012,
  • Ivan Efimov

How to Create Simple Tooltips with CSS3

How to Create Simple Tooltips with CSS3

I was asked for several times to create simple tooltips, the one with the arrows. It seemed to be easy: I had to do a block with round corners, take triangles and voilà. However, it’s not that simple. Because you know that designers’ imagination is very creative and sometimes even wild. They want to make inclined arrows, frames, or add some shadows. Certainly, it is possible to complete everything on the pictures, but it is impractical. If for no other reason than the heap of actions, in order that all will stretch on all sides.

Read more…

  • January 16, 2012,
  • Softlink

Round Avatars in CSS3

Round Avatars in CSS3

Today I’ve got another task to deal with it was necessary to do “round avatars“.

Read more…

  • December 6, 2011,
  • kulakowka

Tooltips in CSS3 and HTML5

Tooltips in CSS3 and HTML5

In this article I’ve decided to write about quite simple and easy method of how to create the simple “tooltips” – pop-up prompts. In this method we will not use JS, we’ll be content with CSS3 and HTML5.

Read more…

  • December 1, 2011,
  • Nikolay Izoderov

Client-side evroneCrop on Canvas

Client-side evroneCrop on Canvas

In one of my projects it was necessary to do a crop for profile pictures that were loaded by users. Standard decisions, such as Jcrop, after a selection of the area send coordinates to the server, and crop images must be carried out already on a server. Meantime, modern browsers already reached the state, when similar actions can be carried out at once on a client. It urged me to write the crop with the use of canvas, which would produce all actions on a client and sent the prepared image as base64 string on a server. Besides the acceleration of work and unloading of server, it similarly will allow us to change user’s profile image on a page at once, without the need to load it from a server.

Read more…

  • November 29, 2011,
  • Arseny Zarechnev

Meet the Designer – Interview with Alessio Atzeni

Meet the Designer – Interview with Alessio Atzeni

Today we present to our readers an interview with web designer and front-end developer – Alessio Atzeni. He is a passionate web designer specializing in XHTML, CSS and Javascript web development, and each site he develops is built to be search engine friendly.

Read more…

Collection of Famous Logos in Pure CSS

Collection of Famous Logos in Pure CSS

Would you believe the fact that it’s possible to create different logos only with the use of CSS, if somebody told you this about five years ago? But now when everything develops and changes in no time, we take it for granted. If previously it was possible to create a logo in Photoshop or with the help of JavaScript, then now only using your coding skills you can create a really amazing and very realistic logos! So, if you are interested and want to get inspired, then check out our handpicked Collection of Famous Logos in Pure CSS.

Read more…

  • November 15, 2011,
  • AndrewG