Skip to main content

Posts

Showing posts from September, 2015

Responsive Sidebar Navigation for Admin & Dashboard

An easy-to-integrate side, vertical navigation , ideal for dashboards and admin areas .Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today’s snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project ;) Creating the structure The HTML structure is composed by 2 main elements: a <header> element, containing the website logo, the search form, the navigation trigger ( .cd-nav-trigger – mobile version only) and the top navigation, and a <main> element containing the page main content ( div.content-wrapper ) and the sidebar navigation ( nav.cd-side-nav ). <header class="cd-main-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo">

Beautiful Creative Hover Link Effects for Website

Today I will share with you Creative Hover Link Effect tutorial with you.The idea is to use pseudo-elements and animate them to create a subtle and modern effect. In the examples we are using hover transitions, but you could also imagine these effects on click or as an initial animation. Please note that pseudo-element transitions don’t work in every browser. Best viewed in Chrome and Firefox. In most cases the HTML is simply a nav with some anchors: <nav class="cl-effect-13"> <a href="#">Beleaguer</a> <a href="#">Lassitude</a> <a href="#">Murmurous</a> <a href="#">Palimpsest</a> <a href="#">Assemblage</a> </nav> But for some special effects we might use a data attribute for repeating the link text in the pseudo-element: <nav class="cl-effect-11"> <a href="#" data-hover="Desultory">Desultory</a&

19 Modern Flat Preloader Set for website

12 Modern Flat preloaders you love so much! Unique and individual, they will be able to improve your App of Website user experience.Preloaders were made using trendy flat colors, so they will perfectly fit any modern interface. Every animation presented in 3 size: 32x32, 64x64, 128x128. Also in the package you will find AEP files, so you can modify, scale and change colors of preloaders as you want using Adobe After Effects (CS6, CC). Format: GIF , AEP . Modern Flat Preloader Demo 1 Angus Bill Forrest Randi Frederic John Gordon Sadi Leonardo Marty Nicoals Zooey Modern Flat Preloader 2 Today we are really happy to share a set of creative activity indicators by PixelBuddha with you! You may have seen the first set of the Flat Preloaders that consisted of round style colorful activity indicators. The set was so well received and today we’re very glad to offer you an exclusive freebie on Codrops — the second part of the preloaders collection, and this time in square s

UXPin UX Design Platform for Web,Apps,Mockup Developer

UXPin is the UX Design Platform.Thoughtful content on mobile & web prototyping, wireframing, mockups,usability testing, project management, design process & more.With UXPin the possibilities are endless.Fully interactive and animated prototypes indistinguishable from final products, sketchy wireframes, full blown documentations... - UXPin makes every part of the process extremely easy. Yes. You can build everything. Design work has never been easier. Welcome to the world of UXPin. Here is the Demo Website which I have build with UXPin.You can build any professional website,mockups,Apps etc.. UXPin Features Everything you ever wanted in a UX Design Platform Manage your entire UX design process within UXPin, even if you use Sketch or Photoshop.Always work with your layered design files — not flat files. Wireframe any user interface quickly and easily Choose from hundreds of UI elements & patterns for web, iPhone, Android, and more. With simple drag-and-drop, add any icons,

Floating Facebook Like Box Widget For Your Website

Add a floating facebook like box to your blog or website. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.This widget will help you to get more likes. Add a floating facebook like box to your blog or website. The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery. Add Widget to your website Follow these steps to Add this widget. Go to Blogger Take Backup of your Blog Template Edit template Search for </body> Just Before </body> Paste following Code.. <!--Floating Facebook Widget by www.teezbuy.com --> <script type='text/javascript'> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".vktechzone").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-2