CSS - Cascading Style Sheets

CSS3 tabs with beveled corners

Organizing content was always an important task for web designers. Just like accordions, using a CSS3 tabbed navigation can help you structuring similar groups of content. Along with so many rounded corners (which lately became the default), today you’ll learn how to create some good looking CSS3 tabs with beveled corners. We’ll do that using a clever CSS3 gradients technique. There are a lot of articles in the wild that show you how to create tabs with CSS3 and jQuery. Yet, I decided to create my own CSS3 tabs as well and I hope you’ll like my result. The idea A while ago…
Continue Reading »
CSS - Cascading Style Sheets

How to solve common IE bugs

Lately, I wrote more about HTML5, jQuery, CSS3 features and its awesomeness. Today’s article is about Internet Explorer common CSS bugs and how to solve them. You may ask me “why this article?” and you have all the reasons to do that. If you read some of my previous articles, then you know I’m a CSS3, jQuery addicted. But sometimes, when working on some projects that require cross-browser compatibility, you need to know how to action when you encounter IE bugs. Modern browsers are constantly evolving and their bugs or strange behaviors are always fixed due new version releases. But what about old…
Continue Reading »
CSS - Cascading Style Sheets

10 Web Usability tips for your website

At the beginning, perhaps you were developing websites just for fun or you were just learning some new tricks, but now, when you are developing a website or a web application you can’t afford to skip the usability basics rules. In this article we’ll try to remember some basic, unwritten web usability rules. 1. Place the logo always in the left corner of the viewport As drivers use to search for green traffic light to start leaving the intersection, users search the logo in the left side of the website to click on it. They are used to click on…
Continue Reading »
CSS - Cascading Style Sheets

Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code. Knowing that, check out the below preview to see the login form we’re going to create in this article: Markup <form id="login">     <h1>Log In</h1>     <fieldset id="inputs">         <input id="username" type="text" placeholder="Username" autofocus required>         <input id="password" type="password" placeholder="Password" required>     </fieldset>     <fieldset id="actions">    …
Continue Reading »
CSS - Cascading Style Sheets

Simple and effective dropdown login box with HTML5, CSS3 and jQuery

Web users log in every day, so imagine how many times log in forms are being used in a single day. Usually, it don't take too much to fill a form like this, but using a dropdown solution will speed up things for you. In this article, you will see how to create a good looking dropdown login form using HTML5, CSS3 and a bit of jQuery. The concept The main purpose is to avoid waiting to load a separate page in order to log in. This way you can increase user experience, as the user has the possibility to log…
Continue Reading »
CSS - Cascading Style Sheets

How to create slick effects with CSS3 box-shadow

Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop's Blending options. But now, since CSS3 "hit the charts", you don't need Adobe's design tool to add a drop shadow or an inner shadow to a box. Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore. box-shadow property The box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset. <shadow> = inset? && Rocket science? Not at all, here's an quick example:…
Continue Reading »
CSS - Cascading Style Sheets

Create Icons in CSS Without Image

This is not the kinda stuff you should do in production, but there is a little #CSS trick that might help you. The problem with us developers is that it's much quicker and easier for us to write couple of lines of code than find an appropriate image and place it on a page. If that's about you, then here is a little css hack for you that will make your life easier. Say you make all sorts of action links on your page, thins like edit, delete, add new and so on. Normally you would just add related css…
Continue Reading »
HTML

HTML vs. xHTML vs. DHTML : Professional View

HTML:  HTML (HyperText Markup Language): HTML is the most widely accepted language used to build websites. It is the main structure of a website. It builds tables, creates divisions, gives a heading message (In the title bar of programs), and actually outputs text. XHTML (eXtensible HyperText Markup Language): : XHTML is extremely similar but follows the rules of XML. The main differences between HTML and XHTML are the case-sensitivity, the need to use closing tags for all tags, the need to use quotes around all attribute values and that all attributes must be in lowercase as XML requires. Special characters between tags…
Continue Reading »
CSS - Cascading Style Sheets

Practical CSS3 tables with rounded corners

There has been some discussion in the past about how/when to use tables in web development. Though, the conclusion is the same: when you're dealing with tabular data, tables are absolutely required. Designing a table is a challenge – and here I'm not talking only about the way it looks. It's (mostly) about how easy is your table to read. If your table isn't easy to scan, usually users get annoyed as they lose focus when trying to find the right column and row. Having said that, today we're going to create beautiful and practical tables styled using CSS3. Also, jQuery will be used to…
Continue Reading »
CSS - Cascading Style Sheets

What Slated for CSS4 Selectors?

The CSS Working Group recently published the first working draft of CSS4 Selectors. “Wait…CSS 4? I thought CSS3 was still incomplete” you might ask. The spec process changed after Instead of one monolithic spec, CSS3 was broken down into smaller bite sized chunks. Each chunk or module graduate to the Recommendation stage independently when they’re ready. As each module doesn’t depend on each other (typically. Some related modules might have dependancies, such as CSS3 Selectors on CSS Namespaces) work can start on the next level of the module–if there is demand for a new version–after the current level reaches REC. Therefor work…
Continue Reading »