background preloader

Circle Navigation Effect with CSS3

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. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. The Markup For this little CSS3 effect we will have a navigation structure that looks like the following: <div class="cn-nav"><a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(.. In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. The CSS Let’s see now, how to add the style for this navigation. The span element, which will contain the arrows as a background image will have an initial height and width of 46 pixel. And that’s it! Related:  Jquery Plugins

Flexible Slide-to-top Accordion In today's tutorial we'll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We'll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size. View demo Download source In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The beautiful fashion photography is by Rayand; check out his Flickr Photostream. The Markup The HTML structure will consist of a wrapper with the class and ID st-accordion and an unordered list. Let’s take a look at the style. The CSS First, we will style the main wrapper. The first item should not have a top border: Let’s style the content and its elements:

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. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos

Prinzhorn/skrollr CSS Box Shadow Property – The Basics and Fun Stuff Box-shadow is a powerful property in modern browsers and we can make some really cool stuff with it. Let’s walk through basics of box-shadow property and then take it to the next level with ::before and ::after pseudo elements. By using ::before and ::after css pseudo elements we can create realistic drop shadow effect without using images. Take a look at this example: Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.

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. View demo Download source The main idea for this template and its effects comes from the beautiful Flash-based website of Stephen Hamilton. To make the grid draggable, we used jQuery.kinetic by Dave Taylor. The beautiful images in the demo are by Ibrahim Iujaz. So, let’s begin! The Markup The main container will be a div with the class and ID ib-main-wrapper. The boxes for the content will have the class ib-content. For the content and image preview we will use jQuery templates. We will have the large image, the navigation buttons, a closing cross and a loading element. The template for the fullscreen content preview looks like this: Now, let’s style the grid. The CSS And that was all the style.

Demo | jQuery.popeye 2.1 | an inline lightbox alternative with slideshow x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The second popeye-box has the following user-defined options: direction: 'left' - open to the left. caption: false - do not display captions (even though the images have alt tags with text). navigation: 'permanent' - the navigation is always visible. The navigation stays fixed to the right of the image. View HTML code used in this example Donate

jQuery slimScroll | rocha.la Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus, felis interdum condimentum consectetur, nisl libero elementum eros, vehicula congue lacus eros non diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus mauris lorem, lacinia id tempus non, imperdiet et leo. Pellentesque rhoncus aliquet porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rhoncus elementum convallis. Nullam scelerisque facilisis pretium. CSS Magic | Achieving Javascript Effects Using Only CSS & CSS3 CSS or Cascading Style Sheets (CSS), is a style sheet language which is used to describe the presentation of semantics (or , the look and formatting) of a document which is written up in a markup language. It is the most common application by which to style web pages that are written in HTMLand XHTML, but the language itself can also be applied to any kind of XML document, including plain XML, SVG and XUL. Primarily, CSS is designed to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). 1. Tutorial 2. Tutorial 3. Tutorial 4. Tutorial 5. Tutorial 6. Tutorial 7. Tutorial 8. Tutorial 9.

Create a Fun Animated Navigation Menu With Pure CSS In recent years jQuery has become the easiest and best supported way to implement simple animations online. JavaScript is exceptionally good at what it does and this article is in no way an argument against it. However, CSS3 offers a glimpse into a possible future where basic animations are performed with straight CSS completely independent of scripting. Today we’ll take a look at how to use CSS3 to create a fun and unique navigation menu that uses @font-face, transforms and transitions. Introduction Your website’s navigation can communicate a lot about your business or service. However, if you’re ever creating a site that doesn’t necessarily have to be so professional, the navigation provides a great place to have a little fun and insert some personality. To get a glimpse of what we’ll be building, take a look at the live demo. Click Here to View Demo The HTML To start off our project, paste in the following blank HTML5 template. Next, throw a simple unordered list into the body portion.

Wave Display Effect with jQuery How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let's you show images and content in a unique form - a wave. The idea is to initially have some smaller thumbnails rotated and placed in a wave-like manner. When clicking on a thumbnail, we'll "zoom" into the wave. View demo Download source How cool is it to sometimes just display content a little bit differently? The images used in the demo are by Chris Willis. The icons are by WPZOOM and you can find the set here:WPZOOM Developer Icon Set (154 free icons) They are licensed under the Attribution-ShareAlike 3.0 Unported License. The beautiful slider is by Orman Clark of premiumpixels.com. How it works The HTML structure will consist of a main wrapper with the class wd-wrapper. Initially, we will have the sine curve showing small thumbnails, all randomly rotated: For adding images and content, the following element is of interest: Options Demos View demo Download source

Spectacular image galleries made simple. Facebox 1.3 What is it? Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It's simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves. Why another lightbox? Because we wanted, nay, needed a Facebook-style lightbox on FamSpam. Load Dependencies Make sure jQuery is loaded before Facebox. Attach It onLoad While calling facebox() on any anchor tag will do the trick, it's easier to give your Faceboxy links a rel="facebox" and hit them all onLoad. jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() }) Extra Classes You can give the facebox container an extra class (to fine-tune the display of reusable remote pages) with the facebox[.class] rel syntax. Maybe your Terms and Conditions can be loaded standalone or via Facebox. View an an example which makes the remote.html page bigger and bolder using css. The Code <a href="remote.html" rel="facebox[.bolder]">text</a> Arbitrary Text Remote files

3 Tools For Easier CSS3 “Transition Timing Functions” (Cubic-Bezier) One of the exciting features in CSS3: "transitions" come with a transition-timing-function which lets us to define an acceleration curve, so that the speed of the transition can vary over its duration. This is simply how we accomplish easing animations with pure CSS. If we want to use custom easing animations rather than the pre-defined ones like ease, linear, ease-in, ease-out or ease-in-out the cubic-bezier property, which enables us to define a cubic bezier curve to use as the easing function, reaches to our help. However, setting the cubic-bezier values can be challenging and a visual representation of the curve makes things much easier. Cubic-Bezier.com The application works with drag 'n' drops and/or keyboard shortcuts. By updating the curve, it auto-generates the cubic-bezier values. CSS cubic-bezier Builder A similar tool which enables creating the values for the curve with drag 'n' drops and also compare the custom one with the pre-defined values. Ceaser Other Tools

Related: