Design, CG Graphics & Inspiration

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

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

Tab Atkins | The Future of CSS – Current Experiments and Near-Future Reality | Fronteers 2011

Tab Atkins | The Future of CSS – Current Experiments and Near-Future Reality | Fronteers 2011

Modern CSS is amazing, but even more wonderful stuff is in the pipeline and currently being experimented with in browsers. Tab Atkins will explain the soon-to-be-new hotness in simple terms and show how it will drastically change the way you write web pages for the better.

  • November 19, 2011,
  • AndrewG

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

40+ New HTML5/CSS3 Articles and Tutorials

40+ New HTML5/CSS3 Articles and Tutorials

HTML5/CSS3 are bringing so much useful into web designers’ lives and in this connection we don’t stop on searching through the web for exhaustive and interesting tutorials, articles and snippets to share all the best resources with our readers. In this post we’ve collected the latest and the newest HTML5/CSS3 Articles and Tutorials that might help you in mastering your skills.

Read more…

  • November 10, 2011,
  • AndrewG

Bruce Lawson | HTML5 Semantics: you too can be a bedwetting antfucker

Bruce Lawson | HTML5 Semantics: you too can be a bedwetting antfucker

With all the whizzbangs of canvas and multimedia, the Ooh!s of the History API and the Aah!s of Appcache, the 30 new elements in HTML5 are often overlooked by developers coming to terms with what’s new in the HTML Hood.

But semantics aren’t the boring old comfortable cardigan in your developer wardrobe – they’re the studded leather codpiece around which the rest of your Mighty HTML Warrior’s armour is built.

We’ll look at how the new HTML elements came about, note problems with their current specifications, then wonder whether those problems are actually features rather than bugs. We’ll also consider the WHATWG’s penchant for “teleological semantics” and, back in cardigan mode, propose a middle ground.

There will be no Turkish dancing videos.

Slides and transcript available on fronteers.nl/​congres/​2011/​sessions/​html5-semantics-bruce-lawson

  • ,
  • AndrewG

CSS3 Secrets: 10 things you might not know about CSS3

CSS3 Secrets: 10 things you might not know about CSS3

Great presentation by Lea Verou about some things in CSS3 you may not have known about. You will learn something here guaranteed.

  • ,
  • AndrewG

Making an Image Gallery with CSS3

Making an Image Gallery with CSS3

Quite recently I’ve decided to try CSS3 features in operation. To look at what they are suited for in reality. My look fell on the well known galleries of fancybox etc. In other words, I’ve decided to do the similar js gallery, but only on clean html+css.

Read more…

How to Achieve Text Fading Effect in CSS3

How to Achieve Text Fading Effect in CSS3

Hello to everyone. Today’s post will be short, but I think it can be rather useful to our readers. I often hear people ask the same question about how to do “fading” of text to the bottom, the top etc.
There are variants on js and with a picture and css -gradient simply imposed over text. Today a new decision of this problem came into my mind. Its realization is a piece of cake.

Read more…

  • November 4, 2011,
  • Softlink

SITH – CSS3 Technique for Soft Image Transition

SITH – CSS3 Technique for Soft Image Transition

I would like to tell you about how I obtained the smooth changing of icons’ colors when hovering the cursor over them. You can often see a similar problem on Facebook. If an icon is a blue silhouette on a white background, then when hovering the cursor both colors switch their places and it looks a bit sharp as it happens instantaneous. My aesthetic feelings were offended, and I decided to work out my own decision.

Read more…

  • November 2, 2011,
  • Denis Bobrovnikov