Design, CG Graphics & Inspiration

Cross Browser Reflection of the Elements on CSS3

Cross Browser Reflection of the Elements on CSS3

Currently, there are box-reflect and mask-image, that allow to create the reflection of the elements, but these properties are accessible only in Safari and Chrome, and work not so as desirable. Therefore I want to tell you how to realize a cross browser reflection on CSS3.

Read more…

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…

PSD2HTML Review

PSD2HTML Review

Not every designer can quickly create a valid, semantic standard compliant markup, that looks equally good in all popular browsers. Frequently, when designers create magnificent and complex graphic part, they try to complete the coding part on their own. This can take too much time and become a really frustrating experience.

PSD2HTML® is an excellent solution for designers who want to get a high quality PSD to HTML conversion and CMS implementation in short turnaround time. They accept source files in all common formats, such as PSD, PNG, TIFF and AI. PSD2HTML® also provides the implementation of your design into popular CMS, including but not limited to WordPress, Drupal, Joomla! and Magento.

I used their services myself and here is my experience:

Read more…

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

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

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

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

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

How to Create Progress Bar with CSS3

How to Create Progress Bar with CSS3

Today we will recreate a progress-bar from the Adobe® Flash® Player settings program with the help of CSS3, using gradients and shadows.

Read more…

  • November 12, 2011,
  • Denis Bobrovnikov