background preloader

Idea

Facebook Twitter

How to create Windows-8-like Animations with CSS3 and jQuery - Sara Soueidan. I have recently realized that CSS3 3D transforms have been out there for quite a long time now and yet I haven't experimented with them yet. I have also been using Windows 8 for a while now, and the first thing that struck me as impressive about it was the transitions and animations built into the dashboard, so I thought it would be really cool if my first experiment with CSS 3D transforms would be to recreate those animations and effects. So, here goes the tutorial on how I did that. Please note that this demo works only in browsers that support the CSS3 properties used.

For the sake of brevity in the example code, I am using the un-prefixed CSS properties, but you will find the prefixes in the downloadeable source code on Github. The Markup The demo's structure is pretty simple: The dashboard is a list of tiles, of three sizes, small, big, and 2xbig, floated inside 3 columns. Each tile will open up a corresponding page. Each page should also have a name.

The CSS The Javascript. Interactive SVG using CSS and JavaScript. Nyheder | liebling. Vi søger en udadvendt, erfaren og kompetent projektleder med flere års brancheerfaring inden for primært digitale løsninger. Det er vigtigt, at du har stor erfaring med både analoge og digitale løsninger, men fokus i jobbet vil være på det digitale. Det er derfor vigtigt, at du mestrer en webproces fra A-Z – lige fra analyse til den tekniske implementering og forstår at tale med både informationsarkitekten, designeren og udvikleren.

Vi forventer: At du har erfaring med at koble web med forretningsforståelse, men du savner måske større kundeansvar og mulighed for at opbygge din egen kundeportefølje. Hos os får du ansvar for egne kunders udvikling, og du kommer til at deltage aktivt i eksekveringen af vores ambitiøse vækstmål. Vi tilbyder: Et afvekslende job med både store og små analoge og digitale projekter. Send din digitale ansøgning med titlen ” digital projektleder” til hallo@liebling.dk. Vi vil gerne have din ansøgning hurtigst muligt og senest den 15. januar 2014. Please, feed the Cursor Monster. Organ. Techniques for Creating Motion in Web Design. Create a livelier page by using images and objects that create a sense of motion.

Get inspired by great web design examples and learn about some practical techniques. Everyone wants to create a page that is active and engaging and one of the best tools to achieve those goals is through motion. With a few great ideas and handy tips, a designer can create a great feel and sense of motion without any video or animation. This type of creative display can be just as active and engaging as video or animated design concepts. That’s not to say that video and animation aren’t great tools. Designers and developers often like still frames because they can load faster, are quick to look at and can be put together without sometimes expensive software or training. Creating motion will add life to a project and can be as simple as composition, placement of frames, color or editing and effects. Types of Motion Direction: Motion can be implied by direction.

Composition Placement of Frames or Objects Editing. Inner Shadows in CSS: Images, Text and Beyond. Shadows in CSS are quick and easy, whether you’re slapping on a box-shadow or a text-shadow. But how comfortable are you with inner shadows? Can you pull off an inset box-shadow? How do you do the same thing on some text? Today we’re going to learn some really simple inset shadow techniques that you can pull off with just a few lines of code. I’ll walk you through both the box-shadow and text-shadow syntax and how to change them to pull off an inset shadows. Shadow Syntax Before we jump into inset shadows, let’s look at the basic syntax for building the two different types of CSS shadows. Box-Shadow Box-shadows are probably the most common type of CSS shadows.

As you can see, listed above in order, the order of values is horizontal offset, vertical offset, blur radius, spread radius and color. The latter two values, blur radius and spread radius are a bit more complicated. As you can see, no blur radius produces a shadow with a hard edge and a high blur radius produces a blurry edge. What’s Hot in 2013: Our Picks. 2012 was a fantastic year for new technologies, products, and frameworks in our industry. That said, 2013 is looking to be even better! Recently, I asked our Nettuts+ writing staff to compile a list of the technologies that they'll be keeping a close eye on.

Now these aren't necessarily brand new, but we expect them to spike in popularity this year! Jeffrey Way's Picks Composer Composer is a tool for dependency management, similar to Bundler and NPM. Though it rapidly picked up steam last year, in 2013, I expect to see wide-spread adoption of Composer from the PHP community. Laravel 4 Laravel will be to the PHP community what Rails was to the Ruby world. Tuts+ Premium Further Learning D3 is a fantastic JavaScript-based data visualization library that allows you to bind data to the DOM, and then make transformations to the document. Brackets Brackets is an open-source code editor that takes HTML, CSS, and JavaScript to the extreme: it's built with those very technologies! CodeKit 2.0 Meteor Go. My Footprint / Slavery Footprint. Wordpress and D3.js | Anthony DiSpezio.

Last Chart! - See the Music. 404. Jank Busting for Better Rendering Performance. Introduction You want your web app to feel responsive and smooth when doing animations, transitions, and other small UI effects. Making sure these effects are jank-free can mean the difference between a "native" feel or a clunky, unpolished one. This is the first in a series of articles covering rendering performance optimization in the browser. To kick things off, we'll cover why smooth animation is difficult and what needs to happen to achieve it, as well as a few easy best practices.

Many of these ideas were originally presented in "Jank Busters," a talk Nat Duca and I gave at Google I/O talk (video, slides) this year. Introducing V-sync PC gamers might be familiar with this term, but it's uncommon on the web: what is v-sync? Consider your phone's display: it refreshes on a regular interval, usually (but not always!) To get a smooth animation you need a new frame to be ready every time a screen refresh happens.

Timing is Everything: requestAnimationFrame Frame Budget Other Source of Jank. Responsive CSS3 Side Navigation Menu. <h1>Slowly resize screen to see the width transition</h1><div class="nav-container"><ul class="nav"><li class="active"><a href="#"><span class="icon-home"></span><span class="text">home</span></a></li><li><a href="#"><span class="icon-user"></span><span class="text">about</span></a></li><li><a href="#"><span class="icon-headphones"></span><span class="text">Audio</span></a></li><li><a href="#"><span class="icon-picture"></span><span class="text">Portfolio</span></a></li><li><a href="#"><span class="icon-facetime-video"></span><span class="text">video</span></a></li></ul></div>

Exhibits. Fly in Newly Added Content to a Page. Animated CSS3 menu. Responsive Horizontal Layout. In this tutorial we'll create a horizontal website layout with individually scrollable content panels. We'll change the layout for smaller screens, making it responsive. View demo Download source Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

We will be using a couple of useful jQuery plugins: In the demo we are using Charles Darwin’s The Origin of Species by means of Natural Selection, 6th Edition which you can find as an e-book on Project Gutenberg. The Markup The HTML will be built up of a menu that will be fixed at the left side and a container with all the individual panels inside. Let’s style this thing. Annotation Overlay Effect with CSS3. Rotating Words with CSS Animations. Enhance Required Form Fields with CSS3. Fullscreen Slit Slider with jQuery and CSS3. A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide.

Using different data-attributes, we’ll define the type, rotation angle and scale of a slide’s parts, giving us the possibility to create unique effects of each slide transition. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Let’s start with the HTML. The Markup So, our first slide will have something like this: Now, let’s style it! Responsive CSS Timeline with 3D Effect. CSS Buttons. CSS Buttons Sascha Michael Trinkaus Pure CSS button widget, no images, just some unicode symbols.

Full HTML here: trinkaus.cc Related: &#x2606; &#x262F; &#x2666; &#x267A; <p>In this iteration, these buttons only use unicode symbols. .buttons { position: relative; white-space: nowrap; min-height: 33px; margin-bottom: 30px; top: 100px; margin-left: 50px } .buttons a { -webkit-animation: bounceInDown 900ms 200ms ease-in-out both; -moz-animation: bounceInDown 900ms 200ms ease-in-out both; -ms-animation: bounceInDown 900ms 200ms ease-in-out both; -o-animation: bounceInDown 900ms 200ms ease-in-out both; animation: bounceInDown 900ms 200ms ease-in-out both; width: 50px; height: 33px; position: absolute; top: 0; text-decoration: none; padding-top: 9px; outline-width: 0px; z-index: 990; color: #a675b3; WordPress Themes for $0.48 - 100% Satisfaction Guaranteed Or Your Money Back! CSS Buttons Widget by Sascha Michael Trinkaus. Quarter Round Mosaic | Flash MX open source. 10 Best Kept Secrets To Become More Creative By Boosting Your Brainpower.

Hey James, this week I am working on the most exciting project ever – I am designing a new website for one of the most popular radio stations. That was the last time I heard anything from my friend. Now he is spending a big chunk of his time going through a lot of legal actions and a local lawyer has become his best mate. Well, all just because my friend has been sued by a huge web design and development agency. He hoped to get away with getting inspired from a website this agency had created (more or less, he literally copied nearly half of the website, doh!). His excuse? After all, I did not hesitate to call him a fool! He failed in his life big time, only by avoiding small, yet important steps. If I were you, I would begin to worry right now, because you can fail too, just like my friend did! Listen! Everything You Put In Your Mouth Counts Image by Up Chuck Norris Surely you would agree with me if I said that no one really likes to be controlled, do You?

More likely you would say – No! 1. 2. 3. Sexy Music Album Overlays. Collapsing Site Navigation with jQuery. Portfolio Image Navigation with jQuery. « Previous Demo: Expanding Fullscreen Grid Portfolio Images by Angelo González back to the Codrops post Portfolio Image Navigation Up Down Previous Next. Lateral On-Scroll Sliding with jQuery. CSS Demo: Profile Popover | WebInterfaceLab. Circle Hover Effects with CSS Transitions. Swatch Book with CSS3 and jQuery. Direction-Aware Hover Effect with CSS3 and jQuery. Animated Responsive Image Grid. Calendario: A Flexible Calendar Plugin. A jQuery calendar plugin for creating flexible calendars. View demo Download source Today we want to share a flexible calendar concept with you.

Calendars can be a very tricky thing when it comes to their layout and responsiveness. This is an experiment for trying out some grid layouts that can be applied to calendars. We’ve created a jQuery plugin for the calendar itself and you can see some examples of how to use it in the demos. The aim is to provide a suitable layout for both, small and big screens and keeping the calendar structure fluid when possible. Please note that the demos will only work as intended in browsers that support the new CSS properties used here, especially calc(). The calendar designs are based on these two beauties found on Dribbble: For the calendar plugin to work, we simply need a container with the class “fc-calendar-container”: The plugin can be called like this: $( '#calendar' ).calendario(); The plugin will create a calendar with the following structure: Options. More Examples of Fresh Effects in Web Design. Another set of websites that use some unconventional and fresh effects.

If you want your web presence to stand out, creating a beautiful website is the first step to go. In order to make a visit to your website memorable and interesting you can add exciting and fun effects. Here is another collection of websites that do exactly that. If you are interested in more inspiration you can check out our previous collection Examples of Fresh Effects in Web Design. Layrr When you visit Layrr you get a superb scrolling experience. Contain.r Hover over the single project items after they fly in to see a fast-running slideshow. Faces of New York Fashion Week Here we have a great layout with a BW to color hover effect and dynamic loading of the images. Subsens Thierry Alexandre Schmitt makes navigating through his site a smooth “sliding” experience. Soleil Noir 2012 Soleil Noir Studio gives us another amazing scrolling experience with some thoughtful messages about believing… Air Jordan 2012 3Digital Colorz. Slopy Elements with CSS3. Filter Functionality with CSS3.

How to spice up your menu with CSS3. 3D Gallery with CSS3 and jQuery. CSS 3D Clouds. :nth-child tricks. Circle Navigation Effect with CSS3.