Random Apps And Tools For Designers And Developers

I’m very glad that we work in a vast domain where new resources appear everyday from handy developers and designers for the rest of us, developers or designers. Having said that, I’m inviting you to check out this list of 33 tools and apps that could help you on your projects.

Bear CSS

Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.

Jeditable – Edit In Place Plugin For jQuery

Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements.

Font.js: A Powerful Font Toolkit for JavaScript

Mike Kamermans has been working on a little font toolkit for your JavaScript that is kind of akin to the built-in Image object but for Fonts. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

HTML5 Reset v2

Like a lot of developers, we start every HTML project with the same set of HTML and CSS files. We’ve been using these files for a long time and have progressively added bits and pieces to them as our own personal best practices have evolved.

Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it’s time for our best practices to catch up, and we thought we’d put our files out there for everyone to use. By no means do we see this as the One True Way to start every project, but we think it’s a good starting place that anyone can make their own.

jQuery Collapse

This Plugin delivers an accessible and lightweight solution to a widely adopted interface pattern (known as progressive disclosure). It includes features like cookie persistence, ARIA compliance, and is designed to be flexible and modular enough to be used in many different’t scenarios.

PxLoader: A JavaScript Preloader for HTML5 Apps

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

jquery.mentionsInput

jquery.mentionsInput is a small, but awesome UI component that allows you to “@mention” someone in a text message, just like you are used to on Facebook or Twitter.

ofmlabs codecs: A suite of JavaScript audio codecs

Web browsers are becoming more and more powerful, and new APIs like the Web Audio API and Audio Data API are making the web an ever more interesting and dynamic place. At ofmlabs we are invested in improving the state of audio on the web, and with JSMad showed that decoding audio purely in JavaScript is possible thanks to these APIs and the hard work of browser makers and spec authors. And now we’ve done it again. Introducing alac.js, a port of the recently open sourced Apple Lossless decoder to JavaScript. Now it is possible to play MP3 and Apple Lossless even in browsers without native support.

Ember.js

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.

Enlight

Enlight is the new open source e-commerce framework by Shopware. Enlight is based on both the Zend framework and the Symphony 2 framework but, unlike them, focuses on the developing of modern rich internet applications (RIA) as well as individual e-commerce applications.

PHP BUG LOST

PHP Bug Lost is a one-file script PHP debug and monitoring console. Include it in your script and: send log messages, view SQL queries (sends an email to the admin if there’s an error), measure times and memory usage (sends emails for long loading times or excessive memory usage), see all the vars in your scripts and view all your AJAX queries (send params and responses).

Gridpak: The Responsive grid generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

jqMobi

jqMobi is a Javascript framework targeted at HTML5 browsers with a blazingly fast query selector library that supports W3C queries.

FeedEk jQuery RSS/ATOM Feed Plugin

FeedEk is an RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.

Fbootstrapp

Fbootstrapp is a toolkit designed to kickstart development of facebook iframe apps in both relevant sizes. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more, styled in the typical facebook look and feel.

Revolver.js

Revolver is a new content slider that makes no assumptions about your markup. Think of Revolver as a boilerplate or framework for making your own slider, exactly the way you want it.

3×4 Grid Builder

The 3 × 4 grid poster illustrates a change in design practice. Computation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with programmers; and designers are taking up programming.

Scrollorama

impress.js

It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.

jQuery UI Bootstrap

With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter Bootstrap side-by-wide with it without components breaking visually.

Screenfly

CoderDeck

CoderDeck combines Deck.js with the CodeMirror2 highlighting code editor to make it easy to demo and teach live HTML, CSS and Javascript directly in the browser.

Dialawg

The astonishingly simple way to share, track, protect, and control your files, messages…and relationships.

WhatFont Tool

What is the easiest way to find out the fonts used in a webpage? Firebug or Webkit Inspector? No, that’s too complicated. It should be just a click away.

Patternizer

With Patternizer, it’s easy to make something amazing in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity and play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing.

Clickdummy

Clickdummy is about communicating your designs better. ClickDummy turns your website, mobile and software mockups into clickable prototypes with room for annotation and feedback from your clients, friends, and co-workers. No more emailing .PDFs, trying to trace feedback through message threads, or worrying about putting Photoshop images into an HTML container. Clickdummy puts your designs and feedback in context.

Remind Me Later

Remind Me Later adds events to iCal in two clicks. Type “Buy groceries at 4pm tomorrow”, and it will add “Buy groceries” to iCal at 4pm tomorrow.

Projectial

Projectial is a system which makes managing projects, human resources, finances, and time, more effective. Implementing it, you can overview the employees, their tasks and projects, and the whole company.

Skyclerk

Skyclerk will change the way you look at bookkeeping and accounting forever. Our system makes it so any small to medium size business can be up and running with a fully robust accounting system in seconds. No software to install, no backups to worry about, no expensive shrink wrap software to buy.

Golden Ratio Calculator

There are two scenarios the calculator is designed for. The first is that you have a column with a certain width (perhaps to achieve a nice word:line ratio). You wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column.

The second scenario is that you have a container and wish to divide it in two. Type in the container width and use the right side measurements

Opus Domini Lite

Personal Planner and management application, includes
-Daily Tasks
-Master Tasks
-Compass
-Goals
-Mission
-Multiple Planning Views
-Meeting Planner
-Repeating Tasks
-Subtasks
-Master Task Planner
-Event synchronization with ical
-Search
-Password protection
-Weather info

Smartling

Web and mobile app content is becoming more dynamic. Content that could, should and would be translated is growing exponentially. The “translation challenge” is only getting bigger.

Go to Source

15 Free And Useful jQuery Image and Content Sliders Plugins

Content and image sliders have become very popular in recent years. With jQuery you can enjoy new way of web development and image galleries are the best way to use it effectively! Here you’ll find 15 awesome jQuery image and content sliders plugins, and the best of all they are free.

Slides

Slides is a slideshow plugin for jQuery that is built with simplicity in mind. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

Elastislide – A Responsive jQuery Carousel Plugin

Elastislide is a responsive jQuery carousel that will adapt its size and its behavior in order to work on any screen size. Inserting the carousel’s structure into a container with a fluid width will also make the carousel fluid.

FlexSlider

FlexSlider is an amazing, totally responsive jQuery slider plugin. It bears uncomplicated, semantic markup, slide and fade animations, and is supported in all major browsers, therefore you won’t have any compatibility issues. Flexslider is built for novices and pros in a similar way.

Slider Kit, sliding contents with jQuery

The purpose of Slider Kit is to gather common slideshow-like jQuery functionalities (such as news sliders, photos galleries/sliders, carousels, tabs menus) into one lightweight and flexible plugin combined with ready-to-use CSS skins.

Lateral On-Scroll Sliding with jQuery

You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport.

Orbit: A Slick jQuery Image Slider Plugin

jQuery plugin lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.

Circular Content Carousel with jQuery

With this circular content carousel, you can have some content boxes that can slide substantially (circular). Clicking the “More” link will move the respective item to the left and slide out the content area, so that you can navigate through the carousel where every step will disclose the next or previous content box with its extended content.

Minimit

Minimit Gallery is a highly customizable Jquery plugin that does galleries, slideshows, carousels, slides… pratically everything that has multiple states.

jQuery Based Flipped Image Gallery with Bounce Effects

a simple jQuery based flipped image gallery. On hover the images will expand. Its simple and stylish gallery.

Rotating Image Slider with jQuery

An asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will also add an autoplay option and the mousewheel functionality.

Slidorion

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

Shutter Effect Portfolio with jQuery and Canvas

In this jQuery tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

jQuery MB Bgnd Gallery

With this jQuery plugin you can make a suggestive slide show of images as the background of your page; the images will adapt their size to the window size. You can either navigate the gallery with your keyboard or with a control panel displayed where you want in the page.

Galleria

Galleria is a JavaScript image gallery framework built on top of the jQuery library. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

Image Wall with jQuery

With this plugin you can create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

Go to Source

10 awesome HTML5 audio players

Media Element

MediaElement is an audio an video player which is written in pure HTML5 and CSS. Older browsers are supported by Custom Flash and Silverlight players that mimic the HTML5 MediaElement API.
Media Element is skinnable, and offers plugins for popular platforms such as WordPress, Drupal, Joomla, etc.

→ Visit http://mediaelementjs.com/

Scott Andrew’s HTML5 audio player

This player is very minimalist but works well. Great to use when you do not need playlists or any fancy effects!

→ Visit http://www.scottandrew.com/pub/html5audioplayer/

Speakker

Here is a great player, probably my favorite from the whole list. Speakker is super easy to set up and comes out of the box in two variations and with incredible options of customization: Flexible dimensions, unlimited colors, etc…
Speakker is cross-browser compatible and have a Flash fallback for old browsers.
and two different button sets for light and dark themes.

→ Visit http://www.speakker.com/

MooTools HTML5 Audio Player

Are you using Mootools on your website? If yes, you’ll probably enjoy this player, made with HTML5 and the Mootools JavaScript framework. The player works perfectly on all recent browsers.

→ Visit http://simulacre.org/mootools-html5-audio-player/

Universal HTML5 Audio Player

This player is the only one from the list which isn’t free. But it’s cheap ($5 only!) and works well. It have lots of useful features, such as a way to protect your audio from being hijacked by using a beep overlay, which is a great solution for commercial uses.

→ Visit http://codecanyon.net/item/universal-html5-audio-player

SoundManager 2

Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single lightweight (10 kb) JavaScript API.
Want to see what you can do with Sound Manager 2? Then visit http://wheelsofsteel.net/ for an awesome demo!

→ Visit http://www.schillmania.com/projects/soundmanager2/

jplayer

jplayer is a jQuery plugin which have been my audio player of choice for several months because of its simplicity. A great tool which can also play videos.

→ Visit http://jplayer.org/

audio.js

audio.js is a drop-in javascript library that allows HTML5′s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.

→ Visit http://kolber.github.com/audiojs/

HTML5 Audio Player Bookmarklet

This bookmarklet adds an audio player to play linked audio files on any page. It can be used on any page which has links to downloadable audio files. A great tool to stream audio instead of downloading!

→ Visit http://marklets.com/HTML5+Audio+Player.aspx

Go to Source

What’s new for designers, February 2012

The February edition of what’s new for web designers and developers includes new web apps, frameworks, jQuery plugins, WordPress tools, and some really great new fonts.

Many of the resources below are free and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think should have been included, please let us know in the comments.

And if you have an app or other resource you’d like to see included next month, tweet it to @cameron_chapman for consideration.

Dolody

Dolody is a new weekly online magazine for the design community. They cover design, coding, graphics, and WordPress, with commentary from some leading designers, quick tutorials, interviews, and more.

class="spacer_" />

Zip.js

Zip.js is a JavaScript library for zipping and unzipping files. It’s a great addition to an online file management system or site where users need to upload content.

class="spacer_" />

WP Remote

WP Remote lets you manage and maintain all of your WordPress sites from a single dashboard. You can update your core, plugins, and themes, track site status, and have daily backups run and stored to Amazon S3.

class="spacer_" />

Bear CSS

Bear CSS is an online app to help you build a stylesheet based on your HTML markup. Just upload your HTML file and Bear CSS will generate a CSS template based on it.

class="spacer_" />

Zoey

Zoey is a framework for developing mobile apps. It includes a range of UI elements and is lightweight and customizable.

class="spacer_" />

Arctext.js

Arctext.js makes it easy to create curved lettering with CSS3 and JavaScript. It calculates the right rotation for each letter to distribute it across the arc of a given radius.

class="spacer_" />

SlabText

SlabText is a script that lets you create a big, bold, responsive headline for your web designs. It splits headlines into rows before resizing each row to fill the available horizontal space, and even lets you specify preset word combinations.

class="spacer_" />

HTML KickStart

HTML KickStart is a set of HTML5, CSS, and jQuery building blocks for rapid website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

class="spacer_" />

Fokiz

Fokiz is a content management system designed for ease of use by designers, developers, and users. It has a minimal learning curve, with a simple templating system and easy-to-develop module system for expanding functionality.

class="spacer_" />

GuideGuide

GuideGuide is a Photoshop plugin for creating grid-based designs with pixel-accurate columns, rows, midpoints, and baselines, all of which can be created with the click of a button. Frequently used guide sets can be saved for repeated use, saving you even more time.

class="spacer_" />

deCSS3

deCSS3 is a free bookmarklet for testing the graceful degradation of your designs so you can see exactly what they’ll look like on older browsers that don’t have CSS3 support. It currently supports Chrome and Safari.

class="spacer_" />

Bootstrap Generator

Bootstrap Generator makes it easy to get started with your Twitter Bootstrap project the way you want. Just alter the options to suit your needs and it will generate your compiled Bootstrap CSS file.

class="spacer_" />

Gridpak

Gridpak is a responsive grid generator that creates PNG, CSS, LESS, JavaScript, and SCSS files to your specifications. Just enter the number of columns, the padding for each, and the gutter width.

class="spacer_" />

Create

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

class="spacer_" />

Dabblet

Dabblet is a CSS and HTML sandbox that lets you test out your code and preview it instantly. You can save files anonymously or create an account for more options. You also have a variety of views available, including a results-only view for previewing your entire design.

class="spacer_" />

Impress.js

Impress.js is a presentation tool that uses CSS3 transforms and transitions to create more interesting slideshows. It’s currently supported in Chrome and Safari, and will be supported in Firefox 10.

class="spacer_" />

EaselJS

EaselJS is a JavaScript library for working with HTML5 Canvas. It provides a retained graphics mode, including a full, hierarchical display list, helper classes, and a core interaction model.

class="spacer_" />

Notification Control

Notification Control is a one-stop source for resetting your email notifications for popular web services, including Forrst, Facebook, Twitter, Path, StumbleUpon, YouTube, Tumblr, and more. Just visit the page, and click the links to go directly where you need to to adjust your email notifications for each site.

class="spacer_" />

IconBox 2.5

IconBox is “like iPhoto for your icons”, and lets you organize and customize your icons. It also includes tools and an “Icon of the Day” that features a new icon from a different artist each day.

class="spacer_" />

The Shock Free Bundle 2

WordPress Theme Shock is now offering the Shock Free Bundle 2, a collection of 99 PSD themes, all for free. Each comes with home and internal pages, in a wide variety of styles. The free version includes a personal license, but a commercial license is available for purchase.

class="spacer_" />

youRhere

youRhere is a jQuery plugin that gives your users a chance to mark their article-reading progress just by clicking. It’s an incredibly useful plugin for sites that post long-form content, and uses the HTML5 local storage API.

class="spacer_" />

Eenox Designer

Eenox Designer is a tool that lets you create dynamic and interactive touch-optimized websites for computers, smartphones, and tablets, using HTML5. It lets you design and animate without coding, and then lets you download your design to host on your own servers. There’s a free plan with limited functionality, while paid plans start at $99 for 2 months.

class="spacer_" />

Reverie

Reverie is an HTML5 responsive WordPress framework based on Zurb’s Foundation. It uses media query to adjust for all kinds of devices, is optimized for iPhone and iPad, and is hNews microformat ready.

class="spacer_" />

SyntaxHighlight.in

SyntaxHighlight.in is an online tool that displays formatted source code. It doesn’t use dynamic styling (so there’s no flash of unstyled content), is only about 6kb (JS and CSS), and code can be opened in a popup for easy printing.

class="spacer_" />

Enlight

Enlight is an open source e-commerce framework created by Shopware. It’s based on both the Zend and Symphony 2 frameworks, but focuses on creating rich internet applications and individual e-commerce applications. It’s highly adaptable, uses a simple plugin system, and is specifically adapted to e-commerce.

class="spacer_" />

Bemio (Name your price)

Bemio is an ultra-bold sans serif typeface that bridges the gap between old fashioned signage and modern forms. It includes more than 1000 glyphs and full language support.

class="spacer_" />

Hagin (free)

Hagin is a new serif typeface with strong geometric forms and old school style. It’s perfect for a variety of graphic design, including web, print, motion graphics, and more.

class="spacer_" />

Veles (free)

Veles is a handwritten-style Cyrillic and basic Latin Ukrainian style font that comes in regular and bold weights.

class="spacer_" />

Meander (free)

Meander is an experimental script font with a freestyle winding and intertwining style. It was created by doodling with felt pens, and is best used at larger sizes.

class="spacer_" />

Wonder Brush ($29.95)

Wonder Brush is an incredibly versatile script typeface that’s perfect for display use. It was inspired in part by a 1969 typeface called Poppl Stretto, but fused with ideas found in interwar designs.

class="spacer_" />

Made for Japan ($20)

Made for Japan is a glyph typeface that was created to raise money for relief efforts after the devastating earthquake and tsunami in Japan. All proceeds from the sale of this typeface are delivered directly to organizations in Japan.

class="spacer_" />

Anodyne ($19)

Anodyne is a weathered all-caps font with hand-printed texture. Layering regular and shadow versions offers a variety of unique shadow options.

class="spacer_" />

Memoir ($59)

Memoir is a very romantic script font, inspired by handwritten letters, journals, and documents dating to the 18th century. It’s designed to allow letters to connect fluidly, as if they were actually written.

class="spacer_" />

Eterea ($134)

Eterea is an antique-style font that comes in 12 weights and styles. It includes italics, small caps, swash caps, handtooled caps, ornamented caps, and calligraphic caps.

class="spacer_" />

Uniwerek ($46)

Uniwerek is a hand drawn font reminiscent of university sportswear. It includes six fonts, including stencil and light versions.

[ Go to Source ]

New CSS And jQuery Tutorials For Newbie Web Designers And Not Only

It is not a surprise that new CSS tutorials are in fact CSS3 tutorials, it is normal that the people who make them consider showing something new to the rest of the web design community. That is why in this article you will fin tutorials which explain how to use new features brought by this new technology. Of course, these techniques are often combined with jQuery to create dynamic designs.

CSS Buttons with Pseudo-elements

In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS.

CSS3 with jQuery / Reverse Animation

Hello guys, this time I wanted to bump into another interesting experiment, create a reverse animation. I helped with jQuery to assign the specific class at the click of the button. In my opinion an interesting experiment, I hope you will like and find alternative paths in the realization of the same experiment with different techniques. I remember this animations are only visible in Firefox, Safari and Chrome.

Wicked CSS3 3d bar chart

While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see that (almost) no images were used to create this wicked effect.

Lateral On-Scroll Sliding with jQuery

After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on some websites, like on Nizo or in the portfolio section of brilliantly designed La Moulade. The main idea is to laterally slide in elements depending on the scroll position of the document. Dividing the page into a left and right side, we want to move the elements from “outside” of the page to the center when they are in the viewport. We will also add the opti

Animated Web Banners With CSS3

Today we’re going to take a look at spicing up our web banners, ads or any content for that matter, with CSS3 animations.

Firefox and WebKit browsers are currently the only browsers that support CSS animation, but we’ll take a look at how we can easily make these ads also function in other browsers (which I’ll affectionately refer to as 18th century browsers). However, don’t expect perfect support for all browsers (specifically IE 7 and lower) when experimenting with modern CSS techniques.

An Introduction To Object Oriented CSS (OOCSS)

Have you ever heard the phrase “Content is King”? Being a Web developer, and therefore having a job that’s often linked to content creation, it’s likely you have. It’s a fairly overused but true statement about what draws visitors to a site.

Filter Functionality with CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

CSS3 Graph Animation

Hi guys, today I present a small experiment, using once again the CSS3 animations and properties. This time we will build to create a chart, for me this is just an experiment to test the CSS3, I do not think you can use in your projects but you can enhance your knowledge. I remember this animations are only visible in Firefox, Safari and Chrome.

Practical CSS3 tables with rounded corners

Sliding Image Panels with CSS3

Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector.

A clean calendar in CSS3 & jQuery

Almost a year ago I had the idea to build a calendar app. The project was called LiveCal and was supposed to become a platform where you could share calendars. The whole idea was that calendars would become something you subscribe to. Let me clarify. Let’s say you are subscribed to the calendar stream of your school. One of your teachers plans an event, such as a task or a test and adds it to the calendar stream. From the moment the event is added to the stream, you’ll get a instant notification that a new event is being planned. This means you’ll always walk around with an updated calendar. Due to the complexity of the idea and the lack of knowledge on my side this project never really took off.

CSS3 Loading Animation Loop

Hi folks, this time we’re going to see and create three CSS3 animation loop, can be used in many fields, such as preloader for images with jQuery. I remember this animations are only visible in Firefox, Safari and Chrome.

Speech Bubble Arrows that Inherit Parent Color

Page Transitions with CSS3

In the last few years, we’ve seen a lot of single page websites lying around the internet, most of them using JavaScript for some transitions effect. Well, now I’m gonna teach you how you can have your own, but instead I’ll be using CSS Transitions and the :target property to do all the magic.

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.

Accordion with CSS3

Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing.

Today we’ll experiment some more with the adjacent and general sibling combinator and the :checked pseudo-class. Using hidden inputs and labels, we will create an accordion that will animate the content areas on opening and closing.

There are many variations of CSS-only accordions around, most of which are implemented using the :target pseudo-class. The problem with using :target is that we can’t really close the content areas again or have multiple sections open at the same time. By using hidden checkboxes, we can control the opening and closing. Alternatively, we can also use radio buttons if only one section should be open at a time.

CSS3 Skill Bar Animation

Hello guys, i was recently thinking about a redesign of my website and i got the idea to make this pretty simple tutorial where we will build the skill animation bar for your about page. I remember this animations are only visible in Firefox, Safari and Chrome.

Thumbnail Proximity Effect with jQuery and CSS3

Today we want to show you how to create a neat thumbnail proximity effect with jQuery. The idea is to scale thumbnails when hovering over them and also scale their neighbouring thumbnails proportionally to their distance. We’ll also make a description appear.

Create a CSS3 Image Gallery with a 3D Lightbox Animation

Fullscreen Background Image Slideshow with CSS3

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations.

Password strength verification with jQuery

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

CSS3 Loading Animation

Hello guys, this time i wanted to create 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome.

CSS3 Lightbox

Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.

jQuery Clean and Simple Tooltips: gips

This is an eye-opener for web designers and developers. It also creates the need for a simple and usable web design that everybody can understand. Obviously no product or website/web application (for that matter) can be so intuitive that everybody can use it. This is like a product that sells itself which is improbable. There is always need to improve design and add elements that make it easy for users to understand and use the website/web application. This is where the concept of ‘instructional design’ comes in. The art of instructional design tells us techniques for producing what users actually want – simple and usable products.

Slopy Elements with CSS3

It’s always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only.

CSS3 Menu Navigation Effect

Hi guys been a long time since i write on my blog and then i inaugurate this day with a new tutorial that will treat apply CSS3 properties to menu navigation. We are going to see how to play nice effects without the use of jQuery. I remember this tutorial works perfectly on all browsers except Internet Explorer for the first two examples, while the last example will only be visible in Firefox, Safari and Chrome because it uses the CSS3 Animation Property

Item Blur Effect with CSS3 and jQuery

Today we want to show you how to create a simple blur effect for text-based items. The idea is to have a set of text boxes that will get blurred and scaled down once we hover over them. The item in focus will scale up. This will create some kind of “focus” effect that drwas the attention to the currently hovered item

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. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

Splash and Coming Soon Page Effects with CSS3

CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects using CSS3 animations. We’ll experiment with animation sequences and how to bring some life to some simple elements.

CSS3 Tooltip with Animation NO jQuery

Hi guys, this time I have wanted to create a simple tooltip with CSS3 using the animation, the effect is amazing, and the most important thing we will not use any scripts jQuery. I remember that CSS3 Animations are only visible in Firefox, Safari and Chrome, for the other browser the animations not function, but you will have always the tooltip effect, so can always be used in your projects.

Elastic Image Slideshow with Thumbnail Preview

Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option.

CSS3 Loading Animation Loop 2 Set

Hi guys, I wanted to create more CSS3 animations, this time experimenting with different methods to create simple loading animation loop. I used the translate property and the cubic-bezier property. I remember this animations are only visible in Firefox, Safari and Chrome. Let’s see this new experiment!

Animated Buttons with CSS3

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

Go to Source