Codes and Scripts
3 Free To Use Great Tools For Web Designers
There are many tools out there for web designers, but getting by free and good ones is not that easy. That is why I am sharing 3 Free To Use Great Tools For Web Designers. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more tools for designers that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Instant WordPress
Instant WordPress is a complete standalone, portable WordPress development environment. It turns any Windows machine into a WordPress development server. It will even run from a USB key.
Compare Ninja
Compare Ninja is a very cool web application which allow you to create beautiful HTML & CSS comparison tables by using innovative and intuitive interface. You don’t need any prior knowledge to use Compare Ninja – it’s a simple code generator which you can Copy & Paste either into your Website or Blog.
GridCalc
GridCalc is a easy to use grid calculator. Just enter the desired width of your page and an approximate range for your column and gutter width and the calculator will give you all the possible combinations within the limits you entered. You get a nice visual representation of the results, click preview on a result and you get a better presentation of how the grid can be used. When you have decided which grid configuration you want to use you can download the configuration as a css file to use in your project.
Nine Excellent (Yet Free) Online Word Cloud Generators
There are many online word cloud generator out there for web users, but getting by free and good ones is not that easy. That is why I am sharing Nine Excellent (Yet Free) Online Word Cloud Generators. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more online word cloud generators that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Wordle
Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.
tagCloud generator
This can generate your tag clouds in html and flash online with just a few steps in downloadable form.
ImageChef
With tool, you can create a different styled and shaped word cloud and send to your friends etc as a post card.
ABCya
A word cloud is a graphical representation of word frequency. You can type or paste text into the box showing on their home page and press the arrow button to view the word cloud generated. The appearance of a word cloud can be altered using the graphical buttons above the cloud. It is also easy to save and/or print the cloud by simply pressing a button. This is specially designed for school kids.
Tagul
Tagul is designed for web masters who want to place nice clouds on their web pages. Tagul clouds have numerous advantages against ordinary text clouds like custom fonts, cloud shapes, colors, etc. and thus Tagul clouds have much fancier look. Tagul clouds are more entertaining for your web site visitors provide better user experience.
Word Cloud
ToCloud is an online free word cloud generator that uses word frequency as the weight. Hence, the generated word cloud of a page gives a quick understanding of how the page is optimized for certain words. ToCloud is also smart enough to extract phrases and works much better than most other word cloud generators on the web.
WordItOut
WordItOut lets you transform your text into word clouds. You can then save and share them, so everybody can find and enjoy them.
Tagxedo
Tagxedo turns words like famous speeches, news articles, slogans and themes, even your love letters into a visually stunning word cloud, words individually sized appropriately to highlight the frequencies of occurrence within the body of text.
TagCrowd
TagCrowd is a web application for visualizing word frequencies in any text by creating what is popularly known as a word cloud, text cloud or tag cloud. It specializes in making word clouds easy to read, analyze and compare, for a variety of useful purposes.
7 Excellent HTML5 Tools And Resources
There are many tools and resources out there for designers and developers, but getting by free and good ones is not that easy. That is why I am sharing 7 Excellent HTML5 Tools And Resources. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more html5 tools and resources that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Heartcode CanvasLoader Creator
The Heartcode CanvasLoader Creator is a free online tool which you can use to generate scripted preloaders (spinners or throbblers) for your HTML projects. The Creator is using the CanvasLoader UI Library.
Html5 File Upload with Progress
Html5 finally solves an age old problem of being able to upload files while also showing the upload progress.
Making a Beautiful HTML5 Portfolio
In this tutorial, you will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.
Create a Stylish Contact Form with HTML5 & CSS3
Here is a step by step process to create your own stylish contact form completely out of HTML5 and CSS3.
Periodic Table of the HTML5 Elements
The table here shows the 106 elements currently in the HTML5 working draft and two proposed elements.
Interactive Typography Effects with HTML5
This tutorial outlines what is really just the tip of the iceberg that is interactive design. It will go over the development of dynamic, and generative banners to give your website that little extra wow.
JavaScript Mobile Framework for HTML5 Web Apps
DHTMLX Touch is a free open source JavaScript library for building HTML5-based mobile web apps. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, robust web applications that run on iOS, Android, and other mobile platforms.
Nine Excellent Online Apps For Web Designers And Developers
There are many useful apps and tools out there for web developers, but getting by free and good ones is not that easy. Today, we are sharing Nine Excellent Online Apps For Web Designers And Developers. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more online apps for designers and developers that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
WhatFont Tool
WhatFont is a great tool, with which you can easily get font information about the text you are hovering on. To embrace the new web font era, WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.
Cssizer
Cssizer is a simple tool to let you edit the design of an html page in real time. You can then use the url you are given to share your design with others.
Clickable Mockups
Clickdummy is about communicating your designs better. ClickDummy turns your website, mobile and software mockups into clickable prototypes with room for annotation and feedback from your clients, friends, and co-workers. No more emailing .PDFs, trying to trace feedback through message threads, or worrying about putting Photoshop images into an HTML container. Clickdummy puts your designs and feedback in context.
CSS Pivot
This is a great website that can allow you to add CSS styles to any website, and share the result with a short link. You can also invite others to submit
improvements for your website.
Prefixr
This tool can automatically update CSS3 properties with the necessary browser prefixes.
Screenfly
Screenfly allows you to view your website on a variety of device screens and resolutions.
CoderDeck
CoderDeck can help you create interactive live-coding presentations.
Patternizer
Patternizer is an easy to use stripe pattern generator.
alphaPun.ch
alphaPun.ch will trace the opaque part of your PNG or GIF image. It will then punch through the alpha channel (i.e. the transparent bit), so you can click on things behind it.
7 Must-Have Web Apps For Designers And Developers Toolbox
There are many online tools and web applications out there, but getting by free and good ones is not that easy. Today, we are sharing 7 Must-Have Web Apps For Designers And Developers Toolbox. Read each entry in the list and see which one suits your needs best.
You are welcome if you want to share more online tools that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Golden Ratio
There are two scenarios the calculator is designed for. The first is that you have a column with a certain width (perhaps to achieve a nice word:line ratio). You wish to find a matching column. Type in the width and use the left side, which gives you both a smaller and larger column. The second scenario is that you have a container and wish to divide it in two. Type in the container width and use the right side measurements.
SpiderScribe
SpiderScribe is an online mind mapping and brainstorming tool. It lets you organize your ideas by connecting notes, files, calendar events, etc. in free-form maps. You can collaborate and share those maps online.
Profitably
Profitably helps you plan for the customers you want, measure how you’re performing, and then execute. It’s web-based software connects securely to business applications like Intuit’s QuickBooks to provide insight to the ~6M small businesses in North America. CFOs, bookkeepers, and business owners alike use Profitably to understand customer profitability, manage cash flow, and plan for future growth, all in real time.
Manifested
Manifested is a new utility for getting a jump start on converting your existing web site to work offline using HTML5′s cache manifest. Manifested scrapes a website for images, stylesheets, and JavaScripts that you may want to cache. Manifested then gives you a custom cache manifest file as a starting point for upgrading your website to support offline functionality.
repl.it
The repl.it project is an attempt to create an online environment for interactively exploring programming languages. It provides a fully-featured terminal emulator and code editor, powered by interpreter engines for more than 15 languages. All our interpreters are written in (or compiled to) JavaScript, and run completely on the user’s device, regardless or whether it’s a desktop, laptop or phone.
Subtle Patterns
Subtle Patterns is a collection of 93 high quality design patterns for you to use freely.
Timeslot
Timeslot makes planning your day a breeze. It simply add items to your day’s agenda, and specify how long each will take. Timeslot will automatically generate start and end times for each item, so when you have to make a change, your entire agenda will update to flow around it.
10 Free Android Apps To Boost Your Productivity With
Having a smartphone in your pocket has somewhat become a style statement, but apart from its appearance and style appeal, it allows you to perform all tasks that you would perform with your laptop or computer. This is the main reason of smartphone popularity.
For the designing fraternity, there are plentiful Android apps accessible on the internet. So, rather than wasting time in looking for the one you require, have a look at this collection of apps that we have composed here to permit web designers and developers discover the few useful apps they can magnify their productivity with.
View Web Source
With this app you can view the source code of any web page, copy and paste the HTML, select the text and search for it.
HTMLeditor
A simple HTML,ASP,JS and CSS editor for your coding on the road, use menu to >”save and view file” to preview.
Eval your Javascript Code
A simple tool which might be useful in checking with javascript while you commute, or doing some simple maths.
Design Snack Mobile
Design Snack is a featured-rich, interactive and socially-powered web design gallery. It’s web design inspiration, evolved.
AndFTP
AndFTP is a FTP, SFTP, SCP, FTPS client for Android devices. It allows managing several FTP servers. It comes with both a device file browser and a FTP file browser.
HTML Test
Test your skills of HTML with application developed by INTERSOG. Fast and easy. It is a must-have app for web developers, tech enthusiasts and those with a general interest in HTML.
Magic Color Picker
Magic Color Picker is an powerful color selection tool suitable for designers, artists and programmers for selecting colors using different color models.
Devcheats
Developer’s cheat sheets in your android tablet: php, python, ruby on rails, jquery, css, seo, apache, regular expressions, svn, bash, c++, drupal, gcc, gdb, html5, javascript, microformats, mysql, postgreesql, unix, wordpress
W3C Cheatsheet
The W3C Cheatsheet provides quick access to useful information from specifications (incl HTML5, CSS, SVG, XPath) published by W3C, the leading international Web standards community.
Firefox 4 Beta Mobile
Beta version available only for Android 2.0+ devices.
7 Excellent Online Tools For Designers And Alike
There are many apps available for designers out there, but getting by free and good ones is not that easy. Today, we are sharing 7 Great Online Tools For Designers And Alike. Read each entry in the list and see which design tool suits your needs best.
You are welcome if you want to share more design related tools that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.
Swiffy
Swiffy converts Flash SWF files to HTML5, allowing you to reuse Flash content on devices without a Flash player (such as iPhones and iPads). Swiffy currently supports a subset of SWF 8 and ActionScript 2.0, and the output works in all Webkit browsers such as Chrome and Mobile Safari.
Spur
Spur is a fun and easy way to critique web designs in ways you’ve never done before. Just paste a URL (or upload an image) and you’ll be able to use seven different tools to help you find what’s working.
Screenfly
Screenfly allows you to view your website on a variety of device screens and resolutions. It makes testing your online content, mobile designs, and responsive layouts a cinch. Choose common browsers, screen resolutions, and even mimic mobile phone and tablet devices.
Launch It Now
Launch It Now is an application for all the Startups & Enterprise companies who needs launching page at start of their online space, they help them build their launching page with just 6 steps saving their time and provide them over with different tools which can help them analyze their launching page performance.
Minify and GZip Compress JavaScript & CSS tool
With this simple tool, you can minify and gzip compress CSS & Javascript files in a single click.
DropMySite
DropMySite is a free service that lets you backup your website automatically easily. The free DropMySite account comes with 2GB of space that you can use for as long as you like.
Minible
While working with clients you might found the process of having to collect web copy for a specific website a pain. Minible was a simple idea that solves this issue. The site itself is designed to be used by everyone and is also created in a way to get a client used to using a content management system and the idea of inputting data and then saving this.
Extensive Collection Of Useful jQuery Plugins For Working With Tables
jQuery plugins are quite in these days in the field of web designing and are extensively used because of their aesthetically appealing results. Through jQuery tables plugins, you can attain the maximum results in terms of functionality and flexibility. The level of flexibility and functionality that jQuery provide cannot be met with classic HTML tables.
Here we are presenting a collection of exceptional and highly functional jQuery tables plugins that let you create user-friendly tables easily and efficiently. Enjoy!
( Demo | Download )
This jquery plugin is used to create a pagination element under a table element. You can customize your pagination needs through various settings.
( Demo | Download )
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell.
Animated Sortable Data Table jQuery plugin – jTPS
( Demo | Download )
jTPS is a datatable jQuery plugin that offers pagination, animated scrolling through pages and intelligent natural sorting capability. The development version is currently 15KB.
( Demo | Download )
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content.
( Demo | Download )
This plugin allows you to animatedly sort a table based on a column’s td’s, or on the content/value of a child/descendant element within those td’s. The various td’s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.
( Demo | Download )
HeatColor is a plugin that allows you to assign colors to elements, based on a value derived from that element. The derived value is compared to a range of values, either determined automatically or passed in, and the element is assigned a “heat” color based on its derived value’s position within the range.
( Demo | Download )
Jquery collapser is a multi purpose collapser plugin made for expanding and collapsing elements. Can create a accordion, list collapser using this plugin.
( Demo | Download )
jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.
( Demo | Download )
The treeTable plugin allows you to display a tree in a table, i.e. a directory structure or a nested list. Each branch in this tree can be collapsed and expanded, just like in a file explorer in most modern operating systems.
( Demo | Download )
This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list. Individual rows can be marked as non-draggable and/or non-droppable. Rows can have as many cells as necessary and the cells can contain form elements.
( Demo | Download )
With this useful plugin you can convert characters to tables using jQuery.
( Demo | Download )
With jQuery rowCount plugin you can automatically add table row count column to your tables.
( Demo | Download )
uiTableFilter is a jquery plugin for filtering table rows.
( Demo | Download )
Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.
( Demo | Download )
Take a plain html table, wrap the rows you want collapsing/expanding in a tbody with an id of treetable, map each row to it’s parent row, set some options, and let jQTreeTable take it from there.
( Demo | Download )
This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT).
( Demo | Download )
TableEditor provides flexible in place editing of HTML tables. User defined handler functions can easily be dropped in to, for example, update the data source via an AJAX request.
( Demo | Download )
A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!
( Demo | Download )
This plugin loads a CVS file (e.g. created using Excel) and creates a table with the contents in that CVS file.
( Demo | Download )
JSquared Enables ability to add/remove HTML table columns and rows.
( Demo | Download )
This plugin, applied to n-tables of an HTML page, provides the behaviour of resizing rows by clicking over a “image handler”.
( Demo | Download )
graphTable provides the ability to graph the data in a simple HTML table using flot.
( Demo | Download )
Grider is a plugin for jQuery that makes your life easier when you need to edit or create a table that handles a list of items. It helps you to do calculations in a very simple way, it supports the following features.
jQuery floating table header plugin
( Demo | Download )
A jQuery plugin that makes the header of a table floating if the original header isn’t visible due to scrolling. The plugin will automatically choose the thead tag as the header for a table. If thead isn’t found it will search for rows marked with the class ‘floating’. The behavior can be changed by the settings forceClass and markingClass.
( Demo | Download )
LiveFilter is a very lightweight jQuery plugin that will filter either an ordered or unordered list and display only the results that match the supplied string.
( Demo | Download )
TinySort will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children.
Using jQuery To Manipulate and Filter Data
( Demo | Download )
When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this tutorial, author will go over four techniques: hover effects, zebra rows, filtering, and sorting.
Creating a “Filterable” Portfolio with jQuery
( Demo | Download )
If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, you can learn how to make “filtering by category” a little more interesting with just a little bit of jQuery.
( Demo | Download )
List Reorder is a jQuery plugin that allows you to reorder any simple ordered or unordered list. List Reorder is easy to use and does not require any additional markup. Its look and feel is completely customizable using a set of CSS classes.
( Demo | Download )
Maybe you want to sort the columns ascending/descending by clicking into the table-head. No problem! Use a handle to drag the rows.
( Demo | Download )
FireScope Grid is an open source (GNU Public License, v2) jQuery component that adds datagrid behaviors to your HTML tables, regardless of the server-side technology being used. Included in the plugin is a navigation bar that is automatically appended at the beginning or end of a table that enables users to page through results, filter results by any column or sorted on the fly without need to refresh the entire page.
( Demo | Download )
FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.
( Demo | Download )
This jQuery plugin allow you to add on-the-flight cell editing functionality in your table You may configure it to perform AJAX queries and returning changed content or error messages.
pfSelect – click drag select for huge datasets
( Demo | Download )
This lightweight select plugin allows you to select elements easily by click-drag select, shift select or ctrl select within a huge dataset and without any speed decrease. It adds a mouseover event to each specified element (by default elements with class “selectable”) and doesn’t calculate any marquee rectangle as the Jquery UI plugin does. Therefore it has no performance issues with hundreds of elements. Use this plugin if you have tons of elements and you need fluid interactivity.
( Demo | Download )
jQuery Accessible RIA, a collection of strictly WAI WCAG 2.0 and WAI ARIA conform web applications based on the popular Java-Script framework jQuery (using the UI Widget Factory).
( Demo | Download )
KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. As a further bonus, KeyTable integrates seamlessly with DataTables.
( Demo | Download )
Zentable is a plug-in for the jQuery Javascript library. It allows to show and manipulate tabulated data on a web page but with functionalities typically expected from native applications, as scrolling with the mouse wheel, resizing column widths or using keys to move through the data. It can be used with or without AJAX, but is using AJAX where this plug-in really shines.
( Demo | Download )
The jquery-week-calendar plugin provides a simple and flexible way of including a weekly calendar in your application. It is built on top of jquery and jquery ui and is inspired by other online weekly calendars such as google calendar.
45+ Free Online Tools To Create Charts, Diagrams And Flowcharts
Charts and graphs are the best ways to represent information and relationship between two interlinked entities. Not only do charts and graphs inform visitors about the trend or relationship you want to show them but also add a visual connection with the visitors.
Several online tools are available that help you create comprehensively designed flowcharts and graphs that worth a thousands words. Check them out and let us know what you feel about these tools.
Create barchart online tool piechart graph without applet bar graph creation make a bar graph image for your report- create make save for free chart freechart data input chart
40 Useful CSS Tutorials, Techniques And Resources
We have previously posted many articles on CSS tutorials and resources you can learn CSS from. Today, again we come up with yet another great list of 40 CSS tutorials, techniques and resources that you will enjoy exploring. Every developer knows very well how important it is to learn and use CSS effectively. Therefore, tall the developers keep themselves updated with the latest development and advancement in the technology.
Below is the list of 40 useful CSS tutorials and resources you cannot afford to miss. We hope this broad list will train you something innovative, or moreover jog your memory and help you recall some methods you haven’t used for a while.
In this tutorial we are making something practical, a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.
Sleek Card Pockets using CSS Only
In this CSS3 tutorial, you’ll learn how to create web card pockets using some great new CSS3 techniques.
CSS Absolute Positioning: Create A Fancy Link Block
Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive.
Create a Button with Hover and Active States using CSS Sprites
Too many designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it or are plain lazy. It’s a simple effect that improves usability by giving the user some feedback as to what they’ve clicked on but can also add depth to a design.
How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this tutorial will will create a Sexy Vertical Sliding Panel Using jQuery And CSS3.
A one-pixel background image can be a pretty versatile thing. With repeat-x it can be a horizontal line, repeat-y makes a vertical line, and repeat makes it a fill color. Just as a little fun proof of concept, we can use that to create a depth-chart looking unordered list.
Pushing Your Buttons With Practical CSS3
Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.
Build Multi-level Multi-column Multi Menus with pure CSS
In this tutorial we will learn how to build multi-level multi-column multi Menus with pure CSS.
Elegant Drop Menu with CSS only
In this tutorial, you will see a simplest way to build a same effect by using CSS only. With some CSS make-up, your menu will be elegant. Not sure which one is easiest, but for sure it’s the simplest menu comes with drop effect: horizontal and vertical navigation.
HOW TO CREATE A BEAUTIFUL DROPDOWN BLOGROLL WITHOUT JAVASCRIPT
In this tutorial author is going to walk you through how he have set up the blogroll in our upcoming redesign. Load up the example page to see how our final product will look.
How to Build a Simple Button with CSS Image Sprites
Let’s take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!
CSS3 Hover Tabs without JavaScript
A quick tip on CSS3 Hover Tabs without JavaScript.
How To Use Pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins
In this article you will learn how to use pure CSS To Style Web Form Dynamically Plus 12 Awesome JavaScript Plugins.
In this tutorial author would like to go over how to create a simple navigation with a horizontal subnav.
In this tutorial you will learn how to create CSS3 Speech Bubble.
How to Create Nice Scalable CSS Based Breadcrumbs
In this tutorial author will teach you how to create nice scalable CSS Based Breadcrumbs. Author is using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code.
Creating a fluid search box when you only have a single element next to it is trivial. What you do is wrap the input in an element and use padding to create space for the fixed element, then position the fixed element absolutely (or relatively) in the space created by the padding.
Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. This means less headache and time spent working out alternatives for each browser.
6 Ways To Improve Your Web Typography
Typography on the web is anything but simple, and for many, it is a troubling mystery. In this tutorial we’re going to review six ways that web designers and developers can improve the typography of the sites they create.
Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!
3 Easy and Fast CSS Techniques for Faux Image Cropping
These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.
How to Create a Fancy Image Gallery with CSS3
Here author have prepared a tutorial about how to use CSS3 to make an image gallery with animation. He recommend to use one of these browsers to see the animations; however, the gallery is going to be usable in browsers without support of the animation.
Creating an Animated CSS3 Horizontal Menu
This tutorial shows us how powerful CSS3 can be and how we can save some JavaScript code to achieve the same result. As you know, right know the transition property is only supported by Safari and Chrome.
How to Create a Cool Anaglyphic Text Effect with CSS
Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.
How To Create Depth And Nice 3D Ribbons Only Using CSS3
In this tutorial you will learn How To Create Depth And Nice 3D Ribbons Only Using CSS3.
How To Create Simple, Stylish and Swappable Image Captions
In this tutorial you will learn How To Create Simple, Stylish and Swappable Image Captions.
Polaroid pictures (or fake ones anyway) can be created using Photoshop or a similar graphics package but author aim to create the same kind of look by using CSS.
In this tutorial author will show you how to slice up the menu design (step by step) and put them together with CSS.
CSS Techniques: Using Sliding Doors with WordPress Navigation
This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar.
This tutorial is really very helpful, very nice and useful tip on creating Mac’s Dock menu.
In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.
Coding Apple’s Navigation Bar Using CSS Sprites
This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.
CSS Sprite Navigation Tutorial
This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.
Breaking Out of the Box With CSS Layouts
It’s true that CSS is heavily reliant upon a grid — everything flows on x and y axes (and can be positioned as such, much like designs built in Photoshop). However, this doesn’t mean that your design has to be boring. If you understand how the grid works, you can fracture or abstract that grid to make your layout more dynamic and interesting.
The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
Minimal and Modern Layout: PSD to XHTML/CSS Conversion
In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.
Create YouTube-like adaptable view using CSS and jQuery
In this tutorial you will learn how to create YouTube-like adaptable view using CSS and jQuery.
How to distribute elements horizontally using CSS
In this tutorial we will learn how to distribute elements horizontally using CSS.
Sticky (Fixed) SideNav Layout with CSS
In this tutorial author would like to go over how to create a fixed sidenav layout for your blog or website.
Useful CSS Tricks You Should Know
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know.
11 Classic CSS Techniques Made Simple with CSS3
In this tutorial, author will show you eleven different time-consuming effects that can be achieved quite easily with CSS3.
