Skip to main content

Home/ Web Development, Design & Programming/ Group items tagged Line

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Soul Book

The Incredible Em & Elastic Layouts with CSS - 0 views

jontangerine.com/...m-and-elastic-layouts-with-css

blog css tools webdesign typography design fonts text layout web framework layouts em elastic

shared by Soul Book on 01 Apr 10 - Cached
  • Elastic design uses em values for all elements. Ems are a relative size, written like this: 1em, 0.5em, 1.5em etc. Ems can be specified to three decimal places like so: 1.063em. “Relative” means: They are calculated based on the font size of the parent element. E.g. If a <div> has a computed font size of 16px then any element inside that layer —a child— inherits the same font size unless it is changed. If the child font size is changed to 0.75em then the computed size would be 0.75 × 16px = 12px. If the user increases (or decreases) text size in their browser, the whole interface stretches (or shrinks.)
  • All popular browsers have a default font size of 16px. Therefore, at the default browser setting, 1em = 16px.
  • The <body> inherits it unless styled otherwise using CSS. Therefore 1em = 16px, 0.5em = 8px, 10em = 160px and so on. We can now specify any element size we need to using ems!
  • ...9 more annotations...
  • However, (gasp) IE has a problem with ems. Resizing text from medium (default) to large in IE5/6 would lead to a huge increase in font size rather than the gradual one expected. So another selector is needed to get IE to behave: html{ font-size:100%; }
  • Let’s give our <body> some more style, and center everything in the viewport (this will be important later for our content wrapper.) Our initial CSS ends up like this: html{ font-size: 100%; } body{ font-size: 1em; font-family: georgia, serif; text-align: center; color: #444; background: #e6e6e6; padding: 0; margin: 0; }
  • 1 ÷ 16 × 740 = 46.25em (1 ÷ parent font-size × required pixel value = em value)
  • While we're here, we might as well add some typographic goodness by selecting a basic leading and adding some vertical rhythm, with everything expressed in ems.
  • Set a 12px font size with 18px line height and margin for paragraphs
  • Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”
  • To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }
  • Jon, good article and very useful chartm but your text sizing method has one major drawback. If elements with font-sizes set in em’s are nested, i.e with lists, these elements inherit the font size. Therefore each child element will be 0.75em (or 75%) of the previous one: See an example here. (Would have posted the code put it was coming out really ugly!) I would recommend against using that method and setting the global font size in the body tag i.e. 'font-size:75%' for 12px. Then only setting different font-sizes where necessary.
  • Thanks Will, interesting point, but that is solved with a simple font-size:1em on the first child. Retaining the default ensures that even images are sized correctly in ems. IE (surprise) will compute incorrectly against a parent length equivalent to 12px. My preference born out by some minor but painful computed size errors in complex layouts is not to adjust the body, and only set font size where necessary for specific elements.
  • Soul Book on 01 Apr 10
     
    A nice and simple explanation of using EMs to make elastic layouts
iamkajal

C Command Line Argument | Studytonight - 0 views

www.studytonight.com/...command-line-argument.php

coding c command line argument

shared by iamkajal on 29 Jul 22 - No Cached
  • iamkajal on 29 Jul 22
     
    C offers us a feature called "command line argument" using which we can enter values from the command line at the time of execution. Command line argument is a parameter supplied to the program when it is invoked or run.
Vernon Fowler

The Ultimate Guide to Golden Ratio Typography - 0 views

www.pearsonified.com/...golden-ratio-typography.php

typography design golden ratio webdesign fonts typefaces webfonts font web

shared by Vernon Fowler on 23 Dec 11 - No Cached
  • The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.
  • Font size and line height are proportionally related.
  • For any font size, the line height must increase as the line width increases.
  • ...1 more annotation...
  • For a font size of 16px, the perfect line height is achieved when h equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.
freefastapp

تحميل لاين لانشر - Launcher Line الرسمي والجديد اندرويد | تحميل التطبيقات ال... - 0 views

www.freefastapp.com/...launcher-line.html

launcher line لاين الرسمي

shared by freefastapp on 15 Sep 15 - No Cached
  • freefastapp on 15 Sep 15
     
    تحميل لاين لانشر - Launcher Line الرسمي والجديد اندرويد
  • freefastapp on 15 Sep 15
     
    تحميل لاين لانشر - Launcher Line الرسمي والجديد اندرويد
magecompinc

How to Get Admin Path Command Line in Magento 2 - 0 views

magecomp.com/...in-path-command-line-magento-2

magento2 getadminpath commandline phpfile adminuri adminurl

shared by magecompinc on 18 Jun 21 - No Cached
  • magecompinc on 18 Jun 21
     
    In Magento 2, There are two ways to get the admin path. From the command line or by running the code in your php file. Today I am here to help you all with How to Get Admin Path Command Line in Magento 2.
Vernon Fowler

Web Designer Notebook » How to use Modernizr - 1 views

webdesignernotebook.com/...how-to-use-modernizr

html5 css3 javascript library browser modernizr css

shared by Vernon Fowler on 13 Jan 14 - No Cached
olivia frost liked it
  • Modernizr doesn’t actually magically enable these properties for browsers that don’t support them. It just tells the page whether that feature is supported on the browser the visitor is using or not.
  • To install Modernizr, download the file from this page. Then, on your site’s head tag, add a link to the file. For example: ?1<script src="js/modernizr-1.0.min.js"></script> The second step is to include on your html tag a class of “no-js”: ?1<html class="no-js"> Why add this tag? Because that will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all (and probably other features of your site won’t work either…), so it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and it may look something like this: ?1<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
  • Vernon Fowler on 13 Jan 14
     
    "There is a tool that came to make our lives as progressive web designers a bit easier: Modernizr. In this short tutorial, learn how to apply this handy script to maximum effect on your sites."
Raja uk

Auto line-height: a jQuery plugin for flexible layouts | Ajaxmint.com - 0 views

ajaxmint.com/...ry-plugin-for-flexible-layouts

ajax auto line-height jquery

shared by Raja uk on 28 Dec 09 - No Cached
  • Raja uk on 28 Dec 09
     
    This plugin adjusts the line-height of selected elements in proportion to their width, relative to the font size. Image below illustrate the effect (left is plugin controlled).
htmlslicemate.com

Line25 Sites of the Week for June 7th 2013 - 0 views

line25.com/...-of-the-week-for-june-7th-2013

inspiration programming webdesign CSS development

shared by htmlslicemate.com on 07 Jun 13 - No Cached
  • htmlslicemate.com on 07 Jun 13
     
    Line25 Sites of the Week is a weekly roundup of the most outstanding website designs that I stumble across during my every day browsing. In this week's collection, we have designs from Juliana Bicycles, Simple as Milk, Charlie Waite, @JRDN_SPRW and productOps.
Luciano Ferrer

Stupid htaccess Tricks * Perishable Press - 1 views

perishablepress.com/...stupid-htaccess-tricks

server hotlinking htaccess

shared by Luciano Ferrer on 11 Mar 12 - No Cached
  • Luciano Ferrer on 11 Mar 12
     
    "Stop Hotlinking, Serve Alternate Content To serve 'em some unexpected alternate content when hotlinking is detected, employ the following code, which will protect all files of the types included in the last line (add more types as needed). Remember to replace the dummy path names with real ones. Also, the name of the nasty image being served in this case is "eatme.jpe", as indicated in the line containing the RewriteRule. Please advise that this method will also block services such as FeedBurner from accessing your images."
Jochen Burkhard

A List Apart: Articles: Supersize that Background, Please! - 0 views

m.alistapart.com/...persize-that-background-please

ListApart web design Background flexible Size CSS

shared by Jochen Burkhard on 08 Jul 10 - Cached
  • Jochen Burkhard on 08 Jul 10
     
    With an advertising world keen to use every inch of a medium for brand or product experience, it is becoming increasingly popular to design websites with full-browser backgrounds. Using CSS, this can be achieved quite easily. Just drop a huge background image in a page with one line of code (Line wraps marked » -Ed.):
Soul Book

The 100% Easy-2-Read Standard - 0 views

informationarchitects.jp/100e2r

blog css tools webdesign typography design fonts text layout web layouts usability

shared by Soul Book on 01 Apr 10 - Cached
  • 1. Standard font size for long texts
  • 2. Active white space
  • The basic rule is: 10һ15 words per line. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.
  • ...3 more annotations...
  • 3. Reader friendly line height
  • The default HTML line height is too small. If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.
  • 4. Clear color contrast
magecompinc

Magento 2: How to Flush the Cache and Reindex from Command Line - 0 views

magecomp.com/...-and-reindex-from-command-line

magento2 flushcache magento2reindex cacheandreindex commandline flushmagentocache

shared by magecompinc on 28 Apr 21 - No Cached
  • magecompinc on 28 Apr 21
     
    Managing Cache and Reindexing help to Speed up your Magento 2 Store Performance and reduces the Customers time. In this article, we will learn How to Flush the Cache and Reindex from Command Line in Magento 2.
magecompinc

How to Install Magento 2.4 via Command Line - 0 views

magecomp.com/...l-magento-2-4-via-command-line

Magento2.4 installmagento commandline Magento2.4features MagentoBlogs

shared by magecompinc on 10 Nov 20 - No Cached
  • magecompinc on 10 Nov 20
     
    Are you all eager to check out the Magento 2.4 update? Then here are enhanced features of the latest Magento 2.4 version and the step by step guide to install Magento 2.4 via command line.
Adan Shaw

Ad Production Services Outsourced By Best Ad Production Company India - 0 views

www.realityinfo.com/outsourced_ad_production.html

outsourced production advertising outsource company

shared by Adan Shaw on 24 May 13 - No Cached
  • Spec ads / Ad creation from creative brief:
  • Production of repeat ads: Repeat Ads form about 21 to 28% of the total volume of ads that a newspaper produces. We can convert current ads for pick up and re use. Outsourcing these can improve both bottom line and turnaround time by 25 to 30%We can create classifieds, legal, large legal, display and composite ads for newspapers. We can also create all category ads for yellow page directories.
  • Adan Shaw on 24 May 13
     
    Outsource Ad creation and production to us. Create production pages from spec ads, creative briefs or repeat ads. Improve bottom line and turnaround time by 25 - 30%
Vernon Fowler

Your Body Text Is Too Small - 0 views

blog.attackthefront.io/text-is-too-small-5e02d36dc902

typography font size body text web webdesign usability readability legibility

shared by Vernon Fowler on 23 Nov 16 - No Cached
  • Some examples of sans-serif fonts that work well for large body text include Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, and Suisse Int’l.
  • Some examples of serif fonts that work well for large body text include Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, and Tisa.
  • better to optically select a font size according to near-finalized colors, or in different color scenarios
  • ...6 more annotations...
  • a better starting point would be 20px on small desktop displays and greater. We should only have to resort to 16px for body copy on very small mobile devices
  • down to the eye again to optically adjust the letter-spacing and font size together
  • the optimal line length, or number of characters per line (CPL) in typography is around 55 to 75
  • line height should also be relative to the font size as it scales up for larger displays
  • This is not about having the biggest body text, because biggest isn’t best. It’s about optimizing for the best reading experience you can possibly give your users
  • sites that have adopted bigger body text even at small desktop or laptop resolutions such as 1440 x 900. They go from 20px all the way up to 58px!
maarusatechno

Website Designing Company in Hyderabad - web design company in hyderabd - 0 views

sites.google.com/...designing-company-in-hyderabad

shared by maarusatechno on 14 Jun 16 - No Cached
  • one of the best  leading website designing company in Hyderabad.
a2zwebhelp

jQuery charts and Graphs - gvCharts with Google Chart API - 0 views

www.a2zwebhelp.com/jquery-google-gvchart

Area Chart Line Bar Column and Pie jquery graphs google api

shared by a2zwebhelp on 25 Aug 13 - No Cached
  • a2zwebhelp on 25 Aug 13
     
    Create interactive charts or graph in 3 easy steps in jQuery by using data from HTML table. gvChart is a jQuert plugin which uses Google Chart API to create interactive charts. gvChat provide options to create Area Chart, Line Chart, Bar Chart, Column Chart and Pie Chart
Aman Khani

Reseller Hosting Services for enhanced Performance Websites - 0 views

www.itinformers.com/-powerful-performance-websites

Reseller hosting India linux reseller hosting unlimited reseller hosting

shared by Aman Khani on 18 Sep 15 - No Cached
  • Aman Khani on 18 Sep 15
     
    There are types of web hosting services offered in India; individuals can select one of the best suited services according to the requirements. In this line, reseller hosting in India help you to earn lots of money through online space.
  • Aman Khani on 18 Sep 15
     
    There are types of web hosting services offered in India; individuals can select one of the best suited services according to the requirements. In this line, reseller hosting in India help you to earn lots of money through online space.
Vernon Fowler

resize - Change height of textarea based on number of lines of text in javascript - Sta... - 0 views

stackoverflow.com/...of-lines-of-text-in-javascript

javascript resize height text lines HTML forms

shared by Vernon Fowler on 03 Sep 11 - No Cached
  • Template Range on 04 Sep 11
     
    Get professional, low priced & high quality website templates from Templatesrange. http://www.templaterange.com
1 - 20 of 150 Next › Last »
Showing 20▼ items per page