Google Search Box and Button CSS tutorial

Google rolled out their new design few weeks ago, so I decided to show you how you can reporduce their search box with the inset shadow effect and the little blue search button. The first part is the easiest one, wich is the HTML one, we have to create a simple input and a button, and after that we will customize them. Read On…

Pure CSS3 Accordion tutorial

With the new CSS3 animation functions we can now create a pure css3 accordion without any javascript at all, I assume you already know the transition functions because we are going to use it for the slide effect.

Here is the DEMO, I have used a touch of Metro UI because I like the general ideea of simplicity and functionality

Read On…

Gradient Background with CSS3

With the new CSS3 attributes, we can now create gradient backgrounds without using any kind of images at all, only pure CSS, at the end of this tutorial you will achieve the following box, wich is cross-browser compatbile, like Internet Explorer 10, Opera 11.10, Chrome and Firefox wich is pretty nice that all the browsers starts to adopt the new standards, so the result:

Read On…

Div height with float elements inside

This is a problem across all the browsers, happens when a div inside another div have the the float attribute, wich will remove any height from it.

The fix is really simple, just use the overflow attribute, and set it to auto to get it right.

Read On…

CSS Scroll bar using webkit

You can customize your site scroll bar with css very easy, by using ::webkit-scrollbar. This will work only under Google Chrome, Safari and other WebKit based browsers, on Firefox or other render engine than WebKit will just display the default scrollbar.

Read On…

Styled search box with CSS and images

Almost every site have a search box, but sometimes the search box isn’t attractive, or it’s just a simple search box, and users doesn’t even see it. In this tutorial I’m gonna show you how to make a nice search box using CSS and images.

Let’s start with the HTML part, first of all we need to create the text input and the search button. Read On…

Recreating the Google Search button

You’ve probably saw that Google chaged his design, and they bring us the new buttons, they are big grey buttons – simple and ergonimic.

In this tutorial I’m gonna show you how to recreate the same buttons, with the same effect as the original ones. Read On…

HTML Scroll Box

In this tutorial we are going to create an HTML Scroll Box, bassicaly is a box with scroll bar wich increase itself when the text or the content inside is too large to be displayed. We can do this by using a div, and apply the overflow CSS property to our div.

Let’s get started.

Read On…

Background images and colors

Every site needs a background color or image, even if it’s white, it still need it. CSS gives us neighter more nor less than 16,777,216 colors to style up our websites, they can be find in the following forms: hex code, rgb(red,green,blue) value or from a name like red.

Read On…

Create rounded corners with CSS

You can create rounded corners in CSS by using the border-radius property wich will tell the browser to render round corners without using any images or multiple div’s at all, this is one of the best property of CSS3. Read On…

box-shadow CSS glow effect

If you’ve been used Twitter, you might already saw their user blue input glow effect when the box is focused wich is also smoothly animated by using the transition property. In this tutorial I’m gonna show you how to achieve the same effect using box-shadow properities.

Read On…