Slicebox - 3D Image Slider
Creative Lifesaver Honest Entertainer Brave Astronaut Affectionate Decision Maker Faithful Investor Groundbreaking Artist Selfless Philantropist Example 2: Slideshow with play & pause and horizontal slices
Moving Boxes Content with jQuery
Today we will create a website template with some really sweet animations using jQuery. The idea is to have little boxes scattered around at the top of the site and when a menu item is clicked, the boxes animate to form the main content area. We will use some different animation effects […] View demoDownload source Today we will create a website template with some really sweet animations using jQuery. The content area will custom scroll for which we will be using the really awesome jScrollPane Plugin by Kevin Luck. The beautiful photos are by Jin. So, let’s start! The Markup First, we want to place the background image with the grid overlay: The next div element will be used to add the little boxes with their random position and rotation degree We will place a total of 16 boxes (div elements) into this container. As you can see, we will add two “data-” attributes that we’ll use to define the speed and the easing effect that will be associated to the animation of the boxes. The CSS
Responsive Image Gallery with Thumbnail Carousel
A tutorial on 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. View demo Download source Today we want to show you how to create a responsive image gallery with a thumbnail carousel using Elastislide. We’ll use the jQuery Touchwipe Plugin that will make it possible to navigate the images by “wiping” on the iPhone and iPad. The images in the demo are by über-talented Sherman Geronimo-Tan and you can find his Flickr photostream here: Sherman Geronimo-Tan’s Flickr Photostream The photos are licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License. So, let’s do it! The Markup For the HTML structure we’ll have a main wrapper with the class “rg-gallery”. The CSS
jQuery: The Write Less, Do More, JavaScript Library
Galleria – The JavaScript Image Gallery
Fun With CSS Shapes
I bet a bunch of you don't realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week's screencast, we'll figure out a way to create speech-bubbles without resorting to background images. Most of us, by now, are familiar with using the "-moz-border-radius" and "-webkit-border-radius" properties to create rounded corners - or even complete circles - but there are other techniques to create more complicated shapes. Traditional Speech-Bubble Note how the "bottom" property is the reciprocal of the "border-top" property. Alternate Yet Another Interesting Note I'm typing this paragraph minutes before posting the tutorial. Pretty Nifty I'm really eager to see how you guys have implemented this unique trick into your own projects.
Minimalistic Slideshow Gallery with jQuery
In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. The idea is to have a container with our slideshow and the options to view a grid of thumbnails, pause the slideshow, and navigate through the pictures. The thumbnail grid will […] View demoDownload source In today’s tutorial we will create a simple and beautiful slideshow gallery that can be easily integrated in your web site. So, let’s start! The Markup The main HTML structure will consist of the main slideshow wrapper that contains a container for the full view image (msg_wrapper) and one for the thumbnails (msg_thumbs): The alt attribute of the thumbnails will contain the path the full view image. The CSS First, we will define the style for the main wrapper: By setting the loading GIF to be the background image we are performing a small trick: while we are waiting for the next picture to show, our wrapper will be empty and show the loader. The style for each icon:
960 Grid System
Cool and Useful jQuery Image and Content Sliders and Slideshows
May 23 2011 Looking for some cool new (and free) jQuery slider plug-ins and scripts? Then here is the perfect round-up created just for you. Here, we have collected the best of the freshest jQuery plug-ins for creating amazing image and content sliders. Because all of these plug-ins come with different functionality, this guide should help you figure out which one suits you best. Let’s go! jQuery Image And Content Sliders Cloud Carousel (demo | download) Here is a 3-D carousel, with optional auto-reflection that doesn’t require images to be modified or server code to be added. ShineTime (demo | download) “A new kick-ass jQuery and CSS3 gallery with animated shine effects.” Nivo Slider (demo | download) Nivo Slider is an awesome and lightweight jQuery plug-in for creating attractive image sliders. MLB.com Content Switcher with jQuery and CSS3 (demo | download) Create Scrollable Interface (demo | download) Beautiful Photo Stack Gallery with jQuery and CSS3 (demo | download) This one’s easy.
8 Things You Need to Master to Call Yourself a Professional Web Designer » Edmonton and Sherwood Park Area Web Design, Graphic Design, Social Media, Software Development – Microtek Corporation
Just like with print design, there is a set of skills and knowledge you need to master to become a professional web designer who designs functional, successful websites. Understand how the web works and realize users visit websites because they are looking for information. Users visit websites because they seek answers or need a service—this is what matters most to them. The only people interested in the design of your website are other designers.Realize that usability is the most important thing in web design. If your users can easily access information in your website, they will come back. Mastering this knowledge will build confidence in your web design skills and make your websites work well for your clients. Summarized from and modified.
