10 CSS Rules Every Web Designer Should Know Through experience as web designers we memorise all kinds of code syntax, hacks and snippets. With CSS in particular there is a number of rules and declarations that can really help transform your website designs and open up new possibilities when compared to older techniques. This post rounds up 10 declarations and tips that every web designer should have available in their CSS arsenal. @media screen and (max-width: 960px) { } The @media rule not only allows you to specify styling for your web page when printed. These days media queries are more associated with the creation of responsive or adaptive website designs. A cool and extremely useful CSS3 property that has now gained thorough browser support is background-size. One CSS3 property that has really helped transform the web over recent years is @font-face. The clever margin: 0 auto; declaration is one of the first snippets you learn when getting to grips with CSS.
jQuery for Designers - Tutorials and screencasts Code Snippets - Snipplr Social Snippet Repository jQuery Easing Plugin Description A jQuery plugin from GSGD to give advanced easing options. Please note, the easing function names changed in version 1.2. Please also note, you shouldn't really be hotlinking the script from this site, if you're after a CDN version you could do worse than try cdnjs.com Download Download the following: Example Click on any of the yellow headers to see the default easing method in action (I've set as easeOutBounce for the demo, just because it's obviously different). Select easing types for the demo first one for down, second one for up. The Clicker Updates 12/11/07 1.3 jQuery easing now supports a default easing mode. 04/10/07 1.2 Updated to include all methods from Robert Penners easing equations. 28/06/07 1.1.1 Updated the method to not overwrite the newly renamed 'swing', or the new 'linear' style coming in 1.1.3. 22/06/07 Rewritten the above to include callback syntax, nothing else has changed. Advertisements Need reliable hosting for your blog? Credits Donate Usage Default Custom
51 Form Element Resources and Tutorials Using CSS And Javascript I featured many good looking contact forms some time ago – 91 Trendy Contact And Web Forms For Creative Inspiration, so you should know how looks good example. Now let’s take a look how to create outstanding and beautifully designed form elements from scratch ourselves. Things can get tricky even if you are experienced designer. It’s hard to attract visitors attention, but this article should help to stand out and create semantically correct, good looking and accessible web forms, checkboxes, radio buttons, buttons, fieldsets – everything you can think of when you are creating contact or login page! 1. How create good looking form without table This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. View demo & source 2. Very well explained tutorial showing crucial points you should give attention to. View demo & source 3. View demo & source 4. View demo & source 5. View demo & source 6. View demo & source 7.
jQuery: The Write Less, Do More, JavaScript Library 15 sites web developers and designers should know Creating a good website isn't an easy task, but there's a few tools that can definitely make your developer or designer life easier. In this article, I have compiled 15 extremely useful website that any web developer or web designer should have bookmarked. ColorCombos When designing a website, one of the firsts (and most important) steps of the process is to choose a color scheme. Color Combos allow you to browse thousand of different colors combinations for getting inspired for your upcomming design. LIpsum Who doesn’t know the extremely popular Lorem Ipsum text? What the font? You just saw a logo or website using a particular font and you enjoyed it. ConvertIcon Favicons are a must have for any website, mostly because on modern browsers as such as Firefox, it is displayed along with the site name in tabs. BgPatterns background Patterns is definitely one of the current webdesign trends. HTML Encoder Do you display code on your website? Test Everything Sprite Generator Load Impact IconFinder
InnerFade with jquery What is it? InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out. These elements could be anything you want, e.g. images, list-items, divs. The call Examples A newsticker (with animationtype: 'slide') <ul id="news"><li><a href="#n1">1 Lorem ipsum dolor</a></li><li><a href="#n2">2 Sit amet, consectetuer</a></li><li><a href="#n3">3 Sdipiscing elit,</a></li><li><a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a></li><li><a href="#n5">5 Nec Lorem. A list with images and links Elements with classes <div class="fade"><p> 1 </p><p> 2 </p><p> 3 </p><p> 4 </p><p> 5 </p><p> 6 </p><p> 7 </p><p> 8 </p><p> 9 </p><p> 10 </p></div><div class="fade"><p> A </p><p> B </p><p> C </p><p> D </p><p> E </p><p> F </p><p> G </p><p> H </p><p> I </p><p> J </p><p> K </p><p> L </p><p> M </p><p> N </p><p> O </p><p> P </p><p> Q </p><p> R </p><p> S </p><p> T </p><p> U </p><p> V </p><p> W </p><p> X </p><p> Y </p><p> Z </p></div> Download
Adding Custom Google Maps to Your Website | Stiern Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how. Before we start, check out what we are going to create: Now, here is an overview: Overview Google Maps API The Google Maps API allows you to embed maps directly into your website. Getting the Coordinates As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you enter this in your address bar, you will see this: The coordinates of Apple's head quarter in Cupertino The first number is the status code, and 200 means that everything is okay. Adding the Map to Your Website There’s no need to hesitate – let’s add that map to your website! After the URL, you will notice sensor=false. Write Adding Markers