|
If you know how to use CSS and Javascript, you can
create some impressive websites. Not only that you can do some awesome
stuff with them but they also ease you work. In this article you have
100 awesome CSS and Javascript plugins and coding techniques that should
definitely be in you toolbox.
You will learn how to create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
You will learn how to create a movable object using javascript.
So, what about a vertical sliding panel that would act as some sort of drawer
instead of the usual top horizontal sliding panel that pushes
everything else down when it opens? While thinking of alternatives to
the usual horizontal panels, the author thought it would be nice to
create something that works in a similar way, but that is a bit more
flexible.
The trick with these overlays is the gradient border, going form a
lighter to darker orange as you go from top to bottom. To create that
effect we used to the border-image property, which is a tricky little
addition to CSS.
We will use box-shadow to create a drop-shadow with RGBa, a color
model that allows an optimized contrast with any kind of backgrounds.
RGBa is the standard RGB model (0,0,0 � 255,255,255) and it adds the
last option (a) for the opacity. We can use this model also for other
properties and it works with the new browser.
This custom dialog box is one of the scripts in that website and I
think it will be quite useful for all of us. The reason I have this
custom dialog box is to overcome the inconsistencies across different
browsers. And, of course, it uses CSS3 to style everything.
Organizing the content of a page in a both intuitive and eye-catching
manner, is a must in modern web design. One principle that has been
around for some time is dividing text into tabs. This allows you to
squeeze much more content in a seemingly limited space and provide a
structured way of accessing it.
Although I don�t understand why animations have been added in CSS3,
this upcoming standard does have a couple of very neat features added
to the CSS we�re using today. I wanted to take a couple of these new
things, and create a Sweet tabbed navigation using CSS3.
You will learn to make a CSS3 & jQuery halftone-style navigation
menu, which will allow you to display animated halftone-style shapes in
accordance with the navigation links, and will provide a simple editor
for creating additional shapes as well.
You will learn how to create a coverflow effect that actually flows
and animates in real-time, without using canvas or prerendered graphics.
You will learn how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.
We take a standard album cover, a little HTML, and some CSS3
transitions and transforms to create a sliding vinyl effect for showing
off the music you love.
These examples came about when experimenting with the extend property
in MooTools. By extending the styles class I could add CSS3 properties
into the Core MooTools framework and do CSS3 animations.
Zach Johnson has been having fun with 3D effects via CSS such as his
isocube above, which is brought to you with simple HTML (including a
video tag for a playing video on the surface!) and some CSS.
No matter how fast internet tubes or servers are, we�ll always need
spinners to indicate something�s happening behind the scenes.
The impression of a three dimensional cube can be created using
modern CSS techniques, without the need for JavaScript, imagery, canvas
or SVG. Using the proprietary transform property to skew and rotate
shaded rectangles, individual cube faces can combine to form a 3D
object.
The author will show you what 3D CSS Transforms can do.
Magical things can be done by combining various CSS properties,
especially when some of the new CSS3 tricks are thrown into the mix.
Let�s take a look at building a cool looking stack of Polaroid photos
with pure CSS styling.
In this tutorial we are going to create an awesome image gallery
which leverages the latest CSS3 and jQuery techniques. The script will
be able to scan a folder of images on your web server and build a
complete drag and drop lighbox gallery around it.
We build a pretty typical image gallery design pattern, a grid of
images that pop up larger when clicked. But this image gallery page
makes use of hot semantic HTML5 markup, loads of visual treats with
CSS3 and jQuery, and made editable through the CMS PageLime. Quick
reminder, the demo is awesome-est in a WebKit browser (Safari or
Chrome).
This is a behavior htc file for Internet explorer to make CSS
property � border-radius � work on all browsers. At present, all major
browsers other than IE shows curved corner by adding 4 lines of css.
An elegant, lightweight slideshow script. It works with MooTools 1.2,
and supports all kinds of shape transformations (top and left
coordinates, and height and width properties), which means it can now be
used with vertical, horizontal, or even irregular lists.
The software company Panic has a beloved Mac application for developers called Coda.
Coda has an incredibly elegant design, and one of the subtle
JavaScript effects that have been added to it is a stylized pop-up
bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user�s experience
Taggify is a bit different in implementation than the other
JavaScripts listed. Taggify is a hosted solution for adding pop-up
widgets to photos. Instead of having to download a script and host it on
your site, you can just add a tiny <include>
in your tag, and you�ll have the power of Taggify installed on your
site. Using Taggify is interesting; it adds notes and other useful
information to photos. Think of it as a souped-up version of the
note-adding feature for Flickr images. You can add any HTML to the
Taggify note, creating a nice informational page to accompany any image
that needs a bit more explanation.
AmberJack is one of the more interesting and compelling JavaScript
techniques. Website tours are extremely beneficial because they can help
familiarize users, showcase features and products, and many other
things. Possibly the best part about AmberJack is that nothing has to be
installed or learned to start creating website tours. AmberJack
provides a way for website and product owners to quickly and easily
create website tours with JavaScript. It�s an amazingly tiny download,
at only 4 KB.
This is another script inspired by Coda.
Essentially, it�s a smooth-scrolling tab system that makes switching
between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution.
If you�re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo)
might fit the bill. The JavaScript Image Loader is a great way to show
your users an image before it has uploaded, and it can also provide
other information about the image if desired.
This script is a chart generator that runs off of a combination of
flash and JavaScript. You can generate virtually any type of graph or
chart with the script, and can even use .csv and xml files to pull the
data from. With amCharts, you can generate graphs in the form of Column
& Bar, Pie & Donut, Line & Area and Scatter & Bubble.
Magic Zoom is a JavaScript zoom tool. It�s the best way to display
images in incredible detail. Users do not need to click anything � they
just move their mouse over the image to see every detail of your
product.
SimpleModal is a lightweight jQuery plugin that provides a simple
interface to create a modal dialog. The goal of SimpleModal is to
provide developers with a cross-browser overlay and container that will
be populated with data provided to SimpleModal.
This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.
This is an extension to the simple panorama viewer that allows you to
play a little bit more with jQuery by adding interactivity to
transform some panoramic views into a virtual tour.
This tutorial describes how one can create a clock using basic CSS and JavaScript.
Sticky SideNav Layout with CSS
Learn how to create a fixed sidenav layout for your blog or website.
Having a fixed sidenav comes in handy when dealing with blog style
websites where the content is extremely tall and there is a need for
good amount of scrolling. The fixed navigation allows the user to cruise
through the content without scrolling back up to the top to navigate
through the rest of the site.
Masonry is a layout plugin for jQuery. Think of it as the flip side
of CSS floats. Whereas floating arranges elements horizontally then
vertically, Masonry arranges elements vertically then horizontally
according to a grid. The result minimizes vertical gaps between elements
of varying height, just like a mason fitting stones in a wall.
The CSS box-shadow and text-shadow allow us
to create some pretty cool design elements that don�t even look like
shadows. The key is to think about how CSS shadows work and use them to
get the desired effect. The article features three remarkable examples
of using box-shadow property creatively to achieve effects that don�t have much to do with shadows.
Sawyer Hollenshead�s experiment is an attempt to create the �Depth of
Field� effect with CSS. The blurry text is accomplished using text-shadow, with the text color set to transparent. Take a look at the demo and don�t forget to press �n� to toggle animation.
This demo presents a CSS3 toggle-button that works without JavaScript. If you ever need it: You stack two <a>s on top of each other and then disable pointer-events for the top <a> on :target.
This demo is driven by HTML5 canvas, CSS3, JavaScript, Web Fonts, SVG
and no image files. The CSS file is huge, yet the result is quite
remarkable.
Tom Kenny features a neat effect which spins the social icons with
the help of a CSS transforms and transition when you hover over them. A
very nice enhancement.
This article explains how to create angled CSS content �masks�. The
idea is pretty simple and uses CSS transform property (rotation, to be
more precise).
Learn how to create a simple CSS folded-corner effect without images
or extra markup. It works well in all modern browsers and is best
suited to designs with simple colour backgrounds; supported by Firefox
3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.
Learn how to create an image rollover by giving the element a background image. There are three ways to fade in the opacity.
The CSS3 text-shadow property has been around for some time now and
is commonly used to recreate Photoshop�s Drop Shadow type shading to
add subtle shadows which help add depth, dimension and to lift an
element from the page. A demo is available if you�d like to see what it
looks like before you give it a try yourself.
The overflow property in CSS can be used in various ways
and comes in handy when correcting bugs. Below are some tutorials that
demonstrate how to clear up some common issues using the overflow
property.
� The first approach in my mind was to do the typical CSS Sprites but
this requires CSS work which my client did not know much of. I wanted
to give him the access to update his affiliate banners using WordPress,
and the simplest thing was to let him just upload his own images and
put the URL in a custom field. No CSS tweaks involved, just what he
needed.�
On this current design of CSS-Tricks, you may have noticed how all
links bump themselves down one pixel as you click them. This tutorial
displays how to implement this technique.
A common problem among designers is how to get a div to stretch 100%
of the window�s height. There are a few different techniques out there,
and this tutorial shows one of them.
A clean, simple a nice navigation menu, designed by Nick La.
There are a few different ways to vertically center objects using
CSS, but choosing the right one can be difficult. Here is a list of the
best ways and an explanation of how to create a nice centered website.
Other than the �Turn off the lights� feature, YouTube has great
stuff, such as the �change view� feature, which allows you to switch
between normal and wide mode, thus expanding or shrinking the video
area. Creating this is very simple.
min-margin is non-existent in the CSS world. After you�ve pondered and Googled it, check out the solution here.
This technique allows an image to fill the page, with no white space.
The image scales as needed and retains its proportions, without
triggering scroll bars.
his tutorial explain how you can recreate the effect displayed on the image below, using jQuery and CSS.
New features introduced in CSS3 allows developers to create stunning
visual effects: this post exaplains how you can create a fancy progress
bar using CSS3 and jQuery, without Flash or images.
CSS converts a simple list of countries into the fully clickable map.
Works with disabled style sheets and JavaScript, as well as on mobile
devices. A simple code does not require Flash Player or other plug-ins!
Webkit support some fancy transform and animation effects that can
really spice up the web experiences for users with Safari or Chrome
browsers. Here�s a quick look at how the rotateY property can produce a
flip effect, and how it can be used to create a Transformers themed top
trumps design.
In their simplest implementation � using sup tags and
linking within the page � footnotes aren�t very user-friendly. They
interrupt the experience, requiring the user to click the link, read the
information and then return to the page with the browser�s �Back�
button.� Lukas Mathis has come up with an elegant solution to improve
this user experience: his jQuery script shows the content of footnotes
as soon as the user indicates that they are interested in it � i.e. when
they move the cursor over the footnote symbol.
Although many will argue that Microsoft products are an example of a
good design, Minibar was one of design refreshments that came out with
the Office 2007. It is a variation of a toolbar that exposes
context-related functionality. In case of MS Word, context is a text
selection. Since Minibar always pops up near the mouse pointer it
enables users to quickly perform actions related to a selection.
So you�ve got your sprite created, and it�s working great. 30+ icons
in one image, and major HTTP connections saved. You have made your
little corner of the interwebs a little happier and faster. Steve
Souders would be proud.
�I ran into the feature table design and I was inspired to try and
replicate it. First in Photoshop, then in HTML/CSS. Recreating cool
stuff you find on the web is definitely an excise I recommend (a few
days after, I read this � couldn�t agree more). As these exercises
typically do, it lead me down some interesting paths.�
This tutorial re-creates the Skype application menu in the web
browser. The final design mimics not the full layout � only the menu
where all your friends are listed. For the nifty layout CSS3 is used
and jQuery is used for the extra functionality.
In this tutorial we will create a fixed menu with scrollable thumbs.
The idea is to have a menu fixed to the bottom of the page and let a
vertical stack of thumbs appear when hovering over a menu item. The
thumbs are scrollable by moving the mouse up and down which makes a
really nice effect. We will add some CSS3 properties for spicing up the
looks
Sweet Menu takes an ordinary list of links and makes it a sweet
looking menu. It does this by utilizing jQuery and it�s plugin system
Creating a Fancy Menu Using CSS3 and jQuery
Here you can see how a fancy menu can be created with the help of the new CSS3 features along with jQuery
In this tutorial you can make use of the rotating and scaling jQuery
patch from Zachary Johnson to create a menu with little icons that
will rotate when hovering
Drop-down menus are an excellent feature because they help clean up a
busy layout. When structured correctly, drop-down menus can be a
great navigation tool.
Here is a great tutorial on how to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation.
A collapsing menu that contains vertical navigation bars and a slide out content area can be created like this.
Here is a jQuery UI widget for Stack Menus.
In this tutorial we are going to create a beautiful navigation that
has a background image slide effect. The main idea is to have three
list items that contain the same background image but with a different
position. The background image for each item will be animated to slide
into place in different times, creating a really nice effect. The
background image sliding direction from the list item in the middle will
depend on which item the user was before: coming from the right, it
will slide from the left and vice versa.
In today�s tutorial we will create a full page cufonized menu that
has two nice features: when hovering over the menu items we will move a
hover-state item that adapts to the width of the current item, and we
will slide out a description bar from the left side of the page,
reaching towards the current menu item.
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation:
In this tutorial you can see how sticky notes with CSS3 can be created
The perspective property is what we need to create the 3D effect.
Using transform and transition, we can create 3D animations using pure
CSS3.
In this tutorial you can learn how to create a nice and fresh image
gallery. The idea is to show the albums as a slider, and when an album
is chosen, the images of that album are shown as a beautiful photo
stack.
Whilst this CSS3 declaration might not be crucial to your project or
design and yes it is not supported by all browsers, but it is a
fantastic effect that really takes your design one step further.
Here you can find out how to build a script, one which is going to
take an ordinary �select� element, and replace it with a better
looking, markup powered version, while keeping all the functionality
intact.
In this tutorial you will find out how a bouncebox notification plugin can be created with jQuery & CSS3.
Knowing the importance of HTML standards, here is a set of contextual
slideout tips with jQuery & CSS3 which are ideal for product pages
and online tours.
In this tutorial you can see how you can make a carbon fiber signup form using PHP, jQuery and CSS3.
In this tutorial you can learn how to build a cross-browser with an
awesome CSS-only drop-down mega menu, using nice CSS3 features.
Follow along and see how we can use a few very simple CSS3 transitions to create a �slideup� box effect.
In this tutorial you can learn how to use jQuery and the new
transformation features brought to you by CSS3 to create a three
dimensional dynamic slider effect.
Here you can learn how to create your own yoyo with the help of CSS3 and jQuery.
When it comes to form validation, it�s hard to have a versatile
solution that works with every form. Figuring out how to display errors
is not a simple task. When an error needs to be displayed, the script
creates a div and positions it in the top right corner of the input.
This way you don�t have to worry about your HTML form structure. The
rounded corner and shadow are done with CSS3 and degrade well in non
compliant browsers.
An interesting keyboard made using jQuery.
jQuery makes creating UI so much easier without compromising speed
and quality. In this tutorial we are going to enhance form using jQuery
UI, so let�s get started.
This jQuery plugin enables simple and easy creation of an interactive �Featured Items� widget.
An interesting read. Also notice that the slider slides automatically, but will stop when the users clicks on any nav button.
Browsers do not let you style file inputs. File Style plugin fixes
this problem. It enables you to use image as browse button. You can
also style filename field as normal textfield using css. It is written
using JavaScript and jQuery.
Smooth Div Scroll is a jQuery plugin that scrolls content
horizontally left or right. Apart from many of the other scrolling
plugins that have been written for jQuery, Smooth Div Scroll does not
limit the scrolling to distinct steps.
This is a simple full screen background slideshow plugin.
This tutorialwill let you learn how image rotation works and how to create image rotator with CSS and jQuery.
In this tutorial it�s explained how to turn old boring image viewer into a nice-looking one with jQuery.
There is no need for a database nor a PHP back-end for this gallery.
This means that it is really easy to incorporate into an existing site �
you just have to change a few lines of html code.
This is my humble attempt to enhance web time picking.
A very detailed and advanced tutorial on how to create a mosaic slideshow by using CSS and jQuery.
Today we�re going to break the mold of the traditional tooltip. This
tutorial will demonstrate how to build tooltips that are powered by
jQuery, with information pulled from a JSON array.
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads.
|