Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 30 2012

01:06

How to Create a Simple Hover-Over Banner

Advertise here via BSA

Traditionally, to make a button or banner change when you hover over it, developers and designers have loaded two separate images — not the most efficient method. The most obvious drawback is that the image would be loaded only when the user hovers their mouse over the image and therefore they don’t experience a fluid, smooth hover effect, which is bad usability.

It also requires you to have two different files that need to be loaded, which means more files to manage, more HTTP requests to process, and more bloat on your site. This can quickly get out of hand if you have a lot of hover-over images on your site.

There must be a better way to approach this! Well, luckily there is a more efficient way, and that’s what we’ll learn in this tutorial.

Instead of having two separate images stored in two different files, you can combine both images within one image — a sprite — and place them next to each other on the canvas; this would mean that instead of loading the image dynamically, when the user hovers, both the static, first, image would be loaded as well as the hover, second, image. To do this we simply combine both the hover image and the normal image and then use some CSS to create a div (or class if you need a hyperlink, which we do in this tutorial), give the background image a width half the size of the actual image file, and then use CSS to make the background image shift to the left when the user hovers over it.

Part One: Preparing Your Image

Firstly, you need to prepare your image so that it will display correctly when you hover over it and shift the image to left — the key is to make the image completely symmetrical. For this tutorial, I will be using Apple’s “Available on the App Store” badge and having the image display the price when the user hovers over it.

1. Open your original, static image in Photoshop (you can follow along easily in Fireworks if you prefer).

2. Go to the menu and open Image – Canvas Size (or press Option + Command + C) and then double the width on your canvas — so in my case it would go from 200px to 400px. However, I prefer to add around 6 extra pixels (or any even number of pixels) as this allows space between both images and makes it look tidier. So, it would go from 200px to about 406px.

Screen Shot 2012-04-21 at 16.03.23

3. Select the layer that your image is placed on and then move it to the leftmost part of your canvas.

4. Duplicate the layer that contains your image and move the duplicated image to the rightmost part of your canvas and you should have two identical copies of your image side by side with the optional gap in the middle.

5. Now, you need to apply the style and changes to your secondary image that will display when the user hovers over it – so, for instance, double click the secondary image’s layer to bring up the Layer Style window.

6. You can add a color overlay to your image to give it a tint when the user hovers over it, so navigate to color overlay in the left sidebar of the window and check the box next to it.

Screen Shot 2012-04-21 at 16.09.42

7. Choose a color, in my case it’s black and give it a reasonable tint – I usually go for 80% opacity. This means that there’s enough tint to tell that it has changed but also allows the user to see the underlying image perfectly fine.

8. Once you’ve got a nice color going and applied the overlay, press Enter or OK.

9. Now, you have two images, one that will be displayed normally (the image on the left) and one that will be displayed when the user hovers over the original image (the one on the right). Now, you can add something to go on top of the hover image. Text is usually a good option.

10. Create a new layer above all the other layers and select the Text tool (or press T) and select an area above your hover image and start typing.

Screen Shot 2012-04-21 at 16.16.51

11. Now, add some additional formatting like a fancy font, change the size or maybe the color.

12. Save your image with an appropriate name (for this tutorial, it’s app-store-badge.png) in your desired location as a PNG file.

Part Two: Applying HTML and CSS

In this section, we add the actual HTML and CSS that will make the image work and move when the user’s mouse hovers over it.

1. Open up your text editor, for this tutorial I will be using Chocolat — my favorite text editor despite the fact it’s still in beta — and create a HTML and CSS file in the same directory (the same directory that contains your image).

2. In your HTML file, create the basic structure of a HTML document (the HTML5 structure is below):

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>CSS and HTML Hover Image</title>
</head>
<body>
<a class="hover-class" href="http://go.affogato.co/"> </a>
</body>

Screen Shot 2012-04-21 at 17.03.45

3. In this file, I’ve created an a tag in the body that will display the image as a link as well as perform just as if it were a div — it’s up to you as to whether or not you would like it to be a link or not and I’ve also linked the CSS file (main.css) within the head tag.

4. Now, if we switch from the HTML document to a CSS file, what we’re going to do is create the class and add the style to it. So, in your CSS file, add a new class as you can see, it is defined as .hover-class, and add the following code:

.hover-class {
height: 69px;
width: 200px;
display: block;
border: none;
background: url("app-store-badge.png") no-repeat;
}

5. Within the class, specify the height of the image and width of the first, original image because this is all we want to see at this moment – specify your image and ensure that there’s no border (to prevent Internet Explorer applying a border around the image) and that the display is set to block (this means there’s a small amount of white space above and below as well as preventing other HTML elements sitting next to it).

6. So, if you open up your HTML document, you’ll find that your original image is displayed however nothing happens when you hover over it — what’s up with that?

Screen Shot 2012-04-21 at 17.51.10

7. We need one final piece of CSS code to give the class something to do when a mouse is detected over it. We need to move the location of the background image to the right so the whole image shifts over and hence, displays the rest of your image. In your CSS file, add the following lines to make the background image shift revealing the hover image when it’s activated:

.hover-class:hover {
background-position: right;
}

8. Providing you’ve done everything correctly and aligned both images correctly, then when your mouse hovers over the image in your browser, it should change and move the position of the background image revealing what you wanted it to.

Recall when we placed both images within the Photoshop document and aligned them symmetrically? This is where many people go wrong — if both images are not symmetrical, they will appear to actually move to the left or right when you hover over them, which doesn’t look professional and is something you should look out for.

Essentially, the purpose of this is to make a website more efficient and user-friendly as the images are loaded beforehand with fewer HTTP requests, causing the effect to work more smoothly and the page to load faster.

WebKit1

Click here to download the source files.

June 06 2011

14:12

Design a Textured Button in Photoshop

Today I’ll be showing you how to design a neat little textured button in Photoshop. This is a basic level tutorial that will help you learn more about layer styles, texture and pattern overlays, and gradients. If you find this walkthrough useful and would like to see more like this please leave me a comment. Enjoy! 

Resources Used:

 

Preview of what we’re making:

Design a Slick Purchase Button in Photoshop

Step 1

Create a new 500px by 500px Photoshop document with a background will color of #fefeea

Design a Slick Purchase Button in Photoshop

Step 2

Using the Rounded Rectangle Tool with a radius of 10px, create the base of the button. The color I’ve used is #c9e886.

Design a Slick Purchase Button in Photoshop

Step 3

Double click on the layer in the layers window to bring up the Layer Style pane. First check the Drop Shadow button, set the angle to 90 degrees, the color to #c3c49b, the distance to 2px and the size to 4px.

Design a Slick Purchase Button in Photoshop

Step 4

Then we’ll add an inner shadow. Set the color to white, blend mode to normal and distance to 1px.

Design a Slick Purchase Button in Photoshop

Step 5

Next we’ll add a subtle gradient to help give the button a hint of depth. I used a grey to white gradient with an opacity of 25%, and set the blend mode to soft light.

Design a Slick Purchase Button in Photoshop

Step 6

Now it’s time do add a little bit of texture to the button. Download this set of pixel patterns from Premium Pixels and import them into PS. Once that’s done, go back to the Layer Style pane and select one of the diagonal patterns, set the blend mode to overlay and the opacity to 13%

Design a Slick Purchase Button in Photoshop

Step 7

Lastly in the Layer Style window add a 1px stroke with a color of #a9bf79.

Design a Slick Purchase Button in Photoshop

Step 8

To finish of the base of the button we’ll add a little bit more texture to it. Open one of these seamless paper textures from Lost & Taken in PS and resize it to 500px. Paste it into your document, create a layer mask for the button and delete the rest of the texture so you’re left with this:

Design a Slick Purchase Button in Photoshop

Step 9

Desaturate the texture and in the layer window set the layer to Multiply with an opacity of 57%. You may have to adjust the Levels of the texture depending on which one you use.

Design a Slick Purchase Button in Photoshop

Step 10

Next add your text for the button, here I’ve used the font Chalet with a color of #7d7915.

Design a Slick Purchase Button in Photoshop

Step 11

Open the Layer Style pane and add a white drop shadow with a distance of 1px and an opacity of 85%. This helps give the text just a hint of depth.

Design a Slick Purchase Button in Photoshop

Step 12

Next we’ll make the holes for the hooks. Using the Elipse tool draw a small circle the same color as the background.

Design a Slick Purchase Button in Photoshop

Step 13

Add a drop shadow with the color of #d5f590, set the opacity to 53% and the distance to 2px.

Design a Slick Purchase Button in Photoshop

Step 14

Add a black inner shadow with a distance of 1px and a size of 1px. Set the opacity to 47%.

Design a Slick Purchase Button in Photoshop

Step 15

Add a 1px, white stroke with an opacity of 27%.

Design a Slick Purchase Button in Photoshop

Step 16

That wraps up the first hole, duplicate the layer and position it on the opposite side of the button. Right now you have a perfectly good button in it’s own right, but I wanted to take it just a little further.

Design a Slick Purchase Button in Photoshop

Step 17

Using the Rectangle Tool create a stripe above the button.

Design a Slick Purchase Button in Photoshop

Step 18

Download this premium set of seamless wood textures (there are also free ones out there if you look), and open the .PAT file into Photoshop. In the Layer Styles overlay the pattern on top of the shape.

Design a Slick Purchase Button in Photoshop

Step 19

Next we’ll add a grey drop shadow with an opacity of 34%, a distance of 2px, and a size of 4px.

Design a Slick Purchase Button in Photoshop

Step 20

Also add a white, 1px inner shadow with an opacity of 41%.

Design a Slick Purchase Button in Photoshop

Step 21

Next we’ll add a gradient to once again help with depth. Create a gradient similar to below in the gradient editor.

Design a Slick Purchase Button in Photoshop

Step 22

Set it to soft light with an opacity of 67%.

Design a Slick Purchase Button in Photoshop

Step 23

Lastly we’ll add a 1px, #926334 stroke with an opacity of 68% and that wraps up our wood bar.

Design a Slick Purchase Button in Photoshop

Step 24

Now it’s time to create the hooks that the button hangs on. Using the Elipse tool create a small circle colored #979797 on top of the wood bar.

Design a Slick Purchase Button in Photoshop

Step 25

Add a grey drop shadow with a distance of 1px, size of 1px, and opacity of 73%.

Design a Slick Purchase Button in Photoshop

Step 26

Next add a white inner shadow with an opacity of 26%. (on step 26 nonetheless).

Design a Slick Purchase Button in Photoshop

Step 27

And lastly add a grey to white gradient overlay. Set the blend mode to soft light and the opacity to 35%.

Design a Slick Purchase Button in Photoshop

Step 28

Duplicate the shape and position it on the other side.

Design a Slick Purchase Button in Photoshop

Step 29

For the next part of the hook, use the rounded rectangle tool with a diameter of 5px to create a long pill form shape.

Design a Slick Purchase Button in Photoshop

Step 30

Next, under the layer styles pane, open the gradient editor and create a gradient similar to below.

Design a Slick Purchase Button in Photoshop

Step 31

Set the style to radial, check the reverse box, and set the scale to 150%.

Design a Slick Purchase Button in Photoshop

Step 32

Next we’ll add a black drop shadow with a distance and size of 2px and an opacity of 32% (on step 32 for what it’s worth, I swear I don’t plan this stuff).

Design a Slick Purchase Button in Photoshop

Step 33

Lastly add a white inner shadow with a distance of 1px and size of 3px.

Design a Slick Purchase Button in Photoshop

Step 34

Duplicate the shape and position it above the other hole in the button.

Design a Slick Purchase Button in Photoshop

Step 35

The last detail we’ll add is a tiny pin that helps complete the hook assembly. Using the elipse tool draw a small circle with a color of #c3c3c3 in the center of the larger grey circle.

Design a Slick Purchase Button in Photoshop

Step 36

Next add a #99b467, 1px stroke.

Design a Slick Purchase Button in Photoshop

Step 37

Add a grey to white gradient set to soft light with an opacity of 25%.

Design a Slick Purchase Button in Photoshop

Step 38

Then add a white inner shadow with a distance of 1px.

Design a Slick Purchase Button in Photoshop

Step 39

Lastly add a drop shadow with a color of #b5b889, set the distance to 2px and the size to 4px. Then duplicate the shape and position it on the opposite side.

Design a Slick Purchase Button in Photoshop

Complete!

And that wraps up this tutorial, I hope you guys were able to learn little something new. Thanks for reading!

Design a Slick Purchase Button in Photoshop

April 18 2011

07:00

March 28 2011

07:00

September 21 2010

22:03

BonBon: Sweet CSS3 Buttons

BonBon is somekind of CSS tool or minified framework to create CSS3 buttons with minimalistic markup. You can use the HTML5 custom data attribute that allows you to use any of the Unicode symbols. Add text-shadows, box-shadows, gradients and borders to morph the button. There's a drop shadow effect when you press down the button. [...]

View and Vote


July 06 2010

21:00

Complete Toolbox: 55 CSS Menu And Button Coding Tutorials

Preview-css-menu-button-tutorialsNavigation menus and buttons with CSS styling are being used in almost every website. There are a lot of techniques to utilize and a good developer should have some basic knowledge about them all.

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

Bulletproof-sliding-doors-css-menu-button-tutorials

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

Sliding-door-using-only-one-image-css-menu-button-tutorials

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

Drop-down--css-menu-button-tutorials

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

Pure-with-infinite-sub-menus-tutorial-css-menu-button-tutorials

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

Pure-vertical-css-menu-button-tutorials

6. Horizontal Menus That Grow on You

In this quick tutorial, author is  going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

Horizontal-that-grow-on-you-css-menu-button-tutorials

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position  property.

Advanced-css-menu-button-tutorials

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

Horizontal-subnav-with-jquery-css-menu-button-tutorials

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

Advanced-trick-css-menu-button-tutorials

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

How-to-using-sprites-css-menu-button-tutorials

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

Graphics-with-rollovers-css-menu-button-tutorials

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface  and some great looking icons. Here author will show you how to implement it to your web page.

Dock-css-menu-button-tutorials

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

Vertical-with-behavior-file-css-menu-button-tutorials

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

Vertical-navigation-with-teaser-css-menu-button-tutorials

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

Sprite-navigation-css-menu-button-tutorials

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

3-drop-down-css-menu-button-tutorials

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover  and position properties.

Create-advanced-using-the-hover-position-properties-css-menu-button-tutorials

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

Create-vimeo-like-top-navigation-css-menu-button-tutorials

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

Sexy-drop-down-css-menu-button-tutorials

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

How-to-create-dropdown-css-menu-button-tutorials

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

Overlapping-tabs-css-menu-button-tutorials

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

Rounded-corner-navigation-bar-with-jquery-css-menu-button-tutorials

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

Simple-vertical-css-menu-button-tutorials

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

Navigation-rollovers-with-drop-downs-css-menu-button-tutorials

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

Navigation-bar-with-tabs-using-sliding-doors-effect-css-menu-button-tutorials

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

Simple-vertical-digg-like-css-menu-button-tutorials

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

Jquery-style-with-3-css-menu-button-tutorials

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

Apple-navigation-bar-using-only-css-menu-button-tutorials

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

Create-slick-using-3-css-menu-button-tutorials

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Create-windows-7-start-menu-using-3-only-css-menu-button-tutorials

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

Gradient-with-3-css-menu-button-tutorials

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

Liquid-color-adjustable-css-menu-button-tutorials

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

3-gradients-no-image-aqua-mac-css-menu-button-tutorials

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

Sexy-hover-css-menu-button-tutorials

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

Creating-with-3-css-menu-button-tutorials

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

Roll-your-own-google-css-menu-button-tutorials

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

How-to-make-sexy-with-css-menu-button-tutorials

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

Better-nav-interactions-css-menu-button-tutorials

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

Roll-over-css-menu-button-tutorials

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

How-to-build-simple-with-image-sprites-css-menu-button-tutorials

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

Fast-rollovers-without-preload-css-menu-button-tutorials

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

Pretty-css-menu-button-tutorials

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

How-to-design-sexy-using-css-menu-button-tutorials

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

Radioactive-css-menu-button-tutorials

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

Beautiful-icon-set-css-menu-button-tutorials

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

Building-beautiful-with-gradients-css-menu-button-tutorials

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

Gradient-css-menu-button-tutorials

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

Build-kick-ass-practical-css-menu-button-tutorials

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

Only-drop-down-css-menu-button-tutorials

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

How-to-make-nice-css-menu-button-tutorials

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

Cross-browser-rounded-jquery-css-menu-button-tutorials

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

Making-rollover-css-menu-button-tutorials

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

Recreating-cnn-beveled-navigation-with-pure-css-menu-button-tutorials

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

Creating-glassy-non-div-navigation-bar-css-menu-button-tutorials

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

Sprites-css-menu-button-tutorials

May 12 2010

16:59

Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.


Video Tutorial


Final Code

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>
	<style>

	/* CUSTOM FONT */
	@font-face {
		font-family: 'EfonRegular';
		src: url('font/EFON-webfont.eot');
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg');
		font-weight: normal;
		font-style: normal;
	}	

	body {
	 width: 400px;
	 margin: 200px auto;
	 background: #666;
	}

	.button {
	 width: 400px;
	 height: 100px;
	 line-height: 100px;
	 color: white;
	 text-decoration: none;
	 font-size: 50px;
	 font-family: helvetica, arial;
	 font-weight: bold;
	 display: block;
	 text-align: center;
	 position: relative;

	 /* BACKGROUND GRADIENTS */
	 background: #014464;
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); 

	 /* BORDER RADIUS */
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 border-radius: 10px;

	 border: 1px solid #368DBE;
	 border-top: 1px solid #c3d6df;

	 /* TEXT SHADOW */

	 text-shadow: 1px 1px 1px black;

	 /* BOX SHADOW */
	 -moz-box-shadow: 0 1px 3px black;
	 -webkit-box-shadow: 0 1px 3px black;
	 box-shadow: 0 1px 3px black;
	}

	/* WHILE HOVERED */
	.button:hover {
		background: #014464;
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
	}

	/* WHILE BEING CLICKED */
	.button:active {
		-moz-box-shadow: 0 2px 6px black;
		-webkit-box-shadow: 0 2px 6px black;
	}
	/* FONT GLYPH (MOSTLY FOR FUN) */
	.button:before {
		font-family: EfonRegular;
		content: 'v';
		color: #09232F;
		font-size: 90px;
		float: left;
		margin-left: 35px;
		margin-right: -10px;
		text-shadow: 0 1px 0 #4190AF;
	}

	</style>
</head>
<body>
     <a href="#" class="button"> Follow Me </a>
</body>
</html>

Conclusion

Button

The truth is that it would probably be smarter to use a tiny image for the Twitter-bird icon. But, the goal was to achieve this effect with all CSS! What do you think?


January 12 2010

17:40

Wordpress Plugins : 17 Handy Toolbars For Your Blog

Title-wordpress-blog-toolbar-pluginsToolbars used in Wordpress installations as plugins become more and more popular and effective. I am sure you noticed such toolbars on sites like Mashable.com, Abduzeedo.com etc and wondered how you can get one, why to use it and actually how good is sortiment. Maybe there are better toolbars available just for your needs?

I wondered and decided to create article about it – finding the most popular, interesting and eye-catching Wordpress toolbar plugins you could use daily to increase pageviews, comments, sharing, twitter followers, subscriptions and more. Some of these plugins even offer online chat with your readers, how cool is that? Enjoy, research and find your pick! Let us know your favorite toolbar plugin as well!

1.Extendy Toolbar

This plugin installs the Extendy toolbar to your blog without having to make edits to any of your template files. Note that you must have an Extendy account, available for free at http://extendy.com . Extendy lets visitors share their favorite pages, search your content, view your latest tweets and blog posts, connect with you across social networks, and more.

Extendy-wordpress-blog-toolbar-plugins

2. Meebo Bar

With the Meebo Bar, you get several great features straight out of the box, check for more on their webpage:
  • Real-time sharing. Your users can easily share your website with their friends through IM, Facebook, Twitter, Yahoo, and email. The Meebo Bar engages your existing users and brings in new users.
  • Custom buttons for your bar. Choose from a host of buttons to add to your bar.
  • Personal stats dashboard. See statistics about pageviews, sharing from your site, and which of your Meebo Bar buttons are being clicked, all from your own secure site. You can even give other users their own personal login to access the dashboard.
  • Instant messaging from your site. Meebo knows web-based IM better than anyone, and your site visitors will be able to chat and share with their IM friends from AIM, Yahoo!, MSN, Facebook, and a ton of other networks.

Meebo-wordpress-blog-toolbar-plugins

3.Gigya Toolbar

The Gigya Toolbar increases your blog’s traffic and provides an oppurtunity to make extra revenues.  Here are features Gigya offers:

  • Get return traffic when users share and tweet from the toolbar.
  • Supports 80 social destinations and includes a Facebook fan page and Twitter updates buttons.
  • The toolbar does not affect page load time. It loads only after the page is fully loaded.

Gigya-wordpress-blog-toolbar-plugins

4. Wordpress Toolbar Plugin

Static Toolbar displays a static toolbar in the bottom of the page, which may contain last posts, rss feed, search engine, social network and sharing links.

Static-wordpress-blog-toolbar-plugins

5.Wordpress Toolbar

This Wordpress toolbar will automatically enable a toolbar for all outgoing links from your blog, it is similar as Digg or Stumbleupon. It helps to keep visitors coming back and write some comment or social bookmarking. Great tool.

Visitors-keeper-wordpress-blog-toolbar-plugins

6. mit3xxx.de Toolbar

Adds the mit3xxx.de toolbar to your website.

The mit3xxx toolbar allows you to add the following features to your site: navigate to the start pageintegrate a button to your rss-feed,let your users tweet your content, share your content to social network sites such as Delicious, Digg, Facebookanr more. It also provides more then 20 themes.

Mit3xxx-wordpress-blog-toolbar-plugins

7. Wordpress Theme Demo Bar

Wordpress Theme Demo Bar is a plugin for wordpress (compatible up to WP 2.8.3) allowing to preview any wordpress theme without activating. Demo bar is customisable in admin panel, with several CSS style files as well. Very handy for theme developers or Wordpres theme related articles.

Theme-demo-bar-wordpress-blog-toolbar-plugins

8. The Wordpress Bar

Editor’s description:

“Seen the DiggBar on Digg.com? Add a similar feature to your Wordpress blog. Use your blog as a short link service with Easy Link Creation. Feature any link on the internet with a custom URL such as http://www.internetriot.com/?bing. Also feature social network links such as Facebook, Twitter, and Digg.”

Wp-bar-wordpress-blog-toolbar-plugins

9. WP External Links Bar

Maintain your external links (in posts and comments) in your site. Create a Link Bar like facebook, digg and google with share link as well.

External-links-wordpress-blog-toolbar-plugins

10. WordPress Admin Bar

This plugin replicates all of the menu links in your normal admin area at the top of your main site for logged in users (i.e. you). You can go right to the “Write Post” or manage options pages in one click from anywhere on your blog. No more having to go to your dashboard first. You can even have it replace your admin area menus if you want.

Admin-bar-wordpress-blog-toolbar-plugins

11. WordPress Admin Bar Improved

Similar plugin to Wordpress admin bar but with several improvements – now even if you are not logged in you can – you will have top toolbar visible to login.

>Admin-bar-improved-wordpress-blog-toolbar-plugins

12.Drag-To-Share eXtended

This plugin mimic the Mashable functionality where news stories and interesting articles can be shared to social networking sites. The functionality is driven by the images accompanying the articles, you click and hold on an image and can then drag it into a toolbar to share it. It’s brilliant and intuitive!

Drag-to-share-extended-wordpress-blog-toolbar-plugins

13. Snipi for Wordpress

Using the Snipi Toolbar, you can drag and drop images from anywhere on the Internet and have them appear automatically in your WordPress Media Library or NextGen Gallery. Interesting toolbar indeed. Check Youtube video for more.

Snipi-wordpress-blog-toolbar-plugins

14. Fixed Social Buttons

This plugin will add fixed social buttons on right side : twitter, facebook, myspace, reddit, delicious, technorati and rss feed buttons. Open social bookmarks links in a new or in the same window with “rel=’nofollow’” attribute or not.

Fixed-social-buttons-wordpress-blog-toolbar-plugins

15. WP Super Bar

A very simple bar for outgoing links in your posts.

Wp-super-bar-wordpress-blog-toolbar-plugins

16. Fixed Search Button

Looks promising plugin, with handy buttons. This plugin will add fixed buttons on right side :

  • Home button
  • Login button
  • Contact button
  • Search button
  • Go to top button

Fixed-search-bar-wordpress-blog-toolbar-plugins

17. Frame Breaker, aka Die Digg-bar die!

Something different – did you want sometimes to people visit really your page not digg-bars, different frames like you will see in this post also. Activate this plugin to get rid of such frames.

I could find fixed Twitter and Subscribe buttons, I see often on left or right sides of windows. If you know one, please share with me as well, so I would be able to create even more comprehensive list. If you know more such fixed toolbars, bars, buttons please do share!

Related posts:

  1. 20 New, Useful And Promising Wordpress Plugins
  2. 31 Useful Twitter Plugins For Wordpress To Choose From
  3. 33 Wordpress Plugins To Power Up Your Comment Section
  4. 130 WordPress Plugins You Could Ever Need: The Best Of : Part 1
  5. 30 Wordpress Plugins To Help You Improve Your Sidebar

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl