Design, CG Graphics & Inspiration

Handy CSS3 Tuts For Web Developers

Handy CSS3 Tuts For Web Developers

It’s been a long time since we have come up with a collection of useful CSS3 tutorials. Though there are some limitations on the side of some browsers, CSS is widely used in creating various things in web design. The main advantage here is that there is no need to use images in design, now you can achieve your wants using CSS, and significantly reduce the loading of your web pages.

Today our showcase consists of the freshest and very useful tutorials that we have collected here in order to save your precious time and make your workflow more fun and easy! So meet the collection of Handy CSS3 Tuts For Web Developers and enjoy it!

Read more…

7 Steps to Get Prepared for IE10 and Windows 8

7 Steps to Get Prepared for IE10 and Windows 8

As you, certainly, already know, Windows 8 Consumer Preview was released on February, 29, and together with it the 5th platform preview version of Internet Explorer 10. In this article I am going to talk about how to prepare for the updated version of IE. Although, the narration will be mainly about IE10, many of these advices are applicable to other browsers, including the other platforms.

Read more…

  • April 3, 2012,
  • Constantin Kichinsky

How to Create a Fading Dark Gradient on CSS3 without Images

How to Create a Fading Dark Gradient on CSS3 without Images

In today’s post I would like to share with you my method of creating fading lines without the use of images.

Read more…

  • March 19, 2012,
  • CyberAP

Stop-watch on CSS3 Without Any Pictures or Scripts

Stop-watch on CSS3 Without Any Pictures or Scripts

Introduction

Firstly, I would like to say a few words about browsers. This code works on such modern browsers as: FireFox, Safari and Chrome. On approach such browsers as IE10 and super secret new Opera.

Secondly, I want to notice at once that I will describe exactly the process of animation, but not drawing on CSS3. For the future I have a different plan, it is to do very beautiful picture, on CSS. Oh yes, it became not so boring, since the developers from safari gave up the old standard of linear – gradient (good bye, color – stop, from, to, 0 0) and Opera at last began to support radial – gradient (the last thing happened relatively a long ago).

At first I thought of creating a simple stop-watch, with pointers only, but it is very boring.

You don’t get any drive and a feeling of mechanism, when you see two pointers hurrying on a monitor. From the other side I remembered how once I did a sort of odometer, for the path passed by a mouse. And suddenly, a brilliant idea came into my head.

Read more…

  • March 6, 2012,
  • Leonid Lilo

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

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

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

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

30 New Photo Manipulation Tutorials

30 New Photo Manipulation Tutorials

Photoshop is a powerful tool in the hands of a really skilful designer or photographer. It helps to bring your ideas into reality and mostly used for Photo Manipulation. To help you in mastering your flairs we’ve gathered 30 New Photo manipulation tutorials. These tutorials are made for those people who have creative mind and like experimenting with different effects. The tutorials listed below will help you learning various techniques of how to manipulate images using Photoshop.

Read more…

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

40+ New Adobe Illustrator Tutorials

40+ New Adobe Illustrator Tutorials

Are you a professional or a beginner in Adobe Illustrator? Well, never mind! To make progress at least in something you should read, learn and practice, practice and again practice. And if you are ready to start learning new techniques, you’ll need some fresh tutorial to keep to. To help you with that we’ve gathered here a list of step-by-step tutorials that might come of a great interest to you, in case if you’re searching for new methods of enhancing your personal skills and to make your work with this program more efficient and easy.

Read more…

  • January 15, 2012,
  • AndrewG

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

JavaScript F.A.Q: Part 2

JavaScript F.A.Q: Part 2

Previously I’ve posted the article JavaScript F.A.Q: Part 1, which contains very useful information on JavaScript, and now I would like to continue with some more new and interesting questions and answers to them.

Read more…

  • November 22, 2011,
  • TheShock