Category tooltips

My Weekly Tweets August 14th to August 20th 0

Aug21

Drawing People Part 1: Proportion http://bit.ly/4LPrI *awesome tips for drawing, all #vector examples, #design #drawingRT: @seanHodge:about 9 hours ago

Realistic AS3 smoke particle effect with Desuade Partigen 2.. #FlashDevabout 9 hours ago

50 Amazing #Photoshop Text Effects #Tutorial http://su.pr/1KXdvs(via @wpbulk)(via @wpbulk) RT: @hashphotoshop:about 9 hours ago from TwitterFox

5 Must-Use Tips for Negotiating w/ Clients| via @sitepointdotcom | http://bit.ly/Oh5Tz #entrepreneur #freelance #designabout 9 hours ago

ActionScript 3.0 Design Patterns” http://bit.ly/2BqQym RT: @jasonwalz: Retweeting @web2000: “about 9 hours ago

Very interesting comments going on over @ “Hi, I’m Grace Smith: Five Things You Didn’t Know About Me” http://bit.ly/YcXgp (via @seandelaney)about 9 hours ago

JQuery File Upload Plugin Script – Nice plugin http://icio.us/iiur1t RT: @andysowards:about 9 hours ago

7 Essential Steps to Creating an Efficient Mobile Office http://bit.ly/17ge7u RT: @sitepointdotcom:about 9 hours ago

50 Extraordinary and Attractive Billboards http://tinyurl.com/nawnrw #advertising #photoshop #design(via @photoframd) RT: @hashphotoshop:about 9 hours ago

30 Funny Photomanipulations of Animals by HumanDescent http://bit.ly/ygVoX – super cool, will have try too ;) via obstgemuese RT: @abduzeedoabout 9 hours ago

jQuery plugin – Easy Image or Content Slider | Css Globe | Squico – http://bit.ly/MzeLq RT: @open4gjoomla:about 9 hours ago

7 Awesome Resources to Test Cross Browser Compatibility of Your Website http://bit.ly/f3GAz RT: @webdesign_news:about 9 hours ago

30 Clean and Bright Website Designs http://tinyurl.com/ljew2r #photoshop #web #design(via @photoframd) RT: @hashphotoshop:about 9 hours ago

Texture Thursday: Rusty Shapes http://ow.ly/15LMbJ RT: @cheth: Psdfan-about 9 hours ago

What makes a good logo? http://bit.ly/UGPsB RT: @DesignerDepot:about 9 hours ago

35 Best Flash Websites Ever. http://twurl.nl/eab8vt RT: @jasonwalz:about 9 hours ago

Corporate Blog Design: Trends And Examples http://bit.ly/1AI4Ceabout 11 hours ago

6 Simple Ways For Freelancers To Increase Productivity http://tinyurl.com/kvnvgaabout 11 hours ago

“250+ Resources to Help You Become a CSS Expert | Webdesigner Depot” – http://bit.ly/1rbbyC RT: @cheth: Reading:about 12 hours ago

* what a great idea i love it * Five Things You Didn’t Know About Me via @gracesmith http://tinyurl.com/mbmy4nabout 13 hours ago

How To Create A Simple Portfolio Site Running On Surreal CMS. http://twurl.nl/hgy8b2 RT: @jasonwalz:about 13 hours ago

How To Create a Flash XML Slideshow Player – http://bit.ly/35hwd RT: @Minervity:about 13 hours ago

60+ Unusual Business Card Ideas & Designs. http://twurl.nl/6g6ygy RT: @jasonwalz:about 14 hours ago

Time Management Tips for the Busy Freelance Designer: http://bit.ly/VemtU RT: @chadengle:about 14 hours ago

Using the Loader Class in AS3 #pji #as3 #flash #flex http://bit.ly/xL1LC RT: pjinteractiveabout 14 hours ago

16 Logo Design Processes Of Top Logo Designers | Pixelactic http://bit.ly/4BdKw RT: @seanHodge: RT @pixelacticabout 14 hours ago

Free Flash-XML Image Rotator. http://twurl.nl/whpj4c RT: @jasonwalz:about 14 hours ago

10 Professional Looking Free CSS Menu’s – http://bit.ly/VgZ3j RT: @Minervity:about 14 hours ago

10 Vital Lessons for Web Start-Ups http://bit.ly/4xyQlD (via @BoagLinks) RT: @Minervity: RT @smashingmag:about 14 hours ago

25+ Awesome New Textures http://ow.ly/kHqS RT: @cheth:about 15 hours ago

25 High-Quality, Adobe Illustrator Tutorials for Creating Cute Characters http://bit.ly/bnUfr *cute #vector characters, my fav subject RT:about 15 hours ago

Essential Tips for Designing an Effective Homepage http://bit.ly/GepzN RT: @spicydesign:about 15 hours ago

50 Extraordinary and Attractive Billboards http://bit.ly/18rHJW RT: @spicydesign: #Inspiration:about 15 hours ago

15 Beautiful Free Web 2.0 #Fonts http://bit.ly/g8Yo0 RT: @spicydesign:about 15 hours ago

Interview with Envato Founders Collis and Cyan http://bit.ly/jSU9P RT: @VECTORTUTS:about 15 hours ago

Illustrator Tutorial: How to Make an Icy Cocktail http://bit.ly/GHGHa *looks yummy RT: @seanHodge:about 15 hours ago

30+ Dazzling and Interactive Media Facades http://bit.ly/4DpBH1 RT: @seanHodge:about 15 hours ago

Beautiful Twitter Icon Sets Mega Pack http://bit.ly/1Ce4Y RT: @seanHodge:about 15 hours ago

22 Beautiful #Photoshop Web Layout Tutorial Sites – http://bit.ly/zoLFw #webdesign(via @bkmacdaddy) RT: @hashphotoshop:about 15 hours ago

52 Professional Website User Interface Photoshop Tutorials – http://bit.ly/CqHah RT: @andysowards: RT @Minervityabout 15 hours ago

Duplicate Movieclip with AS3 #pji #as3 #flash #flex http://bit.ly/319ivl #FlashDev RT: @AS3hash: RT @pjinteractive:about 15 hours ago

30 Superb Anime Art Illustrations – http://tinyurl.com/l72lyv via @TheWebBlend: RT: @mistygirlph:about 15 hours ago

20+ Amazing iPhone App Websites http://bit.ly/nWhy6 RT: @VECTORTUTS:about 15 hours ago

The Big Collection Of Amazing Photoshop Actions | http://bit.ly/5TQT5 | #adobe #photoshop(via @adobeshack) RT: @hashphotoshop:about 15 hours ago

10 tips: How to improve your Photoshop Skills – http://bit.ly/Ah4il – old but still very useful post :) RT: @abduzeedo:about 15 hours ago

25+ Stunning Photoshop vector Icon Creation Tutorials #design http://bit.ly/2l9rpb RT: @webdesignjoy:3:59 PM Aug 19th

Buy Windows 7 in Europe … at Half the US Price! http://bit.ly/1Hmhsz RT: @sitepointdotcom:9:52 AM Aug 19th

75 Free Useful Icon Sets for Web Designers and Developers. http://twurl.nl/xat2bj RT: @jasonwalz:9:52 AM Aug 19th

14 Easy to Implement Drop Down Menu Solutions http://snurl.com/qil7p RT: @webdesignledger:9:51 AM Aug 19th

72+ Brilliant and Most Creative USB Sticks Ever Created – http://bit.ly/mpcsf RT: @Minervity:9:49 AM Aug 19th

How To Create a Realistic Golden “Bling” Text Effect – http://bit.ly/LGqIC RT: @Minervity:9:49 AM Aug 19th

How To Create a Realistic Water Text Effect – http://bit.ly/jSEdX RT: @Minervity:9:49 AM Aug 19th

Photoshop 101 – Working With Alpha Channels | Design Reviver #photoshop #photo http://bit.ly/20GdE0(via @weblittlepieces) RT: @hashphotoshop9:48 AM Aug 19th

jScrollPane is a jquery plugin which allows you to replace the browsers default vertical scrollbars http://tinyurl.com/bxt9v89:48 AM Aug 19th

CSS Sprites with Inline Images. http://twurl.nl/vz5b3z RT: @jasonwalz:9:16 AM Aug 19th

Web Analytics Tools – Analyzing The Traffic On Web. http://twurl.nl/tmykax RT: @jasonwalz:9:16 AM Aug 19th

How To Create a Flash XML Playlist Music Player – http://bit.ly/GX6rv RT: @Minervity:9:16 AM Aug 19th

HTML 5 Drag & Drop. http://twurl.nl/wsomsn RT: @jasonwalz:9:13 AM Aug 19th

jQuery & CSS scroll control plugin – http://u.nu/7dmy RT: @9swords:9:13 AM Aug 19th

15 Helpful Web Based Broken Link Checkers. http://twurl.nl/qmcyjy RT: @jasonwalz:9:06 AM Aug 19th

40 Impressive Flash Photography Websites http://bit.ly/Gb0Fj ★★★★★ RT: @Woork:9:04 AM Aug 19th

250+ Resources to Help You Become a CSS Expert – http://ow.ly/kpu9 RT: @juice_creative: RT @gaksdesigns9:04 AM Aug 19th

20 Top Design Blogs Looking for Freelance Writers http://bit.ly/g49Uz RT: @juice_creative:9:04 AM Aug 19th

10 Handy & Cool jQuery Plugins http://su.pr/2oeuxY RT: @howsthedotcom:9:04 AM Aug 19th

12 Alternative Digital Image Manipulation Tools – http://bit.ly/1BEGyp RT: @Minervity:9:04 AM Aug 19th

Mastering “Bevel and Emboss” – From Beginner to Pro – http://bit.ly/7ISPV RT: @Minervity:9:03 AM Aug 19th

How To Create a Flash XML Slideshow Player – http://bit.ly/35hwd RT: @Minervity:9:03 AM Aug 19th

9 Tips to Help Freelancers Prepare for a Vacation. http://twurl.nl/oano6n RT: @jasonwalz:9:03 AM Aug 19th

Make a Shiny Glowing Glass Button – http://bit.ly/11zcXD RT: @Minervity:9:03 AM Aug 19th

How To Create a Realistic Water Text Effect – http://bit.ly/jSEdX RT: @Minervity:9:02 AM Aug 19th

10 Beautiful Customizable Photoshop Twitter Background Templates – #Photoshop – http://bit.ly/wMDTb RT: @cheth:7:21 AM Aug 19th

500++ Free Twitter Icons Ultimate Collection – http://bit.ly/24avjf RT: @cheth:7:20 AM Aug 19th

30 Designers, Portfolios + Work You Must-See & Bookmark! http://bit.ly/uV0mG #design RT: @andysowards: RT @bkmacdaddy7:10 AM Aug 19th

33 super engagers to follow http://bit.ly/2KkvSD RT: @andysowards:7:10 AM Aug 19th

How to Create an Illustrated Cartoon Character – http://bit.ly/npEe7 RT: @Minervity:7:09 AM Aug 19th

5 Different Ways To Create Stylish Contact Form Layouts – http://bit.ly/vyBFf RT: @Minervity:7:09 AM Aug 19th

How to Create a Slick and Clean Button in Photoshop http://tinyurl.com/cwmz92 #photoshop(via @binoyxj) RT: @hashphotoshop:7:09 AM Aug 19th

Totally Free Web Graphics and Backgrounds – http://www.hooverwebdesign…. RT: @vickylyn:7:08 AM Aug 19th

12 Useful Web Based Twitter Tools! – http://bit.ly/M6aUB RT: @Minervity:7:08 AM Aug 19th

How to Create Stunning and Bold 3D Text #design http://bit.ly/c4dGx RT: @webdesignjoy:7:08 AM Aug 19th

Mastering Photoshop With Paths http://bit.ly/ibqqC7:07 AM Aug 19th

10 Useful WordPress Hook Hacks http://bit.ly/3DixZ37:07 AM Aug 19th

Android GUI PSD Vector Kit http://bit.ly/1Muno7:06 AM Aug 19th

Taming Advanced CSS Selectors http://bit.ly/ZBMsZ7:06 AM Aug 19th

Free and Commercial Stock Photography Sites http://bit.ly/Bec9c7:05 AM Aug 19th

How To Effectively Communicate With Developers http://bit.ly/P8TZj7:05 AM Aug 19th

AnythingSlider jQuery Plugin. http://twurl.nl/bv45er RT: @jasonwalz:11:00 AM Aug 17th

“Be prepared” with these edible business cards: http://bit.ly/11X4nM RT: @DavidAirey:10:58 AM Aug 17th

Manipulate Smoke to Create Hyper-Real Images http://ow.ly/15LkAz RT: @cheth: psdtuts+10:58 AM Aug 17th

The 13 Most Powerful Words In Marketing http://bit.ly/oW9nZ RT: @Alvin: RT @the_gman: RT @phaoloo:10:58 AM Aug 17th

96 Typography Blogs & Resources http://bit.ly/1XYVKZ | Via @chadengle @thedayafter @behoff @evajais RT: @imjustcreative:10:57 AM Aug 17th

5 Best SEO Tips For Bloggers http://bit.ly/HRcvu RT: @BuzzEdition: RT @phaoloo:10:57 AM Aug 17th

90 New And High Quality Photoshop Web Layout Tutorials http://bit.ly/5txlS RT: @seanHodge:8:52 AM Aug 17th

How to Effectively Organize your Photoshop Layers | Webdesigner Depot http://bit.ly/13ypm1 *simple, but goog info RT: @seanHodge @tweetmeme8:52 AM Aug 17th

25 Amazing Inspirational Vector Illustrations http://bit.ly/hi3SU RT: @spicydesign:8:28 AM Aug 17th

Taming Advanced #CSS Selectors http://bit.ly/TP7jd RT: @spicydesign:8:28 AM Aug 17th

5 Best And Colorful Collection Of Dual-Screen Wallpapers : http://su.pr/18eZgc (@SmashingApps) RT: @naldzgraphics: RT @naveedjavaid8:27 AM Aug 17th

40 Incredibly Inspirational Retro & Vintage Photoshop Tutorials http://bit.ly/mRowl RT: @PSDTUTS:7:49 AM Aug 17th

Creating Realistic Surreal Compositions http://icio.us/jvayr1 – RT @seitengestalter @PhotoshopPLUS @hashphotoshop: #photoshop #tutorial7:49 AM Aug 17th

11 Outstanding & Fresh Blog Designs You Should Check Right Now http://bit.ly/15LHUf RT: @Minervity: RT @buysellads:7:47 AM Aug 17th

53 Insanely Dark And Macabre Photo Manips To Scare Your Pants Off – http://bit.ly/3GYR5i RT: @Minervity: RT @bkmacdaddy:7:46 AM Aug 17th

21 Total Mayhem Photoshop Tutorials – http://bit.ly/C66AJ RT: @Minervity:7:15 AM Aug 17th

The Ultimate Collection of The Best Ornament Photoshop Brushes – http://bit.ly/16wCwV RT: @Minervity:7:14 AM Aug 17th

10 User Interface Design Fundamentals via @carsonified http://bit.ly/GtAKP RT: @designwashere:7:14 AM Aug 17th

27 Useful Logo Design Tutorials and Tips http://bit.ly/2nVQTv RT: @designwashere: RT @VECTORTUTS:7:14 AM Aug 17th

38 Impressive Graphic Designer Portfolios ? Wanna have an Ideal Portfolio?? #design http://bit.ly/BBZVl RT: @webdesignjoy:7:13 AM Aug 17th

30 HQ Shopping Cart Templates to Help You Sell: http://digg.com/d310yJM?t RT: @styletime:7:13 AM Aug 17th

Building a Kick Ass Website or Web App – The Motherload of Resources & Links: http://bit.ly/WV2if RT: @gracesmith:7:13 AM Aug 17th

19 Firefox Add-ons For Designers http://bit.ly/JGh94 RT: @sitepointdotcom:7:12 AM Aug 17th

Super Cool Retro Poster in 10 Steps in Photoshop http://bit.ly/HfaA RT: @paulogabriel: RT @PSDTUTS:7:12 AM Aug 17th

Useful Web Design E-Mail Newsletters http://bit.ly/3uMhpZ RT: @styletime:7:12 AM Aug 17th

Can HTML Keep up with other RIA technologies? http://tinyurl.com/lrpsss by @davidyack #html #ria #FlashDev RT: @AS3hash: RT @carlosfigueroa1:57 PM Aug 14th

InpsireMix | Your Daily Design Inspiration http://inspiremix.com/ RT: @Woork:1:57 PM Aug 14th

@gracesmith hey thx a lot for the #followfriday :) )1:45 PM Aug 14th

InDesign Quick Tip: Indent To Here http://bit.ly/S7nJJ RT: @VECTORTUTS:1:43 PM Aug 14th

10 Important Traits of a Great Blog Design: http://bit.ly/hLo3S RT: @DesignerDepot:1:43 PM Aug 14th

6 Keys to Effectively Promoting Your Website Through a Blog: http://bit.ly/13lrbu *Must read post RT: @gracesmith:1:42 PM Aug 14th

3D Tag Clouds Using jQuery – http://bit.ly/nCj7N RT: @open4gjoomla:12:16 PM Aug 14th

how to make an old western wanted poster in #photoshop http://bit.ly/HSV9n(via @100twits) RT: @hashphotoshop:10:52 AM Aug 14th

The 65 Most Annoying things about the Web Today | UXbyDesign.org – http://bit.ly/nJqnE RT: @cheth:10:40 AM Aug 14th

20 Great Designs using Black & White http://bit.ly/2Gar9x RT: @cheth: I love black! ;) >10:16 AM Aug 14th

25+ Astonishing Examples of Creative Photoshopped Ads: http://bit.ly/brwbi RT: @cheth:10:16 AM Aug 14th

30+ Fantastic HDR Photos by Grey Jones: http://bit.ly/2pdL8F RT: @cheth:10:16 AM Aug 14th

Top 30 Design Blogs for Great Tutorials & Inspiration – http://tinyurl.com/o8c6e3 RT: @jasonwalz: Retweeting @TheWebBlend:9:23 AM Aug 14th

CSS3 rounded corners for every browser? An alternative quick solution without headache http://tinyurl.com/o28fxz ★★★★★ RT: @Woork:9:23 AM Aug 14th

Create a Realistic Candle in Inkscape http://bit.ly/EGQic RT: @VECTORTUTS:9:23 AM Aug 14th

7 Things You Can Do to Boost a Stagnant Freelancing Career – http://bit.ly/Q2NdZ RT: @gracesmith: Level Up:9:22 AM Aug 14th

Creative Textures in Hi-Resolution for Print & Screen. http://snurl.com/pvmpb RT: @jasonwalz:9:04 AM Aug 14th

15 Awesome Inspiring Artworks by Nik Ainley. http://snurl.com/pvmq9 RT: @jasonwalz:9:04 AM Aug 14th

Best Photoshop Tutorials To Boost Your Skills! | Best Design & Development Resources http://ow.ly/2bnUpZ RT: @seanHodge: RT @antsmagazine8:15 AM Aug 14th

80+ Logo Designers Huge Essential Toolbox http://bit.ly/ed4Zy RT: @spicydesign:8:15 AM Aug 14th

40+ Awesome Tutorials and Techniques For WordPress Theme Developers http://bit.ly/zMNfD RT: @spicydesign:8:14 AM Aug 14th

21 Fonts That Shouldn’t Be Free…But Are! http://bit.ly/iF8NC RT: @styletime: RT @gaksdesigns:8:14 AM Aug 14th

Photoshop Grunge Brushes – The Ultimate Collection http://bit.ly/NjzS2 RT: @designwashere:8:13 AM Aug 14th

8 Pivotal Developments in Web Typography http://bit.ly/22c87 RT: @webupd8: RT @yasendimov RT: @creattica:8:13 AM Aug 14th

Shadow Effect with CSS3 http://bit.ly/sB5ji <- text, box and rounder corners RT: @webupd8:8:13 AM Aug 14th

25 Awesome Slider Techniques NEED TO HAVE for any Web Developer http://bit.ly/eC99H RT: @webupd8: RT @paviles RT @BebopDesigner:8:13 AM Aug 14th

6 jQuery growl-like notification systems http://is.gd/2gbK8 RT: @webupd8: RT @paviles RT @phpcamp:8:12 AM Aug 14th

35+ incredible Digital Abstract Arts http://ow.ly/k2k4 RT: @mistygirlph:8:12 AM Aug 14th

How Popular Website Designs Looked Like In Late 90’s : http://su.pr/1fM2c1 (via @SmashingApps) RT: @naldzgraphics: RT @naveedjavaid8:11 AM Aug 14th

5 Regular Expressions Every Web Programmer Should Know – http://bit.ly/TcVJe RT: @smashingmag:8:10 AM Aug 14th

The Quest for Inspiration – http://bit.ly/uODLW RT: @Minervity:8:10 AM Aug 14th

20 Beautiful Examples of Urban Decay Photography http://bit.ly/199XzK RT: @andysowards: RT @r27 RT @PSDTUTS:8:10 AM Aug 14th

30 PHP Best Practices for Beginners http://bit.ly/NGaB9 RT: @andysowards:8:09 AM Aug 14th

40 Great Web Interface Design #Photoshop Tutorials – http://is.gd/2fhjA (via @accessko)(via @EFranz13) RT: @hashphotoshop:8:09 AM Aug 14th

Free Hi-Res Swirls and Flourishes #Photoshop #Brushes: http://bit.ly/zPcVb(via @writer_sheri) RT: @hashphotoshop:8:09 AM Aug 14th

The most creative and skilful corporate web designs of all times http://bit.ly/10y5p3 RT: @seanHodge:8:08 AM Aug 14th

20 Top Design Blogs Looking for Freelance Writers http://bit.ly/15a6Qx RT: @styletime:8:08 AM Aug 14th

40 Fresh High-Quality Free Fonts For Your Designs | Fonts | instantShift http://bit.ly/2ynRta RT: @seanHodge: RT @instantshift8:08 AM Aug 14th

40 Absolutely Stunning Dark #Ads http://bit.ly/Ke8X3 RT: @webupd8: RT @webdesign_news #Inspiration:8:07 AM Aug 14th

20 Free Keyword Research Tools – Comprehensive Insight http://bit.ly/UFKt5 RT: @webupd8: RT @webdesign_news #SEO:8:07 AM Aug 14th

15 Great Free Online File Sharing Alternatives #design http://bit.ly/u76g0 RT: @webdesignjoy:8:07 AM Aug 14th

20 portfolios from great logo designers – http://is.gd/2gEak (via @mlane) *love some of these logo designers RT: @seanHodge: RT @VECTORTUTS:8:06 AM Aug 14th

How To Create the Photo Manipulation “Brightness Tomorrows” http://bit.ly/19nYGo RT: @PSDTUTS:8:06 AM Aug 14th

Image-free CSS Tooltip Pointers – A Use for Polygonal CSS? 0

Mar26

A while back, Tantek Celik released A Study of Regular Polygons, which used a little-known CSS trick to create non-rectangular shapes such as triangles and pentagons with nothing more than an ordinary HTML element. The experiment is very interesting and really cool, but the practical takeaway wasn’t immediately clear.

Recently however, we’ve been working on building the markup for upcoming jQuery UI widgets, we came across a case that prompted us to take another look at the technique. The tooltip widget design, fairly common in websites these days, uses a small triangular “speech bubble” pointer that is typically created quite easily with a background image. However, we wanted to maintain our commitment to keeping our jQuery UI widgets entirely themable, and using an image for that purpose wouldn’t fit with the flexibility jQuery UI requires. How to solve this problem without any need for images? That challenge led us to the experimental approach using polygonal CSS, shown below.

The Design Approach

The jQuery UI planning wiki page has several examples for the tooltips we intend to build into the library. For this article though, we’re just focusing the following simple tooltip design:

tooltip design example

The challenge in executing this for jQuery UI is that we’ll need to pull it off without relying on images for the triangle shapes, because the jQuery UI CSS Framework enables markup to be entirely re-themable, using an infinite combination of backgrounds, borders, corner radius, and more. Using custom images for the pointer triangles would never match the flexibility and scalability of CSS alone. Since polygonal CSS can create non-rectangular shapes without images, perhaps it can provide the means to achieve our goal.

Polygonal CSS works by setting an element’s width to something small and then setting thick borders on less than 4 sides. To make a triangle shape, 2 of those borders have to have transparent color, essentially masking out the one visible border at an angle in attempt to connect corners.

The concept is easiest explained through a code sample. The following CSS will style a div into a red triangle:

READ THE WHOLE ARTICLE HERE