Posts By: Irina Petculescu

CSS shapes. Images in rounded corner square rotated to 45 degrees (rhombus).

read post

Lately there is a certain trend in web design for using images in geometrical shapes. Shape in-trend changes about once a year. We all remember rounded corner squares, then circles, then hexagons and octagons that used to contain Team members’ happy faces:), right? A Dribbble player rightfully popped up a question: what will be trend of 2014?

I think, it will be a diamond rotated to 45 degrees, with rounded corners. Let’s go ahead and make one with CSS.

Smart Web conference in Bucharest

read post


On September 24-th we have attended the SmartWeb conference. Then got swamped with work, and got to writing about it only now 🙂 .

Anyhow. SmartWeb was the first web technology conference of this level ever held in Romania. We have great e-commerce & SEM conferences, start up conferences, web awards events. But SmartWeb was the first techy event that was truly interesting for web designers & front-end developers. read more »

Roundup of useful design tools. September 2013.

read post
Useful tool for designers. It places a screenshot (any screenshot) into all sorts of devices: laptops, tablets, smart phones. You can browse the device gallery, choose your environment, drag-n-drop your screenshot and then save a PNG with it positioned on selected device. Pretty cool stuff for your portfolio!
Besides the fact that it’s simply crazy cool thing, you can use it to generate low-poly backgrounds for sites and so on. Adjust colors and lights and then click EXPORT to get a PNG screenshot.
Ultimate fashionable web designer toy! Generates long shadows in CSS3. Code works flawlessly.
Awesome meteo icons, which are also available as web-font. Free.

Introduction to OOCSS and Responsive Behavior. Designing a one page site with Simple Responsive Template.

read post


Working on web projects I used to run into 2 problems time and again. First problem applies to any web design project: as the project grows bigger, CSS gets messier. There was obviously a need for some kind of better system of writing CSS. Second problem applies to responsive websites. The problem is that solely CSS media queries are not enough to make a website truly responsive. Truly responsive website will not only look, but also behave in a responsive way. That means – if we will simplify things a lot – it will serve different assets to different devices. In this tutorial I would like to show you the solutions to those problems, which I think are awesome: OOCSS (stands for Object Oriented CSS) and Responsive Behavior continue reading….

Simple Responsive Template. New freebie from Prowebdesign.

read post

Simple Responsive Template is a continuation of YAMB (Yet Another Responsive Boilerplate) project. This tutorial on YAMB v.1 will give you a short overview of responsive design concept and idea about why YAMB was created. In this article we will mainly speak about how  to use Simple Responsive Template and how it is different from the YAMB v.1.

Simple WordPress plugin: recent posts with custom excerpts from chosen category in a widget.

read post

This is a super simple WordPress plugin. It generates a widget that displays posts as title – excerpt – read more link from chosen category. You can control from what category and how many posts to show. I wrote this plugin because existent plugins either generate excerpts for posts automatically, and you can not control what’s displayed. Or they are too complex and have some weird formatting:). Read more and download

SASS gradient bars with reflections

read post
SASS is great! Not only because it makes writing CSS easier, but also because it forces you to be more organized in your design work. If you make glossy progress bars in CSS like ones in the picture, you tend to use at least 3 color shades: two for gradients, one more for border. But with wonderful SASS color functions you immediately begin to think: can I optimize it somehow? Yes, you can! You can use just one color to create both gradient bar with border and its reflection.
In this tutorial I will show you how to create colorful bar charts with just one color variable for each. Well, one and a half :).

How to deal with :hover on touch screen devices

read post

Are you planning a web project? Not sure what mobile strategy is right for you? Read our short educational article that can help you make the right choice. This article is a small case study about dealing with hover effects on touch screens. As you know, :hover behavior doesn’t exist on touch screen devices. So when you… Read more »

Roundup of useful tools for custom styled Google Maps

read post

Small collection of tools and tutorials to get you started with custom Google Maps API v3. Fast and easy tutorial about adding custom Google Maps to website – gMaps API v3 Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it… Read more »

CSS3 rounded responsive drop shadows & glows

read post

And by rounded drop shadow we mean this effect:

All kinds of nice visual effects are now added to web pages using pure CSS3, and no images. When it comes to creating box shadows, the most used property is – not surprisingly – the box-shadow. A lot of tutorials are available for achieving warped shadow effect. This is just one of them:

Oddly enough, to create a round drop shadow effect like on the picture above, most front end developers still use images. I guess images are somehow seem faster to slap into the code, especially with that deadline looming. And in most cases images work just fine. Still, there are some very good reasons to stop using images and use CSS3 instead… Read more