Google Search Box and Button CSS tutorial

In: CSS for advanced

23 Feb 2012

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.

<input type="" /> <button>Search</button>

So, as you can see, we created the input and the search button, but there is not style on it, only the one taken from the Windows, so now we are going to custmize them.

First, the input css part:

input {
border:1px solid #D9D9D9;
border-top:1px solid #C0C0C0;
font-size:14px;
outline:none; /* This will remove any outline from browser (usually browsers outlines the forms) */
padding:6px;
}
input:hover {
border:1px solid #C0C0C0; /*The border color will change to a darker one, this will highlight it*/
border-top: 1px solid #777;
}
input:focus {
border:1px solid #4d90fe; /*When you focus (click) the form, the border will change to a nice blue color*/
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

I commented some lines in the CSS for you to make an overall ideea of how it works. In the second part, we must customize the actual search button, here we go:

button {
background-color: #4D90FE; /* just in case the browser doesn't support the gradient function */
background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED));
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: -moz-linear-gradient(top,#4D90FE,#4787ED);
background-image: -ms-linear-gradient(top,#4D90FE,#4787ED);
background-image: -o-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4D90FE,#4787ED);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); /*This is gradient for IE*/
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-user-select: none;
-webkit-user-select: none;
color: white;
font-size: 11px;
font-weight: bold;
height: 30px;
width: auto;
text-align: center;
padding: 0 7px;
}
button:active { /*This is the inside shadow wich appears when you actually click the button*/
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
}
button:hover { /* This is only highlighting the button when you mouse hover it */
border: 1px solid #2F5BB7;
}

This was it guys, pretty simple right ? Now you only have to put them all together, you can download this example HERE.

Pure CSS3 Accordion tutorial

In: CSS for advanced

22 Feb 2012

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

Our accordion will be cross browser compatible (the animation works on all browsers, including IE 10+ but not lower versions). So, let’s skip to the tutorial part.

First, the HTML markup, we are going to use divs, dl and dd tag (if you don’t know what dl and dd tag is, you can see the definition in the HTML tags section)

<div class="accordionContainer">
	<span id="tab1"></span>
	<span id="tab2"></span>
	<span id="tab3"></span>
	<div class="tabContainer">
		<dl class="tab1">
			<dd>
				<a href="#tab1">This is the 1st tab</a>
				<div><p>CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.</p></div>
			</dd>
		</dl>
		<dl class="tab2">
			<dd>
				<a href="#tab2">This is the 2nd tab</a>
				<div>
					<p>
					<iframe width="560" height="309" src="http://www.youtube.com/embed/l3yAx2uCoHs" frameborder="0" allowfullscreen></iframe>
					</p>
				</div>
			</dd>
		</dl>
		<dl class="tab3">
			<dd>
				<a href="#tab3">This is the 3rd tab</a>
				<div><p>Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</p></div>
			</dd>
		</dl>
	</div>
</div>

So, as you can see, we used the definition list (dl) tag to along with a class attached as a wrapper, and then the definition description (dd) wich holds the actual tab along with it’s content.

Now, the CSS part, wich is a little bit longer.

*{
    margin:0;
    padding:0;
}
body {
    font-family: 'Segoe UI', Arial, Tahoma, sans-serif; background: #fafafa;
}
header {
    margin: 20px auto;
    width: 500px;
    text-align: center;
}
.content {
    margin:0 auto;
    width:900px;
}
.accordionContainer {
    color: #000000;
    position: relative;
    width: 600px;
    margin: 0 auto;
}
.accordionContainer span {
    display: none
}
.tabContainer {
    background-color: #FFFFFF;
    overflow: hidden;
}
.tabContainer dl dd a {
    background-color: #4d99f6;
    color: #fff;
    display: block;
    font-size: 18px;
    line-height: 30px;
    padding: 10px 15px;
    text-decoration: none;
 
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.tabContainer dl dd div {
    background-color: #f0f0f0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tabContainer dl dd div p {
    color: #444444;
    font-size: 12px;
    padding: 20px;
}
.tabContainer dl dd a:hover {
    background: #4082d3;
}
.tabContainer dl dd a:active {
    background: #3975be;
}
#tab1:target ~ .tabContainer .tab1 dd div {
    height: 80px;
}
#tab2:target ~ .tabContainer .tab2 dd div {
    height: 345px;
}
#tab3:target ~ .tabContainer .tab3 dd div {
    height: 80px;
}
#tab1:target ~ .tabContainer .tab1 dd a,
#tab2:target ~ .tabContainer .tab2 dd a,
#tab3:target ~ .tabContainer .tab3 dd a {
    background: #3975be;
}

As a side note, you must use fixed height for each tab class in order to preserve the height & the animation of the tabs, also this according is compatible with IE, but the animation won’t work. I hope you learned something from this tutorial.

You can also download this css3accordion with css3.

Gradient Background with CSS3

In: CSS for intermediaries

21 Feb 2012

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 box have a gradiented background

Let’s get started.

First, the HTML part, wich is pretty simple, only a div with some text inside of it.

<div class="gradient">This box have a gradiented background</div>

Now, the CSS3 part where we will create the actual gradient (notice that I used a class on the div, not an ID, but works with both).

.gradient {
/* For Chrome 10+ */
background: -webkit-linear-gradient(right, #000, #cc0000);
 
/* For Firefox 3.6+ */
background: -moz-linear-gradient(right, #000, #cc0000);
 
/* For Internet Explorer 10+ */
background: -ms-linear-gradient(right, #000, #cc0000);
 
/* For Opera 11.10+ */
background: -o-linear-gradient(right, #000, #cc0000);
 
height: 100px;
width: 100px;
color: #fff;
}

Now, let’s explain the code, before the linear-gradient function you can see the prefix of the browsers, like ‘webkit’, ‘ms’ and so on, you must specify that for each browser as shown in example, now what’s inside the brackets works like this, the first argument is from wich side will start the linear gradient, in our case from right, the next values are the colors, first color is black, wich will start from right, and the second it’s a nice red.

Div height with float elements inside

In: CSS for intermediaries

20 Feb 2012

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.

#main_div {
overflow: auto; /*This will fix the height problem*/
}

CSS Scroll bar using webkit

In: CSS for intermediaries

28 Jul 2011

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.

So let’s get started:

/* Scrollbar Chrome */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #ccc;
}
::-webkit-scrollbar-thumb {
    background: #DD4B39; 
}

Ok, so let’s explain, the -webkit-scrollbar defines the basics of the scrollbar, like the width or height, the -webkit-scrollbar-track is the background where the scrollbar moves, in our case is gray color (#ccc), and the -webkit-scrollbar-thumb is actually the bar itself, wich is red.

Text selection background color webkit

In: CSS for intermediaries

25 Jul 2011

In this tutorial I’m going to show you how to change the background color of the text when you select a text using ::selection attribute. The attribute is cross-browser compatible, so it works perfect on Chrome, Internet Explorer, Firefox and other CSS3 browsers.

Code

::selection {
background:#DD4B39;
color:#fff;
}
::-moz-selection {
background:#DD4B39;
color:#fff;
}
::-webkit-selection {
background:#DD4B39;
color:#fff;
}

The text resulted will look like this: Text while is selected.

white-space tag

In: CSS Properties

8 Mar 2011

The white-space property specifies how the white-space inside an element should be handled.

Example

p { white-space:nowrap; }

vertical-align tag

In: CSS Properties

8 Mar 2011

The vertical-align property specifies the vertical position of an inline container. It have several possible values, some of them are: baseline, sup, super, top, middle, bottom, etc.

Example

h1 { 
vertical-align: text-top; 
font-size: 10px; 
}

text-indent tag

In: CSS Properties

8 Mar 2011

The text-indent property specifies the indentation of the first line of text in a block container.

Example

p { text-indent: 1.5em; }

text-transform tag

In: CSS Properties

8 Mar 2011

The text-transform property specifies if the text will be uppercased, lowercased, capitalized or normal.

Example

h2 { text-transform: uppercase }
Older Entries

Copyright © 2012 - 2013 HTML Tips | Log in

All materials on this site are copyrighted by us, reproduction is strictly prohibited without our WRITTEN permission.