jQuery Plugin Development: Hover to Reveal Masked Password

Posted in Coding, HTML & CSS, JS & AJAX • Posted on 17 Comments

We talked about how to improve your HTML forms performance a couple of days ago. There we covered a pretty controversial topic “Don’t mask your passwords”, discussing how bad masking your passwords could be for usability.

At this moment, we basically have two options: mask password field and don’t ask for any feedback, or show password field as text and potentially decrease security.

This is why I think a hover revealing password could be a really good alternative: You can increase your security, and if you are unsure about what you’ve typed just go and hover over it.

So, what we will be doing today is a jQuery plugin to do that, and additionally, we will have a behavior pretty similar to what many mobiles does, where we can see the last character for a couple of seconds. This is a good chance to learn more about plugins, dynamically generated content, and some good coding practices.

Moreover with this technique we could apply different effects and a lot of variations since all this things are based on non-obtrusive and almost only decorative javascript.

So, let’s rock!

jQuery Plugin Development: Hover to Reveal Masked Password Read More

17 CSS/HTML Effects with Cross-Browsing Alternatives

Posted in Coding, HTML & CSS • Posted on 51 Comments

Well, we surely have a lot of different ways to achieve similar effects and with CSS the hardest part is to make it look good in almost every browser.

You don’t need to reinvent the wheel every time, if you get one good snippet that does what you want (and you understand what is happening) you don’t need to reinvent it every time you need a simple round corner, right?

Thus, our point here is to collect some cool CSS effects that you should be using:

• Min / Max width (IE included)
• RGBA (IE included)
• Opacity (IE included)
• Image rotation / scaling (IE included)
• FullScreen Background (IE included)
• Background pattern or bullet without image file
• Text Shadow (IE included)
• Multiple borders (IE included)
• Box Shadows (IE included)
• Rounded corners
• Screen reader only accessible content
• Don’t use negative text-indent
• Clearfix (IE included)
• @font-face (IE included)
• Pull quotes without image
• CSS for iPhone4 (higher resolution)
• CSS landscape / portrait orientation for mobiles

So, Let’s rock!

17 CSS/HTML Effects with Cross-Browsing Alternatives Read More

CSS Tricks for Smart Quotes and Tooltips

Posted in Coding, HTML & CSS • Posted on 9 Comments

The CSS content property is a powerful way to add content to some elements via CSS. It is good because it allows you to add “formatting content”, that is things that you need in your presentation but isn’t the content itself, like quotes, icons (when you have text along with them), titles (not the text title, the HTML attribute).

But you may thinking now “Well, isn’t content always HTML’s job?” Well, most of the time it is.

Think about it a little bit: when you have a fancy quote, image caption, or even a custom icon for certain links (like “.pdf”), aren’t all these things just “decoration”? They are just there to clarify the message of your content, they are meaningless by themselves.

So we will learn simple and cleaner techniques to get some cool results via CSS! Although our title only mentioned smart quotes, we will do show you some other quick examples to get the most of this cool CSS trick.

So, let’s rock.

CSS Tricks for Smart Quotes and Tooltips Read More

CSS Counters – The Right Way to Organize Your Ordered Content

Posted in Coding, HTML & CSS • Posted on 17 Comments

It is pretty common to see step-based content. Tutorials, shopping carts, FAQ’s, grandma’s recipes. You know, numbers and steps are really good to grab attention, so many writers use this.

But, talking about HTML how should we write it? Most (all?) use numbers as text in headings, as they were common content.

Well, let me tell you a secret: They are doing it wrong.

Actually we are doing it wrong ( nothing against this fantastic post of Ruben, just take a look at how we do the numbers, directly in HTML as text ).

A little time ago I was wondering about this thing, isn’t it more a CSS job? Actually yeah, it is. We have to keep content in HTML and presentation in CSS, and since we may want other ways to order titles, they are all about presentation. But, how can we do this kind of thing? One class for each item? That would be terrible!

Then CSS counter property comes to save us. It is a pretty unknown property that allows us to perform a simple count via CSS. It will be better explained with our demos :D

So, let’s rock!

CSS Counters – The Right Way to Organize Your Ordered Content Read More

An Introduction to Object Oriented CSS

Posted in Coding, HTML & CSS • Posted on 13 Comments

With richer interactions and media heavy pages mushrooming on the web, creating web pages, which load faster and respond well has become a challenge. Separating the content, presentation and behavior of a page using HTML, CSS and JS, is not the only thing that front-end engineers have to concentrate on nowadays. The limelight is now on the performance of the pages, cleanliness and leanness of the code within, scalability and reusability of CSS, and the semantic correctness of the markup.

There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

An Introduction to Object Oriented CSS Read More

How to Customize Twitter Search and Profile Widgets

Posted in Coding, HTML & CSS • Posted on 32 Comments

So you want to say something and get heard from anywhere. The best way to do this is with Twitter and its widgets. We will be talking about a profile widget, that shows your latest tweets, and a search widget, that runs a custom query search and shows all the results.

They have a pretty simple customization when you generate them, but what many people haven’t noticed is that you can make advanced customization to them with CSS. This is possible because the Twitter team has made it without using any inline CSS rules, and they are such nice people that almost all their CSS is quite simple to overwrite (just with the class of the item itself in most cases).

Then, what you have to do is to turn on your CSS Zen Garden side and let your imagination create awesome widgets in a really simple way.

So, let’s rock!

How to Customize Twitter Search and Profile Widgets Read More

Convert 1st Ideas from PSD to HTML [Very Detailed]

Posted in Coding, HTML & CSS, Tutorials • Posted on 20 Comments

In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Convert 1st Ideas from PSD to HTML [Very Detailed] Read More

WordPress Wp_Nav_Menu with Icons and Active Item Highlight

Posted in HTML & CSS, PHP, WordPress • Posted on 15 Comments

WordPress is a great tool, for sure, but as many other CMS’ it drives us into an “all standard” way of thinking, that is, you design things thinking that every element has to be identical to his brothers, same color, same style, same size.

How many WordPress sites with pretty menu icons do you know (with wp_nav_menu, not “static” menus)?  How many of them use a different color for some categories? Well, these little things make a big difference.

This time we will learn a simple way to customize our WordPress menu, without losing its wonderful admin options. We will be doing:

•   Home link in our wp_nav_menu that always gets current blog url
•   Customize each menu item as you want
•   Put pretty icons in our menu
•   Active item highlight

From now on, it is useful to have a little understanding about what wp_nav_menu is, and if you have a blank WordPress install, it is time to play with it ;)

So, let’s rock!

WordPress Wp_Nav_Menu with Icons and Active Item Highlight Read More

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates

Posted in HTML & CSS, Web Design • Posted on 40 Comments

I hope you have heard a little about CSS3 and HTML5. And I’m sure you’ve used at least one of the cool features they offer. But now it is time to use them at their full (or almost full) power.

You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

20+ Useful CSS3 and HTML5 Frameworks, Tools and Templates Read More

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials

Posted in Coding, HTML & CSS, Tools, Web Design • Posted on 11 Comments

CSS3 with it’s possibilities is a revolution in web development. The new CSS3 properties give developers a wonderful chance to enhance their designs in a way that’s quick and easy, yet visually impressive. What’s more, almost all of the major browsers now support most of the CSS3 features so that’s another reason for mastering the new techniques. One of the spheres CSS3 has changed dramatically is web typography. Text styling and neat effects can now be achieved without using any Javascript or images at all. This article presents 30 useful and cutting edge CSS3 text effect and web typography tutorials that will take your designs to the next level.

30 Useful and Cutting Edge CSS3 Text Effect and Web Typography Tutorials Read More - unknown - unknown - US