Commonly used plugins, widgets and techniques
-
Menu's:
-
CSS-only: CSS3 dropdown menu
CSS3 dropdown menu by Red-team
Superfish menu tympanus.net overview of menu-tutorials Moving Boxes Content
Tabs: jQuery Tabs Widget
Boxes with hover-effects
- jQuery Mosaic plugin Original Hover Effects jQuery image-slide on hover effect Photoviewers/Gallery's:
-
FancyBox
Swipebox
Galleria
ColorBox
OrangeBox
CSS3 Lightbox Slicebox Floatbox Strip
Responsive Image Gallery Elastislide Portfolio Image Navigation Rotating Image Slider Fullscreen Gallery Thumbnail Flip 3DWall Gallery Sweet Thumbnails Photo Booth Strips Lightbox Gamma Gallery
More: 1, 2, compare
Virtueel canvas/Prezi style/Full screen presentations:
- impress.js reveal.js scrollTo Image walls/Pinterest style
- Wookmark Sponsor-wall-flip Image Wall Draggable Image Boxes Grid Automatic Image Montage Sliders/slideshows
- WOW slider Anything slider TosRUs Nivo slider innerFade Cycle plugin CSS3 Fluid Parallax Slideshow jQuery Timeline Slider Basic jQuery Slider More: 1 2
- jQuery Rondell More: 1 2
- jQuery Accordion Vertical Sliding Accordion CSS3 Image Accordion More... Fixed div (always visible element)
- Examples given in lectures Floating box/div (element dat meebeweegt, bij scrollen/navigeren)
- jScroll persistent-headers iScroll More... Parallax scrollen (using float box)/One-page navigation
- ParallaxSlider Parallax usage in web-design Parallax fullPage.js - vertical & horizontal scrolling Scrollorama jQuery one page navigation plugin Scrollpath Demos: History of aeronautics Hot Air Balloon History Re-size or hide parts (of div elements)
- Collapse Simple slide panel <(onderdeel jquery tutorial webdesignerwall) Sliding top-menu with jQuery Pageslide Static effects (rotate/along a curve)
- Arctext: text along a curve Animations/dynamic effects (fly-in/out, flip, rotate, zoom)
-
Example: jQuery animate
animate.css
Reel: 3d rotate
jQuery.transit: transitions & transformations for jQuery
Zoom: Zoomooz.js Zoom.js
Page/book-flip: Booklet Sexy Curls imBookFlip - Maphilight, with example Filter/select/search inside a page/live search (dynamic)
- Mixitup Quicksand Quicksearch Shuffle.js CSS3 Filter Functionality Isotope <demo Filtrify More: filter livesearch Vector graphics/Asymmetric/free form
- Creating off-center balance using asymmetry in web design css3shapes.com Raphael.js Paginate/navigate
- jPages Userinterface elements/dials/controls
- jQueryUI jQuery knob
A LightBox is a popup window where you can see an image enlarged. Often it is combined with functions to quickly browse through the images using buttons to move forward and backward, or small images (thumbnails) that can be clicked. An example:
A carousel is a slider of which the next and previous image are (partly) visible:
An accordion is a vertically or horizontally stacked list of items, such as labels, images or other pieces of content. Each item can be "expanded" or "stretched" to reveal the content associated with that item. An example:
An image map is an image defined so that a user can click on different areas of the image and be linked to different destinations. By means of the plugin Imagemap highlight the areas can be highlighted by giving the border and/or content of the area a specific color.
Imagemaps can be created easily in Dreamweaver. The areas are called hotspots. See the example for details.
Tools
w3schools ColorPickerCSS gradient editor
Testen:
w3 validator & CSS validator
JSfiddle
Netrenderer - IE tester
Dreamweaver: Addons
Learn HTML/CSS
w3schoolsLearn CSS layout
tutsplus.com: Learn CSS
Webdesignerwall: jQuery tutorials for designers
Outline articles
jQuery tutorial Webdesignerwall, includes examples and demo'sMouthwatering Collection Of jQuery Plugins And CSS3 Tricks
Powerful new css/javascript techniques
Build a HTML5/CSS3 Website Layout Without Images, part 2
Html5 en css 3: de pijlers van morgen
Start Using CSS3 Today: Techniques and Tutorials
48 Excellent html5 demos
8 Most Popular jQuery Plugins of January 2012
Responsive design
Responsive Design is een methode van webdesign waarbij de inhoud (c.q. het ontwerp) van de website zich aanpast aan het apparaat waarmee het bezocht wordt en waarbij het liefst geen concessie wordt gedaan aan de gebruikerservaring.
Tutorials for making your website mobile friendly
Bootstrap - 'mobile first' grid & template system
Dive into Responsive Prototyping with Foundation
Foundation framework
Dreamweaver CC: Responsive design using fluid grid layouts
Dreamweaver CS6: Building fluid grid layouts
Sources & more
unheap.com/jque.re/
plugins.jquery.com
jqueryscript.net
Codrops
WebdesignerWall
1stwebdesigner
SmashingMagazine
Tutorialzine
Hakim