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…
Here is the DEMO, I have used a touch of Metro UI because I like the general ideea of simplicity and functionality
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:
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.
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.
In this tutorial we will create CSS Buttons with pressed, hover effect and gradient background without using any images at all! We will create the gradient colors effect using the gradient feature from WebKit, and also since Firefox 3.6+ we can create gradient using
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.
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…
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.
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.
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…
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.