CSS - Cascading Style Sheets

HTML5 Full-screen Video Page Background

Nowadays user interface and experience are more important now than ever. If you're building a digital identity, whether it be for a website or application, "look and feel" play an extremely important part. Today, I'm going to show you how to use native HTML5 video, and implement it in the background of your site. All without using a plugin or Flash. We'll take a look at some of the native video controls too, to make sure that a user's experience is fully enhanced. Browser Compatibility: As we mentioned before, this technology is developed in HTML5, so it is supported by…
Continue Reading »
CSS - Cascading Style Sheets

Html IMG vs CSS Background-image

Image - Useful Tips An image can be used in a webpage for two regions, 1) Image =  for content use, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc. 2) Background Image = for design.  logos, button images, links with images, etc. tend to stay the same. They're only changed if designer want to redesign. The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I…
Continue Reading »
CSS - Cascading Style Sheets

Animate Full-Page Multiple Background images with fade-in & fade-out effect – jQuery

"How to change multiple background-image of body with effects?" - I think this is a major problem which all designers face. You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else. Here's a quick example of multiple images fading one after the other. The HTML Html is very simple. Just add a div with multiple images which you want to animate / change in background with fade…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 3D effect, Shine text with css3 keyframe animation, Scrolling Page Background with jQuery – Happy New Year

On the occasion of New Year 2013, I thought to wish this festival by creating a nice webpage greeting. So, today I created this greeting card using 3D  and shining text effect with the help of CSS3, and scrolling background with JavaScript. I hope you all will enjoy this holiday as well as my web-card too  . Introduction Greeting, today we are going to make a scrolling background effect. This script will move the background of any html tag, either vertically or horizontally. I used this script in one of my greeting card too which has a blue sky with clouds and it makes the…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Buttons with Cool Effects – Pure CSS

Nowadays, using subtle patterns is kinda cool so I thought why not using them also on buttons? The idea was to create some nice CSS3 patterned buttons and in this article you'll see what I've been working on lately. I wrote before about CSS3 buttons, so you may want to check also these articles: CSS3 Transitions Effects on Background Gradients Create Icons in CSS Without Image Hover and Click Trigger For CIRCULAR Elements With jQuery CSS3 patterned buttons features Easy-to-use. Contain the transitions on gradients hack. As you may have expected, no images used here. Instead, an base64 string is used to…
Continue Reading »
CSS - Cascading Style Sheets

Cool Typography Effects With CSS3 and jQuery

Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilities. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites. We'll be using  in order to style single letters of the words we'll be having in our big headlines. THE HTML The structure will simply be an h2 element with…
Continue Reading »
CSS - Cascading Style Sheets

Hover and Click Trigger For CIRCULAR Elements With jQuery

Today we want to share one possible solution to the circle hovering problem. We'll create a plugin that will take care of the 'mouseenter', 'mouseleave' and 'click' events to be triggered only on the circular shape of the element and not its bounding box. Applying a :hover pseudo-class to an element is widely known as the classic "hovering" over an element on a web page. A problem that arose with the introduction of the border-radius property is the non-realistic triggering of the hover event when entering the bounding box of the element and not just the actual visible area. This…
Continue Reading »
CSS - Cascading Style Sheets

CSS3 Transitions Effects on Background Gradients

CSS transitions do not have any effect on background gradients. As far as I know, the thing is that something similar would be quite difficult to achieve considering the multitude of possible gradients that can be created using a color palette. Though, there are some simple ways you can simulate smooth transitions on gradients and below you'll see how to do that. Before writing this article, I was thinking this new article will hopefully be more useful to you as It contains one more extra technique that can help you faking transitions on background gradients. So, what is this about…
Continue Reading »
CSS - Cascading Style Sheets

Image Sprites – How to merge multiple images, and how to split them

An Image Sprites is a single image which is merged with multiple images. The reason why Image Sprites are needed instead of inserting multiple images into a page is to SAVE network bandwidth as well as reduce the number of server requests. Since inserting many images into a page will take longer time to load the pages, merging images into a single will help reduce loading time. For these reasons, I would recommend to use "CSS Image Sprites" function instead of inserting multiple images. Unfortunately, most of designers/developers not support this function as default, but through this tutorial, you would be able to merge…
Continue Reading »
CSS - Cascading Style Sheets

Cool notification messages with CSS3 and jQuery

Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity. UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful. Notification messages are an important part of the user experience and you can't afford to omit them. A notification alert message should appear every time the user perform important tasks. In this article, you'll learn how to create some…
Continue Reading »