Dưới đây là 3 giải pháp phổ biến hiện nay.

1. sIFR

http://www.mikeindustries.com/blog/sifr/

Giải pháp này được nhiều người biết đến. sIFR sử dụng flash để thay thế vào vị trí text cần thay font. Version mới nhất hiện nay là 2.0.7. Bạn có thể thử version 3 (beta) tại đây

2. cufon

http://cufon.shoqolate.com/generate/

Giải pháp này xuất hiện sau sIFR. Khác với sIFR, Cufon sử dụng javascript kết hợp với canvas trong HTML hoặc VML để render font cần sử dụng. Cách sử dụng có phần đơn giản hơn, và chạy tốt trên hầu hết các trình duyệt phổ biến hiện nay.
Xem thêm các mẫu website sử dụng cufon tại đây

3. font-face

Giải pháp đơn giản nhất, sử dụng CSS3. Cùng với sự phát triển của các nhà phát triển browser để hỗ trợ tốt CSS3 & HTML5, đây là giản pháp đơn giản, giảm thiểu thời gian phát triển cho developer. Vấn đề là các browser version cũ thì không thể nào sử dụng phương pháp này.

Tham khảo thêm về phương pháp này:
http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master
http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/

Kết hợp Cufon & font-face (24-11)

http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

Bạn nghỉ rằng mình là một developer, nhưng developer cũng có nhiều loại cũng như level khác nhau, bạn nghỉ rằng mình đang ở vị trí nào ?! Chắc hẳn có nhiều người, trong đó có cả mình, phát triển kỹ năng nghề nghiệp của mình theo cách search google, tìm những topic, những site chia sẽ để kiếm những gì mình cần cho project xác định nào đó, copy + paste, xong, thế là ok rồi.

Vậy thì sao nhỉ, có gì sai hay có vấn đề gì? Chẳng có vấn đề gì vì những blogger đó share những source đó for free, những topic trên các forum lớn đã có sẵn, việc gì mình phải ngồi cày cuốc lại làm gì.

Vậy vấn đề ở đây là gì?

Khi bạn copy + paste đơn thuần một cách mù quáng, bạn đánh mất giá trị của bài viết của blogger, của người post với những giải thích cặn cẽ của họ. Nếu chỉ đơn giản vậy họ có thể cho bạn 1 link download compress file, hoặc nếu bụng hơn thì cả uncompress file, chẳng việc gì phải ngồi post 1 bài viết tỉ mỉ làm gì.

Và tất nhiên nếu bạn là một developer như vậy, kiểu mì ăn liền, chắc hẳn sẽ khó cho bạn để hiểu cách thức hoạt động của nó thế nào, và tất nhiên việc phát triển nó cho phù hợp nếu có yêu cầu sẽ rất khó khăn.

Khi copy + paste đơn thuần bạn duplicate source đó mà không nắm được kỹ thuật, ý tưởng của nó, vậy làm thế nào bạn có thể viết ra một tutorial khác, như hàng tá các tutorial mà bạn đã từng xe qua nhưng nhớ thì ít.

Vậy bạn muốn làm công việc search nhiều hơn hay tư duy để viết nhiều hơn? mình nghỉ tự viết lấy vẫn hơn, dù kg hay chưa tốt, nhưng nó là sản phẩm của mình, giúp mình có hứng thú với công việc hơn, và biết đâu lương sẽ cao hơn. Phát triển khả năng bản thân cũng là cách để khẳng định cái tôi và vị trí của bản thân.

Làm thế nào thì tuỳ, mình cũng đang suy nghỉ, mỗi người mỗi cách, kg phải ai cũng thông minh kiệt xuất, nhưng dậm chân tại chỗ cũng kg phải là cách để tồn tại trong xã hội đang phát triển kg ngừng.

“Life is fighting”, liệu bạn có đủ sức.

Mình có được gọi là CSS Ninja kg nhỉ?

My collection: some gallery sites about cool CSS base sites.

1. CSS Elite http://www.csselite.com
   
2. CSS Fury http://cssfury.com
3. CSS Drive http://www.cssdrive.com
4. CSS Heroes http://www.cssheroes.com
5. CSS Showcase http://www.cssshowcase.co.uk
6. CSS Loggia http://www.cssloggia.com
7. CSS Ecssited http://www.ecssited.com
8. CSS Creme http://csscreme.com
9. CSS Design http://www.css-design.fr
10. CSS Mania http://cssmania.com
11. CSS Impress http://www.cssimpress.com
12. CSS Brigit http://cssbrigit.com
13. CSS Based http://cssbased.com
14. CSS Perk http://www.cssperk.com
15. CSS Daddy http://www.cssdaddy.com
16. CSS Galeria http://www.galeriacss.com.ar
17. CSS Blaze http://www.cssblaze.com
18. CSS Chick http://www.csschick.com
19. CSS Star http://www.cssstar.com
20. CSS Amigo http://cssamigo.com
21. CSS Count http://www.csscount.com
22. CSS Cookie http://www.csscookie.com
23. CSS Vault http://www.bestcssvault.com
24. CSS Design yorkshire http://www.css-design-yorkshire.com
25. W3C Sites http://w3csites.com
26. W3 CSS Website http://www.my3w.org
27. Foliostars http://www.foliostars.net
28. Ad DesignLink http://www.addesignlink.com
29. Creative Acclaim http://creativeacclaim.com
30. Design Reciped database http://gallery.designrecipedatabase.net

Có nhiều script giúp bạn thực hiện điều đó, và các công cụ đó ngày càng mạnh hơn. Bên dưới là list các script mình biết, một số đã dùng thử

1.  LightBox

An inline image popup, overlays and fades out the current page.

http://www.phatfusion.net/lightbox

Framework: mootools v1.11
Support: image

2.  LightBox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

http://www.huddletogether.com/projects/lightbox2

Framework: Prototype, Scriptaculous Effects Library
Support: image, image set

3.  LightBox

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

http://leandrovieira.com/projects/jquery/lightbox/

Framework: jQuery
Support: image, image set

4.  LightWindow

http://www.stickmanlabs.com/lightwindow/
Framework: Prototype
Support: Quicktime, Apple, Youtube, Flash, Image, Frame, From, HTML page, Inline content

5.  ModalBox

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs. And yes, it may also be useful for showing larger versions of images.

http://www.wildbit.com/labs/modalbox

Framework: Prototype, Scriptaculous Effects Library
Support: HTML link,  HTML with form, HTML javascript object

6.  MultiBox

lightbox that supports images, flash, video, mp3s, html.

http://www.phatfusion.net/multibox

Framework: mootools
Support: flv, mov, wmv, real, mp3, HTML, HTML page, HTML ajax, HTML link

7.  ShadowBox

Shadowbox is an online media viewer application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can showcase a wide assortment of media in all major browsers without navigating users away from the linking page.
http://mjijackson.com/shadowbox
Framework: YUI Library, Ext,  Prototype, jQuery, mootools, Dojo
Support: image, large image, gallery image, image map,  inline HTML, HTML link, google map, form, iframe, swf, mov, wmv, mp4, Youtube, Google video, apple trailer,  flv, qt, wmp, script

8.  ImageBox

http://www.intelliance.fr/jquery/imagebox/
Framework: jQuery
Support: image, image set

9.  SlimBox

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

http://www.digitalia.be/software/slimbox2

Framework: jQuery
Support: image, image set

10. GreyBox

http://jquery.com/demo/grey
Framework: jQuery
Support: HTML page, HTML ajax, HTML link

11. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

http://jquery.com/demo/thickbox

Framework: jQuery
Support: Image, gallery images, inline content, iframe content, ajax content

12. FancyBox

FancyBox is tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of web page.

http://fancy.klade.lv/

Framework: jQuery
Support: image, image set, inline, iframe, AJAX

13. FaceBox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

http://famspam.com/facebox

Framework: jQuery
Support: image, inline HTML, AJAX

14. PiroBox

http://www.pirolab.it/pirobox/
Framework: jQuery
Support: image, image set (easing effect)

15. CaoBox

My lightbox clone.

http://hagin.info/blog/2009/01/caoboxjs

Framework: jQuery
Support: inline HTML

16. Fancy Zoom

This works with any html (images, text, headings, flash). The only caveat is it doesn’t currently work with AJAX. Whatever you want to zoom to must be html already on the page.

http://orderedlist.com/demos/fancy-zoom-jquery/

Framework: jQuery
Support: image, image set, text

17. PrettyPhoto

http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/
Framework: jQuery
Support: image, image set

18. nyroModal

http://nyromodal.nyrodev.com/
Framework: jQuery
Support: image, image set, inline HTML, AJAX, Youtube, iframe, form, blocker modal

19. LightBox with CSS

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed
CSS

20. Lightview

http://www.nickstakenburg.com/projects/lightview/
Framework: Prototype, Scriptaculous Effects Library
Support: image, image set, Quicktime, AJAX form, Anti-aliasing, flash , iframe, inline HTML

21. Hightslide

http://highslide.com/
Framework:
Support: image, image set, form, flash , iframe, inline HTML

File upload

Ajax File Upload.
jQUploader.
Multiple File Upload plugin.
jQuery File Style.
Styling an input type file.
Progress Bar Plugin.

Form Validation

jQuery Validation.
Auto Help.
Simple jQuery form validation.
jQuery XAV – form validations.
jQuery AlphaNumeric.
Masked Input.
TypeWatch Plugin.
Text limiter for form fields.
Ajax Username Check with jQuery.

Form – Select Box stuff

jQuery Combobox.
jQuery controlled dependent (or Cascadign) Select List.
Multiple Selects.
Select box manipulation.
Select Combo Plugin.
jQuery – LinkedSelect
Auto-populate multiple select boxes.
Choose Plugin (Select Replacement).

Form Basics, Input Fields, Checkboxes etc.

jQuery Form Plugin.
jQuery-Form.
jLook Nice Forms.
jNice.
Ping Plugin.
Toggle Form Text.
ToggleVal.
jQuery Field Plugin.
jQuery Form’n Field plugin.
jQuery Checkbox manipulation.
jTagging.
jQuery labelcheck.
Overlabel.
3 state radio buttons.
ShiftCheckbox jQuery Plugin.
Watermark Input.
jQuery Checkbox (checkboxes with imags).
jQuery SpinButton Control.
jQuery Ajax Form Builder.
jQuery Focus Fields.
jQuery Time Entry.

Time, Date and Color Picker

jQuery UI Datepicker.
jQuery date picker plugin.
jQuery Time Picker.
Time Picker.
ClickPick.
TimePicker.
Farbtastic jQuery Color Picker Plugin.
Color Picker by intelliance.fr.

Rating Plugins

jQuery Star Rating Plugin.
jQuery Star Rater.
Content rater with asp.net, ajax and jQuery.
Half-Star Rating Plugin.

Search Plugins

Autocomplete Box.
jQuery Suggest.
jQuery Autocomplete.
jQuery Autocomplete Mod.
jQuery Autocomplete by AjaxDaddy.
jQuery Autocomplete Plugin with HTML formatting.
jQuery Autocompleter.
AutoCompleter (Tutorial with PHP&MySQL).
quick Search jQuery Plugin.

Inline Edit & Editors

jTagEditor.
WYMeditor.
jQuery jFrame.
Jeditable – edit in place plugin for jQuery.
jQuery editable.
jQuery Disable Text Select Plugin.
Edit in Place with Ajax using jQuery.
jQuery Plugin – Another In-Place Editor.
TableEditor.
tEditable – in place table editing for jQuery.

Audio, Video, Flash, SVG, etc

jMedia – accessible multi-media embedding.
JBEdit – Ajax online Video Editor.
jQuery MP3 Plugin.
jQuery Media Plugin.
jQuery Flash Plugin.
Embed QuickTime.
SVG Integration.
jQuery Multimedia Portfolio.
jQuery YouTube Plugin.

Photos/Images/Galleries

ThickBox.
jQuery lightBox plugin.
jQuery FancyBox.
jQuery Multimedia Portfolio.
jQuery Image Strip.
jQuery slideViewer.
jQuery jqGalScroll 2.0.
jQuery – jqGalViewII.
jQuery – jqGalViewIII.
jQuery Photo Slider.
jQuery Thumbs – easily create thumbnails.
jQuery jQIR Image Replacement.
jCarousel Lite.
jQPanView.
jCarousel.
Interface Imagebox.
Image Gallery using jQuery, Interface & Reflactions.
simple jQuery Gallery.
jQuery Gallery Module.
EO Gallery.
jQuery ScrollShow.
jQuery Cycle Plugin.
jQuery Flickr.
jQuery Lazy Load Images Plugin.
Zoomi – Zoomable Thumbnails.
jQuery Crop – crop any image on the fly.
Image Reflection.

Google Map

jQuery Plugin googlemaps.
jMaps jQuery Maps Framework.
jQmaps.
jQuery & Google Maps.
jQuery Maps Interface forr Google and Yahoo maps.
jQuery J Maps – by Tane Piper.

Games

Tetris with jQuery.
jQuery Chess.
Mad Libs Word Game.
jQuery Puzzle.
jQuery Solar System (not a game but awesome jQuery Stuff).
jQuery Memory.

Tables, Grids etc.

UI/Tablesorter.
jQuery ingrid.
jQuery Grid Plugin.
Table Filter – awesome!.
TableEditor.
jQuery Tree Tables.
Expandable “Detail” Table Rows.
Sortable Table ColdFusion Costum Tag with jQuery UI.
jQuery Bubble.
TableSorter.
Scrollable HTML Table.
jQuery column Manager Plugin.
jQuery tableHover Plugin.
jQuery columnHover Plugin.
jQuery Grid.
TableSorter plugin for jQuery.
tEditable – in place table editing for jQuery.
jQuery charToTable Plugin.
jQuery Grid Column Sizing.
jQuery Grid Row Sizing.

Charts, Presentation etc.

Flot.
jQuery Wizard Plugin .
jQuery Chart Plugin.
Bar Chart.
Accessible Charts using Canvas and jQuery.

Border, Corners, Background

jQuery Corner.
jQuery Curvy Corner.
Nifty jQuery Corner.
Transparent Corners.
jQuery Corner Gallery.
Gradient Plugin.

Text and Links

jQuery Spoiler plugin.
Text Highlighting.
Disable Text Select Plugin.
jQuery Newsticker.
Auto line-height Plugin.
Textgrad – a text gradient plugin.
LinkLook – a link thumbnail preview.
pager jQuery Plugin.
shortKeys jQuery Plugin.
jQuery Biggerlink.
jQuery Ajax Link Checker.
Chili jQuery code highlighter plugin.
jScroller.

Tooltips

jQuery Plugin – Tooltip.
jTip – The jQuery Tool Tip.
clueTip.
BetterTip.
Flash Tooltips using jQuery.
ToolTip.

Menus, Navigations

jQuery Tabs Plugin – awesome! . [demo nested tabs.]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin).
jQuery idTabs.
jdMenu – Hierarchical Menu Plugin for jQuery.
jQuery SuckerFish Style.
jQuery Plugin Treeview.
treeView Basic.
FastFind Menu.
Sliding Menu.
Lava Lamp jQuery Menu.
jQuery iconDock.
jVariations Control Panel.
ContextMenu plugin.
clickMenu.
CSS Dock Menu.
jQuery Pop-up Menu Tutorial.
Sliding Menu.

Accordions, Slide and Toggle stuff

jQuery Plugin Accordion.
jQuery Accordion Plugin Horizontal Way.
haccordion – a simple horizontal accordion plugin for jQuery.
Horizontal Accordion by portalzine.de.
HoverAccordion.
Accordion Example from fmarcia.info.
jQuery Accordion Example.
jQuery Demo – Expandable Sidebar Menu.
Sliding Panels for jQuery.
jQuery ToggleElements.
Coda Slider.
jCarousel.
Accesible News Slider Plugin.
Showing and Hiding code Examples.
jQuery Easing Plugin.
jQuery Portlets.
AutoScroll.
Innerfade.
CodaSlider.

Drag and Drop

UI/Draggables.
EasyDrag jQuery Plugin.
jQuery Portlets.
jqDnR – drag, drop resize.
Drag Demos.

XML XSL JSON Feeds

XSLT Plugin.
jQuery Ajax call and result XML parsing.
xmlObjectifier – Converts XML DOM to JSON.
jQuery XSL Transform.
jQuery Taconite – multiple Dom updates.
RSS/ATOM Feed Parser Plugin.
jQuery Google Feed Plugin.

Browserstuff

Wresize – IE Resize event Fix Plugin.
jQuery PNG fix
jQuery ifixpng.
jQuery pngFix.
Link Scrubber – removes the dotted line onfocus from links.
jQuery Perciformes – the entire suckerfish familly under one roof.
Background Iframe.
QinIE – for proper display of Q tags in IE.
jQuery Accessibility Plugin.
jQuery MouseWheel Plugin.

Alert, Prompt, Confirm Windows

jQuery Impromptu.
jQuery Confirm Plugin.
jqModal.
SimpleModal.

CSS

jQuery Style Switcher.
JSS – Javascript StyleSheets.
jQuery Rule – creation/manipulation of CSS Rules.
jPrintArea.

DOM, Ajax and other jQuery plugins

FlyDOM.
jQuery Dimenion Plugin.
jQuery Loggin.
Metadata – extract metadata from classes, attributes, elements.
Super-tiny Client-Side Include Javascript jQuery Plugin.
Undo Made Easy with Ajax.
JHeartbeat – periodically poll the server.
Lazy Load Plugin.
Live Query.
jQuery Timers.
jQuery Share it – display social bookmarking icons.
jQuery serverCookieJar.
jQuery autoSave.
jQuery Puffer.
jQuery iFrame Plugin.
Cookie Plugin for jQuery.
jQuery Spy – awesome plugin.
Effect Delay Trick.
jQuick – a quick tag creator for jQuery.
Metaobjects.
elementReady.