Encoded Images

As designers, adding background image via CSS is definetely a no-brainer to you. Traditionally, or typically, here’s how we do it – using background-image property and link directly to the image source file.

  1. div {  
  2.     background-imageurl(img/image.png);  
  3. }  
However, each image url that we add in that way will cause the browsers to run more requests. In other words, if we have 10 different urls, the browser require 10 HTTP requests for images.

READ MORE »

Skills Designers Have That Global Development Needs

“Development is being disrupted,” says Raj Kumar, President of DevEx,  a site devoted to helping the international development community deliver foreign aid more efficiently and effectively. Beyond the buzz generated by the “social entrepreneurship” and “impact investing” communities, I’ve seen a significant shift coming from traditional aid agencies in the past two years.

In 2010, USAID, the agency responsible for administering US foreign aid, launched the first-of-its-kind Development Innovation Ventures quarterly grant program. Its funding model is inspired by traditional venture capital and the focus is on scalable and entrepreneurial solutions to poverty alleviation. Similarly, in 2012 the World Bank hired a former Silicon Valley Google.org director to lead their new “Innovation Labs.” UNICEF and the Inter-American Development Bank have also launched their own “Innovation Labs” with similar goals of promoting open-dialogue, new methods, and cross-pollination of models that enable innovative activity.

So with all this talk about “innovation,” where are the designers, the technologists, and the entrepreneurs? The folks behind these initiatives are still folks with international and economic development backgrounds, economics and finance. If they’re serious about innovative approaches, it’s time creative problem solvers are added to the equation. Specifically, here are five strengths designers have that the development industry direly needs:

  1. We are systems thinkers.
    The problems that plague our world are complex, interwoven, and multifaceted. As designers, we solve problems through a combination of analytic and creative thinking. Many of the best designers I know are themselves multi-faceted and multi-disciplinary. In addition to a design degree, they’re also engineers or MBAs or economists. It takes both sides of the brain to generate solutions to social challenges.
  2.  Fresh eyes.
    Einstein’s “We can’t solve the world’s problems by using the same type of thinking we used when we created them,” couldn’t ring more true. Many of the social issues we’re fighting today have existed for decades and consistently been addressing using old mechanisms—policy, aid, and philanthropy. We are long overdue for fresh thinking to old problems.
  3. We have a prototyping culture. We make a lot of mistakes in development—mistakes that sometimes negatively impact people with everything to lose; mistakes that could potentially be avoided if the development sector fostered a culture of iteration and refining ideas before rushing to scale. Instead, I see a lot of money going towards untested ideas or worse yet, “solutions in search of a problem.”
  4. We focus on people. 
    Many decisions made today that affect the poor are made by people completely removed from their issues. A designer’s viewpoint, driven by an understanding of the needs of people or end-users, is completely unique and lacking within the development sector. The key to better policy, better products, and better public services is rooted in understanding of the key players and what motivates them.
  5. We create capacity.We build things. We build products, services, websites—and by doing so we are intrinsically building the capacity of those who make, distribute, sell, or use what we create. On a fundamental level, giving people access to tools that enhance their capacity is what drives economic development. We play a central role in creating those tools that are useful, relevant, and meaningful.

$22.8 billion of our projected fiscal budget is earmarked for poverty-reduction activity in 2013. Traditionally, international development agencies use the amount of the money put towards poverty alleviation as a metric for efficacy.

I’m hoping the next few years shift that metric towards understanding underlying problems and funding  new solutions that address those problems. In order to do that, we need a new breed of development thinkers. The next generation of designers is inspired by careers that provide meaning and impact. Now is the perfect time for the development sector to start connecting the dots.

Tools for making nice looking websites

Not every website needs to be updated, and not with every technique available in this post. These ideas are here to get developers thinking in terms of design and how to make websites look prettier…

1. UX Testing

I am guilty of not always running tests on my website launches, but whenever possible this is one of my favorite activities. You can learn so much about typical user interactions by studying how they play with your website. User experience studies may be conducted solely through tools like Google Analytics, or using other 3rd party resources.
custom UX team design meeting board room
The potential benefits you can find are enormous. User experience testing is helpful for web developers to learn which areas of their website are annoying, broken, or could be improved. Consider using not only digital tools but also your friends and colleagues. Listening to some real human feedback on your website may provide results you couldn’t get through a computer screen.

2. Whitespace

We can think of whitespace as the amount of room between elements in your page. Some users will not mind a cramped layout if they are already accustomed to this. But consider your target audience, and consider how many of them are not as computer literate as the younger generation.
You may determine areas which need extra spacing through split A/B Tests and retaining user feedback. Or just wing it and see what you can come up with!

3. Web Fonts

Dynamic web fonts allow designers to build webpages without being restricted to the typical font families. This trend has become increasingly popular now that most average Internet users are on a decent DSL/T1/Fiber-Optic connection. Including references to 3rd party font stylesheets will no longer produce major lag in your DL speeds.
Google Web Fonts homepage screenshot preview
Quite possibly the best provider of fonts is through Google Webfonts. You can access the application even if you do not have a Google Account, although there are perks to registering. The full setup process takes only 3 steps and you can have custom Google fonts running on your website within minutes.

4. CSS3 Shadows

When I’m talking about using shadows to improve your layout I am actually referencing two distinct properties. The ever popular box-shadow is really cool for divs and boxes within your layout. Appending this effect onto your container, wrapper, or inner page boxes will provide a slimming 3-D effect to your webpage.
But it is also worth considering the CSS3 text-shadow property for typography which jumps off the page. Apple is one of the first companies to heavily implement text shadows all around their layout. You can build a daunting effect by adding text shadows which are opposite the color of your fonts (white shadows for dark text, black shadows for light text).

5. Textures & Repeating Patterns

There are plenty of websites which can get by just using standard color schemes. But to have your website really stand out from the crowd you may consider adding textures and repeating tiles into your background. One of the coolest free webapps is Noise Texture Generator which can run on any browser.
Subtle Patterns website design layout thumbnails
Just choose the BG color and amount of noise you want to use, then this app will create a tiled background image dynamically. If you’re looking for patterns and tiles then I would recommendSubtle Patterns. They have a huge collection of usable textures which you can download for free.

6. CSS3 Gradient Backgrounds

While we’re discussing backgrounds I should bring up the ever-popular CSS3 gradients. These provide web developers with an enormous benefit keeping them out of Adobe Photoshop for web backgrounds. And these gradients can work on more than just the body, applied onto navigation bars and footers and other important areas in your layout.

7. Boostrap

Twitter’s Bootstrap is quite possibly the greatest frontend UI framework for web developers. This includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects. The most common use for Bootstrap is within landing pages for new applications.
But open source developers also utilize Bootstrap when building demo pages for the libraries, plugins, or mini scripts they publish.
Twitter Bootstrap Github entry screenshot
I feel that Bootstrap has grown to such a massive extent that it may be applied into any website these days. However developers who find the greatest benefit are using Bootstrap as a quick replacement for rolling out their own UI designs. Consider this frontend library the next time you are launching a webpage with a single concrete purpose: landing page, product demo, mobile app website, etc.

8. HTML5 Kickstart

Most web developers have yet to hear about HTML5 Kickstart created by 99Lime. This is another frontend UI library which focuses more on nice design aesthetics than common HTML5 layouts. But there are code samples for generating both in spades. You can choose from sets of predetermined elements like gradient buttons and dropdown menus. I wouldn’t say this has the same popularity as Bootstrap, but then again what does?
HTML5 Kickstart 99Lime homepage open source screenshot
If you have the time and patience I would recommend just giving this library a quick test run. Build a small sandbox layout and see if you enjoy the default feeling off each UI element. Kickstart is certainly not for every project, but it can be a major time-saver when caught in a bind.

9. JQuery UI

Animations and sliders and fading elements are usually running off the jQuery library. This is the most common open source JavaScript library for frontend developers, but it also has a companion library jQuery UI. Developers overlook this, thinking it cannot provide very much in return for the extra KB.
But including the UI library means you can update the easing call for any dynamic page animations. This means you may customize the jQuery animation type for any dropdown menus, fading items, scrolling slideshows, and everything else dynamic.
The jQueryUI website has an easing demo page where you can test out the many variations and see if you like any specific animation types.
10. Extravagant BG Photos
There are countless websites nowadays which have utilized the fullscreen background image effect. If you can find a high-resolution photo sample which would look good as a background image, then this technique may be worth adding into your layout. Large backgrounds do an excellent job of catching your user’s attention while also implying the genre of your website.
jQuery Backstretch plugin homepage screenshot
If you’re looking for a quick solution check out the jQuery Backstretch plugin. This only requires a single line of code for your new backgrounds to scale properly and responsively using any resolution. But for developers who are against JavaScript methods I recommend the CSS3 fullpage image technique posted on CSS-Tricks.

11. Menu Icons

To draw more attention from visitors it may be worthwhile to include a small icon set in your webpage. Standard menu links are often enough to function properly and help users navigate between pages. However I am often impressed to see customized icons designed for each menu link. You can find tons of free icon sets which would look perfect in your top navigation, sidebar, or footer area.

12. Updated Color Scheme

I do not actually mean changing your overall color scheme design, but more like appending new colors into it. After running the same layout for months after months it is nice to update smaller areas and catch repeat visitors by surprise. Some items of interest may include anchor links, headers, backgrounds, and toolbars. Consider using online tools such as Color Scheme Designer to improve your trajectory.
updated fresh looking color wheel scheme picker webapp

13. Enhanced Browser Support

It is difficult to build a website which is fully supported by all the major legacy browsers. Although very few people are running Internet Explorer 6 it still shows up in a few of my Google Analytics reports. Developers who are looking for ideas may consider doing a small trial of browser tests.
IETester program software debugging Internet Explorer layouts
The more important mainstream browsers include the latest release of IE9, Mozilla Firefox, Opera, Chrome, Safari, and possibly Camino/SeaMonkey. But Internet Explorer 6-8 are also still widely used among businesses and older computer labs. You may run quick rendering tests using the IETester software. Similarly IE8 has a developers tool mode where you can switch into older rendering engines for debugging.

14. Fitted Typography

You may find that your old layouts are still utilizing text styles efficiently, but this isn’t always the case. I feel that large typography will fit into layouts a lot easier. Not to mention it is easier to read and will take up more space on larger screen resolutions.
The idea of “fitted typography” is styling text so that it fits snug in your website. You can go through a few pages and update these styles in 10-15 minutes.

15. Social Media Sharing

By now I am sure most developers are familiar with the sharing badges used in popular socialnetworking websites. Facebook, Twitter, Reddit, Pinterest, Dzone, and many other external networks provide codes you can embed into your website. Then visitors may share your link onto these networks without needing to leave your website.
On some blogs or web magazines you’ll notice these badges will follow you scrolling down the page. This is an excellent technique since you can often have them hovering just outside the body area where they are not blocking any important content. I also recommend browsing our post on social media toolbars which can have a similar effect.

16. User Discussion

If you are running a CMS like WordPress or Drupal then you have the ability to include comment forms by default. However when creating static webpages you would need to setup your own databasesystem to mimic this functionality. But with the rise in open source technology developers may now implement better solutions such as Disqus.
Disqus comments system homepage screenshot
Using this method you are not constantly dealing with cleaning up spam and junk from the discussion area. Users who do not already have a Disqus account may quickly connect using popular social networking profiles, or signup right from your page. Even WordPress users who are sick of Akismet may switch using the Disqus Comment System plugin.

17. Widen The Footer Area

Most smaller website layouts will be very conservative with the bottom footer section. This may include some basic copyright info and a few main page links. But modern web design trends support the idea of big footers with lots of meta links.
These are commonly seen in startups and big company websites with lots of additional information. Certainly don’t try forcing this into a layout where it doesn’t belong, however it is worth some contemplation if opening up a bigger footer area may improve your website experience.

18. Responsify Images

Dynamic fluid and responsive webpage images have become a trend in themselves. It’s now almost ludicrous to still have your images set at fixed widths, breaking out of the container wrapper as windows are resized. The most common technique is to apply width: 100% using CSS on all img elements.
Responsive Image Plugin jQuery open source download
But you may also consider some other open source methods which may prove useful in a bind.ResponsiveImg is one such jQuery plugin with a very small file size. Just include this into your page and run the single-line code targeting all images on the page. This is an excellent addition to mobile layouts which are still using desktop-based content.

19. Menu Accessibility

I wouldn’t say this is something you should constantly be trying to update in your layouts but it is something that developers and designers do not get right the first time around. I feel it is worth looking back at your navigation systems and brainstorming if there are any better ways to implement sub-menu links.
Sidebars and content areas will often hold accordion menus since there is enough room vertically. But think about horizontal navigation bars with dropdown menus or sliding sub-menus. As long as your menu links are quick and easy to access, there shouldn’t be any problems among your userbase.

20. Semantic Microformats/Microdata

Microformats and the newer Microdata specification are used to extend metadata inside your HTML code. These attributes provide extra information about your content and how it relates to other content on the page. And ultimately these results help Google determine your website’s rank for individual keywords, and within other engines such as Image and Video search.
Microformats homepage documentation website layout
The most notably supported documented version of Microdata is called Schema.org. Their website provides all the information you will need to go back and edit your HTML content with semantic schema markup. This Schema syntax is backed and supported by all the major search engines, and will likely evolve into the future of semantic metadata design.

21. Rearranging Nav Links

For some websites, running on fixed content navigation may not be a real problem. But I have found in some larger business websites or portfolios that certain navigation links are given too much precedence. And similarly there are some items which can rarely be found! Take the time to browse your website and behave as if you were any other visitor.
Consider which links you are most interested in, and possibly any links which you’d like to see added. These may include a brief history of your website, information about the team, contact details, privacy concerns, press releases, etc. It may also help to gather user feedback and see if there arecorrelations between their wishes and demand for new or updated pages.

22. Back To Top Link

If your website publishes very long pages of content then this is a must-have element in your layout. The scrolling Back to Top links can be found almost everywhere these days. Users don’t think to hit the Home key and it can be annoying scrolling all the way back up. The best location for this link is floating alongside your container, or seated right in the footer as we have implemented on Hongkiat.
Hongkiat webpage layout footer back to top link

23. Customize Code/Pre Tags

When first creating a website stylesheet many developers will overlook the typical page elements. Headers and paragraphs are very common, but what about pre tags or inline code tags? These are used to encapsulate preformatted source code syntax like you would see in a text/NFO file. Some websites have no need for these elements, but it is still considered good practice to have them styled just in case.

24. Adding Image Width/Height Attributes

Now this task could easily take a while, depending on how many images you would have to go through. But if you find images in your website without a defined width/height it may be worth updating them.
Typically images lacking these attributes will display as a 1×1 px square before loading in full. This will cause your webpages and scrollbar to jump as new images are loaded. Again this won’t be helpful for everybody, but it is worth noting as a quick fixer in some cases. And there are still CSS techniques for responsive images using fixed attributes.

25. JavaScript Notifications

Any developer who has worked in JavaScript knows about the typical dialog boxes. You can setup an alert box which offers the user an OK button, just displaying information. But there are also confirmation alerts with yes/no buttons along with the prompt box which asks for user input.
open source js JavaScript library codes
All of these may be customized using alertify.js. This is a very small open source library for designing your own frontend alert boxes. It is very quick to setup and easy to customize if you need to match your own CSS styles.

26. Responsive Media Queries

This may not seem like a quick bit of code to add, however it really doesn’t take much time at all. Responsive queries can be added into your existing stylesheet or added into a new responsive.cssdocument. Either way you can quickly setup recurring styles to handle various display sizes from monitors, tablets, and smartphones.
dark iPhone 4S mobile safari responsive website layout
Responsive queries do not always need to fully responsify your layout. Sometimes these may just hide bits of content, such as your elongated sidebar or larger footer. You could then display a fully responsive mini footer which is originally hidden in the desktop layout. You can learn more about media queries in our collection of responsive web tutorials.

27. Affiliate Links

There will always be similar websites online building content related to your field. There are very rarely new ideas being created; most of them are offshoots and parodies from existing content. But instead of turning the web into a competition why not create a friendly atmosphere? If you have the extra space in your layout send out a few e-mails to related websites in your niche (search Google) asking to affiliate.
You can exchange links and help bring each other traffic. This opens doors for new users to find your website a lot quicker, and to see that you are included within the community of other websites as well. Plus gaining backlinks from websites with authority in Google can only help your domain’s credibility.

28. Icon-Based Fonts

Recently I was reading an article on 24ways which discussed icon fonts and data attributes. This got me thinking about the future of web design and how HTML/CSS has dramatically affected frontend coding. Icon-based fonts are perfect for a number of reasons including navigation menus, ordered/unordered lists, and even basic page content.
Icon Fonts are Awesome article CSS-Tricks website
Many of these fonts can be quickly added into your website using @font-face. This means you don’t need to rely on a 3rd party service like Typekit for hosting your fonts. It also means a more semantic design style rather than just using PNG icons.

29. Image Box Shadows

If you want to keep visitors on your page longer then you need to offer some real quality content. This may already be the case for your website, however if your styles are bland then people will look elsewhere. Atmosphere and aesthetics are huge in good web design.
I recommend building a quick image class which wraps a border around your page images. This may include a small box shadow along with borders and padding, too. Anything to help your images jump off the screen and stand out in the paragraphs of text.

30. Alternate Stylesheets

Consider all the various media styles you have to include when building a single website layout. This would have to look good on desktop monitors, laptops, tablets and possibly even smartphones. And don’t forget projection and print media, which is not always supported.
If you have a large audience who uses these obscure types of media, I recommend styling your own alternate stylesheets. These can be labeled based on the media type such as print.css, or added into your existing stylesheets. If there is enough demand then your visitors will be eternally grateful. And it honestly doesn’t take a whole lot of time to edit your default website layout for common printers.

The Magic of Fonts

Idlewild
 


Idlewild An industrious sans
serif that evokes space-age optimism, Idlewild is
spare and tranquil,
speaking in hushed but captivating tones.
Ideal Sans 

Ideal Sans A handmade
typeface for a machine-made age. Ideal Sans avoids
the easy pursuit of
digital perfection, and favors organic forms that make
it warm and
inviting.


Read more

Photos in Facebook

Facebook‘s user interface is not what you’d call a designer’s dream. Flying in the face of the trend towards customization, it has remained perversely and stubbornly enamored of its simple, lowest-common-denominator aesthetic.
The layout is frustratingly rigid and idiosyncratic, and users are given very little control over the look and feel of their profiles or pages.

Facebook can be a great way to share photos with people you know, especially if you want them actually seen. And Facebook itself is evidently increasingly seeing the value of photos as content, especially when people tag people and places. In recent years, it has become the largest online photo storage site by far, and is now much bigger than the previous kings of the roost, Flickr and Photobucket. The new player on the scene, Google+, is arguably even better for displaying and sharing photos, but it still doesn’t have anywhere near the volume or reach of Facebook.

It’s getting more photo- and graphics-friendly, if ever so slowly.
There are a few different ways of using images and photos on Facebook.
Some are for design and identity on the user interface, such as the
profile picture and link thumbnails to display on your profile or page
and wall. It’s also a great place to share photos. (But be sure to read
the terms of service before diving in–see below.)
And now that Timeline is getting activated for all users in their
personal profile (but not yet for product or business pages), there’s a
new set of variations. To make best use of the graphic elements you can
control it’s very helpful to know what dimensions constraints you have
to work within. I’ve found Facebook’s own help pages are frustratingly
fragmented and sometimes obtuse. So I thought I’d try to put all the
image and graphics dimensions specs together. These are a bit of a
moving target—Facebook changes things from time to time, typically with
little notice—but I’ll try to keep these up to date.

Width Height Notes
Cover Photo 851px 315px
Profile Image 180px 180px Scaled down automatically to 32x32px
Link Thumbnail 90px 90px
Uploaded Photos 2048px 2048px
Displayed Photos 960px 720px
Pinned Post 403px 403px
Application Favicon 16px 16px
Application Icon 110px 74px Size limit of 5MB
Milestone Picture 843px 403px

 

Timeline Photos

There are two main images you can control on the new Timeline view, the Cover Photo and the Profile Image.

Cover Photo

Facebook calls the large, panoramic image space at the top of the
timeline is called the Cover Photo. In the example at the top of this
page, it’s a picture of the Informational folder, a part of the umbrella designs for the World Bank’s Business Intelligence Department.
Facebook does impose some restrictions on what you use for the Cover
Photo. It can’t be primarily text or contain contact information that
should be in your “About” section. You also, of course, can’t infringe
anyone else’s copyright with it. You can read more of Facebook’s
restrictions here.

The final display image comes out at 851 pixels wide by 315 pixels high. Facebook’s
help pages recommend that you use an image that is at least 720 pixels
wide.You can upload an image already cropped and resized to precisely
those sizes (here’s how if you’re using Lightroom).
Or you can upload a larger image, in which case you’ll be given a
chance to move the image to display the part you want–basically forced
cropping.

You can only designate one photo as your Cover Photo. Panoramas are
ideal, but there’s nothing stopping you from assembling a montage in
your imaging software, saving it as a single image file, and uploading
that.

When you first convert your profile to the Timeline, you won’t have a
cover photo. To add one, just click on the Add Covert Photo button at
the top of the page where the Cover Photo will go. You’ll then get this
warning popup:

Screen Shot 2012 02 12 at 2.15.42 PM How to Use Photos on Facebook: Dimensions, Sizes, & Types (2012)

Once you’ve added your photo, you can change it easily. When you’re
logged in to your account and on the Timeline view, if you hover the
mouse over the Cover Photo you should get a “Change Cover” button at the
bottom right of the Cover Photo. Click on that and you’ll get the menu
item to choose where photo comes from. You can choose from existing
photos you’ve uploaded to Facebook or upload a new one. And if you
decide you want to reposition or remove the photo, you can use the same
menu. It looks a little something like this:

Screen Shot 2012 02 12 at 12.38.44 PM How to Use Photos on Facebook: Dimensions, Sizes, & Types (2012)

Something to be aware of is that Facebook compresses uploaded Cover
Photos pretty aggressively when you upload them. It makes
sense–naturally, they want to speed page loads and reduce bandwidth by
applying as much compression as they can get away with. To my mind, they
compress too much, but how noticeable it is will depend on whether
things like the range of colors in your image and amount of detail in
your photo. In the examples above, the JPEG compression is far more
noticeable in the montage version than in the Sydney Harbour Bridge
version. I set the quality and sharpening settings the same for each in
the originals before they were uploaded.

Profile Image

The Profile Image is now the smaller, square at bottom left. In the
examples above, it’s my shadow. It’s final display dimensions are 160 pixels by 160 pixels. The white border is added automatically.

Link Thumbnails

link 280x108 How to Use Photos on Facebook: Dimensions, Sizes, & Types (2012)Maximum Image Dimensions: 90 pixels by 90 pixels These
are the small icons you can choose when adding a link to your wall. If
you’re posting the link through Facebook itself and the linked page
includes photos, you’ll be given options taken from the graphics or
photos on the linked page. Use the arrows to choose a thumbnail or check
the box for no thumbnail. Through Facebook itself, you can’t upload
your own image to use, but you can if you use Post It At(Post It At only works for pages, not for personal profiles).

Uploaded Photos

Maximum Image Dimensions: 2048 px X 2048 px
Facebook recently increased the size of the photos significantly. It
also added a javascript Lightbox viewer, a simple but stylish way to
display images and associated comments. The folks over at PetaPixel have
put together a nifty graphicto
visualize the changes in Facebook image sizes. When you upload a photo
through Facebook’s inbuilt image uploader you get the option to control
to some extent who can see the photo. You can customize by location and
language, but there’s no simple way to control if you only want to share
the photo with Aunt Gertrude and no-one else. And there’s no way to
switch off the download link–if people can see your photos, they can
download the original version you uploaded–you can’t specify things like
allowing only low-res downloads. And if you really want to control who
can see the photos you’re going to have to wade into the convoluted and
often counter intuitive way Facebook deals with privacy settings on your
account.

How to Change Your Profile Picture Thumbnail

Your
profile picture thumbnail is the small, square image that’s used around
the site next to your comments or other site activity. It’s taken from
your profile image–you can’t have separate images for your profile image
and your profile thumbnail.

You don’t have a whole lot of control over the way the thumbnail displays, but you do have a little bit.

First, make sure you’re signed in to Facebook and looking at your own
wall. Then hover the cursor over your profile image at top left and
you’ll see a “Change Picture” button appear at top right of the image.
You can also use the “Profile Picture” item from the menu below the
image.

When you click on that you’ll get a screen with your image at left
and options to add a new image at right. But under your existing image,
there’s a tiny “Edit Thumbnail” link. When you click on that, you get a
popup that looks like this: Screen Shot 2012 02 12 at 3.55.41 PM 600x226 How to Use Photos on Facebook: Dimensions, Sizes, & Types (2012)

If you put the mouse over the small image square, click and hold and
drag, your can move it up and down to choose different parts of the
image. You can also use the “Scale to fit” option to fit the entire
image in that tiny square (that doesn’t work very well for tall profile
images like I’m using here). When you click Save, it’ll update every
thumbnail next to your comments through Facebook automatically.

Facebook’s Terms of Service

Just because you can add photos to Facebook doesn’t necessarily mean
you should immediately start uploading your entire image archive.
Facebook’s terms of service are closely watched and often controversial. So I’d definitely recommend reading the TOS
carefully before uploading to see whether it fits with what you want to
do. If you’re a stock photographer that needs to control dissemination
(eg. if you have an exclusive contract with an agency)
you’ll want to look into this very carefully before uploading any
photos that might cause a conflict. At the time of writing, the terms
pertinent to sharing photos are:

Sharing Your Content and Information

You own all of the content and information you post on Facebook, and
you can control how it is shared through your privacy and application
settings. In addition:

  1. For content that is covered by intellectual property rights, like
    photos and videos (“IP content”), you specifically give us the following
    permission, subject to your privacy and application settings: you grant
    us a non-exclusive, transferable, sub-licensable, royalty-free,
    worldwide license to use any IP content that you post on or in
    connection with Facebook (“IP License”). This IP License ends when you
    delete your IP content or your account unless your content has been
    shared with others, and they have not deleted it.
  2. When you delete IP content, it is deleted in a manner similar to
    emptying the recycle bin on a computer. However, you understand that
    removed content may persist in backup copies for a reasonable period of
    time (but will not be available to others).
  3. When you use an application, your content and information is shared
    with the application. We require applications to respect your privacy,
    and your agreement with that application will control how the
    application can use, store, and transfer that content and information.
    (To learn more about Platform, read our Privacy Policy and Platform
    Page.)
  4. When you publish content or information using the “everyone”
    setting, it means that you are allowing everyone, including people off
    of Facebook, to access and use that information, and to associate it
    with you (i.e., your name and profile picture).
  5. We always appreciate your feedback or other suggestions about
    Facebook, but you understand that we may use them without any obligation
    to compensate you for them (just as you have no obligation to offer
    them)

Again, it’s a bit of a moving target–Facebook updates its terms from time to time–so be sure to check the current, full version.
And it’s also entirely possible that the terms will change at some
point after you’ve uploaded the images. Oh, and while you’re at it, why
not use the panel at right to “Like” my Facebook page so you’ll be sure to get more handy hints like these.

CSS3 10 Uses…

We have seen a tremendous number of advancements in CSS3 web development
over just the past few years. Popular websites all around the Internet
have begun incorporating many unique styles such as rounded corners and mobile-responsive media queries. But even more importantly this has opened the door for creative interfaces to be prototyped in a matter of minutes.

In this article I want to share 10 code snippets relating to brilliant CSS3 box shadow designs. I’ll explain how the code works and how you can implement each box shadow into your own website.

These styles are all attributed to great design influence from other
popular websites. This is a great example of how current web developers are building impactful trends for the future of web design.

1. Fixed Top Toolbar

The Romanian social media service Trilulilu uses a floating top toolbar around their entire website. This can be created quickly using a position: fixed; property on any top bar element. But this additional box shadow takes the effect to a whole new level.

Trilulilu fixed top toolbar box shadow
#banner {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

#banner h1 {
    line-height: 60px;
}

You’ll notice the box-shadow property is actually set up with a
fairly simple value combination. The shadow will fall below the box, and
blur by 3px on either side.

We can use the rgba() method for applying slight
opacity onto the shadow, so the element doesn’t appear too dark. It’s a
subtle addition which will surely capture your visitor’s attention.

2. Sub-Navigation Dropdown

Here is another creative box shadow method applied onto a scalar dropdown sub-menu. A similar effect can be seen on Entrepreneur
as you hover over each of the top main navigation links. This is
definitely a bit more tricky to configure but well worth the patience.

Navigation menu dropdown box shadow styles
#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; }
#bar ul li {  background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }
#bar ul li a { 
display: block; 
color: #fffff7; 
line-height: 45px; 
font-weight: bold; 
padding: 0px 10px; 
text-decoration: none;
z-index: 9999;
}

#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}

#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 500px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px; 
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');
}

The nav links can be styled to change color when selected or on mouse
hover. I’m also adding some rounded borders onto the links and over the
dropdown menu box. This gives a nicer feel rather than hard edges all
around. I am also making good use of the -ms-filter and filter properties which are solely proprietary to Internet Explorer.

If you setup a full navigation system you’ll be able to change the
display set to none and hide the menu once the page loads. Then using
some jQuery you can target the .hover() event and display the subnav bar with updated content.

3. Glossy Shadow Button

This is possibly one of my favorite styles to create just because of
how dynamic it appears on the page. If you can’t tell, this is the small
blue button found on YouTube’s home page after you first login.

jsFiddle YouTube blue CSS3 gradient box-shadow button
blues {
color: #fff;
width: 190px;
height: 35px;
cursor: pointer;
font-family: Arial, Tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}

.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}

The whole button code is a lot to look at, but we’re trying to support as many browsers as possible. There are text shadows and box shadows with accompanying support for MS Internet Explorer 7+. Also we’re setting the background-image property with CSS3 gradients over a wide number of vendor specific prefixes.

But if you love this design style then the hover and active states will also catch your attention.
We’re basically updating the border to include some shadows inside as
you push down, while updating the background gradient to show a bit
darker.

Since there are no images on the button you can update the hex values and morph this to blend into practically any color scheme.

4. Notifications Flyout Menu

I am not a big user of Facebook but I have noticed some UI techniques
from their redesigns. This flyout menu can be compared to your
notifications or friend requests popup found on the homepage.

Facebook notifications box shadow popup display
.flyout {
width: 310px;
margin-top: 10px;
font-size: 11px;
position: relative;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.flyout #tip {
background-image: url('images/tip.png');
background-repeat: no-repeat;
background-size: auto;
height: 11px;
position: absolute;
top: -11px;
left: 25px;
width: 20px;
}

.flyout h2 {
text-transform: uppercase;
color: #666;
font-size: 1.2em; 
padding-bottom: 5px;
margin-bottom: 12px;
border-bottom: 1px solid #dcdbda;
}
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }

There isn’t a whole lot of new mind-bending code to display here. I am using a small .tip class with an internal span element to add the tooltip triangle. It is possible to create pure CSS3 triangles
but this method is not easy, as you may imagine. If you prefer this
method it may be worth hacking something together. But the CSS3 rotation
properties are not supported everywhere; meanwhile images do not
require any fallback method.

5. Apple Page Wrapper

There are so many impressive CSS3 box shadows you can find on Apple’s official website.
This example below is a small box container with a few column spans.
When looking over Apple’s layout you’ll notice many of their pages made
up of numerous wrapper boxes.

CSS3 Apple display banner box-shadow styles
.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}


.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}

You could put together a similar page split up by content boxes of
various width and height. Although I have put a few columns into this
demo it is not a necessary formatting technique by any means. The box
shadow will fit best on a white/grey background. But I think displaying
over any light color would look pretty good.

6. Apple Content Box

This other style of content box on Apple’s website is used mostly for column designs.
These are primarily at the bottom of the page showcasing deals and
other related information. It’s a totally different design style with
the box shadow displaying inside from the top down.

Apple CSS3 box-shadow inset display styles


.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}

.applebox .col {
width: 140px; 
float: left;
margin: 0 0 0 30px;
}

I don’t think this code should be too difficult to follow and copy
onto another div container. The only box-shadow we’re applying is using inset
with the rgba alpha-transparent color codes. So although we have the
drop shadow set to pure black we’re only displaying about a 30% opacity.

7. Featured Links

This is probably my favorite box shadow style from Apple’s current
website. You should find a live demo style of this technique on the iCloud page with a series of floating link boxes.

Apple iCloud featured anchor link boxes

.applefeature {
height: 150px;
margin: 8px;
vertical-align: top;
display: inline-block;
}

.applefeature a {
display: block;
width: 168px;
height: 140px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: 1.3em;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a:hover {
background: #fafafa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

.applefeature a img { 
display: block;
margin: 26px auto 4px;
}
.applefeature a h4 {
display: block;
width: 160px;
font-size: 1.3em;
font-family: Arial, Tahoma, sans-serif;
color: #646464;
text-align: center;
}

These featured links are set to a fixed width and include a distinct
icon and display text. Apple’s example uses a similar box shadow as we
saw in the previous content box. However the entire box can now be activated as a link which includes both the :hover and :active states. There is a lot of flexibility with this link box and you should try playing around with the source code.

It’s possible to shorten the height/width and create a much smaller
list of links. These could be a set of chapters or pages in an article,
or you could make a sub-menu limited with link icons. It’s honestly a
great set of newer CSS3 techniques which demonstrate how much power you
have as a web designer.

8. Framed Images

I’ve added a grey background onto this example so you can see the box
shadow styles more clearly. This box is similar to the featured preview
shots on wordpress.com except I’ve added a bit more depth to the source code.

Wordpress image frame CSS3 box shadow

.wpframe {
background: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 8px;
-webkit-box-shadow: 1px 2px 1px #d1d1d1;
-moz-box-shadow: 1px 2px 1px #d1d1d1;
box-shadow: 1px 2px 1px #d1d1d1;
}

Since the images are given a small padding on either side this frame
appears as a large white border. You can always update the background
color, or even add a small external border to separate the image from
the background. But this fairly simplistic set of styles can be
maneuvered into various box shadow techniques. Play around with the code
and see how you can improve image designs on your own website.

9. Glowing Input Fields

I got this idea after visiting the Pinterest login page
a couple of times. Their animated styles really display some eloquent
examples of multiple inline box shadows, both outside and inset.

CSS3 Pinterest input fields box shadow design

.formwrap { display: block; margin-bottom: 15px; }
.formwrap label { 
display: inline-block; 
width: 80px; 
font-size: 11px; 
font-weight: bold; 
color: #444; 
font-family: Arial, Tahoma, sans-serif; 
}

.formwrap .shadowfield {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930; 
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

Although the initial styles are very attractive I am drawn to the transition effects as you focus on each input field.
You can tab between them and see the immediate difference in so many
properties. The external glowing box shadow is applied along with an
updated inset shadow. Also the text color gets lighter as you’re focused on a particular input, then fades out as you defocus.

Even copying over one of these effects would greatly improve the user
experience of your form fields. Be sure that you don’t go too far
overboard to the point where your forms are barely usable. However most
visitors will enjoy the pleasing aesthetic effects which also encourage
interaction and further involvement with your website.

10. Elastic Shadow Buttons

These unique shadow buttons are styled with a slow transition during
hover and active states. You can find similar examples on the Mozilla homepage with their large “Download Firefox” button. Some of the box-shadow properties actually combine three different shadows together into one command.

jsFiddle Mozilla glossy box-shadow buttons

.blu-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #276195;
background-image: -moz-linear-gradient(#3c88cc,#276195);
background-image: -ms-linear-gradient(#3c88cc,#276195);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
background-image: -webkit-linear-gradient(#3c88cc,#276195);
background-image: -o-linear-gradient(#3c88cc,#276195);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
background-image: linear-gradient(#3c88cc,#276195);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s
}
.blu-btn:hover, .blu-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
}
.blu-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}
.grn-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #659324;
background-image: -moz-linear-gradient(#81bc2e,#659324);
background-image: -ms-linear-gradient(#81bc2e,#659324);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
background-image: -webkit-linear-gradient(#81bc2e,#659324);
background-image: -o-linear-gradient(#81bc2e,#659324);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
background-image: linear-gradient(#81bc2e,#659324);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s;
}
.grn-btn:hover, .grn-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
}
.grn-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}

I’m using full transitions for 200 milliseconds on hover and active
button states. What is so great about these styles is that you can apply
them to nearly any clickable element. Buttons, anchor links, form
elements, or anything else you think is appropriate – although these
styles should be used sparsely so as not to overload your design.

Buttons like these are often saved best in the same manner that
Mozilla uses them. Attach these styles into your blog where you have
buttons for freebie downloads, or something similar. Users love to interact with unique interfaces and this often translates into a much higher percentage for your click-through rating.

Final Thoughts

I hope you can take away some great lessons from this collection of
box shadow techniques. There are many different areas you could focus on
including forms, modal boxes, buttons, toolbars, and even full website
layouts.

Feel free to implement any of these shadow effects into portions of
your own website. There are plenty of other techniques out there, but
this collection is perfect for both beginners and advanced developers.
Also if you have any suggestions or questions about the article you can
share with us in the comments discussion area below.

Major educational trends

The use of tools in education isn’t an old idea, teachers have been using whiteboards, projectors and visual aids like posters to relay concepts in their lessons. But we have come to that fork on the road where we choose either to inject technology into the learning process or not. If you are for technology, here are some of the major trends that will be overwhelming classrooms in 2013.

In this infographic from OnlineColleges.net, you’ll see among others that universities are releasing webcasts to run non-profit courses,  3D printing  can help  studentsget an inside look into blood veins and bodily organs, and classrooms are welcoming educational games, e-books and SMS reminders for project deadlines and schedule changes. This is an exciting time to be a student.

READ MORE »

Infographic Templates & Vector Kits

Dark Highlight Infographic Design KitsInfographics are always fun to read. Making them, it’s something else. True, there are tools you can use to make infographics, or you can opt to create an infographic from scratch but often times there are workarounds that can help you with the ‘graphics’, so you can focus on the ‘info’.
We’ve brought together 30 free infographic design elements, vectors and templates to help you with the presentation of your infographic. The visualization of data is made a lot easier when you can play around with these ready-made elements, mostly available in vector and Photoshop format. These are great design kits for you to start fiddling around and build your own infographics.

READ MORE »

Creative design from the Nation's Capital

Get in touch with us!