background preloader

Webtype

Webtype

How to Mimic the iGoogle Interface Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+. In this tutorial, I'll show you how to create a customizable interface with widgets. The finished product will be a sleek and unobtrusively coded iGoogle-like interface, which has plenty of potential applications! First, let's list exactly what we'll be creating here and what features it'll have: This interface will contain several widgets.Each widget can be collapsed, removed and edited.The widgets can be sorted into the three seperate columns by the user (using a drag and drop technique).The user will be able to edit the color and title of each widget.Each widget can contain any amount of regular HTML content, text, images, flash etc. Please note that we will only be covering the front-end aspect of the project in this tutorial. Since it's all about the user and because the idea was influenced by iGoogle we're going to be calling this project 'iNettuts'. First column: inettuts.js:

Introducing the Google Font API & Google Font Directory Today we are excited to announce a collection of high quality open source web fonts in the Google Font Directory, and the Google Font API to make them available to everybody on the web. For a long time, the web has lagged print and even other electronic media in typographic sophistication. To enjoy the visual richness of diverse fonts, webmasters have resorted to workarounds such as baking text into images. Thanks to browser support for web fonts, this is rapidly changing. Web fonts, enabled by the CSS3 @font-face standard, are hosted in the cloud and sent to browsers as needed. Google has been working with a number of talented font designers to produce a varied collection of high quality open source fonts for the Google Font Directory. The Google Font API provides a simple, cross-browser method for using any font in the Google Font Directory on your web page. Getting started using the Google Font API is easy. The Google Font API hides a lot of complexity behind the scenes.

Most Popular Web Design Blogs to Get Inspired | designPunx Sharebar 0EmailShare So here we are with our first post, and we are really excited! What made us launch a new web design blog when there is such a great amount of others, already cool and reputable? Because we feel that there is something special we can put in the contemporary web design community. We believe that our original approach to the issues and fresh ideas may be useful for developers of various experience levels, and that is why we are welcome you to support us in our initiatives and estimate our endeavours! Of course, we drew some inspiration from popular web design blogs and we are greatful for a marvellous job all webmasters do. 1. Guys who launched Webdesigner Depot are true design-lovers who stick to best techniques and examples. 2. Really smashing! 3. Noupe is for those web designers and developers who crave for the best content and latest news concerning all topics related to web design, e.g. graphics, design trends and techniques, and much more. 4. 5. 6. 7. 8. 9. 10.

20 Fresh High Quality Free Fonts - Smashing Magazine Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to. In this selection we’re glad to present you Kilogram, Adelle, Ayita Pro, Hattori Hanzo Typeface, Andron, Tertre, Luxi Sans, Sapir, Otari and a couple of other high-quality free fonts. 20 Fresh High Quality Free Fonts Link Kilogram5A very bold, striking and unique font which may perfectly serve for headlines. Luxi Sans8A very clean and legible sans-serif font that can be used for headings and body copy. Otari Bold Limited10 (Registration is required)Otari is vibrant and contemporary, but serious and built to last. Museo Slab 500 and 500 Italic12 (Registration is required, PDF Specimen13)Museo Slab is robust slab serif which comes in 12 styles. Andron20 (Private use only!)

blog » Hexbins! Binning is a general term for grouping a dataset of N values into less than N discrete groups. These groups/bins may be spatial, temporal, or otherwise attribute-based. In this post I’m only talking about spatial (long-lat) and 2-dimensional attribute-based (scatterplot) bins. If you’re just after that sweet honey that is my code, bear down on my Github repository for this project — hexbin-js. Rectangular binning The simplest 2D bin is rectangular. The above is a shot from a little example I produced on jsFiddle, while learning Mike Bostock’s fantastic D3 JavaScript library for HTML and SVG data-binding and visualization. Binning can be good for both the users and the creators/developers of static or interactive thematic maps or other visualizations. In the above image (from Antaeus Concepts) the data points are represented in black, and due to overlap the true concentration/density distribution is indiscernible from the graphic. Hexagonal binning Adler writes, Hex history and theory

30 Free Fonts For Creative Projects Guest Post by Fonts2U We all know picking the right font is important when working on your creative projects. There are so many fonts out there, and it litarally may take hours until we find the ONE. To save you some time, here is a collection of 30 quality fonts hand-picked by Fonts2U. Enjoy! PT Banana Split Allstar Regular Offensive Bold Spranq eco sans Dekers Bold SF Orson Casual Heavy Champagne & Limousines Malgecito Cyclo Arkitech Diavlo Book Faith Collapsing Delicious Heavy Aerovias Brasil NF Arista SF Buttacup Lettering Yanone Kaffeesatz Bold Saunder Curvic karabinE UglyQua Requiem CurlyJoe Yelly Decker Sansumi Bold Santana Bold

Tangle: a JavaScript library for reactive documents Tangle is a JavaScript library for creating reactive documents. Your readers can interactively explore possibilities, play with parameters, and see the document update immediately. Tangle is super-simple and easy to learn. This is a simple reactive document. When you eat 3 drag cookies, you consume 150 calories. This is the HTML for that example. When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>. And this is the JavaScript. Write your document with HTML and CSS, as you normally would. Try out some examples. Proposition 21: Vehicle License Fee for State Parks The way it is now: California has 278 state parks, including state beaches and historic parks. What Prop 21 would do: Proposes to charge car owners an extra $18 on their annual registration bill, to go into the state park fund. Analysis: Suppose that an extra $18 was charged to 100 % of California taxpayersvehicle registrations. Fc = 2 KHz Q = 0.8 Unstable

22 Fresh High-Quality Fonts for Your Designs Whether it’s textures, Photoshop brushes, or icons, we love finding top notch free files and sharing them with our readers. We try to post at least one collection of freebies every week. We do the searching so you don’t have to. This saves you time and helps you focus on what’s important. This week, we are bringing you more high-quality fonts that have been created in just the past few months. Raleway Orbitron Public Gothic Juice Sonrisa Thin Prociono Palm of Buddha Metal Hunstrüct PT Sans Museo Slab Playtime Sylar Stencil DejaRip Orial Kain Block Otari Nautik A_B_ Stochome Modular Aldo Open Sans Serious Kilogram About the Author Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. Related Posts 892 shares 10 Best New Free Fonts We’ve been on the prowl for some new free fonts to share with you. Read More 1136 shares 9 Free & Useful Fonts for your Designs Whether it’s PSD’s or icons, we love finding high quality free files and sharing them with our readers.

jQuery Timelinr ↩ CSSLab Dando vida al tiempo / Giving life to time Selecciona tu idioma / Select your language: This simple plugin helps you to give more life to the boring timelines. Supports horizontal and vertical layouts, and you can specify parameters for most attributes: speed, transparency, etc. Last stable version: 0.9.6 Configuration: Include the jQuery library and this plugin: Inicialize-it with the default parameters: $(function(){ $().timelinr();}); Or configure it as preferred: HTML markup must be as follows: <div id="timeline"><ul id="dates"><li><a href="#">date1</a></li><li><a href="#">date2</a></li></ul><ul id="issues"><li id="date1"><p>Lorem ipsum. Icon designed by Sebastián Cortés Changelog: Este sencillo plugin ayuda a que le des más vida y estilo a las aburridas líneas de tiempo. Última versión estable: 0.9.6 Configuración: Incluye la librería jQuery y luego este plugin: Inicialízalo con los parámetros por defecto: O customízalos: El marcado HTML debe ser de la siguiente forma: Cambios: Demo Horizontal

25 New High Quality Free Fonts - Smashing Magazine Advertisement Every now and again we take a look around, select “fresh” high-quality free fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually the time you should be investing in your current projects. We search for them and we find them, so you don’t have to. In this selection we’re glad to present you PT Sans, FF Celeste Sans Offc Black, Secca STD, Cantarell and many other regular and experimental high-quality free fonts. You may also want to take a look at our previous typography-related posts: 20 New High Quality Free Fonts1In this previous “free fonts” edition we present Madawaska ExtraLight, Apparatus SIL, League Gothic, Contra and many other high-quality free fonts.40+ Excellent Freefonts For Professional Design2The price of good fonts usually reflects their quality and starts at 50$ per typeface. New High Quality Free Fonts tribbon ‘Layered’ font12This layered ‘ribbon’ style font was created by Dominic Le-Hair.

22 Useful HTML5 CSS3 Form Tutorials Using HTML5 and CSS3 you can create creative web forms with great specifications. So in this roundup we are featuring 22 CSS3 form tutorials. Slick login form with HTML5 & CSS3 HTML5 & CSS3 envelope contact form Build a Neat HTML5 Powered Contact Form Create a Stylish Contact Form with HTML5 & CSS3 Fun with HTML5 Forms Design a Prettier Web Form with CSS 3 Create A Clean and Stylish CSS3 Contact Form Create a Slick CSS3 Login Form NO IMAGES ALLOWED Fancy Forms: HTML5 + CSS3 – JS How to Create A Multi-Step Signup Form With CSS3 and jQuery Glowform CSS3 Image-less Glowing Form Tech A jQuery & CSS3 Drop-Down Menu With Integrated Forms How to Create a Contact Form using HTML5, CSS3 and PHP Carbon Fiber Signup Form With PHP, jQuery and CSS3 Designing Modern Web Forms with HTML 5 and CSS3 HTML5/CSS3 Contact Form Tutorial Beautiful CSS3 Search Form Clean and Stylish CSS3 Form How To Create A HTML5 Contact Form How To Create An Ajax-Based HTML5/CSS3 Contact Form Free slick css form

15 Creative Website Designs For Inspiration Oct112011 Internet has lots of inspiration in it, whenever you open your browser and type a URL, you are taken to a new world of inspiration, these website designs says lots of things if you could able to understand these. A website structure always be a key feature to attract visitors, as first impression is the last impression. These website has clean and beautiful design with great color combinations – some of these website are using JQuery for making them more responsive and attractive. Did you enjoy this article? About the Author: Amit Tripathi A Computer Applications Geek, hooked on all things pertaining to Web Development & Design, intent on delivering you the best in Web content to simplify your Blogging Experience.

Related: