One of the things we thought might be nice to change is the search input. We’ve put it from the sidebar into the header and we use a common effect where you have to click to expand the input. We have received many requests on explaining how we did it and today we’d like to show you how to create a search input like that from scratch. The aim is to maximize compatibility for mobile devices and older browsers (down to IE8). Although this might seem like a super-easy thing, we’ll have to apply some tricks in order to make it work properly.
Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo
Flexy Menu : jQuery Responsive Horizontal & Vertical Menu with CSS3
Flexy is a menu component based in CSS and Javascript code. You can use Flex Menu it as a horizontal or vertical menu. It is a responsive and collapsible menu, suitable for any type of website.
Features:
- Responsive layout
- Horizontal and Vertical
- 8 Styles
- Javascript/CSS effects
- Collapsible
- Major browsers compatible
Creating Swipeable Side Menu in jQuery
Today, I will be sharing an experiment to replicate the behavior of the side menu, similar to what you’ve seen on smartphone applications, but this tutorial is for the web. I will take you through each step from structuring your layout and adding swipe gestures to open/close the menu, usable on both desktop and smartphones.
Nifty Modal Window Effects with CSS3 & JavaScript
Today we want to share some ideas for modal window effects with you. There are infinite possibilities for transitioning the appearance of a dialog box and we wanted to provide some ideas of how to show dialog boxes and provide some inspiration.
The idea is to have a trigger button (or any element) which will make a modal window appear on click using a simple transition (or animation).
jQuery Horizontal Gridfolio Pro
Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.
Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.
Features:
- Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
- Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
- Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
- Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).
Horizontal Portfolio Layout with CSS3 Animations & jQuery
In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.
I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.
Simple Vertical Menu with jQuery and CSS3
In this tutorial I`m going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.
Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!
Caption Hover Effects with CSS3 & JS
Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.
