Skip to main content

Home/ CSS Evangelist/ Group items tagged 1

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
tech vedic

Combine the wallet and your phone two together and carry just one - 0 views

techvedic.livejournal.com/10593.html

techvedic online techsupport

shared by tech vedic on 30 May 13 - No Cached
  • tech vedic on 30 May 13
     
    "Your wallet and your phone are probably the two items you carry around with you the most. What if you can combine the two together and carry just one item? Now you can with the new Q Card Case for the iPhone 5 by CM4. The Q Card Case is a 2-in-1 device that functions both as a protective casing for your iPhone5 as well as a wallet. It has space to comfortably fit 3 credit card sized cards plus cash. The case is made from a special patent pending soft-touch rubber and premium fabric. It also has a cut out slots for quick access to the cards as well for accessing all the buttons on your iPhone. It even has a big cut out at the bottom of the case to allow for in-case charging as well as fully compatible with Apple's Lightning port to 30-pin port adapter. The Q Card Case is available in 4 colors - Black Onyx, Mahogany Brown, Pacific Green and Red Rouge." By-The Xpert Crew @ http://techvedic.com https://www.facebook.com/techvedicinc https://twitter.com/techvedicinc http://pinterest.com/techvedic1 http://techvedicinc.tumblr.com/ https://plus.google.com/u/0/110467075169904075419/
Jamil Silva

<!DOCTYPE html P - 3 views

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <!-- Thi...

theme tumblr isadora blanch cultura visual bigtheme

started by Jamil Silva on 01 Sep 12 no follow-up yet
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

snook.ca/...font-size-with-rem

css3 rem font css fonts sizing webdesign web design

shared by Vernon Fowler on 10 Sep 12 - No Cached
  • The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
  • The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  • We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  • ...3 more annotations...
  • I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
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>
Zulkarnain K.

CSS1K - 6 views

css1k.com

css 1k web design web design

shared by Zulkarnain K. on 25 Jan 12 - No Cached
  • Zulkarnain K. on 25 Jan 12
     
    A demonstration of what can be accomplished with only 1 K (Kibibyte) of CSS. Select any design from the list to load it into this page.
Al-Mehatb Shaikh

Getting Started with Chrome extension - Diigo help - 0 views

help.diigo.com/...tting-started-chrome-extension

Diigo Chrome

shared by Al-Mehatb Shaikh on 10 Mar 14 - No Cached
  • Use the “Save” option to bookmark a page. Bookmarking saves a link to the page in your online Diigo library, allowing you to easily access it later.
  • Highlighting can also be accomplished from the context pop-up. After the Chrome extension is installed, whenever you select text on a webpage, the context pop-up will appear, allowing you to accomplish text-related annotation. Highlight Pop-up Menu – After you highlight some text, position your mouse cursor over it and the highlight pop-up menu will appear. The highlight pop-up menu allows you to add notes to, share, or delete the highlight.
  • Sticky Note Click the middle icon on the annotation toolbar to add a sticky note to the page. With a sticky note, you can write your thoughts anywhere on a web page.
thompsonmarry

Getting Started with Firefox extension - Diigo help - 0 views

help.diigo.com/...refox-add-on-quick-start-guide

Diigo Firefox

shared by thompsonmarry on 01 Oct 14 - No Cached
  •  Feature Highlight: Highlights Diigo saves the day with "highlights". Highlights let you select the important snippets on a page and store them in your library with the page's bookmark. Let's try it. Just open a page, maybe one of your old-school bookmarks or one of your new cat bookmarks, and find the information on that page you actually care about. Select that important text. Got it? Okay, now put your hemet on, 'cause this might blow your mind! Click the highlight icon on the Diigo toolbar. It's the one with the "T" on a page with a yellow highlighter. You will notice that the selected text gets a yellow background. This means that the text has been saved in your library, and as long as you have the Diigo add-on the text will be highlighted on the page! How's that for easy?   Now you've highlighted the text. It will appear in your library within the bookmark for the page it is on. Go to your library and you can see how it works. If you're not sure how to get to your library, just click the second icon on the toolbar (Diigo icon to the left of the search bar) and then select "My Library »".
  • Sticky Notes on the Web What? I can put a sticky note on a web page? How? Oh, that's right! Diigo. Just right-click anywhere on the page and choose to "add a floating sticky note". Type up your note and choose "Post", then move the note anywhere on the page. You have to type a note first, before you move it where you want, otherwise there's nothing to move!
yc c

Font Squirrel | Create Your Own @font-face Kits - 4 views

www.fontsquirrel.com/...generator

converter online free download tool font fontface generator

shared by yc c on 24 Jul 10 - Cached
Yuri Câmara liked it
  • yc c on 24 Jul 10
     
    download and/or convert fonts Upload a font and this will spit out everything you need to embed it into a website including HTML, CSS and multiple font file formats. You'll definitely want to bookmark this one! Each @font-face font kit come with: Original TrueType or OpenType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+EOT fonts for Internet Explorer 4+Demo.html and stylesheet.css so you can get going fastNOTE: All fonts are subset to the Mac Roman char set.
my mashable

Facebook Values Itself at $3.7 Billion (Or Less) - 1 views

waynesfavorite.blogspot.com/...s-itself-at-37-billion-or.html

Associated Press ConnectU facebook transcript valuation

shared by my mashable on 13 Feb 09 - Cached
  • my mashable on 13 Feb 09
     
    When Microsoft bought a 1.6 percent stake in Facebook back in October 2007, it paid 240 million dollars for the preferred stock, which meant that the company was valued at roughly 15 billion dollars.
my mashable

5 Ways to Help Twestival Raise $1 Million - 0 views

waynesfavorite.blogspot.com/...to-help-twestival-raise-1.html

charity charity water Lists twestival

shared by my mashable on 12 Feb 09 - Cached
  • my mashable on 12 Feb 09
     
    Mashable has partnered with Twestival to promote the world's largest Twitter fundraising drive. Here, New York Twestival co-organizer Paull Young promotes a call to action on the eve of the event.
my mashable

Massive Mashable Giveaway: Win a $2995 DEMO Pass! - 0 views

waynesfavorite.blogspot.com/...le-giveaway-win-2995-demo.html

demo demo09 mashable

shared by my mashable on 11 Feb 09 - Cached
  • my mashable on 11 Feb 09
     
    DEMO, the twice annual "launchpad for emerging technologies" that debuted massively successful technology products and services including TiVo, E*TRADE, Salesforce.com, VMware, Six Apart, OddPost, IronPort, GrandCentral and Glam Media, returns on March 1-3 with a new crop of web startups and products.
Gary Edwards

Everything You Know About CSS Is Wrong | Digital Web Magazine: Rachel Andrew - 0 views

www.digital-web.com/...ng_you_know_about_CSS_Is_wrong

HTML-CSS rachel-andrew CSS-Tables CSS-Layout

shared by Gary Edwards on 27 Oct 08 - Cached
  • Gary Edwards on 27 Oct 08
     
    The easy way to use CSS2.1 to solve difficult cross-browser layout issues: CSS tables solve all the problems encountered when using absolute positioning or floats to create multi-column layouts in modern browsers. Specifying the value table for the display property of an element allows you to display the element and its descendants as though they're table elements. The main benefit of CSS table-based layouts is the ability to easily define the boundaries of a cell so that we can add backgrounds and so on to it-without the semantic problems of marking up non-tabular content as a HTML table in the document.
Frederik Van Zande

Design Stencils - Yahoo! Design Pattern Library - 0 views

developer.yahoo.com/...wireframes

examples stencels stencil visio webdesign wireframe yahoo

shared by Frederik Van Zande on 02 Jun 08 - Cached
  • Frederik Van Zande on 02 Jun 08
     
    Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: * Ad Units * Calendars * Carousels * Charts and Tables * UI Controls * Form Elements * Grids * Menus and Buttons * Mobile - General * Mobile - iPhone * Navigation and Pagination * OS Elements * Placeholder Text * Screen Resolutions * Tabs * Windows and Containers
Mr. DiGi

IETester - 0 views

www.my-debugbar.com/...HomePage

browser explorer ie internet tests tools web webdesign windows

shared by Mr. DiGi on 29 May 08 - Cached
  • Mr. DiGi on 29 May 08
     
    Free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.
ronzuo

OverZone Software - CSS Tab Designer - 0 views

www.highdots.com/css-tab-designer

css tab

shared by ronzuo on 14 Feb 07 - Cached
  • With the CSS Tab Designer, you can : Quickly design your list visually Choose from a variety of styles/colors (60+ different designs/colors supported). [ Styles Authors / Credits ] Generate strict xhtml compliant code  
moviele

Programming Designs Forums / Top Ten CSS Gallery/Showcase Websites - 0 views

forum.programming-designs.com/viewtopic.php

css

shared by moviele on 23 Feb 07 - Cached
  • Features:Submit websites? NoSubmit CSS Templates? YesRate websites/designs? YesComment on websites/designs? NoSite Functionality: 5/5Comments: CSSZenGarden is one of the first in it's class and showcases talent through customizing stylesheets to fit the site's design.2. StyleGala.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: Style Gala not only showcases design but also brings resources into the mix, providing a great community for web designers./3. CSSRemix.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: In my opinion, the best gallery showcase of CSS websites there is in terms of allowing people to interact.4. CSSReboot.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 5/5Comments: This site is more competitive than the others and submitting a site isn't as easy as the rest. But for what it does, it's great.5. CSSTux.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? NoComment on websites/designs? YesSite Functionality: 4/5Comments: Design is great, showcase is simple yet elegant.6. CSSMania.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? NoSite Functionality: 4/5Comments: A site with great functionality but commenting would be nice.7. CSSImport.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: Another great showcase of design and talent, definitely a site you should check out.8. CSSDrive.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: Great functionality, not the best design though.9. UnmatchedStyle.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 4/5Comments: They don't give quite enough room for effective showcasing, but overall it works.10. CSSBloom.comFeatures:Submit websites? YesSubmit CSS Templates? NoRate websites/designs? YesComment on websites/designs? YesSite Functionality: 3/5Comments: CSSBloom is based on WordPress, looks like a blog, but works well.Notable Mentions 11. CSS-Galleries.comFeatures:
    • Jason Bao
      Jason Bao on 23 Feb 07
       
      Zen Garden is an excellent one!
kumar app

Photoshop Tutorial - Basic Logo Design - 3 views

www.levoltz.com/...hop-tutorial-basic-logo-design

professional logo photoshop tutorials how to gradients

shared by kumar app on 03 Dec 09 - Cached
  • kumar app on 03 Dec 09
     
    Ten steps to create basic logos using Photoshop. Step-by-Step Instructions: 1. Select Elliptical Marquee tool and draw a circle in the center of the canvas and fill it with black color by pressing ctrl+backspace. 2. Keep the selection active and move the selection by pressing right arrow ke
yc c

Complete CSS Guide The missing manual for CSS - Westciv Wiki - 7 views

westciv.com/CSS_Guide

css reference guide

shared by yc c on 14 Mar 10 - Cached
  • yc c on 14 Mar 10
     
    This Guide is a reference to all of CSS 2.1, the W3C recommended standard for web page appearance, as of July 2008. We will also cover some aspects of CSS 3, currently a work in progress.
‹ Previous 21 - 40 of 158 Next › Last »
Showing 20▼ items per page