Skip to main content

Home/ Web Development & Mobile App/ Group items tagged browser

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
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 16 Jan 14 - 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 */
  • 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.
  • ...3 more annotations...
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • 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 */
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
Vernon Fowler

svg-edit - A complete vector graphics editor in the browser (in JavaScript) - Google Pr... - 0 views

code.google.com/svg-edit

svg editor vector browser open source html5 javascript webdesign

shared by Vernon Fowler on 07 Feb 14 - No Cached
  • Vernon Fowler on 07 Feb 14
     
    "SVG-edit is an online vector graphics editor that uses only JavaScript, HTML5, CSS and SVG (i.e. no server-side functionality)."
Vernon Fowler

SVG Files: From Illustrator to the Web - Tuts+ Design & Illustration Tutorial - 0 views

design.tutsplus.com/...rator-to-the-web--vector-20899

adobe svg illustrator webdesign tutorial vector icons logos animation

shared by Vernon Fowler on 10 Feb 14 - No Cached
  • Vernon Fowler on 10 Feb 14
     
    "Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser."
Vernon Fowler

Extending HTML5 - Microformats | HTML5 Doctor - 0 views

html5doctor.com/microformats

progressive enhancement microformats html markup webdesign

shared by Vernon Fowler on 01 Mar 14 - No Cached
  • Vernon Fowler on 01 Mar 14
     
    "While HTML5 has a bunch of semantic elements, including new ones like and , sometimes there just isn't an element with the right meaning. What we want are ways to extend what we've got, to add extra semantics that are machine-readable - data that a browser, script, or robot can use."
Biztech Consultancy

Will Mobile Advertising Join the Race of eCommerce Trends in 2015? - 0 views

blog.biztechconsultancy.com/ing-join-race-ecommerce-trends

eCommerce Trends in 2015 eCommerce Trends Mobile app development companies Mobile Application Development Mobile Applications Android Application Development iOS Application Development Cross Platform Application Development

shared by Biztech Consultancy on 12 Aug 15 - No Cached
  • Biztech Consultancy on 12 Aug 15
     
    What is Mobile Advertising? It is a term that refers to advertising through mobile or smartphone devices. It is a way of mobile marketing. There are several methods used by top brands for mobile advertising like text messages, promotional ads within the apps, ads within the mobile browsers, image ads, video ads etc.
Biztech Consultancy

PSD Conversion Service | Convert PSD To HTML / XHTML and CSS - 0 views

bit.ly/1tyQxMw

psd conversion convert psd to html psd to xhtml conversion psd to css psd slicing PSD to CMS PSD to E-Commerce PSD to Email PSD to HTML PSD to XHTML

shared by Biztech Consultancy on 03 Jan 15 - No Cached
  • Biztech Consultancy on 03 Jan 15
     
    Being an established provider of PSD to XHTML conversion, we offer W3C validated, SEO semantic XTHML, compatible to various browser. Grab quality PSD to HTML / XHTML and CSS Conversion services at affordable costs by getting in touch with IT business solutions provider Biztech Consultancy. http://bit.ly/1tyQxMw
Biztech Consultancy

Dynamic Website - latest development in the world of websites - 1 views

blog.biztechconsultancy.com/dynamic-website-development

Dynamic Website - Latest development in the World of Websites Benefits of Dynamic website How Dynamic website helpful to Online Business Why Dynamic websites are the most popular websites Dynamic websites help in making SEO more effective

shared by Biztech Consultancy on 28 Mar 14 - No Cached
  • Biztech Consultancy on 28 Mar 14
     
    A dynamic website uses a database to gather, manage and display information. Database driven are used for websites that change constantly with areas such as product inventory, news or listing information. Dynamic websites contain Web pages that are generated in real-time. These pages include Web scripting code, such as PHP or ASP. When a dynamic page is accessed, the code within the page is parsed on the Web server and the resulting HTML is sent to the client's Web browser.
Vernon Fowler

Web Typography: Using The Golden Ratio and REM's - Greg Rickaby - 0 views

gregrickaby.com/sing-the-golden-ratio-and-rems

typography webdesign tools calculator usability css font REM responsive

shared by Vernon Fowler on 01 Feb 14 - No Cached
  • First you need to set a default “root” font-size variable: html { font-size: 62.5% } Why 62.5% instead of 100%? Simplicity. Our default font is now 10px, which makes math easier. Now, 1.0rem = 10px. This becomes our $rembase.
  • Now your fonts will scale perfectly during a browser re-size (if using responsive design), or if a user were to zoom in or out.
  • What’s so awesome about the unitless line height? You only have to specify it once in the <body> tag. Now, ALL other line height(s) are relative to the parent font-size. That’s too easy! (Of course, you can still specify your own to maintain complete control.)
    • Vernon Fowler
      Vernon Fowler on 01 Feb 14
       
      Shouldn't line-height also be refined whenever the container width changes?
  • ...5 more annotations...
  • Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm.
    • Vernon Fowler
      Vernon Fowler on 01 Feb 14
       
      Where does the mystical value of 24px or 48px for vertical spacing margins come from?
  • By declaring REM’s after PX’s in the CSS this example  will degrade gracefully to the PX:
  • Line-height: 24px; for the win, you you stay right in the baseline ( until you start using a border bottom it throws it off by a pixel :p )
  • setting the root font size to 62.5% is a brilliant little trick
  • One note on the comment regarding vertical rhythm. I believe the 24px and 48px is dependent on your line-height. In your examples, you are using a line-height of 26px so I think the values should be 26px and 52px to maintain that rhythm.
Vernon Fowler

The Genericons Icon Font Story | ThemeShaper - 0 views

themeshaper.com/...genericons-icon-font

icon font design webdesign css

shared by Vernon Fowler on 18 Nov 13 - No Cached
  • The OpenType font file (.otf) is even included so you can can drop it in your system fonts folder and use the font in Photoshop if you like.
  • The flexibility you get from being able to use CSS to change the way they look, like re-coloring all the icons with one simple rule, makes them superior to SVG for this use case. They also work in all modern browsers
1 - 10 of 10
Showing 20▼ items per page