background preloader

Experimental Page Layout Inspired by Flipboard

Experimental Page Layout Inspired by Flipboard
An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard. View demo Download source Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. Please notice that this is very experimental and just a proof-of-concept. There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Some of the jQuery plugins we are using for this: The HTML is build up of a main wrapper with the class container and the ID flip. A great help for creating responsive layouts like these is this: Related:  CWR DPS

Design to the Power of Three: The Magically Ubiquitous Number Three is only a number, right? Just one of ten numerals that we use to express value, nothing more. Or is it perhaps a lot more? Is the number three a designer’s best friend? Does it drive art, photography, design, architecture and even the natural order of the universe? Join us as we take a look at some ways that designers leverage the number three, and more importantly, why you should keep the number three in mind whether you’re designing websites, print ads or even logos. Three In Design Three is a magic number. Take a look at TheBorsky.com and you can see the number three at work in multiple ways. Examples like this permeate the web. Not only does three divide pages into columns, it’s also used to split pages into rows. Three takes a step towards abstraction here as the content is split up into two rows. Three was guiding designers long before the web came around. image source: jbcurio Three In Photography and Art Think that three is limited to print and web design? Architecture So What?

The Environmental Impact Of Your Pointless Googling Backers of the Net have long pushed its environmental benefits. And it’s true that the Net has allowed us to use less energy by dematerializing many essential activities. For example, downloading an MP3 rather than buying a CD produces a lifecycle CO2 saving of 40% to 80%. Having said that, the Net’s environmental impact is not bupkis. Recently, campaigners have been sounding the alarm about the cloud-related expansion of data centers around the country, with some well-known companies accused of using less-than-clean energy sources to power them. This infographic by Wordstream points to both sides of the issue. If cars had increased in efficiency at the same rate as data centers, we’d have 400,000,000-MPG cars right now. But, on the other hand, pointless surfing does have consequences. As Megan Marrs, at WordStream, puts it: "Every time you procrastinate by Googling pictures of goofy cats or laughing babies, you’re slapping a tree in the face." Another reason to be productive, anyway.

Treesaver.js 20 Inspiring Examples of Big Backgrounds in Web Design One way to easily define the tone and mood of a website is to use a big background image. However, when doing this, you need to consider that big images often have a lot going on, so it’s important to take a minmal approach with other aspects of the design. Not doing so could result in a website that is far too busy, cluttered, and difficult to navigate. So for your inspiration, here are 20 examples of how to effectively use big background images in web design. Uber – Portfolio WordPress Theme Whitmans New York Studio Octopi Von Dutch Hiu Denim Co Casey Britt Range Rover Evoque The Amazing Spider-Man Suit up or Die Magazine H-Art My Own Bike Tim Roussilhe Tag Interativa Stephan Rizon Jalbert Productions International 8 Bis Mecenat Musical Marcus Thomas LLC Mendo Project Birdman The Best DesignsAwwwardsCSS Design Awards

Live DOM Viewer <!DOCTYPE html> ... DOM view (hide, refresh): DOCTYPE: htmlHTMLHEADTITLE#text: Test case#text: BODYFORM action="#"#text: INPUT name="var1"#text: #text: Rendered view: (hide): innerHTML view: (show, refresh): <! Log: (hide): rendering mode: CSS1Compat document.title: Test case This script puts a function w() into the global scope of the test page, where is a string or object to output to the log. Turn.js: The page flip effect in HTML5 35 Navigation Menus for Your Design Inspiration Navigation menus are an important part of any web design for usability purposes, but they can also serve to improve the look and feel of the website. When designing navigation menus there are any number of different approaches that you can take, and in this post we’ll show 35 examples of sites with attractive menus. These examples sites can serve as an excellent source of inspiration for your own projects, as every website needs a good navigation menu. Looking for hosting?

Conrad Kramer - Getting a Flask website up and running in Ubuntu This is a guide to get a Flask website up and running on Ubuntu 12.04 LTS using nginx and uWSGI. There are many routes to take when it comes to Python on the web; this just is my personal favorite. Some people enjoy configuring servers, while others view it as a chore. nginx To install nginx you first need to add the repository. deb http : //nginx.org/packages/ubuntu/ lucid nginx deb - src http : //nginx.org/packages/ubuntu/ lucid nginx You will also want to add the gpg key to the apt keyring: wget http : //nginx.org/keys/nginx_signing.key sudo apt - key add nginx_signing . key rm nginx_signing . key Finally, to install nginx, run: apt - get update apt - get install nginx uWSGI You can use pip to install the latest version of uWSGI by doing the following: sudo apt - get install python - dev build - essential python - pip sudo pip install uwsgi To configure uWSGI to run as a daemon, you first want to create a separate uwsgi user: and to prime the log file, you can run: virtualenv Flask Nginx

Publicaciones digitales : Hilo Felicidades por el magazine ! buen uso de la Adobe DPS y un producto final agil y atractivo. Por cierto una pregunta, las 2 animaciones (mario y corazón) son objetos multi-estados ? alternativas a la Adobe DPS no mencionadas: Woodwing Rovingbird Aquafadas &amp; Moi - App'Sport) De Mag+ comentar que me gusta mucho su concepto de capa superior que podemos desplazar a modo de scroll y la posibilidad de las páginas de tamaño extra (Smooth scrolling) en horizontal, que no había visto hasta ahora. De Woodwing, me gusta mucho Project y su concepto de covers animadas y por su puesto de cualquier magazine de woodwing una cosa tan sencilla como un pase de fotos con la posibilidad de ver ver ese pase a full screen solo con hacer click . Saludos Xavi

Business Solutions Responsive Site Template - Flashmint 4370 Business Solutions Responsive Site Template can be used for any mobile-friendly business website creation, and can be a pledge of your future success and popularity. Features included: Responsive layout Lightweight Grid 960 jQuery enhanced Responsive Slideshows Google Web Fonts CSS3 effects Built-in contact form Easy to use Google Maps SEO optimized Greatly-organized CSS Easy customizable Pages: Homepage Typography Sidebar Right Sidebar Left Both Sidebars Lists and tables Breadcrumbs Buttons and HR Projects 1 Column Projects 2 Column Projects 3 Column Projects 4 Column Projects + Sidebar Blog: Right Sidebar Left Sidebar Both Sidebars Contact Don't be shy to ask us for help in case if you don't understand anything or have some problems.

Why Postgres Part 2 - Craig Kerstiens This post is a list of many of the reasons to use Postgres, much this content as well as how to use these features will later be curated within PostgresGuide.com. If you need to get started check out Postgres.app for Mac, or get a Cloud instance at Heroku Postgres for free Last week I did a post on the many reasons to use Postgres. My goal with the post was two fold: Call out some of the historical arguments against it that don’t hold any moreHighlight some of the awesome but more unique features that are less commonly found in databases. Once I published the post it was clear and was immediately pointed out in the comments and on hacker news that I missed quite a few features that I’d mostly come to take for granted. Create Index Concurrently On most traditional databases when you create an index it holds a lock on the table while it creates the index. Transactional DDL Foreign Data Wrappers In fact you can even use Multicorn to allow you to write other foreign data wrappers in Python.

Related: