17 Stunning Pure CSS3 Menu Techniques


17 Stunning Pure CSS3 Menu Techniques


Menu is probably the most important part on many websites. It’s sitting there for merely one single purpose: easy for you to navigate through all the pages. Before CSS3, the background images of each menu item can bring you a heck load of pain, as well as the javascript powered drop-down items and sub-sub menu . Now we are able to create stunning menus only using pure CSS, even including awesome animations. The following pure CSS3 menu techniques and tutorials are for you to experiment and get a hang of it. Let’s get started.

More CSS Techniques from Previous Articles: 

Pure CSS Drop-down Menu

Pure CSS Drop down Menu

 

Stunning Menu in CSS3

Stunning Menu in CSS3

 

Code a Responsive Navigation Menu

Code a Responsive Navigation Menu

Leer más “17 Stunning Pure CSS3 Menu Techniques”

6 novedades para CSS3 que puedes implementar hoy | CSSBlog ES


Via Scoop.ithuman being in – perfección

Cada cierto tiempo van saliendo nuevas propiedades CSS3, todas ellas son muy útiles y sencillas, pero ¿están soportadas por la mayoría de los navegadores?. En esta entrada os mostraré una lista de novedades para CSS3 que sí pueden ser usadas hoy, debido a su gran compatibilidad con los navegadores. Todas ellas las hemos explicado anteriormente en el blog, así que solo recopilaré los enlaces…

Via www.cssblog.es

100 Exceedingly Useful CSS Tips and Tricks

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips. It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks.


by Alexander Dawson
http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks/

 

100 Exceedingly Useful CSS Tips and Tricks

You can never have too much of a good thing–and two good things we rely on in our work are tips and tricks. Nuggets of information, presented clearly and succinctly, help us build solutions and learn best practices. In a previous article, we shared a jam-packed list of 250 quick web design tips. It seems only right to continue the trend by showcasing 100 fresh–and hopefully useful–CSS tips and tricks.

Leer más “100 Exceedingly Useful CSS Tips and Tricks”

The Easiest Way to Create Vertical Text with CSS


The Easiest Way to Create Vertical Text with CSS

http://net.tutsplus.com/tutorials/html-css-techniques/the-easiest-way-to-create-vertical-text-with-css/

Earlier this morning, I needed to create vertical text for a project I’m working on. After trying out a couple ideas, I took to Twitter to find what sorts of thoughts our followers had on the subject. There were plenty of great responses and ideas that we’ll go over today!

*Note – please refer to “Method 6″ below for more details about proper usage.

Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

 

Method 1: <br> Tags

So, one possible (though not recommended) way to achieve vertical text is to add <br> tags after each letter.

  1. <h1>
  2. N <br />E <br />T <br />T <br />U <br />T <br />S
  3. </h1>
<h1>
   N <br />E <br />T <br />T <br />U <br />T <br />S
</h1>
View a Demo

Don’t use this method. It’s lame and sloppy.


Method 2: Static Wrapping

With this method, we wrap each letter in a span, and then set its display to block within our CSS.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>Vertical Text</title>
  6. <style>
  7. h1 span { display: block; }
  8. </style>
  9. </head>
  10. <body>
  11. <h1>
  12. <span> N </span>
  13. <span> E </span>
  14. <span> T </span>
  15. <span> T </span>
  16. <span> U </span>
  17. <span> T </span>
  18. <span> S </span>
  19. </h1>
  20. </body>
  21. </html>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>

<style>
  h1 span { display: block; }
</style>
</head>
<body>

  <h1>
   <span> N </span>
   <span> E </span>
   <span> T </span>
   <span> T </span>
   <span> U </span>
   <span> T </span>
   <span> S </span>
  </h1>

</body>
</html>
View Demo

The problem with this solution — other than the frightening mark-up — is that it’s a manual process. If the text is generated dynamically from a CMS, you’re out of luck. Don’t use this method. Leer más “The Easiest Way to Create Vertical Text with CSS”

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu

Final Product What You’ll Be Creating
Download Source Files
Demo View It Online

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

[Más…]
Step 1: Building the Navigation Bar

Let’s begin with a basic menu, built with an unordered list and some basic CSS styling.
view plaincopy to clipboardprint?

1.

Creating the Menu Container

We’ll now apply some basic CSS styling. For the menu container, we define a fixed width that we center by setting the left and right margins to “auto”.
view plaincopy to clipboardprint?

1. #menu {
2. list-style:none;
3. width:940px;
4. margin:30px auto 0px auto;
5. height:43px;
6. padding:0px 20px 0px 20px;
7. }

#menu {
list-style:none;
width:940px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}

Now, let’s see how we can improve it with some CSS3 features. We need to use different syntaxes for Webkit-based browsers (like Safari) and for Mozilla-based browsers (like Firefox).

For rounded corners, the syntax will be :
view plaincopy to clipboardprint?

1. -moz-border-radius: 10px
2. -webkit-border-radius: 10px;
3. border-radius: 10px;

-moz-border-radius: 10px
-webkit-border-radius: 10px;
border-radius: 10px;

For the background, we’ll use gradients and a fallback color for older browsers. To keep consistency when choosing colors, there is an awesome tool called Facade that helps you find lighter and darker tones of a basic color.
view plaincopy to clipboardprint?

1. background: #014464;
2. background: -moz-linear-gradient(top, #0272a7, #013953);
3. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

background: #014464;
background: -moz-linear-gradient(top, #0272a7, #013953);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

The first line applies a simple background color (for older browsers); the second and third lines create a gradient from the top to the bottom using two colors : #0272a7 and #013953.

We can now add a darker border and polish the design with a “fake” inset border created with the “box-shadow” feature. The syntax is the same for all compatible browsers: the first value is the horizontal offset, the second one is the vertical offset, the third one is the blur radius (a small value makes it sharper; it will be 1 pixel in our example). We set all offsets to 0 so the blur value will create a uniform light border :


Final Product What You’ll Be Creating

Often used on e-commerce or large scale websites, mega menus are becoming more and more popular, as they offer an effective solution to displaying a lot of content while keeping a clean layout. In this tutorial, we’ll learn how to build a cross-browser, awesome CSS-only drop-down mega menu, using nice CSS3 features.

Leer más “How to Build a Kick-Butt CSS3 Mega Drop-Down Menu”

CSS3: Resources, Tutorials and Demos

Dear readers: pleeeeeeeease, don’t be afraid to try something new! It’s one thing to find out about a cool new design technique, like using CSS3, but it’s another thing entirely to actually put what you’ve learned about into practice. If you don’t try new things, you’ll get stuck in a design rut and that’s not good for you or for your clients. In this article, I’ve gathered some of the web’s best CSS3 resources, tutorials and demos so you can find out what CSS3 is, learn how to use it and see what kinds of cool things have been done with it so far (like the iOS icons in the teaser image above done with no images, just pure CSS).

Yes, CSS3 has been supported by select browsers for a while now, but that just makes this article all the better because in it I was able to include both brand new and slightly older CSS3 resources, which makes for a whopper of a post. Yes, the older (2009-ish, so not that old) resources are still worth taking a look at. When I was in Barnes and Noble recently, I had to buy a design book that was from 2008 because they didn’t have any that were newer on the particular subject I wanted. It turned out to be a great resource, despite not being “current”. Some things just don’t change that much in the course of a few years and the links I’ve included here are still very usable.


http://www.freelancereview.net/css3-resources-tutorials-and-demos/

Posted on October 14, 2010 by Chris

Learn CSS3: Resources, Tutorial and Demos

Dear readers: pleeeeeeeease, don’t be afraid to try something new! It’s one thing to find out about a cool new design technique, like using CSS3, but it’s another thing entirely to actually put what you’ve learned about into practice. If you don’t try new things, you’ll get stuck in a design rut and that’s not good for you or for your clients. In this article, I’ve gathered some of the web’s best CSS3 resources, tutorials and demos so you can find out what CSS3 is, learn how to use it and see what kinds of cool things have been done with it so far (like the iOS icons in the teaser image above done with no images, just pure CSS).

Yes, CSS3 has been supported by select browsers for a while now, but that just makes this article all the better because in it I was able to include both brand new and slightly older CSS3 resources, which makes for a whopper of a post. Yes, the older (2009-ish, so not that old) resources are still worth taking a look at. When I was in Barnes and Noble recently, I had to buy a design book that was from 2008 because they didn’t have any that were newer on the particular subject I wanted. It turned out to be a great resource, despite not being “current”. Some things just don’t change that much in the course of a few years and the links I’ve included here are still very usable.

CSS3 Resources

CSS3 Resources

CSS3 Tutorials

CSS3 Tutorials Leer más “CSS3: Resources, Tutorials and Demos”

Spice Up Your Galleries with jQuery clickCarousel Plugin

Property Options:

* direction: The direction the carousel will shift. Valid arguments are the string “left” and “right”. Default value: “left”
* margin: The space between the shifting elements in pixels. Argument should be an integer. Default value: 0
* hideSpeed: How long the retracting element takes to retract in milliseconds. Default value: 500
* shiftSpeed: How long the elements take to shift in milliseconds. Default value: 500
* shifting: The elements that will shift and/or retract in the carousel. Default value: The children of the object that calls .clickCarousel.
* clicker: A jQuery object that represents what element(s) will trigger the retraction effect when clicked. Default value: The shifting elements themselves
* shiftOnly: A boolean variable that deactivates the retract function of the carousel when set to true. Default value: false
* left: A jQuery object that represents what element(s) will cause the carousel to shift left when clicked. Default value: $(“#carouselLeft”);
* right: A jQuery object that represents what element(s) will cause the carousel to shift right when clicked. Default value: $(“#carouselRight”);


Plugin Implementation

jQuery clickCarousel Plugin
Image credit: cubagallery

.clickCarousel (Properties) Leer más “Spice Up Your Galleries with jQuery clickCarousel Plugin”