Reactions to story from CSS-Tricks
Better Pull Quotes: Don’t Repeat Markup
http://css-tricks.com/ better-pull-quotes/
Pull quotes are wonderful. They can really draw a readers attention and they are a great opportunity for cool typographic work. On a blog though, pull quotes are particularly difficult to “pull off” (get it?!). This is because of RSS. On your own site, you can create a pullquote using any kind of markup you want. Perhaps a paragarph tag with a class of “pullquote”. But when that goes out to RSS readers, that tag will either be stripped or ignored. VIEW DEMO Here is what the markup for a traditional pull quote might look like : <p>Whether I shall turn out to be the hero of my own life, or whether that station will be held by anybody else, these pages must show.
Reactions / posts that link to this post
View all reactions »-
Resources for Styling Blockquotes
http://tutorialblog.org/resources-for-styling-blockquotes/Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. That’s just the inter-linking good spirit of the web! Block quotes are a way to include text on a page that is directly taken from another website (or other source). HTML provides us with the perfect element for such a task, the <blockquote> Without any CSS applied to a page at all, most browsers have default styling applied to this element, to help set it apart from other blocks of text. Firefox uses the following styling by default: blockquote { display: block; margin: 1em 40px; } This is not consistent between browsers however, so most “CSS Resets” include reset styling to remove all of this. You should definitely consider adding some styling back in though, for your blockquotes. I like simple design, so let me share with you one of my favorite stylings for blockquotes: blockquote { border-left: 30px solid #d9d9d9; padding-left: 10px; font-family: georgia, serif; font-style: italic; } This style just makes a healthy indent with a light gray block to the left. Simple and elegant: There are, of course, many many ways to style blockquotes. From simple to elaborate, from big to small, from intense to subdued. Lots of things to consider. “Pull quotes” are blockquotes brethren. There is no special HTML element for pull quotes, but they are used in much the same manner, to set apart a block of text. The difference is that the pull quote is text taken from the very article being presented. This brings about different challenges. Here is a list of resources out there for styling, handling, and otherwise dealing with blockquotes and pull quotes. THE BASICS & SPECIFICATIONS HTML Dog: Blockquote W3C: Blockquote specs(along with the “q” element, blockquotes inline little brother) Wikipedia: Blockquote W3 Schools: Blockquote Not much to know about the blockquote element, other than the optional attribute “cite”, which is the URI that that the quote came from. The cite attribute has no affect on the style or functionality of the blockquote. ROUNDUPS Block Quotes and Pull Quotes: Examples and Good Practices Pull Quotes (23 examples) Pattern Tap: Pull Quotes (There isn’t hardly anything in here yet, but Pattern Tap is the perfect place to start a collection for this kind of thing.) SPECIFIC STYLING TUTORIALS Swooshy Curly Quotes Without Images Fonts.com: Pull Quotes Sitepoint: Pull quotes that really pull! HTML Dog: Pull Quotes CSS Pull Quotes Using IMG elements rather than background images in blockquote. Rounded corners pull-quote using CSS Better Blockquotes with CSS Simple CSS Blockquotes and Pullquotes Quick tip: Styling blockquotes with CSS Playing with BLOCKQUOTE and CSS USING JAVASCRIPT TUTORIALS Automatic pullquotes with JavaScript and CSS Better Pull Quotes: Don’t Repeat Markup Easy jQuery Pull Quotes Automatic Pull-quotes with Behavior and CSS BLOGGING SPECIFIC TUTORIALS Snazzy Pullquotes for Your Blog Making a WordPress Pull Quote WordPress Plugin: JavaScript Pull-Quotes WordPress Plugin: Fancy Pull-quotes (v0.85) SIDENOTES / FOOTNOTES Footnotes with CSS and Javascript - the final word
-
Resources for Styling Blockquotes
http://tutorialblog.org/resources-for-styling-blockquotes/Most websites, especially if they are blogs, will come across the need for a block quote at one time or another. That’s just the inter-linking good spirit of the web! Block quotes are a way to include text on a page that is directly taken from another website (or other source). HTML provides us with the perfect element for such a task, the <blockquote> Without any CSS applied to a page at all, most browsers have default styling applied to this element, to help set it apart from other blocks of text. Firefox uses the following styling by default: blockquote { display: block; margin: 1em 40px; } This is not consistent between browsers however, so most “CSS Resets” include reset styling to remove all of this. You should definitely consider adding some styling back in though, for your blockquotes. I like simple design, so let me share with you one of my favorite stylings for blockquotes: blockquote { border-left: 30px solid #d9d9d9; padding-left: 10px; font-family: georgia, serif; font-style: italic; } This style just makes a healthy indent with a light gray block to the left. Simple and elegant: There are, of course, many many ways to style blockquotes. From simple to elaborate, from big to small, from intense to subdued. Lots of things to consider. “Pull quotes” are blockquotes brethren. There is no special HTML element for pull quotes, but they are used in much the same manner, to set apart a block of text. The difference is that the pull quote is text taken from the very article being presented. This brings about different challenges. Here is a list of resources out there for styling, handling, and otherwise dealing with blockquotes and pull quotes. THE BASICS & SPECIFICATIONS HTML Dog: Blockquote W3C: Blockquote specs(along with the “q” element, blockquotes inline little brother) Wikipedia: Blockquote W3 Schools: Blockquote Not much to know about the blockquote element, other than the optional attribute “cite”, which is the URI that that the quote came from. The cite attribute has no affect on the style or functionality of the blockquote. ROUNDUPS Block Quotes and Pull Quotes: Examples and Good Practices Pull Quotes (23 examples) Pattern Tap: Pull Quotes (There isn’t hardly anything in here yet, but Pattern Tap is the perfect place to start a collection for this kind of thing.) SPECIFIC STYLING TUTORIALS Swooshy Curly Quotes Without Images Fonts.com: Pull Quotes Sitepoint: Pull quotes that really pull! HTML Dog: Pull Quotes CSS Pull Quotes Using IMG elements rather than background images in blockquote. Rounded corners pull-quote using CSS Better Blockquotes with CSS Simple CSS Blockquotes and Pullquotes Quick tip: Styling blockquotes with CSS Playing with BLOCKQUOTE and CSS USING JAVASCRIPT TUTORIALS Automatic pullquotes with JavaScript and CSS Better Pull Quotes: Don’t Repeat Markup Easy jQuery Pull Quotes Automatic Pull-quotes with Behavior and CSS BLOGGING SPECIFIC TUTORIALS Snazzy Pullquotes for Your Blog Making a WordPress Pull Quote WordPress Plugin: JavaScript Pull-Quotes WordPress Plugin: Fancy Pull-quotes (v0.85) SIDENOTES / FOOTNOTES Footnotes with CSS and Javascript - the final word
-
Block Quotes and Pull Quotes: Examples and Good Practices
http://inspirewebsolution.com/billyblog/?p=5Aren’t all these quotes the same? No. First of all: quote ? block quote ? pull quote. Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. Pull quote included into an article. The pulled out passage is mentioned few blocks further. Just like a pull quote blockquote (actually block quotations) are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow. Finally, “normal” quotes cite the content found in some other sources and are included to support the content rather than dominate over it. Blockquote vs. Q vs. Cite According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely <blockquote>, <q> and <cite>. Although all intended to markup quotes, they should be used in different contexts. So when should you use what? HTML Dog provides a nice and compact overview of these elements: <blockquote> blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s. This element can also have an optional attribute cite that specifies the location (in the form of a URI) where the quote has come from. Example: <blockquote cite=”http://www.htmldog.com/reference/htmltags/blockquote/”> <p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p> <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p> </blockquote> <q> q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example: <p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p> Although <q> is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the <q>-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones: Q {} Q { quotes: '»' '«' } Q { quotes: '„' '“' } Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows <q> pretty well. In particular, since some problems with encoding of quotes can appear sometimes it’s useful to provide numeric values (see below). According to standards you can even specify the appearance of quotation marks depending on the browser’s language of the user. This is how a W3C-example looks like: :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '2039' '203A' } As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow. If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like “Start of pull-quote” before the quote and then “end quote” after it. You could even have a link similar to the “skip navigation” link, which would offer the user the ability to skip the pull-quote and continue to the main content. <cite> cite defines an in-line citation or reference to another source. Example: <p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p> Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used. Gallery of Pull Quotes and Citations Quotes, braces, lines, dialogue boxes, balloons — there are a number of paths a designer can take to create a beautiful and memorable quote. Design solutions vary in colors, forms and sizes. Different techniques produce different result: however, it is important that it is clear to the visitors that the quote is actually a quote, otherwise it becomes easy to keep track on the content. Keep in mind: pull quotes shouldn’t be used too often, they shouldn’t be too large and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes, otherwise they lose their appeal and the article becomes harder to scan. Take a look at the example above. 99designs uses a block quotation to emphasize what the site is about. However, the text put in the quotes actually isn’t a quotation. We do not know why quotation mark is used in this case. We do know, though, that they shouldn’t be used in this context. 1. Simple indentation In most cases simple indentation is enough. In this case the structure of the content makes clear that the intended content is taken out from the main content flow. However, using this approach you need to make sure you have a very intuitive typographic and visual hierarchy and the indentation won’t be misunderstood. Often italics are used to indicate that the content is a quote and sometimes quotation is centered. The latter technique, however, is used quite rarely. 2. Quotes and indentation Another standard approach for design of pull quotes is to use the quote itself as a visual element to clearly indicate what the text passage is supposed to stand for. This technique is by far the most popular one and there is a good reason behind it: it unambiguously communicates the meaning of the text block. Surprisingly, the quote visuals are almost always placed on the left of the quote. You may try to experiment with quote on the right, or at the bottom of the passage. 3. Lines and indentation Standard, most usual and recommended way of designing blockquotes. 4. Quotations highlighted with a color Frequently designers use indentation together with a variation of color which is applied to the quote. Usually if the layout is dark quotes are presented in colors which are darker than the main content. And if the layout is light the quote is presented in lighter colors. If quotes need to be strongly emphasized vibrant colors are used. For modest highlighting usually slight variations of main colors suffices to indicate the difference between the main content and cited text. Natalie Jost displays a random quote from the Bible on her blog 5. Pull Quotes Actually we know it from print where quotes-neighbours are supposed to emphasize some important message or interview excerpts. Pull quotes are placed not within, but next to the content. Such quotes are usually short and don’t provide any additional information as they can also be found in the article. In Web the technique is seen rather rarely, but it has a charm of its own and — if used properly and for the right purposes — may strongly support the content. To clearly separate the “neighbours” from the main content designers often use lines or a large amount of whitespace. It is important to understand that in such cases pull quotes break the usual content flow which may make it harder for the readers to actually follow the argumentation of the article. In some cases it is more effective to avoid quotes (e.g. if a complex matter is described) while in other cases quotes can quicken and simplify the understanding (e.g. the main statement in the interview). Quotes-neighbours are usually placed on the right side of the content in order to not break the reader’s flow and remain passive. 6. Creative solutions Sometimes designers come up with creative solutions one actually wouldn’t expect from such an element as a quote. Here are some of them. Hopefully, they’ll help you to come up with further interesting ideas for the design of pull quotes. 7. Quotations as a standalone element Often quotations are used and designed not inside an article, but as a standalone design element which is given the dominant position in the design. This is often the case in testimonials where companies present quotes from their customers and clients to confirm the quality they actually promise. In such cases quotations are usually big, bold and clearly visible. In testimonials quotes are sometimes “rotated” meaning that among 5-7 testimonials only one is displayed at once. 8. Bonus: Footnotes In books and scientific documents citations are often provided with a footnote reference to the original document. In the Web, where references are commonly just linked to, this technique has never managed to become popular, however footnotes aren’t difficult to achieve with pure CSS. For instance, if you’d like to cite an excerpt from a book, instead of providing the corresponding title and page number you can simply refer to a footnote below the article. Thus you can avoid overloading your article with too many references. Footnotes, hence, can make it easier for your readers to actually read your article and provide details “on-demand” — only when they are needed. Sometimes footnotes are also used by authors to provide some remarks to the article (similar to books). However, it is not always reasonable to use footnotes for links. Web is a dynamic medium and links are extremely powerful - you don’t have to send your visitors to the footer of the page first to be able to follow a given link. Take a look at the following example. Naz Hamid uses both a blockquote (label 2 in the image above) and a footnote in his articles. The reference to the footnote and the footnote itself are interconnected: visitors can click on the reference and jump to the footnote. And in the footnote the “return”-icon allows the user to jump from the footnote to the place in the article where it is referred to. The author uses the footnotes to provide a personal remark on what has been mentioned in the article (labels 1 and 2). With footnotes you can offer your visitors some traditional, classic layout feeling without overwhelming them with long references to citations you provide. Tutorials Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention Simple CSS Blockquotes and Pullquotes Swooshy Curly Quotes Without Images Automatic pullquotes with JavaScript and CSS Easy jQuery Pull Quotes CSS Pull Quotes Automatic Pull-quotes with Behaviour and CSS Pull Quotes, Article at fonts.com Using Pull Quotes To Attract Readers Better Pull Quotes: Don’t Repeat Markup Pullquotes That Really Pull Snazzy Pullquotes for Your Blog HTML Dog: Pull Quotes How To Use Pull-quotes Rounded corners pull-quote using CSS (Presentation) Making a WordPress Pull Quote Footnotes with CSS and Javascript A XHTML+CSS+Javascript solution for displaying and marking up footnotes. There is also an updated sidenotes version which displays footnotes in the sidebar of a page instead of the footer of the page. Advantages: you don’t have to worry about numbering, the footnotes can be edited at their insertion point, you could give users the choice of how footnotes are formatted, or whether they are shown at all. From Footnotes To Sidenotes Another approach for displaying footnotes in the sidebar.
-
Block Quotes and Pull Quotes: Examples and Good Practices
http://www.novadexeus.com/block-quotes-and-pull-quotes-examp...Quotes are used to emphasize excerpts of text. Since users almost never read but scan we need to provide them with some focus anchors to fix their attention to the most important parts of our articles. Furthermore, quotes are always used for testimonials and sometimes for blog comments. They can be styled using graphics, CSS and a little bit of JavaScript. Sometimes, creative dynamic solutions can be applied as well. This post presents creative examples and best practices for design of pull quotes. We’ve tried to identify some common solutions and interesting approaches you may want to use or develop further in your projects. You may also want to take a look at the posts Navigation Menus: Trends and Examples with recent trends, examples and innovative solutions for design of modern navigation menus. Web Form Design: Modern Solutions and Creative Ideas presents beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Pagination Gallery: Examples And Good Practices with good practices of pagination design as well as some examples of when and how the pagination is usually implemented. Tag Clouds Gallery: Examples And Good Practices presents creative examples and ideas for design of tag clouds. Aren’t all these quotes the same? No. First of all: quote ≠ block quote ≠ pull quote. Pull quotes are short excerpts from the presented text. They are used to pull a text passage out of the reader’s flow and give it a more dominant position in the post or the article. Pull quote included into an article. The pulled out passage is mentioned few blocks further. Just like a pull quote blockquote (actually block quotations) are also set off from the main text as a distinct paragraph or block. However, they refer to some external citation which isn’t already mentioned in the article. Block quotations are usually placed within the reader’s flow. Finally, “normal” quotes cite the content found in some other sources and are included to support the content rather than dominate over it. Blockquote vs. Q vs. Cite According to HTML specifications, there are three elements which are supposed to semantically mark up quotations, namely <blockquote>, <q> and <cite>. Although all intended to markup quotes, they should be used in different contexts. So when should you use what? HTML Dog provides a nice and compact overview of these elements: <blockquote> blockquote is a large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s. This element can also have an optional attribute cite that specifies the location (in the form of a URI) where the quote has come from. Example: <blockquote cite=”http://www.htmldog.com/reference/htmltags/blockquote/”> <p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div’s.</p> <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p> </blockquote> <q> q is a small quotation. The content of this element is an in-line quote. Modern browsers know how to interpret <q> which is why you can style quotations using this HTML-elements via CSS. Example: <p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p> Although <q> is almost never used, it has some useful properties. For instance, you can specify the appearance of quotes within the <q>-element via CSS. That’s reasonable as different languages use different quotation marks for the same purpose. For instance, these ones: Q {} Q { quotes: '»' '«' } Q { quotes: '„' '“' } Modern browsers support this way of styling. Of course, Internet Explorer (even in its 8th version) doesn’t support it although it knows <q> pretty well. In particular, since some problems with encoding of quotes can appear sometimes it’s useful to provide numeric values (see below). According to standards you can even specify the appearance of quotation marks depending on the browser’s language of the user. This is how a W3C-example looks like: :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '2039' '203A' } As pretty as they may be, pull quotes have inherent problems in the way they are placed in the middle of HTML content. To a visual, CSS enabled browser all might seem hunky-dory, but to those browsers that are not CSS-abled and fall back on the plain HTML or to screen readers for visually impaired users, the pull quotes will appear slap bang in the middle of the main content. A quote suddenly appearing between two paragraphs is clearly out of place and will confusingly break the flow. If you are using pull-quotes, it is wise to provide a little extra information for users who would stumble on this problem. In the XHTML you can provide a message, hidden from view with CSS that reads something like "Start of pull-quote" before the quote and then "end quote" after it. You could even have a link similar to the "skip navigation" link, which would offer the user the ability to skip the pull-quote and continue to the main content. <cite> cite defines an in-line citation or reference to another source. Example: <p>And <cite>Bob</cite> said <q>No, I think it’s a banana</q>.</p> Summing up: for large quotes use blockquote, for small quotes use q and for references to another sources cite should be used. In practice, usually only blockquote and q are used. Gallery of Pull Quotes and Citations Quotes, braces, lines, dialogue boxes, balloons — there are a number of paths a designer can take to create a beautiful and memorable quote. Design solutions vary in colors, forms and sizes. Different techniques produce different result: however, it is important that it is clear to the visitors that the quote is actually a quote, otherwise it becomes easy to keep track on the content. Keep in mind: pull quotes shouldn’t be used too often, they shouldn’t be too large and they shouldn’t be included for the wrong purposes. In most cases an ordinary article should have at most 1-2 pull quotes, otherwise they lose their appeal and the article becomes harder to scan. Take a look at the example above. 99designs uses a block quotation to emphasize what the site is about. However, the text put in the quotes actually isn’t a quotation. We do not know why quotation mark is used in this case. We do know, though, that they shouldn’t be used in this context. 1. Simple indentation In most cases simple indentation is enough. In this case the structure of the content makes clear that the intended content is taken out from the main content flow. However, using this approach you need to make sure you have a very intuitive typographic and visual hierarchy and the indentation won’t be misunderstood. Often italics are used to indicate that the content is a quote and sometimes quotation is centered. The latter technique, however, is used quite rarely. 2. Quotes and indentation Another standard approach for design of pull quotes is to use the quote itself as a visual element to clearly indicate what the text passage is supposed to stand for. This technique is by far the most popular one and there is a good reason behind it: it unambiguously communicates the meaning of the text block. Surprisingly, the quote visuals are almost always placed on the left of the quote. You may try to experiment with quote on the right, or at the bottom of the passage. 3. Lines and indentation Standard, most usual and recommended way of designing blockquotes. 4. Quotations highlighted with a color Frequently designers use indentation together with a variation of color which is applied to the quote. Usually if the layout is dark quotes are presented in colors which are darker than the main content. And if the layout is light the quote is presented in lighter colors. If quotes need to be strongly emphasized vibrant colors are used. For modest highlighting usually slight variations of main colors suffices to indicate the difference between the main content and cited text. Natalie Jost displays a random quote from the Bible on her blog 5. Pull Quotes Actually we know it from print where quotes-neighbours are supposed to emphasize some important message or interview excerpts. Pull quotes are placed not within, but next to the content. Such quotes are usually short and don’t provide any additional information as they can also be found in the article. In Web the technique is seen rather rarely, but it has a charm of its own and — if used properly and for the right purposes — may strongly support the content. To clearly separate the “neighbours” from the main content designers often use lines or a large amount of whitespace. It is important to understand that in such cases pull quotes break the usual content flow which may make it harder for the readers to actually follow the argumentation of the article. In some cases it is more effective to avoid quotes (e.g. if a complex matter is described) while in other cases quotes can quicken and simplify the understanding (e.g. the main statement in the interview). Quotes-neighbours are usually placed on the right side of the content in order to not break the reader’s flow and remain passive. 6. Creative solutions Sometimes designers come up with creative solutions one actually wouldn’t expect from such an element as a quote. Here are some of them. Hopefully, they’ll help you to come up with further interesting ideas for the design of pull quotes. 7. Quotations as a standalone element Often quotations are used and designed not inside an article, but as a standalone design element which is given the dominant position in the design. This is often the case in testimonials where companies present quotes from their customers and clients to confirm the quality they actually promise. In such cases quotations are usually big, bold and clearly visible. In testimonials quotes are sometimes “rotated” meaning that among 5-7 testimonials only one is displayed at once. 8. Bonus: Footnotes In books and scientific documents citations are often provided with a footnote reference to the original document. In the Web, where references are commonly just linked to, this technique has never managed to become popular, however footnotes aren’t difficult to achieve with pure CSS. For instance, if you’d like to cite an excerpt from a book, instead of providing the corresponding title and page number you can simply refer to a footnote below the article. Thus you can avoid overloading your article with too many references. Footnotes, hence, can make it easier for your readers to actually read your article and provide details “on-demand” — only when they are needed. Sometimes footnotes are also used by authors to provide some remarks to the article (similar to books). However, it is not always reasonable to use footnotes for links. Web is a dynamic medium and links are extremely powerful - you don’t have to send your visitors to the footer of the page first to be able to follow a given link. Take a look at the following example. Naz Hamid uses both a blockquote (label 2 in the image above) and a footnote in his articles. The reference to the footnote and the footnote itself are interconnected: visitors can click on the reference and jump to the footnote. And in the footnote the “return”-icon allows the user to jump from the footnote to the place in the article where it is referred to. The author uses the footnotes to provide a personal remark on what has been mentioned in the article (labels 1 and 2). With footnotes you can offer your visitors some traditional, classic layout feeling without overwhelming them with long references to citations you provide. Tutorials Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention Simple CSS Blockquotes and Pullquotes Swooshy Curly Quotes Without Images Automatic pullquotes with JavaScript and CSS Easy jQuery Pull Quotes CSS Pull Quotes Automatic Pull-quotes with Behaviour and CSS Pull Quotes, Article at fonts.com Using Pull Quotes To Attract Readers Better Pull Quotes: Don’t Repeat Markup Pullquotes That Really Pull Snazzy Pullquotes for Your Blog HTML Dog: Pull Quotes How To Use Pull-quotes Rounded corners pull-quote using CSS (Presentation) Making a WordPress Pull Quote Footnotes with CSS and Javascript A XHTML+CSS+Javascript solution for displaying and marking up footnotes. There is also an updated sidenotes version which displays footnotes in the sidebar of a page instead of the footer of the page. Advantages: you don’t have to worry about numbering, the footnotes can be edited at their insertion point, you could give users the choice of how footnotes are formatted, or whether they are shown at all. From Footnotes To Sidenotes Another approach for displaying footnotes in the sidebar. Further references Elements of Design: Pull Quotes Christian Watson showcases 20 examples of attractive, unusual and beautiful pull quotes. WordPress Plugin: JavaScript Pull-Quotes A plugin that allows you to easily insert pull-quotes into your posts and pages. It uses client-side JavaScript. Fancy Pull-quotes A simple plugin for wordpress that allows you to obtain a nice pullquote of a specified text. The pullquote will be formatted with a fancy nice style, exactly like one of those you can read on a regular magazine. Grid-Based Design: Six Creative Column Techniques at Smashing Magazine Look at the “Escaping Boundaries” section (fourth from the top). Pull-quotes are an example of a design element that presents an opportunity to break out of your established visual flow. The older version of Andy Rutledge’s Design View used interesting pull-quotes that broke the visual flow of the column. Doing this places greater emphasis on the pull-quotes than if they were kept within the content of the column. Original post by Vitaly Friedman & Sven Lennartz and software by Elliott Back
-
http://yourfavoritespook.blogspot.com/2008/04/linkage-30-mor...
30 *more* recent web design articles, tutorials, examples & collections sliding javascript dropdown menuRuby on Rails: beginning rails51+ best of jQuery tutorials and examplesfree credit card icons for online shopsfreebie roundup: 12 places to download free texturesgetting started with Ruby on Railscreating more using less effort with Ruby on Railscustom javascript dialog boxesusing CSS to do anything: 50+ creative examples and tutorials9 Javascript tips you may not knowsimple CSS: creating more readable textmaking a javascript video player8 best open source shopping cartsweb development framework showcasesimproved current field highlighting in formsusing definition lists: question & answer formattingCSS bits- Vol 2- date stamps 6 should read javascript articles managing taxonomiesLearning jQuery » Multiple Fancy Drop CapsDesign Gallery: e-commerce progress barsIconfactory : Freeware : Sticker Pack 2Stop using AJAX!rethinking CSS image replacementusing form input arraysbetter pullquotes: don't repeat markup30 exceptional CSS techniques and examplescreating and styling resizable buttonsuseful jquery: a compilation of jquery utilities4 uber cool CSS techniques for links
-
Hot links for Web Designers
http://bshyu.blogspot.com/2008/06/hot-links-for-web-designer...寫程式需要的網站們~(ref: http://calos-tw.blogspot.com/2008/05/blog-post_17.html) PHP PHP 5.2.6 ReleasedBenchmarking Applications with PHP Dynamic Domain Objects in PHPFree PHP scripts, resources and tutorialsPatterns For PHPSPL autoloading in PHPCaching PHP pages: PEAR - Cache_Lite5 PHP 5 features you can't afford to ignorePHP 產生 RSS/ATOM pubDate/created 所需格式 eAccelerator PHP AcceleratorWeb scrapping in a smart way, making a "Today in History" object in PHPCSS Variables Using PHPFree PHP scripts and classes: RSS parser using cache Zend Framework An Example Zend Framework Blog Application - Part 1: Introductory PlanningAn Example Zend Framework Blog Application - Part 2: The MVC Application ArchitectureAn Example Zend Framework Blog Application - Part 3: A Simple Hello World TutorialAn Example Zend Framework Blog Application - Part 4: Setting the Design Stage with Blueprint CSS Framework and Zend_LayoutAn Example Zend Framework Blog Application - Part 5: Creating Models with Zend_Db and adding an Administration ModuleSubversion for the Example Zend Framework Blog Tutorial SeriesTranslating Zend_Form error messages and moreUsing objects with Zend_View's PartialLoop helperZend_TreeZend Framework - The Big Q&A View Helpers in Zend Framework CakePHP Frameworkjamesfairhurst's cakephp articlessnook.ca articles JavaScript 30+ Lightbox特效屬性動態比較表 XRegExp - A JavaScript regular expression library bundle-fuIEBlog : What Happened to Operation Aborted? Versions of JavaScriptCross-site scripting attacks : How to Prevent? Making a Javascript Video PlayerWrapping functions in JavaScriptstrftime() in JavaScriptReading binary files using AjaxJavaScript MemoizationAssetPackager – JavaScript and CSS Asset Compression for Production Rails Apps 5 JavaScript Best PracticesCustom JavaScript Dialog BoxesWhere to include JavaScript files in a document 介紹好網站：MiniAjax.com 用 JavaScript 來修飾你的超連結 Running Java in JavaScriptHow to know and handle disabled javascript in browser Ajax AccessibilityMacros in JavaScript pleaseJavascript - Event compatibility tables jQuery 51+ Best of jQuery Tutorials and Examples Ajax login in PHP using jQuery Image Cross Fade Transition with jQueryImproved Current Field Highlighting in FormsjQuery Masked Input Plugin jQuery Thumbs: A JQuery plugin to easily create thumbnails jQuery Combo Select ReduxjQuery.ui Sortable Better Pull Quotes: Don't Repeat MarkupSimple Modal Window Example built on jQuery CSS 4 Uber Cool Css Techniques For Links Can We Prevent CSS Caching? IE CSS Bugs That'll Get You Every Time - CSS-Tricks CSS Gradients, Transforms, Animations, and Masks Using CSS to Do Anything: 50+ Creative Examples and Tutorials CSS Shorthand Cheat SheetStarting with CSS and bug fixing tipsUpdate on CSS Caching The quickest CSS and PNG alpha transparency fix for IE (internet explorer) Database The Database Programmer: Advanced Table Design: Resolutions MySQL How to make multiple updates using a single query in MySQLThe MySQL optimizer, the OS cache, and sequential versus random I/O Oracle MySQL 4.x to Oracle 10g Migration NotesMigration made easy with Oracle SQL Developer Getting Started: SQL Developer Migration Workbench Oracle 清除用戶對象方法 oracle drop all object Oracle Recycle Bin Flashback PurgeUpdate Query with Join in Oracle Database Service Handy online regex tool for PHP, Perl, JS and Python Project 溝通是專案經理要學習的第一課 Software 介紹好用工具：IECapt 任意縮放被固定大小的視窗 - ResizeEnable翻譯名詞：render SCM Subversion visually explained in 30 secVersion control with Subversion: so easy my wife can do it Design Icojoy Free Mini Icons for Any Project 靠右對齊的導航菜單減慢閱讀速度 Web 5 web development techniques to prevent Google from crawling your HTML forms網站開發人員的SEO小抄 Kotatsu Automates HTML Table Generation
-
Links 2008-05-09
http://blueonionsoftware.com/Blog.aspx?p=4f736ea8-c5bc-4ef5-...I'm moving like cold molasses this morning with this head cold. Still, the blog must go on. Here's some stuff I found interesting this week when I didn't have a head cold. Programmers Don't Read Books -- But You Should - Jeff Atwood's, "Coding Horror" is always a great read. I've read most of the books he recommends here. Better Pull Quotes: Don’t Repeat Markup - CSS Tricks contains some very useful code, like this gem. A Great Visual Studio Add-on You Must Have - I've used power commands for a while now. Seamless and useful. K-Meleon: It's like Firefox, without the bloat - It's a little to light for my tastes but who knows, maybe you'll like it. Five command line tools to detect Windows hacks - Command line tools for the discriminating administrator. LyX – The Document Processor - I still have my circa 1984 TeX reference. Still the best way to do book publishing. LyX is a combination of tools that makes TeX and LaTex a bit more word processor like. Fax Documents Over the Internet for Free to any Phone number in US - Send unlimited number of faxes without registration, there are no ads attached to the fax sheets and each fax document can have up to 20 pages. Understanding IIS7 Request Restrictions on Windows Vista - Just how many concurrent connections does Vista support. Answer, it depends... powered by Bloget™ - "One File, One Binary, One Blog"
-
Weekend Links - MooTools Fancy Upload, 60 Second Tech, jSize, CSS Pull Quotes, PHP First Language
http://davidwalsh.name/mootools-fancy-upload-60-tech-jsize-c...MooTools Fancy Upload Moo developer Harald Kirschner gave Fancy Upload a face-lift for MooTools 1.2. If you haven’t seen Fancy Upload before, please check this out! http://digitarald.de/project/fancyupload/ Sixty Second Tech I met Cal Evans through my time as a PHP Zone Leader. He’s a really bright guy and his newest podcast show aims to share his knowledge with people that aren’t so techy. http://www.sixtysecondtech.com/ jSize 1.0 - A Window Slider/Resizer Wonder for jQuery This jQuery gem allows for you to use a slider to change the size of columns within the structure of a website. Cool! http://www.gimiti.com/kltan/wordpress/?p=27 Better Pull Quotes CSS-Tricks shows you show to avoid duplicating content to create pull quotes by using a little bit of jQuery goodness. http://css-tricks.com/better-pull-quotes/ Is PHP a Good First Language? This article outlines why PHP is a good first server-side language to learn. While I love PHP, I think Java is a better first language to learn. It’s much more strict, which I think a developer needs to know first — then be amazed at how PHP is much easier. http://codeutopia.net/blog/2008/05/01/is-php-a-good-first-language/
More rising blog posts
-
Business »
Three Market Relationships -
Lifestyle »
3% Off The Top: Well, that wasn't as exciting as... -
Politics »
Objectivists on the PRO-IP Act -
Technology »
The BlackBerry Storm is out.. and the early reviews roll in.. -
Entertainment »
Friday Video Fun -
Sports »
Betting Co. Offering £10,000 To First Player Who Does Ridiculous Goal Celebration
Recent posts from CSS-Tricks
-
Thoughts on IntenseDebate So Far
23 hours ago -
New Screencast: How to Use CSS Sprites
1 day ago -
Block a Website for Everyone But You
2 days ago
