Archive for June, 2012

Maintenance Window Tonight

In an ongoing effort to keep our systems up to date our datacenter techs will be performing regular maintenance present. They module glucinium installing…


Leave a comment

Employee training courses, UML – OOAD

Tweet Session 1 – Top Practices Identify symptoms of software development problems. Express the Best Practices. Present the Rational Unified Process (RUP) in the context of the Best Practices. Meeting 2 – Concept of OO Explain the principal principles of entity orientation Define the basic concepts and terms of object orientation and the associated UML […]


1 Comment

JavaScript Profiling With The Chrome Developer Tools


Your website works. Now let’s make it work faster. Website performance is about two things: how fast the page loads, and how in haste the code on it runs. Bags of services will form your website load faster, from minimizers to CDNs, but making it run quicker is up to you.

Slim changes within your code can enjoy gigantic performance impacts. A few lines present or there could tight the difference between a blazingly fast website and the fearsome “Unresponsive Script” duologue. This article shows you a few ways to find those lines of code with Chromium Developer Tools.

Establish A Baseline

We’ll deal a simple application named a color clerk, which presents a grid of rainbow colors that you can drag and drop to mix stirring. All fragment is a div tag with a little CSS to variety it look like a circle.

The Color Sorter

Generating my rainbow flag was a little delicate, so I got a little comfort from “Making Teasing Rainbows in JavaScript.”

The page loads pretty fast, but it still takes a moment and blinks a little since it paints. Time to profile the page and make it faster.

Always start performance-improvement projects with a baseline understanding of how fast OR slow your application already is. The baseline will let you know whether you’re making improvements and help you engineer tradeoffs. All for this article, we’ll use Chrome Creator Tools.

The profiler is part of Chrome Developer Tools, which is always available in Chromium. Click the “Tools” menu under the little pull to open it. Firebug has some profiling tools, too, but the WebKit browsers (Chrome and Safari) are best at profiling attitude and showing timelines. Cr also offers an excellent tool for event drawing, called Speed Tracer.

To establish our baseline, we’ll kick off recording within the “Timeline” tab, load our page and so stop the signal. (To start recording once Cr Developer Tools is open, click the “Timeline” bill, and then the small black hoop icon for “Record” at the hugely bottom of the window.) Chrome is smart about not starting to record until the page starts to load. I run it 3 times and take the average, in case my computer runs slowly during the first test.

Performance baseline 1

My average baseline — i.e. the time between the first petition for the folio and the final portray of the folio in the browser — is 1.25 seconds. That’s not bad, but it’s not great for such a small page.

I want to make my belief run faster, just I’m not secure what’s making it slow. The profiler helps me find out.

Create A Profile

The timeline tells us however long our opinion took to dash, but that doesn’t help America cognise what’s active on while it’s running. We could make changes and run the timeline again and once more, only that’s just actuation within the dark. The “Profiles” tab gives us a better road to seat what’s going on.

Profilers show us which functions purloin the most time. Let’s make our baseline profile by switching to the “Profiles” bill in Chrome Developer Tools, wherever three types of profiling are offered:

JavaScript C.P.U. chart
Shows how such CPU time our JavaScript is taking.
CSS selector profile
Shows how much CPU time is spent processing CSS selectors.
Heap snapshot
Shows how memory is being used by our JavaScript objects.

We want to make our JavaScript run faster, hence we’ll use the CPU profiling. We start the chart, refresh the leaf and then stop the profiler.

The first profile

The initial thing that’s clear from the profile is that a lot is going on. The color sorter uses jQuery and jQuery UI, which are doing a peck of stuff like managing plugins and parsing regular expressions. I can also see that two of my functions are at the top of the list: decimalToHex and makeColorSorter. These two functions pinch a total of 13.2% of my CPU time, so they’re a good place to start devising improvements.

We can click the arrow close to the function calls to open the complete function-call stack. Expanding them, I seat that decimalToHex is named from makeColorSorter, and makeColorSorter is called from $(text).ready.

Here’s the code:

$(text).ready(function() {
makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);

Knowing where they’re called from also makes clear that making the colors sortable isn’t my biggest performance problem. Performance issues resulting from the addition of a lot of sortables is common, but my code is taking more time to add DOM elements than to make them sortable.

I want to move into making those functions faster, but early I want to isolate my changes. A lot happens once the page loads, and I want to get all of that out of my profile.

Isolate The Problem

Instead of loading the color clerk when the document is primed, I’ll fashion a second version that waits until I press a button to load the color sorter. This isolates it from the document loading and helps me profile just the opinion. I can amendment it posterior once I’m done tuning performance.

Let’s call the unknown function testColorSorter and tether it to a clickable button:

operate testColorSorter() {
makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);

Click me

Changing the application before we profile could alter the performance of the application unexpectedly. This redeploy looks pretty safe, merely I still want to run the profiler again to seat if I’ve accidentally changed anything other. I’ll create this new profile by starting the profiler, pressing the lever in the app and then stopping the profile.

The second profile

The opening thing to notice is that the decimalToHex function is now taking up 4.23% of the clip to load; it’s what the code spends the maximum time on. Let’s create a new baseline to seat how much the code improves in that scenario.

The second baseline

A few events occur before I press the button, simply I solitary care about how long it took between the times the mouse was clicked and the browser painted the color sorter. The mouse button was clicked at 390 milliseconds, and the paint event happened at 726 milliseconds; 726 minus 390 equals my measure of 336 milliseconds. Just as with the front standard, I ran it three times and took the average time.

At this point, I know where to stare you bet yearlong the code takes to run. Present we’re ready to start fixing the nuisance.

Generate It Quicker

The profiler lonesome tells us which function is feat the hold-up, so we need to analyse it and understand what it does.

function decimalToHex(d) {
var hex = Number(d).toString(16);
hex = “00”.substr(0, 2 – hex.length) + hex;

console.wood(‘converting ‘ + d + ‘ to ‘ + hex);
return hex;

All dot in the color clerk takes a background color value in hex format, such as #86F01B or #2456FE. These values represent the red, green and blue values of the color. For standard, Blue dot has a background color of #2456FE, which means a red value of 36, a verdant value of 86 and a sapphire value of 254. All value must be between 0 and 255.

The decimalToHex function converts these RGB colors to hex colors that we can use on the page.

The function is pretty simple, but I’ve left a console.log message in in that, which is just several debugging code we can remove.

The decimalToHex function also adds padding to the beginning of the digit. This is important because some base-10 numbers result in a single hex digit; 12 in base 10 is C in hex, but CSS requires two digits. We have the ability to make the conversion faster by making it a little less generic. I know that the numbers to be padded each mortal cardinal figure, so we can rescript the function like this:

function decimalToHex(d) {
var hex = Number(d).toString(16);
return hex.length === 1 ? ‘0’ + hex : hex; }

Version three of the color sorter changes the string only once it needs the padding and doesn’t have to call substr. Enclosed new function, our runtime is 137 milliseconds. Via profiling the code again, I can seat that the decimalToHex function now takes only 0.04% of the whole time — putting it way down the list.

The third profile

We can also see that the manoeuvre using the most HARDWARE is e.extend.merge from jQuery. I’m not sure what that function does because the code is minimized. I could add the development edition of jQuery, but I can see that the function is getting called from makeColorSorter, so let’s make that one quicker next.

Lessen Contented Changes

The rainbow colors in the color sorter are generated from a sine wave. The belief looks At a middle point within the color spectrum and creates a wave through that midway point over a specified girth. This changes the flag into a rainbow pattern. We can also change the colors in the rainbow by dynamical the frequence of the red, green and blue.

function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3,
central, width, len) {

for (var i = 0; i < len; ++i)
var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + midway);
var blue = Math.flooring(Math.sin(frequency3 * i + phase3) * width + center);

console.log('red: ' + decimalToHex(red));
table.log('green: ' + decimalToHex(verdant));
table.log('blue: ' + decimalToHex(cobalt));

var div = $('');
div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));


We could embezzle out more table.log functions. The calls are particularly bad because all is also line the decimalToHex function, which means that decimalToHex is effectively being called extra often as it should.

This function changes the DOM a tidy sum. Each time the loop runs, it adds a new div to the colors div tag. This makes me wonder if that’s what the e.extend.integrate function was doing. The profiler makes it painless to tell with a simple experiment.

Or else of count a clean div each juncture the loop runs, I want to add all of the div tags at once. Let’s turn out a variable to hold them, and next add them once at the end.

function makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3,
center, width, len) {

var colors = “”;
for (var i = 0; i < len; ++i)
var red = Math.floor(Maths.sin(frequency1 * i + phase1) * size + center);
var green = Math.floor(Math.offence(frequency2 * i + phase2) * width + center);
var blue = Math.floor(Math.failing(frequency3 * i + phase3) * width + center);

colors += '';


This petite change in the standard means that the DOM changes once, when it adds all of the div tags. Testing that with the timeline, we see that the runtime between the click and the paint events is now 31 milliseconds. This one DOM change has brought the time for version four down by about 87%. We have the ability to also run the profiler again and see that the e.extend.merge function now takes uphill such a small percentage of the example that it doesn’t show up on the list.

We could fashion the code one notch faster with removing the decimalToHex activate totally. CSS supports RGB colors, so we don’t need to someone them to hex. Nowadays we have the ability to write our makeColorSorter drive like this:

activate makeColorSorter(frequency1, frequency2, frequency3,
phase1, phase2, phase3,
center, width, len) {

var colors = “”;
for (var i = 0; i < len; ++i)
var red = Maths.flooring(Math.sin(frequency1 * i + phase1) * width + center);
var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
var blue = Math.floor(Science.sin(frequency3 * i + phase3) * width + midway);

colors += '';


Version five runs within only 26 milliseconds and uses 18 lines of code for what used to take 28 lines.

JavaScript Profiling In Your Application

Real-world applications are much more multiplex than this color sorter, but profiling them follows the same basic steps:

Establish a baseline hence that you know wherever you’re starting from.
Insulate the catch from any other code running in the application.
Make it faster in a controlled environment, with frequent timelines and profiles.

There are a few various rules to chase when tuning performance:

Start with the slowest parts first so that you get the most improvement for the time spent tuning.
Power the environment. If you switch personal or make any other major changes, always run a current baseline.
Repeat the analysis to prevent anomalies on your computer from skewing the results.

Everyone wants their website to run faster. You’ve to develop foreign features, simply new features usually make a website run slower. So, investing juncture in tuning the performance does pay stale.

Profiling and tuning cut the final color sorter’s runtime by over 92%. How much quicker could your website be?

(al) (km)

© Zack Grossbart for Smashing Magazine, 2012.


Leave a comment

Powerful New CSS- and JavaScript Techniques


Since our end round-up of useful CSS techniques, we’ve seen a lot of genuinely remarkable CSS geekery out at hand. With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still within the “crazy experimentation” stage.

Since the release of the previous post, we’ve been collecting, operation, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Operation them right away or save them for impending reference.

Please note that many techniques are not only CSS-based, but as well use HTML5 and JavaScript. We’re going to present dexterous CSS tools and responsive design techniques in separate posts. Please don’t hesitate to comment on this post and let us know however exactly you are using them in your workflow. However, please go around link dropping; share your insight and experience instead, and feel free to link to techniques that really helped you recently. Thanks to every of the featured designers and developers for their fantastic work!

Array of Contents

CSS Transitions and Animations
Useful and Operable CSS Techniques
CSS Typography and Text Techniques
CSS Navigation Menus and Hesitate Effects
Visual Techniques Next to CSS

CSS Transitions And Animations

CSS transitions and animations are ofttimes wont to make the user experience a little more smooth and interesting, especially when it comes to interactive effects on hover or on click. Designers are experimenting with technology and create sometimes potty, sometimes practical—but often innovative techniques which you could use to make your websites just a small bit more engaging.

Interactive CSS3 lighting effects
An interesting effect to create interactive lighting effects with 3-D transforms, CSS gradients and masks; the cast shadow was created using box shadows and transforms.

Interactive CSS3 Lighting Effects

CSS3 dodecahedron
A fancy dodecahedron experiment, created using CSS Transforms and a tiny JavaScript snipping.

CSS3 Dodecahedron

CSS 3D Lighting Engine Photon
Our editor Tom Giannattasio has created a JavaScript library that adds simple lighting effects to DOM weather in 3D space using the WebKitCSSMatrix object. It would be great to have AN implementation all for other rendering engines As well.

CSS 3D Lighting Engine Photon

3D Thumbnail Hover Effects With CSS
This technique produces 3D thumbnail hover effects near CSS 3D transforms. The code is quite prolix and probably could Be optimized, but the effect is quite neat.

3D Thumbnail Hover Effects With CSS

Slide In Image Boxes
A technique for creating a “slide in” event for boxes against hover to make them a bit more interactive.

Slide In Image Boxes

CSS3 bitmap graphics
The bitmap graphics is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The pixels are drawn with CSS gradients, sized precisely to the pixel’s boundaries.

Pure CSS3 Bitmap Graphics

Paperfold CSS
A optical foldable upshot for hidden comments by Felix Niklas. The plugin takes a DOM element, slices it into parts and arranges them like a folded-up newspaper in 3-D space.

Paperfold CSS

Beercamp: An Experiment With CSS 3D
A CSS 3D popup pamphlet á metal Dr. Seuss. The website was a try-out to seat how far SVG and CSS 3D transforms could be short of. This is the article roughly it.

Beercamp: An Experiment With CSS 3D

Covers: A JS / CSS Experiment
Now, that’s quite experiment: what if we combined a music song, stylesheet and beat device to create animated… covers? Sure, we can cause it near CSS3 and JavaScript! Covers does precisely that. The result is interesting, what can you do beside this approach?

Covers: A JS / CSS Experiment

Animation on Apple’s page
Lav B. Audience explains the CSS animation on Apple’s Web page for the iPhone 4S.

An explanation of the CSS animation on Apple’s iPhone 4S webpage — John B. Hall

Experimental animations all for image transitions
A post nearly experimental 3-D dummy transitions that use CSS3 animations and jQuery. Merely CSS3 transforms are used.

Experimental CSS3 Animations for Image Transitions

Maintaining CSS style states using “infinite” transition delays
This demo allows you to move the traits around with the D-pad, and notice how it always keeps its position after you stop moving. This demo doesn’t use any JavaScript. The effect is made possible by using a virtually infinite transition delay, so that the CSS rules never return to their evasion state. The digit will be stuck in a transition and will move only once you keep back a button.

Maintaining CSS Style States using “Infinite” Transition Delays

CSS 3-D clouds
AN experiment within creating 3-D-like clouds next to CSS3 transforms and a bit of JavaScript.

CSS3D Clouds

Animated popover of profile box
A technique for an animated profile popover menu, improved using CSS transitions.

Animated Profile Popover With CSS

CSS3 scrolling effects
A library of various scrolling effects, such as curl, wave, flip, fly, inclined and helix, created with CSS3 and sometimes with JavaScript to zest the scrolling behavior.

CSS3 Scroll Effects

Spin those icons with CSS3
A simple technique for creating a neat effect that spins social icons with the help of a reform and transition when you hover over them. Via Tom Kenny.

Scrolling the Z Axis with CSS 3D Transforms
This article explains how to create the z-scroll effect step by step.

Effective and Practical CSS Techniques

CSS3 Family Tree
Display organizational data or a people tree using simply CSS, in need Second or JavaScript. The markup is very simple and uses just nested lists. Pseudo-elements are used to draw the connectors. It too has vibrate effects: hover over a parent element and the entire lineage will be stylized. Warrant to check Nicolas Gallagher’s Introduction to CSS Pseudo Feature Hacks.

CSS3 Family Tree

iOS-style gem
A simple method for iOS-style custom checkboxes and a subtle hover effect. The technique is a bit nutty but a good starting point in case you need it. Also, check an excerpt from Lea Verou’s talk on customized checkboxes and her article on parameter filtering based on specific soul(s) support.

iOS-style Popover

Timeline-Style Comments
Nicolas Gallagher developed a simple and clean technique to present comments in a timeline-alike overview.

Timeline-Style Comments

CSS Table Grid
Here’s a nice technique all for aligning columns in a table, edifice a “table grid system” of sorts. The idea is to apply classes to col elements within a table’s colgroup; you ever leave one notch without a class so that it remains fluid and can “soak up” the effects of any breakages elsewhere in the table.

CSS Table Grid

Confirmation Feedback Buttons
This piece explains however to create buttons that take on different states depending on the user’s interaction. This type of interaction is especially useful on links such as “Purchase” and “Delete” all for which it’s wise to confirm that the mortal so wants to take the specific action. It looks too much like an iTunes button, though.

A system in CSS3 and jQuery
A step by step tutorial on how to create a CSS3 calendar with some jQuery animation. Also, analyze David Bushell’s responsive system demo.

A clean calendar in CSS3 & jQuery : Finishing Touch

Outdenting properties for right CSS
Let’s assume you are experimenting near CSS or debugging code. You add properties to figure out how things fit both. How often do you bury to remove all of them? A simple technique for this is to dot a CSS property as a temporary or debugging property by outdenting it and putting it at column 0 within the file. A small trick that can save a lot of time.

Outdenting properties for debug CSS

Show Markup in CSS Comments
Chris Coyier discusses the idea of including the basic markup that you will be styling element a comment at the topmost of your CSS data file.

Show Markup in CSS Comments

Selectively displaying data
This method shows how to selectively display content in a table and add responsive breakpoints to devise an responsive, complex multi-column table.

Remove Margins for First/Last Elements
If you ever wanted to remove the top OR left margin from the first element within a carrier, OR the right or bottom margin from the end element in a container, you can do this past using pseudo-selectors :first-child and :last-child.

CSS Diagnostics Stylesheet
A very useful piece to enjoy nearby when you are debugging your CSS or want to find mistakes in HTML.

CSS Diagnostics Stylesheet

Radio Buttons Next to Two-Way Exclusivity
Learn about the :empty pseudo-class selector and jQuery to ensure that when a radio button is clicked, the area is determined and all other radio buttons within that column are turned off, and after is turned back on when clicked on.

Radio Buttons with 2-Way Exclusivity

Tabbed Navigation With CSS
An elegant tabbed navigation menu with drop-down menus — no JavaScript, of course. Cypher new, but it’s a quite clean solution.

Tabbed Navigation With CSS

Menu With Notification Badges With CSS
A ready-to-use snippet for a navigation menu with notification badges.

Menu with Notification Badges With CSS

Styling supported connected sibling count (slides)
A fantastic summary of the possibilities all for styling supported sibling count. Also, act to clink through the sleep of the slide platform — valuable and dexterous techniques. Make sure to watch Lea Verou’s presentation as fine.

Styling based on sibling count (Slides)

Stuff you can do with the “Checkbox Hack”
Wiht the “checkbox hack,” you use a connected label and checkbox input and usually some other section that you are trying to control. Learn what you can do with it.

CSS3 Facebook Buttons
Nicolas Gallagher presents a set of CSS buttons for Facebook with different colours and icons. You might privation to check Nicolas’ CSS3 Social Sign-In buttons as well as Free Social CSS3 Buttons that we released earlier moreover .

YouTube Popup Buttons
This article explores the default state of YouTube buttons, which have a very subtle bevel just pop on :hover and :focus states, eager to be clicked.

YouTube Popup Buttons

Centering in the Unknown
When it comes to centering things in Web design, the more information you enjoy about the part being centered and its parent element, the easier it is. Chris Coyier shows however to do it when you act upon not know anything.

Centering in the Unknown

Uncle Dave’s Ol’ Padded Box
What if you conjunct background-size: cover and Thierry Koblentz’ intrinsic ratios. The result is similes and video than maintain their aspect ratio; simply you can too use background-size: coat to change the feature ratio and auto-cropping of images with just a little CSS. And the great tidings is that the wealth is supported within all contemporary browsers and matches media-query support exactly.

Micro Clearfix: Force Element To Self-Clear its Children
Chris Coyier presents various technique all for forcing elements to self-clear its children, including Nicolas Gallagher’s short code snippet from 2011.

Micro Clearfix: Force Element To Self-Clear its Children

Conditional CSS
A clever technique by Jeremy Keith to load extra content conditionally. The idea is that once a media query fires, the contented on the body element is generated and can metal detected by a JavaScript, prompting extra smug to metal loaded.

* { box-sizing: border-box } FTW
Once you start mixing and congruent various units within CSS — such as % for the container width, em for padding and px all for border — then you run right into the box-model problem because the width of the container doesn’t include artifact and outside. We can easily solve this using box-sizing: border-box. And the top part: it is even supported in ID EST 8.

Multiple Attribute Values
How to treat multiple values in attributes rather than classes.

Multiple Attribute Values

Diagonal CSS Sprites
If you build a sprite on a diagonal, there volition be no components down or to the right of the component you’re showing. This allows you to make the item using the spirit as wide or arsenic tall element it needs to be, minus worrying about exposing the next component. Also, analyse St. David Storey’s article on CSS sprites for the moder era.

Double Click within CSS
Is nearby a way to detect if a link is tapped or double-clicked on mobile devices? Really , we can. However, the code requires some hardcore CSS nerdery. Also, check Perfect CSS Clickable Events Lacking :target by Ryan Collins.

Replacing the -9999px hack (novel image replacement)
In the beginning was FIR (Fahrner figurine replacement). Scott Kellum, shape director astatine Treesaver, has now developed this refactored opinion for hiding text.

Replacing the -9999px hack (new image replacement)

Fighting the Space Between Inline Block Elements
A ordering of inline-block weather formatted like you would commonly format HTML will have spaces between them. But we often want the elements to butt up against each separate, so avoiding in the luggage of navigation) those awkward weensy unclickable gaps. How do you lick it? Chris Coyier has found a couple of solutions.

CSS pointer-events and a pure CSS3 animating tooltip
The pointer-events property allows you to specifiy how the mouse interacts next to the element it is poignant. See what you can do with it and what to consider when using them.

Anatomy of a mobile-first responsive Web design
AN excellent article with Brad Frost active the different considerations for responsive designs. However do you start? What features would you implement and how? What about advanced optimization such LocalStorage or AppCache? This article organize an excellent guide for getting started with future-friendly responsive designs.

SouthStreet Progressive Enhancement Workflow
A fantastic article by Scott Jehl and Strand Circle in which they donation a set of tools that form the heart of an advanced responsive design workflow. Definitely efficient to keep in mind for your next responsive design project.

Typography And Matter With CSS

Advanced CSS techniques provide US with remarkable options to style text within very contrary ways. Not only can we make the typography face sharper and beautiful on the Web with tools as Lettering.js, Kerning.js and FitText; we can also play beside glyphs, dash breaks, font sizing, truncating text and styling lists. The typography can be adjusted and improved with just a couple of practical approaches.

Interactive Typography effects with HTML5
This techniques uses canvas and JavaScript to create ab interactive typography effect. Users can interact with the glyphs and as designer you can define forms or shapes of the word you’d suchlike to present and how you’d like them to change on hover. Fancy!

Interactive Typography Effects with HTML5

Rocking letters with CSS3 and jQuery
A simple animation of parcels with CSS3 and jQuery.

With Rocking Letters into the New Year

CSS 3D Typography
What about integrating stripes into glyphs and adjust the shadiness against hover? This method uses just that, creating a nice, faint up to now engaging visual result. You can insight more interesting brand experiments in CSS3type Showcase., gallery of css text effects, gallery of css text effects

CSS3 life and masking text
Chandler Van DE Water had a challenge for Trent Walton after seeing the header animation in his “CSS3 within Transition” post. Noticing that he used a PNG emblem file next to knockout transparency, he wanted to do the same CSS animation with selectable essay. Trent was bullish to compel! At the moment, this works only in Campaign and Chromium.

CSS3 Animations and Masking Text

CSS mask-image and primer
Trent Walton uses background-clip: text and mask-image to implement a subtle gray-flecked feel effect over white text. Hover complete the box to see how it degrades within unsupported browsers. Confirm to examine Lea Verou’s “Text Masking: The Standards Way” besides .

CSS Mask-Image & Text

Fake bolding of Pattern fonts
Most browsers simulate bold weights for fonts that dont actually have bold weights. For paradigm, Helvetica Neue Light does not have a bold weight. If you used font-weight: bold with it, browsers would artificially create a reckless cargo. This article explains how to avoid sham bolding of Web fonts in your designs. By Divya Manian.

Fake Bolding of Web Fonts

Tomorrow’s Web type today: Say it With a Wave
The excellent series “Tomorrow’s Web type today” by Elliot Jay Stocks provides insights into what will be realistic beside Web typography soon, e.g. swashes. In certainty, you can already use them present if you include a swash subset of a typeset to achieve the desired result.

OpenType Swashes

Internationalization Language CSS
A very handy CSS nippet with language-specific quotes. Perfect for international, multilingual projects.

Internationalization Language CSS

Experiments with background-clip: text
With the CSS property background-clip: text, we can add a background image to a text element.

Experiments with background-clip: text

A Call for ::nth-everything
Next to CSS3, we have positional pseudo-class selectors to help us select a particular element when it has no distinguishing characteristics other than where it is in the DOM within relation to its siblings.

A Call for ::nth-everything

Smooth font using the text-shadow property
A common problem: is there a way smooth the appearance of glyphs on older machines, particularly Windows XP (standard / ClearType rendering way)? Yes, perhaps. You can give a try the text-shadow-property which adds text-shadow on the top-left and the bottom-right to smooth text.

Smooth font using CSS3 text-shadow property

Fluid Type
River Composer explains his approach to fluid typography within which he asks himself how we have the ability to get sure that browser extent and typographic settings such as method or font-size and how should we handle panoramic viewports? An interesting piece, especially if you use a typography-out waylay in your designs.

Fluid Type

Pragmatic, practical lettering sizing in CSS
Harry Roberts shares his thoughts on top of how to size fonts more than efficiently, letters your CSS differently in the process.

Planned line breaks beside CSS3 hyphens and word-wrap
Roger Johansson shows however to solve a common problem: as columns of text become narrower, the risk of a single word being longer than the column’s span increases. When that happens, the text usually extends out of the column. Happily, CSS offers two properties to improve the situation: word-wrap and hyphens.

Molten leading (or fluid line height)
When a responsive composition meets a viewport, within are different ways to fill heavens. Adjusting any ane element without as well adjusting the others is a recipe for uncomfortable reading, which is one reason why designers have such as a difficult time with fluid Trellis layouts. Tim Brown started a discussion about this issue and provides a couple of techniques for opimization.

Molten leading (or, fluid line-height)

Stop Monthlong URL’s From Breaking Out of Container
Another snippet by Chris Coyier for keeping long URLs inwardly the container. word-wrap, word-break and hyphens properties in operation. Also, learn how to Prevent Superscripts and Subscripts from Affecting Line-Height.

Viewport-sized typography
This technique uses new CSS values for sizing elements relative to the viewport’s modern size: vw, vh and vmin. This allows you to couple the immensity of, say, a typographic heading to the free screen space. Browser support is quite poor for now, so if you are looking for an alternative, supervise retired FitText.js.

Viewport Sized Typography

Minimum paragraph widths in fluid layouts
This piece shows how to solve the problem of paragraphs that are as well narrow, by implementing a minimum writing width. Provided the space left a the floating image is little than this width, then the together paragraph moves below the image.

Styling serial document numbers
Roger Johansson shows however we have the ability to style ordered list numbers with the :before pseudo element, which can take a negative as a value through the content place. Also check out Chris Coyier’s post and Louis Lazaris’ CSS Counters: counter-increment and friends.

Styling ordered list numbers

Reverse ordered lists within HTML5
The reverse attribute allows you to write a descending catalogue of numbered items. Louis Lazaris summarizes what it does and offers a solution to get circa a lack of browser crutch all for this construct.

Reverse Ordered Lists in HTML5

Preserving light space with CSS3 bill size
By default, HTML pages ignore anything more than a single space and collapses them. But there are occasions once you’ll want to maintain this space via ane of several possible techniques.

Truncating text using only CSS
This code snippet can be used to shorten a line of text using zero but CSS.

New CSS3 properties to handle text and word wrapping
Gladiator Lazaris explains the possibilities and problems of text-wrap, overflow-wrap, line-break and word-break, text-overflow and hyphens. Also worth reading: Kenneth Auchenberg discusses the options for word wrapping and hyphenation in combination with dynamic width weather.

End Articles with Ivy Leaf
A clever method for adding an excess touch to the stop of your articles. :last-child, :after and content in spend.

We’re in use to classical navigation patterns such as tabbed navigation or drop-downs, but we can do a lot more to spice up our navigation menus with pleasant hover effects, often without extra images. Particularly provided you’d like to add a bit more polish to your portfolio, audience or e-commerce website, these techniques can be quite useful. What about “over-the top” hover result for your links,

Round Navigation Effect With CSS3
A bubble-like thumbnail preview for your navigation near CSS3.

Circle Navigation Effect with CSS3

Construct a CSS3 Image Gallery With a 3D Lightbox Animation
Tom Kenny has extended a CSS lightbox gallery by adding a few hesitate effects to the audience grid itself and a 3D rotation to the lightbox content, all with CSS.

Create a CSS3 Image Gallery with a 3D Lightbox Animation – Inspect Element

3D Gallery With CSS3 and jQuery
This article shares associate experimental gallery that uses CSS 3D transforms. The idea is to create a circular gallery with associate image in the center and cardinal on the sides. Because perspective is existence used, the two lateral images module appear three dimensional when rotated.

3D Gallery with CSS3 and jQuery

Creative CSS3 animation menus
Mary Lou presents a couple of fictive navigation menu vibrate effects. The idea is to have a simple composition of elements, an icon, a main term and a secondary title that volition be animated by hover using only CSS transitions and animations.

Creative CSS3 Animation Menus

How to spice up your menu with CSS3
Yes, another method by Tympanus: this tip shows how to spice up a carte by adding a neat vibrate effect to it. The idea is to slide an portrait bent the exact when the menu item is hovered over.

How to spice up your menu with CSS3

Create a zoomable soul interface
David DeSandro reveals how to use CSS transforms to create a zoomable user interface similar to that of Beercamp 2011. In this tutorial, you’ll also larn how to use JavaScript to hijack scrolling to manipulate the zoom.

Create a zoomable user interface with CSS3

Flipboard Navigation
An experimental page layout divine by Flipboard’s interface.

Flipboard Page Layout

Multi-direction hover
This part shows different hover effects when hovering from different directions.

Multi-direction hover

Experimental Hover Effects
Original and innovative waver effects discovered via Twitter on top of what appears to be a Nipponese code sharing website.

Share JavaScript, HTML5 and CSS

Over-the-top hover effect
A CSS and JavaScript technique for creating an “over-the-top” hover effect using the transform-origin transform-style properties also as 3-D transforms.

Accordion With CSS3
Jewess Lou experiments with the adjacent and general sibling combinator and the :checked pseudo-class. Using underhand inputs and labels, she creates an accordion that animates the content areas on opening and closing.

Accordion with CSS3

Expanding Text Areas Made Exquisite
AN expanding text area is a good prize when you don’t know how some text the mortal will write and you want to keep the layout serried. Here article, Neil Jenkins explains how to do this simply. Also, you could want to take a facade at Textarea Machine Resize, different technique by Louis Lazaris, using a hidden clone element.

Device Functionality With CSS3
Using the general sibling combinator and the :checked pseudo-class, we have the ability to statement says of other elements by checking a box or energy button. This tutorial explores those CSS3 properties by creating a experimental portfolio filter that toggles the states of items of a specific type.

Filter Functionality with CSS3

An accessible, keyboard-friendly custom select menu
A new outlook for more accessibility past Roger Johansson. Helium styles only the select element.

Optical Techniques with CSS

We in use to heavily on images and optical elements to concoct basic visual effects on the Web. With CSS3, we can not only improved the loading speed of the content, but also make our visual elements more flexible and adaptive. Let’s take a look on a couple of examples of how we can achieve that.

Create the Illusion of Set up Weather with CSS3 Pseudo-Elements
Tom Kenny shows how to create a simple “stacked” look to a group of images.

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements – Inspect Element

CSS3 Unfold Map with Pins
A handy snippet for placing pins on a map. The standard looks a bit verbose, so you might want to remove a couple of visual “nice-to-have” weather.

CSS3 Unfold Map with Pins

Turn Images Into Postage Stamps With CSS3 border-image
Dudley Storey shows a ordinary way to create a postage stamp from a simple image with border-image.

Turn Images Into Postage Stamps With CSS3 border-image

Slopy elements with CSS3
Angulate shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. This tutorial shows some simple examples and ways however to create slopy, skewed elements with only CSS.

Slopy Elements with CSS3

CSS Flip Clock
A symbols snippet for displaying a flip clock-alike time display using CSS.

CSS Flip Clock

CSS3 Dummy Styles
Once applying a CSS3 inset box-shadow or border-radius directly to an image element, the browser won’t render the CSS style perfectly. Here’s a snatched tutorial on how to use jQuery to form perfect rounded corner images dynamically. And check down the second part.

CSS3 Image Styles – Part 2

Creating Reusable and Versatile Background Patterns
A ingenuous tutorial on however to construct reusable background patterns with Photoshop and CSS.

Creating Reusable & Versatile Background Patterns

Diagonal Graph Paper Gradient
A very nice CSS method for creating diagonal graph paper gradients using repeating-linear-gradient wealth in CSS.

Diagonal Graph Paper Gradient

Tucked Corner Effect
A clean CSS technique all for producing tucked corners using the pseudo-elements :after and :before as well as data URI-coded similes. Also, cheque out Corner Ribbon Effect with CSS.

CSS Tucked Corner Effect

Scrolling… shadows!
An artistic technique with Italian Komarov to create CSS-only shadow-scrolling effect using background-attachment: local. Matured by Lea Verou, inspired by Roman Komarov.

Scrolling shadows

Multi-colored CSS progress bars
A quite verbose yet CSS-only solution for displaying multi-colored progress bars. It’s linear-gradient within action! Also, check out CSS3 progress bars that show facts inside localized leaderboards for the new analytics platform At G5. They are lightweight and compel no JavaScript or images.

Multi-colored CSS Progress Bars

CSS3 breadcrumbs
Swot up however to create your own cool CSS3 breadcrumbs. Also, check the CSS Breadcrumbs Example which uses sole CSS linear gradients.

CSS3 breadcrumbs

Adobe-like Mark Headers
A detailed article about the technique Adobe uses to create header exerciser for modules on its website.

Adobe-like Arrow Headers

Adding a Top Shadow to a website
If you ever wanted to add a shadow along the top top of the website, you can easily live out it by styling body:before.

Adding a Top Shadow to a website

A flexible shadow with background-size
It’s amazing what you can achieve when you combine different techniques—even when lining a challenge such as a bendable shadow. If you had to create an adaptive shadow effect, how would you create it?

Star Ratings Beside Hugely Little CSS
Chris Coyier shows how to code star ratings done with vastly little CSS code and lots of a bit of Unicode madness.

Convert Similes to Black And White With CSS
Filters allow us to visually process an image within the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported within the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers — even IE — past using a combination of techniques.

Punching Holes With CSS
A clever and simple technique to make a block in a container be obvious and display a background image. Also, nick a look at Lea Verou’s accessible leading rating gismo with CSS.

Simple Styles for Horizontal Rules
With the help of a few contributors, Chris Coyier put together this page of simple styles for horizontal rules.

Simple Styles for Horizontal Rules

Optimizing Graphics With CSS Masks
In this video, Aaron Bushnell shows how CSS masks can help make the process easier on you you bet to make convinced you have fallbacks in situ for non-Webkit browsers.

Browser-Specific CSS Hacks
A useful, comprehensive list of browser-specific CSS hacks for targeting legacy browsers. Unfortunately, most of us will need them quite often.

Last Click

CSS3 Lasers!
Shows a laser shot effect once hovering over an element.

CSS3 Lasers!

The DOM Tree
This DOM tree is generated via JavaScript every time you visit the page, so you’ll never see the same one twice. All of the forms are filled with holiday greetings in a potpourri of languages. CSS3 3D transforms are wont to posting and rotate, via translate3d() and rotate3d() respectively, the elements once the leaf gobs. The infinitely iteration rotation on the tree is controlled via an infinitely looping CSS3 animation. Just one word: silly!

DOM Tree

What’s Your Favourite Technique?

We’d respect to know your experience with few of the featured techniques, or perhaps you’ve stumbled upon another interesting CSS technique recently? Let us know in the comments to this post!

What kind of “round-ups” would you like to see on SmashingMag?

(jvg) (al) (vf) (ml)

© Smashing Editorial all for Smashing Mag, 2012.


Leave a comment

Sales and Cold Calling Tips you wish you knew at the start

Hey guys, I’ve been using kijiji and craigslist to get find some initial clients but they have proven to be poor ways of finding the clients I want to find. They’re any expecting $500 for a full site with all the bells and whistles or the promising ones I did come into contact with required holding…


1 Comment

Search form not aligned in IE7 can anyone help?

Hi Folks,

The turn out form on my setting doesn’t align, there’s besides a white border around the breadcrumb bar which i want to remove – can anyone indulge help?

It works excessive in FF, can anyone help me carry it looking right?

Thanks within advance


Leave a comment

30 Beautiful iOS App Website Designs for Inspiration

Advertise here next to BSA

An iOS mobile app often has a website associated with it. This website is ofttimes for promotional and informational purposes (i.e. to share information about the app, to offer insights on how users would benefit from the app, all for hosting videos and screenshots of the app, etc.). In this showcase, you’ll find beautiful websites of […]