'CSS'에 해당되는 글 4건

  1. 2008.05.24 Top 71 CSS Menus Navigation Tabs
  2. 2008.05.24 CSS Tools
  3. 2008.05.24 CSS & JAVASCRIPT 최적화 도구, 성능 개선
  4. 2007.09.12 PRINT.CSS 프린트 스타일
2008.05.24 02:25

Top 71 CSS Menus Navigation Tabs

Articles / Tutorials on lists, menus, navigations and tabs.

  1. 11 CSS navigation menus : at Exploding Boy
  2. 12 more CSS Navigation Menus. : at Exploding Boy
  3. 14 Free Vertical CSS Menus : at Exploding Boy
  4. 2-level horizontal navigation : demo at Duoh
  5. Absolute Lists: Alternatives to Divs : An approach of using lists instead of divs at evolt
  6. Accessible Image-Tab Rollovers : demo at Simplebits
  7. ADxMenu : multiple menu examples at aPlus
  8. A drop-down theme : at CSS Play
  9. Bookend Lists: Using CSS to Float a Masthead : at WebSiteOptimization
  10. Bulletproof Slants : demo at Simplebits
  11. Centered Tabs with CSS : at 24ways
  12. Clickable Link Backgrounds : A bulletproof unordered list of links, each with a unique (purely decorative) left-aligned icon that is referenced with CSS ; but that is also clickable.
  13. Create a Teaser Thumbnail List Using CSS: Part 1 : lists of items made up of a title, short description, and thumbnail.
  14. Creating Indented Navigation Lists : A multi-level indented list
  15. Creating Multicolumn Lists : at Builder.com
  16. cssMenus - 4 Level Deep List Menu : at SolarDreamStudios
  17. CSS and Round Corners: Build Accessible Menu Tabs : at SitePoint
  18. CSS-Based Tabbed Menu : a simple tabbed menu.
  19. CSS-based Navigation : demo at Nundroo
  20. CSS: Double Lists : A single list that appears in two columns
  21. CSS Mini Tabs (the UN-tab, tab) : demo at Simplebits
  22. CSS only dropdown menu : at CSS Play
  23. CSS only flyout menus : at CSS Play
  24. CSS only flyout/dropdown menu : at CSS Play
  25. CSS only flyout menu with transparency : at CSS Play
  26. CSS only vertical sliding menu : at CSS Play
  27. CSS Swag: Multi-Column Lists : at A List Apart
  28. CSS Tabs : tabs without any images
  29. CSS Tabs : list of various tab solutions
  30. CSS tabs with Submenus : at Kalsey.
  31. dTree Navigation Menu : Javascripts Tree at Destroydrop
  32. Definition lists - misused or misunderstood? : appropriate uses of definition lists
  33. Do You Want To Do That With CSS? - Multiple Column Lists : multi-column lists.
  34. Drop-Down Menus, Horizontal Style : at A List Apart
  35. Float Mini tabs : at Web-Graphics
  36. Flowing a List Across Multiple Columns : A table without using tables.
  37. Free Menu Designs V 1.1 : ready-to-download block menusat e-lusion
  38. FreeStyle Menus : XHTML compliant, CSS-formatted menu script at TwinHelix
  39. Hidden tab menu : at CSS Play
  40. How to Style a Definition List with CSS : at WebReference
  41. How to Style an Unordered List with CSS : at WebReference
  42. How to Use CSS to Position Horizontal Unordered Lists : at WebReference
  43. Hybrid CSS Dropdowns : at a List Apart
  44. Inline Mini Tabs : at Web-Graphics
  45. Intelligent Menus : CSS and PHP menu at PhotoMatt.net
  46. Inverted Sliding Doors Tabs : at 456BereaStreet
  47. Light Weight Multi Level Menu : at CssCreator
  48. List Display Problems In Explorer For Windows : list hack for IE
  49. Listamatic : simple lists; various styles.
  50. Listamatic2 : nexted lists; various styles
  51. Menus galleries in CSS and XHTML : multiple examples and downloads at Alsacreations
  52. Mini-Tab Shapes : demo at Simplebits
  53. Mini-Tab Shapes 2 : demo at Simplebits
  54. More than Just Bullets : at W3.org
  55. Multiple Column Lists : at css-discuss
  56. A Navbar Using Lists : A lightweight nav bar at WestCiv
  57. Navigation Matrix Reloaded : at SuperfluousBanter
  58. Remote Control CSS : examples of lists styled differently
  59. Remote Control CSS Revisited - Caving in to peer pressure : multi-column remote control
  60. Rounding Tab Corners : by Eric A. Meyer.
  61. Simple CSS Tabs : at SilverOrange
  62. Simplified CSS Tabs : demo at Simplebits
  63. Sliding Doors : at A List Apart
  64. Spruced-Up Site Maps : sitemaps as lists
  65. Styling Nested List : at SimpleBits
  66. Suckerfish Dropdowns : at HTMLDog
  67. Tabtastic : Gavin Kistner.
  68. Tabs Tutorial at BrainJar
  69. Taming Lists : at A List Apart
  70. Turning a List into a Navigation Bar : at 456BereaStreet
  71. Ultimate css only dropdown menu : at CSS Play

Related Posts:

  1. CSS Basics (7 links) : Introductory basic tutorials on CSS.
  2. CSS Cheat Sheets (8 links) : Printable CSS cheat sheets.
  3. CSS Daily Reading (26 links) : CSS sites to read / visit daily.
  4. CSS Discussion Lists Forums (10 links) : Discussion lists / forums for CSS.
  5. CSS Galleries (40 links) : Discussion lists / forums for CSS.
  6. CSS Image Techniques (23 links) : CSS techniques to create / display images on your site.
  7. CSS Layouts Templates (26 links) : Hundreds of CSS layouts available for download and use.
  8. CSS Layouts Tutorials (7 links) : Hundreds of CSS layouts available for download and use.
  9. CSS Lightbox Variations (16 links) : CSS techniques to overlay images on a webpage.
  10. CSS Menus Navigation Tabs (71 links) : Articles / Tutorials on lists, menus, navigations and tabs.
  11. CSS Must-Read Blogs Websites (14 links) : Add these must-read RSS Feeds to your favorite feed-reader.
  12. CSS Online Services Tools (29 links) : Online services to create / compress / edit / validate CSS.
  13. CSS Popups Tutorials (4 links) : Using CSS to create popup layovers / windows.
  14. CSS References (12 links) : CSS References for properties / specifications.
  15. CSS Rounded Corners (9 links) : CSS References for properties / specifications.
  16. CSS Software Tools (9 links) : CSS References for properties / specifications.
  17. CSS Style Guides (2 links) : CSS References for properties / specifications.
  18. CSS Tables Data (15 links) : Style your tabular data with CSS.

Posted by 부니기
2008.05.24 02:23

Please be advised that as of June of 2006 I have stopped updating CSS related links on this page. Each new discovery of CSS related articles and tools (as well as other web development related posts) are now being collected as a separate post under the Code section of Soxiam Wiki. You may also check out all pages tagged "CSS".

CSS Tools

CSS-based design galleries

CSS-based Layout:

CSS-based Boxes:

  • Spanky Corners from sitepoint is yet another take on generating rounded corner boxes. This approach uses no javascript nor extra markup cruft but it does rely on images to create the corners.
  • spiffycorners is yet another way of making rounded corner boxes. It's unique in that it paints anti-aliased corners in CSS without using images or javascript. However it does require a lot of extra markup. Pick your poison.
  • My Favorite Nifty Cube — v3 of nifty corners. New features make it more flexible, less crufty.
  • My Favorite CSS Rounded Corners 'Roundup' via smileycat.com
  • There's a detailed tutorial on Onion skinned drop shadow technique which (1) Automatically expand and contract to fit any object, without specifying widths, (2) Allow you to modify the shadow depth with no image manipulation, and (3) Render the same across all browsers without cutting any corners. Except for 3-layer deep markup cruft, it looks like a real winner.
    • My Favorite This is pretty remarkable. The day Onion skinned drop shadow hits the net, someone felt exactly the way I did: good technique, unfortunate code cruf. So what did sporkmonger do? He found a way to remove all the wrapper div cruft by using some clever javascript. The result is a clean img tag with one CSS class. Absolutely brilliant. Can't get over that it all happened in just one day without any coordination. The Web is still full of surprises for me.
  • My Favorite smileycat has a comprehensive round-up on different CSS techniques for presenting rounded corner boxes.
  • If you don't mind the heavy markup cruft (8 nested div's!), dragon-lab's Octopus Engine seems like a really winner for creating wonderful looking custom bordered boxes with shadows.
  • DOM Corners — Another way to draw rounded corner boxes. This technique uses images but focuses on reducing the code cruft.
  • Scalable rounded edges using definition list markup.
  • Table Scroll — two different methods of presenting a long table in a scrolling DIV box.
  • CSS PLAY — Many "The power of CSS" demos by Stu Nicholls.
  • A good summary overview of CSS layout techniques over at particletree.com
  • Airtight Corners — Another CSS technique to create rounded corners. This one uses only one image, but the width of the box must be defined.
  • Customizing custom corners and borders via 456bereastreet
  • CSS drop shadow — this method gets around IE's negative margin positioning problem by using position:relative; on the inner block element.
  • Mimic iframe with CSS via overflow:auto and height properties
  • Transparent Custome Corners and Borders — Another rounded corner box by JS. via 456bereastreet.com
  • "More" Nifty Corners — v2 of CSS+JS only to round box corners.

CSS-based Menus, Lists and Navigation:

CSS and Form Elements:

CSS Image Replacement Techniques

  • PHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method that can handle word-wrap in a long heading. Could this replace sIFR?
  • iIR: img Image Replacement by Aaron Gustafson is a technique to replace one image with another that could be useful for print version of the page, etc.
  • My Favorite Printing CSS background images (sort of) via wg shows you what I thought was impossible: CSS background images that prints. It's pretty clever and uses list-style-image CSS property to make this happen.
  • PHP + CSS Dynamic Text Replacement — "...Where the original Dynamic Text Replacement used JavaScript to replace the heading text, PHP+CSC Dynamic Text Replacement uses PHP's output buffering functions to parse the page for heading tags, extract the heading text and assign an inline style that points to the image generation script."
  • CSS-Technique: Worn Type is a rather brilliant adaptation of image replacement technique that stretches your imagination. Nicely done!
  • (SIMR) Single Image Multi Replacement uses a single image to replace more than one heading
  • Image Replacement Maps
  • My Favorite MIR: Malarkey Image Replacement — Yes. Another method. This one is similar to negative text-indent method in theory but uses negative letter-spacing instead. Supposedly works in all but Opera.

CSS Optimization Techniques

CSS Browser Support, Bugs and Hacks

  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • My Favorite Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS's that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug — Sitepoint on how heading elements could leave a small trail of itself as it wraps to the next line in IE6.
  • My Favorite Images, Tables, and Mysterious Gaps seems like something I should've known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I'm not that smart.
  • Easy CSS hacks for IE7 — Some CSS hacks that will work with IE7. Hey, you never know.
  • My Favorite Web Browser CSS Support with updated listings for IE7, Firefox 1.5, and Opera 8.5.
  • snook.ca on the "+" CSS hack which you can use to target IE6 and IE7 only.
  • My Favorite On having layout reveals some information and workarounds for IE's strange and proprietary 'rendering-concept': hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:
    • "...A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” John Gallant and Holly Bergevin classified these inconsistencies as “dimensional bugs,” meaning that they can often be solved by applying a width or height. This leads to a question of why “layout” can change the rendering of and the relationships between elements. The question, albeit a good one, is hard to answer. In this article, the authors focus on some aspects of this complicated matter. For more thorough discussions and examples, please refer to the links provided."
  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could've brought to my attention last week!
    • "...Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed."
  • Ten more CSS tricks you may not know — includes few IE bug fix techniques
  • The "Holly" Hack — taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests — a great list of all the CSS gotcha's under one roof.
  • max-width in IE using VERY little known IE-only CSS "Dynamic properties"
  • List of @import hacks to hide CSS from different browsers.
  • Essentials of CSS Hacking For Internet Explorer — an excellent list of quick hints on safeguarding your CSS against IE.
  • Web browser standards support — Charts comparing IE 6, Firefox 1.0, and Opera 8.
  • Full CSS property browser compatibility chart
  • The perils of using XHTML properly — Potential pitfalls of declaring application/xhtml+xml MIME type.
  • IE Double Float Margin Bug.

Misc CSS Tips and Tricks:

Posted by 부니기
2008.05.24 01:20
1. JavaScript 최적화 도구
2. CSS 최적화 도구
3. 웹 사이트 성능 개선

출처 : http://www.mimul.com/pebble/default/2008/01/29/1201616760000.html

Posted by 부니기
2007.09.12 02:34

프린트 스타일을 지정하는건 그리 어렵지 않습니다 (너무 쉽다고 생각했는지 이야기 한적이 없군요 ㅠㅠ). 아시다시피 타겟으로 media=”print” 를 지정해 주면 어렵지 않게 인쇄 시에 출력될 프레젠테이션에 스타일을 바꿀수 있습니다. print.css 경로를 제대로 잡아주시는것 아주 중요합니다.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

<!-- 혹은 -->
<style type="text/css" media="print">
   @import "print.css";

<!-- 혹은 -->
@media print {
   /*직접코드 입력 */


프린트 스타일시트 제작시에는 Law of Elimination, 즉 불필요한 정보 제거 작업부터 시작 하시는 것이 좋습니다. 불필요한 요소들을 먼저 살펴보시고 {display:none;} 에다가 하나씩 더해갑니다. 보편적으로 메뉴부분, 사이드바 부분, 인풋 박스, 광고 등이 해당되겠습니다. 일모리네를 예로 들자면 사이드바, 메뉴, 코멘트부분 알림 해더 등등을 지워버렸습니다.

#sidebar, #menu, #header_special, 
.permlink, .ttag, .ad, 
#commentinputs, #commentwrap h2, 
.comment {display:none;}

배경과 폰트 지정

대충 지우신 후에 기본적인 배경과 폰트지정 으로 넘어갑니다. 폰트 사이즈는 프린트를 위한 pt (point) 단위로 잡으시고 9에서 12 사이로 잡아주시면 되겠습니다. 저는 9pt 로 잡았습니다. 그리고 배경은 transparent 이 default 이지만 혹시나 어딘가에 껴 들어가는것을 미리 방지하는 차원에서 transparent으로 잡아주면 좋겠죠. body의 배경을 흰색으로 잡아주면 마무리 되겠습니다. 또한 브라우저에게 해더 사이즈를 맡겨 놓으면 상당히 크고 낭비가 심하니 직접 h1, h2, h3 사이즈를 잡아주는 것도 좋은 방법입니다. 아시다시피 해더들은 기본적으로 굵게 bold 출력됩니다.

body {font: 9pt/1.5 sans-serif;background: white; color: black;}
/* 참고로 9pt/1.5 는 9pt 폰트사이즈에 line-height 
   줄간격을 1.5배로 하라는 것이 되겠습니다. */

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}

#content {background: transprent;}

글을 글답게 세밀하게

위의 부분만 하셔도 어느정도 문서 분위기가 나겠지만 (ie6 포함) 약간만 더 손을 본다면 더할 나위 없는 프린트 지정이 될수 있습니다. 먼저 링크 부분을 손보겠습니다. 기본색인 파란색도 좋지만 흑백 프린트시에는 별 효과가 없으니 밑줄을 주어 링크를 표기할수 있습니다. 간단히 a {color: black; text-decoration: underline;} 을 주면 되겠습니다. 하지만 밑줄이 혼란스럽다면 밑줄 대신 링크뒤에 주소를 삽입하는 방법을 택하셔도 됩니다. 오래전에 Eric Meyer 가 나누었던 방법입니다.

#content a:link:after, #content a:visited:after {
   content: " (" attr(href) ") ";
   font-size: 90%;

브라우저가 지원만 한다면 (사파리가 아주 잘보이는 군요) #content 안에 있는 링크 뒤에 주소를 출력 하도록 하게 합니다. 하지만 #content 안의 글 제목에도 링크가 붙게되니 글 자체의 블록엘리먼트를 지정해 주어서 글 안의 링크에만 출력되도럭 하는 것이 좋은 방법이겠습니다. 일모리네는 .writing 부분이겠네요. 이러한 방법으로 링크를 지정해 주면 인쇄물이지만 웹주소를 찾아갈수 있는 장점이 있겠습니다.

링크에 스타일을 주었으니 문단에도 스타일을 지정해 보겠습니다. 문단 시작시에 들어짜기, 움푹 들어간 부분의 indentation 을 주어 문단 시작을 표현할수 있습니다. text-indent: 값; 의 형식을 사용하면 되겠네요. 또한 인쇄는 페이지라는 테두리가 있기에 문단이 페이지의 마지막 부분일때에 한줄만 출력되고 다음 페이지로 넘어가는 경우가 있을수 있습니다. 이 때에 orphans를 지정해 주면 orphans 에 지정된 값 데로 문단의 최소 출력이 지정됩니다.

p {text-indent: 13pt; orphans: 3;}

마지막으로 전체적인 여백의 문제나 간격등을 조절해 주면 되겠습니다. content에 margin 값을 준다거나 문단간의 간격 조절등이 되겠네요.

일모리네 print.css 입니다.

h1 {font-size: 18pt;}
h2 {font-size: 15pt;}
h3 {font-size: 11pt;}
p {text-indent: 15pt; orphans: 3;}

#sidebar, #menu, #header_special, .permlink, .ttag, .ad,
#commentinputs, #commentwrap h2, .comment {display:none;}

#content {width: auto;}
.posttitle {float:left;}
.postdate {float:right;}
.writing {clear:both;}
.writing a {text-decoration: underline;}
h1 a:link:after, h1 a:visited:after,
.writing a:link:after, .writing a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
#commentwrap p {text-indent:0;}

즐거운 한주를 보내고 계신가요!? 얼뚱, 쌩뚱. 광복절이라고 태극기 달아봤습니다. 참 어색합니다. 364일 놀다가 하루를… 그래도 하루만이래도 좋은 날로 기념해야겠네요.

P.S. 조용히 진행되고 있는 HTML5인쇄버전을 PDF 로 출력했습니다.

Posted by 부니기

티스토리 툴바