The Internet has provided us such a huge platform to find out what’s happening all around, allowing designers from all over the world to explore new possibilities. Web design trends are continuously changing and improving. In this year 2011, new web technology is uprising but nobody knows the future of web design, but the only thing which I consider we all have to be familiar of these happenings to meet the new standards of web design and concept behind each trend. Therefore we’ve decided to share latest trends and news updates with you at weekly bases. In this series every web developer and designer will get useful tips, techniques and tutorials on the subjects CSS3 and HTML5, JaveScripts, JQuery, AJAX and much more. So don’t forget to subscribe for news updates.

Create An Image Swipe/Shimmer Effect With CSS Transitions

I recently read an excellent article by Peter Gasston about creating an image shimmer/swipe effect on a website he was working on. I really liked the effect and after tinkering with how it worked I found that it used an image sprite to achieve the effect..

Circle Navigation Effect with CSS3

Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear..

Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate

Starting a web application from scratch can be a boring, time-consuming task. Paul Irish’s HTML5 Boilerplate project is an exceptional starting point for creating a website of any kind. HTML5 Boilerplate provides an incredibly useful set of CSS, JavaScript, image, and HTML files to help you kickstart your HTML5-powered web application..

CSS3 text-shadow in IE10

IE10 in the Windows Developer Preview introduces support for hardware-accelerated CSS3 text-shadow. Text-shadow is one of the top requested features from Web developers. It enables text effects that were previously difficult or impossible to accomplish in a standards-friendly way without resorting to inline images of text.

Introducing CSS shaders: Cinematic effects for the web

Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content..

Integrating HTML5, CSS and PHP to Create a Very Basic Contact Form

HTML5 has been helping webmasters to clean up their code by utilising newly introduced features of the same. It won’t be possible for me to touch base with every HTML5 feature, but I will be listing down some of those during the course of this tutorial.

CSS3 Image Styles

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly..

What Is HTML5?

HTML5 is the next version of HTML. This will introduce some brand new features which will make building HTML even easier. This is by introducing features which to make your website layout clearer to both coders and search engines. .

HTML5 File Uploads with jQuery

Today we will be developing a small web application called Upload Center, that will allow people to upload photos from their computers by dragging and dropping them onto the browser window, possible with the new HTML5 APIs exposed by modern browsers.

You’re Doing it Wrong: Common HTML Tag Misuses

View the source code of a hand full of websites featured in CSS galleries today and you’ll often see the same errors appear time and time again. These mistakes are usually habits we picked up during our early days of coding that have stuck around due to lack of clarification.

CSS Selectors: Should You Optimize Them To Perform Better?

For the last few weeks I’ve been looking at different css selector patterns. One thing I haven’t mention is the efficiency of the selectors, something Chad commented about on the very first post in the series.

How To Use Structural Pseudo Classes and Pseudo Element Selectors

The last couple of weeks we’ve been looking at different types of css selectors. First we looked at the simple and attribute selectors and then we looked at combinators and some pseudo class selectors. This week we’ll finish up with structural pseudo-classes and pseudo elements. I think you’ll find both have some practical applications for styling web pages.

How Do Browsers Render the Different CSS Border Style Values?

You’ve probably used CSS’s border property often, and in almost all cases you’ve probably set the border-style value to “solid”, which looks exactly the same in every browser..

Create Sticky Notes To-Do List In CSS And JQuery

In this tutorial you will learn how you can create your own simple To-Do list using CSS and JQuery…

Advertisements

Incredibly Useful CSS Snippets

A list of CSS snippets that will help you minimize headaches, frustration and save your time while writing css, and I hope you will find it useful. Whether you are a experienced web developer, or just getting started with css, they are all worth checking out.

Image Mapster makes HTML image maps useful

ImageMapster is a jQuery plugin that brings HTML image maps to life. With this tool, any image map can be highlighted, selected, and manipulated in all kinds of ways. ImageMapster is 100% Javascript and it works on every major browser, without Flash or any other dependencies (except jQuery), including Internet Explorer 6. Some advanced effects require HTML5 support, but will still fall back to work in older browsers.

Multi-level Photo Map

This multi-level map based image gallery makes it possible to show images related to their location. The first level indicates the location of the places where each one has a set of images, and the second level shows each single image and its location. Using Google Maps, we’ll have the location shown on the left side while the images of a location are shown on the right.

Google+ Styled Buttons

This is an easy to implement framework of Google+ styled buttons, icon buttons & dropdown menu buttons that look and work great in web applications.

Google Dart – Should JavaScript be Replaced?

A memo from a Google employee was leaked earlier this month exposing the new plan for Dart, which they claim to be a new programming language for structured web programming. The memo goes into some detail on what Dart would be, but doesn’t go into much detail on why Dart should be. In other words, it doesn’t explicitly state the deficiencies in JavaScript. Do they have a point? Should JavaScript be replaced?

Scrollbar Visibility with jScrollPane

Sometimes it can be very useful to hide the scrollbar of elements in a website and only show it when the user really needs it. The real-time activity feed in Facebook is an example for such a behavior. Today we want to show you how to use jScrollPane and extend it with the functionality to hide the scrollbar and show it on hover.

MooVES

MooVES is The MooTools Video Enhancement System, a plug-in for MooTools and displays the link to the video and a notice message when JavaScript or Adobe Flash Player are not enabled in the user’s system..

Introducing MooTools Templated

One major problem with creating UI components with the MooTools JavaScript framework is that there isn’t a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating..

Draggable Image Boxes Grid

Today we want to create a template with a fullscreen grid of images and content areas. The idea is to have a draggable grid that shows boxes of thumbnails and menu like items. Once clicked, the thumbnail will expand to the full size image and the menu item box will expand to a fullscreen content area..

Browser Plugin Detection

Have you ever wondered how to detect plugins loaded by your browser using JavaScript? In this tutorial you will learn to detect plugins in IE way and for other browsers. You will also learn to use Lazy Function Definition pattern to optimize your object detection code..

Responsive Image Gallery with Thumbnail Carousel

Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. Inspired by Twitter’s “user gallery” and upon a request to show an integration of Elastislide, we want to implement a responsive gallery that adapts to the view-port width. The gallery will have a view switch that allows to view it with the thumbnail carousel or without. We’ll also add the possibility to navigate with the keyboard.

A Simple Frontend Strategy for Mobile Webapps or How we Built Hacker News Mobile

Last week we released a mobile client for the website Hacker News. We’ve been huge fans of the site since our earliest startup days and most of us check up on it at least a couple times a week (ha!). The site is clean and simple, but depends on tables for layout, so it doesn’t deliver the best experience on mobile phones..

Image Gallery for mobile and touch devices

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Type and spot using jquerys contains

Today I’m going to share a tutorial on how to create a simple content spotter using one of jQuery’s selector, :contains(). This selector, as in jQuery’s description, will select all elements that contain the specified text..

Jwerty

jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.

What is the fastest way to load AMD modules

The AMD format for JavaScript modules was created to allow devs to write elegant, modular code rather than the silly global, name-spaced hackfest we’ve been writing. However, AMD has a hidden benefit: it allows modules to be downloaded in parallel, rather than sequentially. This is a potentially huge performance win.

Related posts:

  1. 31 Fresh HTML5/CSS3 Tips and Techniques for designer & Developers
  2. Tools For Web Developers and Designers – 60 Useful Cheat Sheets
  3. Learning jQuery – Hot New Tips, Techniques & Tutorials
  4. 40+ New Significant HTML5 And CSS3 Tips/Techniques/Tutorials
  5. 40+ Really Useful CSS3 Techniques & Tutorials