background preloader

CSS Font-Size: em vs. px vs. pt vs. percent / Kyle Schaeffer

CSS Font-Size: em vs. px vs. pt vs. percent / Kyle Schaeffer
One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? Meet the Units “Ems” (em): The “em” is a scalable unit that is used in web document media. So, What’s the Difference? It’s easy to understand the difference between font-size units when you see them in action. As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. Em vs. We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. When the client’s browser text size is set to “medium,” there is no difference between ems and percent. The Verdict The winner: percent (%). Addendum (January 2011) Related:  Site BulidingCSS

10 jQuery Horizonal Scroll Demos & Plugins In today’s post we bring to you 10 jQuery Horizonal Scroll Demos & Plugins useful for those who see things horizontally. I guess we have to accept some people scroll both ways! :) 1. In this tutorial we will create a simple smooth scrolling effect with jQuery. SourceDemo 2. To get horizontal scrolling the Mouse Wheel Plugin by Brandon Aaron (GitHub, Download) will be used to detect mouse wheel movements like a keypress and of course, jQuery itself will be used. SourceDemo 3. Supporting the mouse wheel can add further interactivity to your HTML5 web pages. SourceDemo 4. In this tutorial we will create a simple smooth horizontal content scrolling effect with just a few lines of jQuery without using any plugin. SourceDemo 5. jQuery Horizontal automatic Scrollbars with mouse We all know that horizontal scrollbars are hideous. SourceDemo 6. jQuery mousewheel easing horizontal scrolling Learn how to create jQuery mousewheel easing horizontal scrolling in this tutorial. SourceDemo 7. simplyScroll v2 8.

Tables 17.1 Introduction to tables This chapter defines the processing model for tables in CSS. Part of this processing model is the layout. For the automatic table layout algorithm, some widely deployed implementations have achieved relatively close interoperability. Table layout can be used to represent tabular relationships between data. In a visual medium, CSS tables can also be used to achieve specific layouts. Authors may specify the visual formatting of a table as a rectangular grid of cells. Example(s): Here is a simple three-row, three-column table described in HTML 4: <TABLE><CAPTION>This is a simple 3x3 table</CAPTION><TR id="row1"><TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"><TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"><TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE> This code creates one table (the TABLE element), three rows (the TR elements), three header cells (the TH elements), and six data cells (the TD elements). The following rule puts the table caption above the table: top

Enclosing Float Elements | Floats | HTML & CSS Workshop | Gary Turner web development Developers who are new to css, or those who work primarily in IE, run into a vicious “bug” in Firefox and other modern browsers. Their backgrounds disappear, or their borders do—but everything's fine in IE. The gnashing of teeth is heard throughout the land. The truth is, there's a reason for the behavior, and IE has screwed up again. In this demo, there are two ways to see what's going on, IE's way, and the right way. IE7 has internalized many of the IE6 bug work-arounds. Basic Non-Enclosed Float Notice that in the first box, the float element extends beyond the parent div. On a side note, IE does not properly handle collapsed margins when an element has layout. Now is the time for all good men to come to the aid of their country. This is non-float content. Using The Overflow Property If the parent element has an overflow: value other than the default “visible”, the height of the element will be sufficient to contain child floats. Using The Display Property And so is this.

Smooth Vertical or Horizontal Page Scrolling with jQuery In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! The Markup The markup for our example […] View demoDownload source In this tutorial we will create a simple smooth scrolling effect with jQuery. So, let’s start! The Markup The markup for our example page is going to be very plain. The HTML is going to be the same for both examples. The CSS Since we have two examples, we will start with the horizontal page style. The main idea is to make the sections very wide and 100% in height. We need to give the body a valid height, because we want to be able to define the height 100% to the section. The style for the vertical page layout is going to look as follows: Nothing special here, just that we give a big height to the sections. Let’s add the JavaScript The JavaScript

Top 10 Things to Know about TypeScript Introduction TypeScript is a superset of JavaScript that provides typed nature to your code. TypeScript can be used for cross-browser development and is an open source project. This article is intended to give you a quick overview of the top 10 features of this new scripting language. You can download TypeScript here. 1. TypeScript code consists of plain JavaScript code as well as certain keywords and constructs specific to TypeScript. The above code uses TypeScript specific keywords such as class and data types such as number and string. var Customer = (function () { function Customer() { } Customer.prototype.addCustomer = function () { return 0; }; return Customer; })(); As you can see this is just the plain JavaScript and can be used in any browser that understands JavaScript. 2. When you declare any variable in JavaScript you typically do so using var keyword without specifying any particular data type for the variable. Declare variables 3. 4. Two public and one private variable 5. 6.

Differences Between CSS2.1 and CSS3+ Most of us know that with the introduction of what we customarily call “CSS3″1, there have been changes and additions to CSS, compared to what we had in CSS2.1. Putting all cross-browser issues aside, I thought it would be nice to be able to document all these changes into a single post and keep it up to date. So if you want a list of everything that’s been introduced into the CSS spec since CSS2.1, here it is. New Properties Following is a list of CSS properties that were not defined in the CSS2.1 specification. New Values Properties from CSS2.1 have new values added to them in CSS3. New Selectors Following is a list of selectors introduced in CSS3. Other Miscallaneous New Features Other new features not part of CSS2.1 include: @font-faceMedia QueriesKeyframe animations using @keyframesConditional styles using @supportsNamespacing using @namespaceRegionsFilters Features Still in Flux The lists above aren't exhaustive. Summary Notes 1.

|| Generador de texto simulado | Lorem ipsum para diseñadores de páginas web || Emoji cheat sheet for Campfire and GitHub Free CSS responsive layouts Here are a range of CSS responsive HTML and CSS layouts – including one, two and three column layouts. All layouts are ready to use – as is – with folders, dummy AppleTouch icon, dummy favicon and CSS files in place. All layouts are FREE to use as needed and can be downloaded directly from Github. Simple responsive layouts One-column fixed-width responsive layout View layout Download from Github One-column full-width responsive layout View layout Download from Github Two-column full width responsive layout View layout Download from Github Three-column full-width responsive layout View layout Download from Github Bootstrap responsive layouts Bootstrap kickoff template View layout Download from Github Bootstrap kickoff template with image logo View layout Download from Github Bootstrap kickoff template with responsive type View layout Download from Github Bootstrap blog post template with right sidebar View layout Download from Github

Sponsor Flip Wall With jQuery & CSS Martin Angelov Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design. We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. Step 1 – XHTML Most of the markup is generated by PHP for each of the sponsors after looping the main $sponsor array. demo.php <div title="Click to flip" class="sponsor"><div class="sponsorFlip"><img alt="More about google" src="img/sponsors/google.png"></div><div class="sponsorData"><div class="sponsorDescription"> The company that redefined web search. The outermost .sponsor div contains two additional div elements. Maybe more interesting is the sponsorData div. Sponsor Flip Wall Step 2 – CSS Step 3 – PHP

jQuery untitled Disclaimer: "PMI®", "PMBOK®", "PMP®", "PMI-RMP®", "CAPM®" and "PMI-ACP®" are registered marks of the Project Management Institute, Inc. The Swirl logoTM is a trade mark of AXELOS Limited. ITIL® is a registered trade mark of AXELOS Limited. PRINCE2® is a Registered Trade Mark of AXELOS Limited. Certified ScrumMaster® (CSM) and Certified Scrum Trainer® (CST) are registered trade marks of SCRUM ALLIANCE® The APMG-International Finance for Non-Financial Managers and Swirl Device logo is a trade mark of The APM Group Limited. The Open Group®, TOGAF® are trademarks of The Open Group IIBA®, the IIBA® logo, BABOK® and Business Analysis Body of Knowledge® are registered trademarks owned by International Institute of Business Analysis. CBAP® is a registered certification mark owned by International Institute of Business Analysis. COBIT® is a trademark of ISACA® registered in the United States and other countries. SAP® is the trademark or registered trademark of SAP AG.

How to Create a Background Image that Scales with the Browser Window One of the first things you will discover when you start working with responsive designs and flexible-width layouts is that you need images that can adjust to the screen size as well. A while ago, I showed you how to use the CSS3 property background-size to stretch images to fit in a window, but there is an even better use for this property: background-size: cover; The cover keyword tells the browser to scale the image to fit the window. The image is scaled to cover the entire screen, but the original proportions and aspect ratio are kept. The image is placed in the window as large as possible so that the entire window surface is covered. As you can see in this series of images, this results in a page that looks a lot better even if the screen is very small or very large. How to Use background-size: cover; Create your background image. Upload your image to your web host and add it to your CSS as a background image: Add the browser prefixed CSS first: Then add the CSS property: