background preloader

Tab Styles Inspiration

Tab Styles Inspiration
A couple of modern and subtle tab styles and effects for your inspiration. We use pseudo-elements, SVGs and CSS transitions for some of the techniques. View demo Download source Today we’d like to share a couple of tab styles with you. For the demo we’ve used a flexbox layout so make sure you view it with a modern browser. The icons in most of the tabs are from the fantastic Elegant Themes Line Icon Set and we’ve used the Icomoon app to create our custom icon font. For the tab functionality we’ve used the Blueprint Responsive Full Width Tabs and adjusted it for our needs. The main common tab style for all tabs can be found in tabs.css and all individual styles are in tabstyles.css Take a look at some of the examples: There are a couple of example media queries and fallbacks that can be customized. We hope you enjoy these styles and get inspired :) Related:  HTML - CSS - PHPJavascript librariesEffekte

PFold: Paper-Like Unfolding Effect A highly experimental jQuery plugin that let's you unfold elements to reveal more content just like on a piece of paper. Unfolding directions and number of steps can be specified. View demo Download source PFold is a very experimental jQuery plugin that makes it possible to open elements in a paper-like unfolding effect. A couple of options are available, such as the unfolding direction for each step and the number of folding steps. For browsers that don’t support CSS 3D transforms or transitions, there will be a simple fallback, i.e. the larger content appears. For using the plugin, the following structure is expected: The final content’s size will depend on the initial content’s size (set in the CSS), the folding directions and the number of folding steps. The plugin can be called like this: $( '#uc-container' ).pfold(); Options The following options are available: Check out the three demos with different configurations:

Off-Canvas Menu Effects Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations. View demo Download source Today we’d like to share a couple of styles and effects for off-canvas menus. The off-canvas sidebar is widely used and we have already created some effect inspiration before. Like with everything, style evolves and today we want to show a new set of modern effects for your inspiration. We use CSS transitions, CSS animations created with bounce.js and animated SVGs with the help of Snap.svg. Please note that the effects serve as inspiration and will work (best) in modern browsers. Let’s take a look at some of the styles. This first demo is inspired by the Dribbble shot Old Designspiration Menu Concept One by Michael Martinho. The idea behind the corner box effect is to translate an off-canvas box into the viewport while moving the content to the opposite corner, too, creating a window-like effect. This demo is using Snap.svg for animating SVG paths.

Creative Button Styles Some creative and modern button styles and effects for your inspiration. View demo Download source Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. The icons, which we add using the :before (and sometimes :after) pseudo-class, are from IcoMoon and we’ve created them with the IcoMoon app. Please note: this only works as intended in browsers that support the respective CSS properties. The markup of a button is really simple. <button class="btn btn-6 btn-6d">Button</button> The common styles for all the buttons are some resets defined in .btn and we use the specific numbered classes for the different sets of styles. An example for a specific button style is the following: Which will of course depend on what we define as a common style in .btn and .btn-6. This class structure is used for demo purposes.

Arrow Navigation Styles Some inspiration for arrow navigation styles and hover effects using SVG icons for the arrows, and CSS transitions and animations for the effects. View demo Download source Today we’d like to share some inspiration for arrow navigation styles with you. There are so many creative ways of showing those little elements that are an essential part of many websites nowadays. You can find them in content slideshows, as part of the page navigation, in image galleries and many more. These indicators are mostly represented as arrows that point to the left and right. These effects are for your inspiration. The images used in the demo are by Joanna Kustra, Idleformat and Andrey Yakovlev & Lili Aleeva. One of the effects, the Slit effect, is inspired by the cool effect from Jam3’s work navigation. An example for one of the style is the following: The arrows are SVGs which we include using the technique described by Oleg Solomka in his article SVG Icons FTW. The CSS is the following for this example:

Animated Background Headers A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers. View demo Download source Today we’d like to share some animated header backgrounds for your inspiration. This collection uses JavaScript and Canvas to create various header animations. an animation loop using requestAnimationFrameshapes (circles, triangles, lines) that are being modified to create different effects Demo 1 follows mouse movement on non-touch devices. When working with animated website headers, there are a couple of performance issues to keep in mind: Take a look at the four different header backgrounds: The image in demo 1 is by ESO and it was taken by the Visible and Infrared Survey Telescope for Astronomy (VISTA). We really hope you enjoy these examples and feel inspired to create some animated Canvas effects soon :)

Slide and Push Menus Fixed menus that will slide out from the sides of the page and in case of the right and left side optionally move the body. View demo Download source A set of fixed menus that will slide out from any of the edges of the page. The two menus that slide out from the left and right side can also be used in combination with the body moving to the left or right side, respectively, hence being “pushed”. There are examples of how to trigger the opening and closing of the menus and some example media queries. The HTML The CSS Note: Classie is being used here – class helper functions by @desandro. Ideas for Subtle Hover Effects Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements. View demo Download source It’s time for some fresh hover effect inspiration! Nowadays we are seeing a lot of delicate designs with fine lines, lots of white space, clean typography and subtle effects. With that beautiful trend in mind we want to share some creative ideas for grid item hover effects. The techniques we are using for these hover effects involve 3D transforms and some pseudo-element transitions. Sadly, transitions on text in Firefox are not very smooth which influences most of the effects. The beautiful photography is from Unsplash, a site that brings you 10 free hi-resolution photos every 10 days. This article was updated on 28 of October 2014 and we’ve added a second set of effects. For the structure we are simply using a grid with figures: With some general styles defined for the grid and its items, we then specify the individual effects.

Minimal Form Interface A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. View demo Download source Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. So, the idea is to show the user just one input field at a time, without any clutter or distractions, but only with elements that are helpful in indicating how much needs to be filled. Please note that we are using some modern CSS properties like pointer-events and animations which are not supported in older browsers. Initially, we don’t show the navigation arrow. The numbers in the bottom right tell the user how many questions there are in total and which question is the current one. The next question can be reached by clicking on the arrow icon or by hitting enter.

Simple Effects for Drop-Down Lists A jQuery plugin for transforming select inputs into drop-down lists with some simple expanding effects. View demo Download source Today we want to share some simple drop-down list effects with you. The idea is to transform a normal select input into something more appealing with a jQuery plugin. After the great custom drop-down list styles made by Hugo in his tutorial Custom Drop-Down List Styling, we wanted to make it simple to create a custom structure from a normal select input (without multiple option selection). Please note that the CSS transforms and transitions only work in browsers that support them. Without JavaScript, the normal select input will simply be shown. The icon font was created with IcoMoon. So, we start out with a select input, for example: A dropdown plugin can be applied as follows: $( '#cd-dropdown' ).dropdown(); The select and the options get transformed into the following structure: Options The following default options are available: Demos

Définition et résolution d'une photo : pourquoi il ne faut plus utiliser le 72 dpi ? Pour commencer une petite devinette ! Connaissez-vous la résolution de votre écran ? un indice se trouve dans le titre de cet article… Commencçons par deux notions de vocabulaire importantes : La définition d’une photoLa résolution d’une photo La définition d’une photo ou d’une image représente le nombre de pixels de cette photo ou dit autrement sa taille en pixels; par exemple le capteur du nouveau Canon 6D a une définition de 20,2 MPixels soit 5472 x 3648 pixels. La résolution d’une photo s’exprime elle en DPI (Dot per Inch ou Point par pouce où 1 pouce mesure 2,54 cm) et dépend donc de la taille/ résolution d’impression. Maintenant, revenons à nos moutons et répondons à la dévinette du titre : mon écran Quato mesure 21 pouces en diagonale et physiquement son plus grand côté mesure 42,3 cm pour 1600 pixels. On est très loin des sacro-saints 72 dpi !!! La résolution d’une image n’a aucune espèce d’importance pour son affichage sur un écran; seule sa définition importe.

slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:

Blueprint: On-Scroll Animated Header A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition. View demo Download source An animated header that will change its size on scroll. Once a certain amount of the page gets scrolled, the header will decrease its size and the inner elements will adjust their font-size/line height. There are example media queries for dealing with different screen sizes. The HTML <div class="cbp-af-header"><div class="cbp-af-inner"><h1>Fixed</h1><nav><a href="#">Broccoli</a><a href="#">Almonds</a><a href="#">Pears</a><a href="#">Oranges</a></nav></div></div> The CSS

Related: