CSS - Cascading Style Sheets

Responsive CSS design – Web Design Tips

For designers, the most difficult and interesting aspect of responsive web design has been the flexible nature of it. We've constantly in the process of trading in our tenacity for pixel perfection and embracing the web for what it really is; fluid. Today we’ll cover some steps to help you transition towards flexible web design, or as I like to call it, 'Getting’ Flexy'. Responsive CSS for a web site will increase a websites visitors by attracting the mobile and tablet visitors also along with the visitors who enjoy their post in desktop the number of people who are using the tablets…
Continue Reading »
CSS - Cascading Style Sheets

Snow-Fall Effect with JavaScript – Creating Merry Christmas Greetings

On the occasion of Christmas and winter Holidays, I thought to wish this festival by create a nice webpage greetings. So, today I had created this Christmas greeting card using snow-fall effect with help of CSS3 and JavaScript. I hope you all will enjoy this holiday and my web-card too :). Today we will create a Christmas greeting card using CSS3 and jQuery. There are many things we can do with CSS3 and javascript. We’ll use  for creating these snow. Features and Principle Note: Snowfall Plugin is Less than 12Kb in size. There are many options for customize and use this plugin as per your requirement. Some features are: No need to add…
Continue Reading »
CSS - Cascading Style Sheets

Rotating Words With CSS Animations – CSS3 Keyframes Animation Example

In today's tutorial we'll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We'll be "exchanging" certain words of that sentence using CSS animations. Please note: the result of this tutorial will only work as intended in browsers that support CSS animations. So let's start! In the following, we'll be going through demo. THE HTML We'll have a main wrapper with a h2 heading that contains first-level spans and two divisions for the rotating words: <section class="rw-wrapper"> <h2 class="rw-sentence"> <span>Real poetry is like</span> <br /> <span>creating beautiful butterflies</span> <br…
Continue Reading »
CSS - Cascading Style Sheets

Top 10 Reasons to Start Using HTML5 Right Now…

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you…
Continue Reading »
CSS - Cascading Style Sheets

Cool Animated Fire Effects with CSS3 and jQuery

This effect has been created with some jQuery for setting different CSS3 text-shadow's in a div. You can check the demo code to see how it's done. Basically, the Javascript function creates 3 text-shadows (white, yellow and red) with coprime "cycle durations" so the effect looks more random even though it's totally deterministic. Each shadow moves in the Y axis with a linear function and in the X axis with a cosine function. Pretty simple, but effective. The CSS #onfire{ height:auto; padding-top:3em; font-size: 42px; font-weight: bold; text-align: center; color:brown; } The jQuery <script type="text/javascript"> var step = 1; function nextShadow(){…
Continue Reading »
CSS - Cascading Style Sheets

Clearing floats methods nowadays

At my beginnings as a web designer using Div tags, when I first discovered clear floats I was so happy and it was for sure an “a-ha” moment. Since then, so many things have changed and new clearing methods have appeared. One thing remained the same: the need to clear floats. In this article, we’ll see some effective solutions for clearing floated elements. But first, what is float? Arranging website page elements was always a struggle for you as a web designer. To achieve your desired website layout, a lot of calculation of box dimensions are needed, and various implementation decisions must…
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

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 »
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