Facebook Photos 2017 Size Guide

In its early days, Facebook was all about text and links. But as it has grown up, images have become more and more important. They’re now more important for design and identity on the user interface, like your profile picture or cover photo. And it’s a great way to share photos in galleries and on the timeline. Facebook photos are now a huge part of the site’s appeal even as dedicated image apps like  have become hugely popular as well.

If you’ve come across this page, you’ve no doubt found out for yourself that working out what image sizes to use on Facebook isn’t as easy as it could be. It involves some wrangling to get the results you want. Each type of image on a page, profile, and timeline has its own size and quirks. And Facebook never has been very good about making its help pages easy to find.

Making things even more fun is that Facebook changes things from time to time, usually without any warning. Sometimes it’s a small, incremental tweak. Sometimes it’s an entire overhaul (such as when timelines were introduced and again when they were changed from two columns to one column). So it’s always a bit of a moving target. And there always seems to be a new system just around the corner.

So whether you’re using Facebook pages for social media marketing or simply trying to post photos for friends and family, here’s my freshly updated 2017 version of the unofficial guide for the sizes of Facebook photos on the various parts of the site.

I try to keep this as up-to-date as possible, but Facebook has a nasty habit of making unannounced changes and then rolling them out gradually to users so that not everyone gets them at once. If you’ve noticed something that’s changed, please let me know in the comments so I can update it.

Facebook Cover Photo Size

The Facebook Cover Photo is the large panoramic image space at the top of the timeline.

It’s now displayed at 820px wide by 312px high on computers and 640px by 360px on smartphones.

The image you upload must be at least 399px wide and 150px tall. I recommend uploading ones that are at least 1640px wide and 624px high.  a detailed post explaining why.

You can only designate one photo as your Cover Photo. Panoramas are ideal. Simple crops also work.

And there’s nothing stopping you from assembling a collage in your imaging software, saving it as a single image file, and uploading that. Here’s an example using  (see  for step by step instructions).

facebook

And here’s an example using Lightroom (see  for step by step instructions).

Facebook Photo Size Guide

If you’ve just set up a new Facebook profile or page and don’t yet have a cover photo, just click on the “Add Cover Photo” button at the top of the page where the Cover Photo will go. You’ll then get this warning popup:

Facebook Photo Size Guide

Once you’ve added your photo, you can change it easily. When you’re logged in to your account and on the Timeline view, click on the camera icon at the bottom right of the cover photo–you’ll get a flyout link for “change photo.” If you decide you want to reposition or remove the photo, you can use the same menu.

Facebook Profile Picture Size

The Profile Picture is the smaller, square at bottom that’s to the left of the cover photo. It used to overlay the cover photo’s bottom left corner, but in the latest layout it has been moved to it’s own spot in the top left of the page.

Whatever shape image you upload, it will be cropped to a square.

It displays at 170px by 170px on computers and 128px by 128px on smartphones.

If you use a photo that’s not square, you have some control over which part of the image to use for the crop. When you’re logged in, click on the small camera icon at the bottom right of the profile picture–as you hover it will overlay to a “change image” link.

Tip: If you find that your resulting profile picture, after it’s downsized in Facebook, is blurry, try uploading an image twice the size of the downsized image (that is, an image that is 340px by 340px). That should give a sharper result.

Profile Picture on the Timeline

The profile image that appears next to your name on comments and posts is the same image but is automatically scaled down to 40px by 40px.

Shared Link Thumbnails

Some things got simplified in the new layout. didn’t. But they’ve been improved on the previous version, and we also get some nifty new features like being able to upload a different thumbnail image and use multiple thumbnails that all link back to the shared URL. (I have a separate post on .)

The simplest layout is with a single image. It’s scaled to fill a box 476px by 249px. Like this:

A new feature is that you can include multiple thumbnails, each of which is linked back to the URL you’re sharing. They’re cropped to squares that are 300px by 300px and displayed as horizontal carousel. Like this:

One Photo on the Timeline

When you upload an image to the timeline, a thumbnail is generated automatically to fit within a box that is 476px wide and up to 714px tall. So if you want to use the maximum space available, upload an image in portrait orientation (vertical) that is in the ratio of 3:2.

If you upload a landscape (horizontal) image, it will be scaled to 476px wide and retain its shape. This, for example, is a rectangle in landscape orientation that’s in the aspect ratio of 3:2. The full area of the image appears.

This is another rectangle in landscape orientation, but it’s a much narrower aspect ratio like a banner or panorama. The width is again 476px and the image is scaled so that the entire image area appears.

If you upload that same image rotated 90 degrees, so that it’s tall rather than wide, it will be cropped to the maximum available area of 476px by 714px.

And if you upload a square, the whole image will be displayed, with the width at 476px.

Uploading Multiple Images to a Page Timeline

You can upload multiple photos at once to the timeline. How they’re displayed depends on how many images you’re uploading and the orientation of what I will call the primary image.

The primary image is what I’m calling the one that displays first in the uploading popup, and it also displays larger in some of the layouts. So far as I know there’s not an official name for it, but I’m going to go ahead and use primary image.

As well as displaying first, the primary image has another important role. It determines the layout you get. If you upload 3 images with a square primary image you’ll end up with a different layout than if you upload 3 images with a rectangular primary image.

The easiest way to select which image serves as the primary image is to drag it to the left in the upload dialog.

Here’s an example of what I mean. In this one, I’m uploading two images, a red square and a green portrait rectangle. If the red square is in the first position, like this:

it posts like this:

Uploading exactly the same two images but reversing them, so that the portrait rectangle is first, like this:

displays like this:

The same principle applies if you’re uploading two, three, or four images–the layout will always take its cue from the primary image.

2 Images With Horizontal (Landscape) Primary Image

The full width becomes 476px and the height is cropped to 237px.

2 Images With Vertical (Portrait) Primary Image

2 Images With Square Primary Image

3 Images With Horizontal (Landscape) Primary Image

Because the layout takes its cue from the primary image, you can mix and match the orientations of the non-primary images–they’ll still display the same.

3 Images With Vertical (Portrait) Primary Image

3 Images With Square Primary Image

4 or More Images with a Horizontal (Landscape) Primary Image

You can mix and match the orientations of the non-primary images–they’ll still display the same.

If you upload 5 images or more, it displays only the first 4 images but will add an overlay to the bottom right thumbnail with the number of images that are not displayed (eg. +2 or +4, etc). Like this:

4 or More Images with a Vertical (Portrait) Primary Image

4 or More Images with a Square Primary Image

Full-Width Photos on the Timeline

Yes, they were cool. The image spanned both columns. But Facebook did away with them in their redesign in mid-2014. Your updates now only show in a single column, and there’s no way to make photos wider than that column.

Event Header Images

No matter what shape image you upload as a header image for an even post, it’ll be cropped to an aspect ratio of 16:9. For best results, upload an image that’s 1920 by 1080 pixels. But something to watch out for is that in the main event view it’s scaled down quite a lot, so don’t use fonts that are too small (people can click on the image to open a larger version, but not everyone is going to do that).

When it’s displayed on the main event page it’s scaled to 500 by 262 pixels, like this:

Metadata

While not specifically related to image sizes, it is worth knowing that Facebook strips out all metadata from your images. That includes all GPS, camera type, and other data that your camera might embed, as well as anything like keywords or copyright information you might have added. (An exception is if you’re in ).

15 Award-Winning Websites With Beautiful (And Functional) Designs

Every once in a while, I’ll come across a site that really makes me stop and think. A site that pushes the boundaries of what is known to be possible on the web. Whether it be the design aesthetic, usability, interactivity, sound design, or value that the site provides, we all know what it’s like to stumble across a masterpiece.

15 of the Best Website Designs to Inspire You

1) Feed

Not only is Feed an interesting concept, but it also has a stunning execution that challenges our understanding of what is possible on the web. Through a creative blend of animation and video, the site immerses the user into a very engaging experience. As an atypical site, it contains several unique usability elements as well, including a navigation that doubles as a scroll progress bar.

Screen_Shot_2015-08-04_at_4.50.49_PM.pngFeatured by Awwwards

2) ETQ

ETQ takes a very minimalistic approach to ecommerce with their stripped-down site with big, compelling visuals of their product. Simple, flat, color-based backgrounds accompanied by strong typography help to keep the focus on exactly what the user came there to see: shoes.

Screen_Shot_2015-08-04_at_5.16.53_PM.pngFeatured by Awwwards

3) Mikiya Kobayashi

Mikiya is a Product Designer with a minimalistic portfolio that showcases his work through strong photography and subtle animations. His full site was originally created in Japanese and then translated into English, helping demonstrate the international scalability of his design.

Screen_Shot_2015-08-04_at_5.26.55_PM.pngFeatured by Awwwards

4) The History of Climate Change

Follow the footsteps of Luc Jacquet as Wild-Touch takes you along this visual and educational journey about the history of global climate change. A mixture of historical media and unique animations help tell the story. 

Screen_Shot_2015-08-12_at_11.51.41_AM.pngFeatured by Awwwards

5) Virgin America

In a world where airline websites are known to be riddled with major usability issues, Virgin America has one of the best websites that pushes usability, accessibility, and responsive design forward. In fact, it’s been named as the first truly responsive airline website, a new precedent in the industry.

Screen_Shot_2015-08-04_at_5.38.01_PM.pngFeatured by UX Awards

6) World of SWISS

Another airline?! What is happening?! Yep, SWISS airlines built an incredibly immersive site that tells their story and describes what it’s like to fly with them — and they simply did too great of a job to be ignored. Strong visuals and animations introduce the user to different sections of the site that are packed with information beyond the usual sales and marketing pitch that is so common today.

Screen_Shot_2015-08-04_at_5.48.31_PM.pngFeatured by The Webby Awards

7) L.A. Times

While news sites aren’t exactly known for having the nicest designs or being the easiest to use, the Los Angeles Times site has been updated with a simple, newspaper-like design that’s easy to read and navigate.

Screen_Shot_2015-08-04_at_5.53.05_PM.pngFeatured by The Webby Awards

8) Minimums

Minimums takes a very bold approach to the way that they display their content, leveraging a grid-based website design, big typography, and full-width, high-quality images. Their site serves as a really nice example for how to properly execute a grid structure while still maintaining a nice visual hierarchy in the design.

Screen_Shot_2015-08-04_at_5.59.54_PM.pngFeatured by SiteInspire

9) Guillaume Tomasi

As a Photographer in Montreal, Guillaume Tomasi has built a portfolio that’s truly fit to house his unique and awe-inspiring photography. His surreal photo style is juxtaposed by his simple, flat, empty, and minimalistic portfolio design that places all of the focus on the work itself. His unique series navigation coupled with art-gallery-inspired work introductions and perfect scrolling interactions yield an experience reminiscent of that of a real gallery.

Screen_Shot_2015-08-11_at_4.56.41_PM.pngFeatured by SiteInspire

10) Killing Kennedy

Tons of media outlets covered the 50th anniversary of John F. Kennedy’s death, but because of its website design, National Geographic was able to stand out. Using parallax scrolling to display a blend of video, audio, and historical facts, the user is immersed in the story and duality of John F. Kennedy and Lee Harvey Oswald’s lives.

Screen_Shot_2015-08-04_at_6.05.23_PM.pngFeatured by Think with Google

11) Big Cartel

Despite being a relatively large company, Big Cartel creates a very simple, straightforward, and compelling experience by leading with a creative headline, a video, and … pretty much nothing else. Simple navigation and nice examples of sites created with their platform helps to serve as supporting content that tells the rest of the story.

Screen_Shot_2015-08-04_at_6.16.10_PM.pngFeatured by BestWebsiteGallery

12) Beagle

Beagle does an exceptional job of visually and progressively telling the story of their product in a simple and easy-to-digest way. This is a major challenge for many startups, especially when they’re introducing new concepts to existing markets. People want to know, “What is your product? How does it work? Why do I care?” Beagle answers all those questions while simultaneously showing off their product and compelling the user to purchase. Plus, they’re one of few sites that actually implemented “scroll hijacking” correctly. 

Screen_Shot_2015-08-11_at_5.30.07_PM.pngFeatured by BestWebsiteGallery

13) Woven Magazine

Woven is an online publication that celebrates artists, craftsmen, and makers alike. To me, they represent a confirmation that publications can (and should) have beautiful, engaging sites with easy-to-read content. Free of distractions like pop-ups and obtrusive ads, this site all about the experience of the content itself.

Screen_Shot_2015-08-11_at_5.44.09_PM.pngFeatured by BestWebsiteGallery

14) Inside Abbey Road

Google knocked it out of the park with this highly interactive site, which allows users to step into the Abbey Road Studios. Brilliant sound design, navigation mechanics, and visuals mixed with the usual “Google flair” all help draw visitors in to this well-made site.

Screen_Shot_2015-08-04_at_6.20.06_PM.pngFeatured by FWA

15) JOHO’s Bean

The website for JOHO’s Bean has incredible imagery, interactivity, story telling, visual design, and most of all, sound engineering. These all come together to create a compelling, emotional, and engaging site that tells the story of a coffee bean’s journey. 

Screen_Shot_2015-08-11_at_5.23.01_PM.pngFeatured by FWA

What websites do you admire — and why? Let us know in the comments. 

Editor’s Note: This post was originally published in January 2014 and has been updated for freshness, accuracy, and comprehensiveness.

 

We are losing the fight against Nature, when are we going to give up?

For those who don’t know what is going on, is very simple, greenhouse gases allow shortwave radiation from the sun to pass through the atmosphere and warm the Earth’s surface. The energy that then radiates out from the surface, longwave radiation, is trapped by the same greenhouse gases, warming the air, oceans, and land. When coal, oil, and natural gas are burned, they release enormous amounts of greenhouse gases — especially carbon dioxide, or CO2, which is by far the most prevalent. The gases add up much faster in the atmosphere than natural processes can absorb them, and thereby wreak Earth’s climate system.

To date, warming and melting of the Arctic has occurred far faster than was projected, leading some scientists to conclude that the Arctic could be ice free in the summer as early as 2012. If the Greenland ice sheet were to melt completely, sea level would rise about 20 feet, leaving hundreds of millions of coastal residents — people, plants, animals — homeless. And severe weather events like hurricanes, droughts, and heat waves, already on the rise, will occur more frequently than ever. Countless other disastrous outcomes, many of which can’t be precisely modeled for predictive purposes, make climate change a looming threat.If things continue the way they are by 2050 this will amount to 35 percent of all plant and animal life currently in existence — at least a million species.

IS A FULL OUT WAR

Humans have added so much greenhouse gases that the greenhouse effect that first made life possible now threatens the world as we know it.

The “War Against Nature” is escalating at an exponential rate throughout the world and the bloating population of humans are now feeling the wrath of climate disruption and the consequences of razing its magnificent jungles. Today there are more severe and frequent floods displacing a half of a million people regularly, massive hillside slums, droughts, hurricanes, extinction of fauna and flora and unimaginable squalor with nil by way of sanitation for people.

 

Some Facts

thefacts

 

Who is causing the most damage to Nature?

where

global_warming_exist

Nature fights back… Who is most likely to get hurt?

risk

 

We all lose!

impact

The bottom line…

money

How to stop this war against nature?

Governments can take several steps to reduce the threat of global warming. First and foremost, the United States and other industrial nations must use less of the fossil fuels — especially coal, oil, and gasoline — that produce carbon dioxide, the most significant heat-trapping gas. Industrial countries are responsible for the largest share of worldwide emissions of heat-trapping gases. But these nations also have a great ability to switch to cutting-edge energy technologies that produce fewer of these emissions.

The nations of the world must negotiate a climate change treaty with legally binding limits on emissions of heat-trapping gases.

The United States can reduce its carbon-dioxide emissions through four principal strategies that make use of new energy technologies: improving energy efficiency, developing renewable energy resources such as solar and wind power, reducing gasoline consumption for transportation, and switching from coal and oil to natural gas.

Improve Energy Efficiency

The less energy we use, the less carbon dioxide we will produce. Over the past 20 years, American industry and consumers have begun to switch to more-efficient motors, vehicles, appliances, windows, and manufacturing processes. This switch has saved considerable energy and money, but much greater efficiency is possible.

Develop Renewable Energy

Clean, safe, renewable sources, such as solar, wind, and sustainably grown biomass (plant matter), can provide us with energy but do not contribute to global warming. These technologies are ready to be deployed much more widely, but government policies must encourage their use.

Reduce Gasoline Consumption for Transportation

Cars, trucks, and buses consume over half of the oil used in the United States. Highly efficient gasoline-powered cars, and alternatively fueled vehicles such as electric and fuel-cell cars and buses, can reduce carbon dioxide emissions by using less or no gasoline. In addition, policies can encourage consumers to drive less and to use alternatives to single-passenger automobile trips, such as carpools, bicycles, and public transportation.

Switch from Coal and Oil to Natural Gas

Although natural gas is a fossil fuel, it produces less carbon dioxide than either coal or oil. Changing from coal to natural gas for generating electricity and from oil to natural gas for home heating is thus desirable as a quick fix, even though these switches alone cannot reduce carbon dioxide emissions nearly as much as is necessary.

governments

Additional Government Steps

Reducing American use of coal, oil, and gasoline would start to address the global warming threat, but other steps, such as transferring technology to developing countries, preserving forests, decreasing atmospheric methane, continuing to phase out CFCs, and slowing down population growth, are also important. They can also provide benefits in addition to reducing global warming. Forest preservation, for example, would protect endangered species, while slower population growth would make it easier to supply adequate food for all the world’s people.

Transfer Technology to Developing Countries

American businesses, the government, and international organizations need to find ways to transfer advanced energy technologies to developing countries, so that those nations can build their economies without having to use the older, polluting fossil fuel technologies that the industrial countries are now trying to phase out.

Preserve and Plant Forests

Trees take in carbon dioxide and use it to grow. Deforestation, especially in the tropics where many of the largest, most important forests are located, contributes significantly to global warming. Efforts to preserve forests and to plant trees on deforested land are essential not only for preventing global warming but also for preserving biodiversity.

Decrease Methane in the Atmosphere

Although methane contributes much less to global warming than does carbon dioxide, it is still responsible for about 15 percent of the problem. Among other steps to decrease methane emissions, the nations of the world can prevent leaks from natural gas pipelines, cut methane emissions from landfills, and reduce their use of beef for food.

Continue to Phase Out CFCs

Because chlorofluorocarbons are responsible for depleting the protective ozone layer, the nations of the world have agreed to stop using them. These chemicals also trap heat, so vigilance in enforcing the international agreements to phase out their use will help slow global warming as well.

What Businesses can do?

businesses

Your turn to take action….

Climate change affects us all. Here are tips on how you can personally make a difference.

At Home – reduce, reuse, recycle!

  • Buy minimally packaged goods
  • Recycle paper, plastic, glass, and metal. Reuse, mend, and repurpose things to save money and divert waste from your local landfill
  • Plug air leaks in windows and doors to increase energy efficiency
  • Adjust your thermostat, lower in winter, higher in summer
  • Replace old appliances with energy efficient models and light bulbs
  • Save electricity by plugging appliances into a power strip and turning them off completely when not in use
  • Wash clothes in cold or warm water
  • Run dishwashers only when full and don’t use heat to dry dishes
  • Eat less meat, poultry, and fish
  • Plant Trees – Enter tree planting pledges online, then plant indigenous or locally appropriate trees where you live. View results of tree planting efforts globally.

At Work and On the Go

  • Print double-sided or not at all
  • Always use reusable cups, knives and forks.
  • Think before you travel. If a video conference call will suffice, spare the hassle and expense, and CO2 emissions.
  • Avoid traffic jams and decrease your personal carbon footprint by walking, bicycling, and using mass transit whenever possible. Consider carpooling with friends, neighbors, and co-workers.
  • Taking the stairs can sometimes be faster than waiting in long elevator lines. In addition to saving energy, taking the stairs gives you a mild workout which will help keep you healthy.
  • Have your business join the UN Global Compact and become part of the solution for two of today’s largest scale environmental issues – Climate Change and Water Sustainability.Here are some additional tips on how to kick the CO2 habit 

Know Your Carbon Footprint

Find out how much CO2 your lifestyle produces and the amount of resources it takes to live the way you do. Once you know the impact your lifestyle causes you can start to make adjustments and monitor improvement. Encourage others to do the same. Calculate CO2 emissions resulting from your air travel.

Learn More — Knowledge is power.

Speak up!
You can raise your voice to combat climate change by asking your local and national authorities to engage in environmentally-friendly measures.

Visit one of these organizations for more information

Beginner’s Guide to CSS3

Ever since the announcement of in 2005, the development of the level 3 of Cascading Style Sheet or better known as CSS3 has been closely watched and monitored by many designers and developers. All of us excited to get our hands on the new features of CSS3 – the text shadows, borders with images, opacity, multiple backgrounds, etc, just to name a few.

As of today, not all selectors of CSS3 are fully supported yet. But that doesn’t mean we can’t have some fun testing new CSS3 stuff. This post is dedicated to all designers and developers who are already familiar with CSS 2.1 and want to get your hands dirty on CSS3.0.

It’s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets and more. Feel free to use them in your projects, just make sure it falls gracefully on incompatible browsers.

Getting Started with CSS3

Introduction to CSS3

An (roadmap) official introduction to CSS and CSS3. This document gives you an overall idea on the development of CSS3.

css3 roadmap Beginners Guide to CSS3

CSS3: Take design to next level

Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.

next level Beginners Guide to CSS3

Several tricks with CSS3

Webmonkey brings you through several basic tricks in CSS3, including rounded borders, borders, drop shadows, image tricks and more.

Several tricks with CSS3 Beginners Guide to CSS3

Interview: Six questions with Eric Meyer on CSS3

Folks at Six Revision interviewed Eric Meyer with valuable insights and answers on CSS3.

eric meyer Beginners Guide to CSS3

CSS3: Progressive Enhancement

How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

css3 progressive enhancement Beginners Guide to CSS3

CSS3: Background and Borders

Rounded borders (border-radius)

A guide to creating rounded border with CSS3′s border-radius property.

css rounded borders Beginners Guide to CSS3

Rounded borders with image (border-images)

How to use images in borders with border-image property.

css image border Beginners Guide to CSS3

CSS3 borders, backgrounds and boxes

Detail explanation with examples of new CSS3 properties like: background-clip, background-origin, background-attachment, box-shadow, box-decoration-break, border-radius and border-image.

CSS3 borders backgrounds and boxes Beginners Guide to CSS3

CSS3: Text

Letterpress Effect

Create simple letterpress effect with CSS3.

letterpress effect Beginners Guide to CSS3

Six text effects using text shadow

Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.

css text effect Beginners Guide to CSS3

Text emboss

How to correctly add an embossed effect to any text depending on the colors used.

text emboss Beginners Guide to CSS3

Beautiful typography

How to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3.

Beautiful typography Beginners Guide to CSS3

Text Rotation

Uses an image sprite and a sprinkle of CSS to get things positioned right.

text rotation Beginners Guide to CSS3

Outline Text

How to add an outline, or stroke, to your text using the CSS3 text-stroke property.

text outline Beginners Guide to CSS3

Text masking effect

Interactive text masking effect using the text-shadow CSS property.

text shadow Beginners Guide to CSS3

Link nudging (animation) with CSS3

Ditch Javascript and create nudge effect entirely with CSS3.

text nudge Beginners Guide to CSS3

CSS Selection Styling

Change text selection styling with CSS3.

text highlight Beginners Guide to CSS3

CSS3: Menu

Multiple-columns content

Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column.

multiple columns Beginners Guide to CSS3

Sexy Tooltips with Just CSS

How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.

Sexy Tooltips Beginners Guide to CSS3

More tooltips:

CSS3 & jQuery Drop-Down Menu With Integrated Forms

jQuery and CSS3 powered navigation menu that supports integrated forms.

CSS3 & jQuery Drop Down Menu Beginners Guide to CSS3

Dropdown menu

How to create a Apple.com alike multi-level dropdown menu using border-radius, box-shadow, and text-shadow.

dropdown menu Beginners Guide to CSS3

CSS3-Only Tabbed Area

Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.

CSS3 Only Tabbed Area Beginners Guide to CSS3

3D Ribbons with CSS3

Create nice looking 3D ribbons with only CSS3.

3d ribbons Beginners Guide to CSS3

CSS3: Drop shadow

Drop shadow in image

Showcase several techniques and some of the possible appearances for dropping shadows without using images.

Drop shadow in image Beginners Guide to CSS3

Glow Tabs with Box Shadow

How to create intuitive and beautiful tabs in CSS3 with no image.

Glow Tabs with Box Shadow Beginners Guide to CSS3

CSS3 boxes without using images

15 different styles of boxes without using images. Works in Chrome and Safari.

CSS3 boxes without using images Beginners Guide to CSS3

CSS3: Buttons

Tutorial: Pretty buttons

How to create beautiful cross-browser compliant CSS3 buttons that degrade gracefully.

pretty css3 buttons Beginners Guide to CSS3

Tutorial: Dynamic buttons

How to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

dynamic css3 button Beginners Guide to CSS3

Speech Bubbles

Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.

speech bubble Beginners Guide to CSS3

BonBon buttons

CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

BonBon buttons Beginners Guide to CSS3

Github alike buttons

Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.

Github alike buttons Beginners Guide to CSS3

Spinning, Fading Icons with CSS3 and MooTools

How to use CSS3 and MooTools to create dymanic, rotating elements.

Spinning, Fading Icons Beginners Guide to CSS3

 

CSS3: transparency and overlay

Opacity and transparency

Create image transparency with CSS3.

css3 opacity Beginners Guide to CSS3

Image overlay

Practical application of the CSS3 border-image property.

CACTC3 awesome overlays Beginners Guide to CSS3

More

Cheatsheets & References

CSS3 Cheat Sheet (PDF)

Printable cheatsheat with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.

CACTC12 css 3 cheat sheet pdf Beginners Guide to CSS3

CSS Support in Opera 9.5

Complete list of the supported CSS selectors in Opera 0.5.

opera 95 css Beginners Guide to CSS3

Fonts Available for @font-face Embedding

Comprehensive list of fonts currently licensed for @font-face embedding.

font face Beginners Guide to CSS3

CSS 3 Selectors – Explained

A guide and reference to CSS3 selectors and its patterns.

css3 selectors Beginners Guide to CSS3

Cross-browser CSS3 Rule Generator

CSS3 rules you can copy and paste onto your own stylesheet.

CSS3 Click Chart

Get CSS3 styles like boz sizing, border radious, text shadow, and more within a click.

click chart Beginners Guide to CSS3

CSS Content & Browser Compatibility

Complete list of selector tables of both CSS and CSS3 with declaration for browser-compatibility check.

content browser compatibility Beginners Guide to CSS3
(bellefoong)

 

Creative design from the Nation's Capital

Get in touch with us!