CSS - Cascading Style Sheets

DG_Slider – An Ultimate jQuery Content Slider Plugin

DG_Slider is a jQuery  plugin that carries you on a content slider or carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is light weight, at about 14 KB in size, yet very flexible and customizable to fit most of our needs. DG_Slider is a great plug-in. It offers a host of features and it is so customizable that you are limited only by your imagination. Features Horizontal, vertical, and fade transitions Display and move multiple slides at once (carousel) Prev / next, pager, auto controls Start / Stop control Easing transitions…
Continue Reading »
CSS - Cascading Style Sheets

How to create a simple CSS3 loading animation

While playing DIRT 3, I've noticed a very cool triangle animation as part of their UI. Almost immediately, I thought about how to build a similar version of it using CSS3. So, in this article you'll see an experiment about how to create a simple CSS3 loading animation. For this example, I'll be using two CSS3 animations: one that fades the color for the triangles and one animation that rotates the whole design. These two animations, synchronized, will help creating a quite nice effect. The HTML Initially, I wanted to use pseudo-elements in order to have less markup elements. Here's how the markup…
Continue Reading »
CSS - Cascading Style Sheets

HTML5 Logo Design Using CSS3

As you probably found out, some time ago, the The World-Wide Web Consortium (W3C) has unveiled the HTML5 Logo. They launched more than a logo as they got also a full branding, including badges, t-shirts and stickers. So, I suppose that's a good thing, that HTML5 got some branding, sounds very interesting! While looking at it and admiring it, as I find it very nice, I thought about how can I do it with CSS3 (typically for me). What about the logo? It's A Bird… It's A Plane… No, it's the new HTML5 logo and in this article I'll design it using only CSS! Concept…
Continue Reading »
CSS - Cascading Style Sheets

HTML5 canvas awesomeness – games roundup

HTML5 is being developed as the next major revision of HTML, the core markup language of the World Wide Web. Besides new elements like header, section, footer, etc., the HTML5 brings you the canvas element. The canvas is a rectangular area within you can use Javascript to draw graphics or other visual images on a web page. Although HTML5 is not a W3C recommendation yet (because of cross browsers issues), people already started to play with it, and when I say play, I mean it. Today I’ll share with you some awesome HTML5 games demos that show the HTML5 canvas potential. Agent 008 Ball Z-Type RGB…
Continue Reading »
CSS - Cascading Style Sheets

An Awesome CSS3 Animated Dropdown Menu

It's a sure thing that CSS3 features like transitions, animations and transforms can add extra spice to your designs. In this article you will see how you can build an awesome CSS3 animated dropdown menu with some of these cool features.  This is something I wished to do for a while and I finally made it. I just added support for smartphones / mobile devices and fixed the navigation for iPad and iPhone also. Here's a quick preview for the CSS3 animated dropdown menu that we're going to create today: The HTML The HTML structure hasn't changed at all, simple…
Continue Reading »
CSS - Cascading Style Sheets

Google Font API and Typekit solutions VS CCS3 @font-face

A quick tutorial here about setting up your website with custom fonts  I am also sharing these alternative solutions, pros and cons. The aim of this post is to briefly round up your options when using custom fonts in web design. CSS3 @font-face The @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5.  However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format until Safari was released. Since then, web designers began to use .ttf or .otf fonts for their websites and…
Continue Reading »
CSS - Cascading Style Sheets

7 tips to organize your CSS

Working often with CSS for my own website or for my job makes me trying always to be organized and that made me thinking about a thing. What is the best way to organize my CSS file(s)? With this article I will try to present you a short guide about CSS organizing. 1. Group your CSS files into a folder Beside your main CSS file you may want to use also a print CSS file or why not a CSS file for the IE6/7 browser. Placing them together in a folder named css for example will help you improve your website back-end…
Continue Reading »
CSS - Cascading Style Sheets

10 CSS shorthand tips and how to optimize CSS

If you want to write efficient and optimized CSS code then you’ll surely need to have in mind the following shorthand tips. These tips and tricks apparently don’t seem to be so important at the first sight. But once you write thousands of CSS lines you will wish to optimize every single line. Why’s that? Because loading speed does matter (Google introduced this to their ranking algorithms) and your web pages will load faster because your stylesheet file size will be smaller. Below I will present you a short, yet comprehensive CSS shorthand guide to help you get started optimizing your CSS…
Continue Reading »
CSS - Cascading Style Sheets

Things you should know about CSS anatomy

I often notice people tend to use stylesheets without knowing its structure meaning. That’s why, in this tutorial I will try to present you the CSS components structure. The selector is the element that is linked to a particular the following example the selector is “p”, so “p” is the element who’s margin properties will be “0″. p{   margin: 0; } Class Selectors The advantage of a class selector is that it can be applied to more than one elements according to W3C recommendation. .colored{   color: red; } Having this, all paragraphs who’ll have “colored” class as attribute will…
Continue Reading »
HTML

Reference: Useful HTML tags and their attributes

This tutorial is intented to introduce the HTML code basics to users that have never written a web site manually. Writing HTML code is pretty much writing tags, attributes and content. That's why we'll focus on how a tag and it's attributes and contents are defined. Please Note that  In older versions of HTML, some tags did not require ending tags. With the emergence of XML and XHTML, you should be sure to include both beginning and ending tags. Elements and tags HTML is composed by a set of elements that are the basis of its structure. Elements are designed to…
Continue Reading »
12