Skip to main content

Home/ CSS Evangelist/ Group items tagged CSS classes

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
webExplorations

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 - 0 views

selectivizr.com

css3 html5

shared by webExplorations on 02 Aug 11 - Cached
  • webExplorations on 02 Aug 11
     
    Make your CSS3 web pages backward compatible with IE 6=8
stylist

Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework - 1 views

www.yaml.de

html

shared by stylist on 14 Feb 07 - Cached
  • Wilhelm Wagenfeld Haus Netzspielwiese Flexible/Elastische Layouts Gymnasium Blomberg Blogstoff-Weblog  
Vernon Fowler

Replacing the -9999px hack (new image replacement) - Jeffrey Zeldman Presents The Daily... - 0 views

www.zeldman.com/...9px-hack-new-image-replacement

NED12 css webdesign hacks image image-replacement text-indent

shared by Vernon Fowler on 16 Sep 12 - No Cached
  • My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method: .hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; } Really long strings of text will never flow into the container because they always flow away from the container. Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.
  • Scott Kellum said on 1 March 2012 at 3:41 pm: I went ahead and created a side by side site to test the performance: http://lab.pgdn.us/hidden-text-performance/ @Ethan, This is the best 43min I have ever spent learning about optimizing the performance of my CSS: http://www.youtube.com/watch?v=xuMWhto62Eo
  • Would be interesting to understand both the SEO and accessibility impacts of this approach.
  • ...4 more annotations...
  • Scott Kellum said on 2 March 2012 at 4:06 pm: After much deliberation over here: https://github.com/h5bp/html5-boilerplate/issues/1005#issuecomment-4293007 Jonathan Neal suggested a method using font: 0/0 serif; and things seem to be settling on this — .ir { font: 0/0 serif; text-shadow: none; color: transparent; }
  • While I think this is certainly and interesting approach, I have some concerns with the accessibility. In some, if not all, cases when overflow: hidden; hides the content of the element this is applied to from screen readers. In most cases where I use image replacement, I still need the text to be accessible (e.g. call to action buttons set in Gotham). See Aaron Gustafson’s A List Apart article, http://www.alistapart.com/articles/now-you-see-me/. Has anyone tested this with a wide battery of screen readers or other accessibility devices?
  • Another note on accessibility: Besides the screen reader problems – people who don’t get images will not see the text too.
  • As a few people said already, this does not solve the accessibility problem that comes with text-indent. Worse, it may send the wrong message: “this is new and cool, use this from now!”. As a leader in the industry, I think you should warn people that even if this is “better” in term of performance, it is still a bad solution. Imo, Image Replacement techniques should be evaluated against the problems they solve/address. Fwiw, I wrote something about these challenges a few years back: http://tjkdesign.com/articles/tip.asp </shameless plug>
Jesse McPherson

Stu Nicholls | CSSplay | Removing active/focus state borders - 0 views

www.cssplay.co.uk/...nodots.html

shared by Jesse McPherson on 12 Oct 08 - Cached
  • CopyrightYou may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
    • Jesse McPherson
      Jesse McPherson on 12 Oct 08
       
      Can you really apply a Copyright to a CSS technique?
yc c

PrimerCSS - 2 views

primercss.com/index.php

css inline extract online tools converter

shared by yc c on 30 Jan 10 - Cached
  • yc c on 30 Jan 10
     
    Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started.
yc c

PrimerCSS - 8 views

www.primercss.com

CSS extract online tool stylesheet

shared by yc c on 05 May 10 - Cached
  • yc c on 05 May 10
     
    Primer undercoats your CSS by pulling out all of your classes and id's and placing them into a starter stylesheet. Paste your HTML in to get started.
Alexis Sgavel

Custom drop downs with CSS3 | Lea Verou - 0 views

leaverou.me/...om-select-drop-downs-with-css3

select drop design tools

shared by Alexis Sgavel on 18 Mar 11 - No Cached
  • Alexis Sgavel on 18 Mar 11
     
    The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go "through" an element and target whatever is "underneath" that element instead. This also applies to other "hit testing" behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and Document.elementFromPoint().
yc c

24 ways: Flickr Photos On Demand with getFlickr - 0 views

24ways.org/...flickr-photos-on-demand

flickr script tools

shared by yc c on 25 Mar 07 - Cached
  • yc c on 25 Mar 07
     
    A script (.js + .css files to download) that will generate a gallery to an HTML link as you use the CSS class getflickrphotos.
Stefan

Adobe tackles browser incompatibilities - Yahoo! News - 0 views

news.yahoo.com/...84437_2

adobe css review webdesign

shared by Stefan on 15 Mar 07 - Cached
  • Honing in on browser incompatibility issues in Web development, Adobe Systems on Thursday is announcing CSS Advisor, a Web site that documents these problems and offers solutions.
yc c

CSSFly - Edit websites on the fly! - 0 views

www.cssfly.net

css editor real-time tools

shared by yc c on 22 Mar 07 - Cached
  • yc c on 22 Mar 07
     
    CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files : what you code is what you get! This tool is designed for developers. Use it for developing, testing or checking your web-project or take a look behind the scenerys of your favourite websites.
a2zwebhelp

Breadcrumbs - Pagination using Bootstrap CSS - 0 views

www.a2zwebhelp.com/ootstrap-breadcrumb-pagination

Bootstrap Breadcrumbs Pagination responsive web design

shared by a2zwebhelp on 27 Jul 13 - No Cached
  • a2zwebhelp on 27 Jul 13
     
    Bootstrap made it easy to define breadcrumb navigation. Just use the class "breadcrumb" and your breadcrumb navigation will be created.
Vernon Fowler

Confused About REM and EM? | Jeremy Church - 0 views

j.eremy.net/confused-about-rem-and-em

typography webdesign css DIG252 media queries mediaqueries fonts rem sizing

shared by Vernon Fowler on 02 Mar 14 - No Cached
  • Use REM for consistent padding and margins
  • update font sizes and padding within a media query
  • @media screen and (min-width: 1400px) {   html { font-size: 1.25em; } }
  • ...2 more annotations...
  • If a style sheet is built in a modular fashion, then rem shouldn’t be needed very often, but it can be handy at times.
  • The initial values are calculated by incrementing 1em(16px) at a 1:1.2 ratio.
yc c

tingelets - Bookmarklets for Web Developers - 0 views

www.tingelets.com

bookmarklets webdev css

shared by yc c on 01 Jun 08 - Cached
  • yc c on 01 Jun 08
     
    tingelets are a set of bookmarklets that you can place in your browsers bookmark bar. When clicked, they highlight a certain tag or set of tags in a specific color or background tile. They are very handy for quickly looking at web layouts in different browsers. You can either highlight tags directly or type in a tag, id or class name to highlight the matching element(s).
« First ‹ Previous 41 - 56 of 56
Showing 20▼ items per page