davidetarascibu + css 30
Bear CSS - Helping you build a solid stylesheet foundation based on your markup
february 2012 by davidetarascibu
Bear CSS is a handy little tool for web designers. It generates a CSS template containing all the HTML elements, classes & IDs defined in your markup.
css
html
templating
prototyping
february 2012 by davidetarascibu
Type study: Sizing the legible letter
november 2011 by davidetarascibu
Introduced in the CSS3 specification, the rem behaves much like the em: it’s a relative unit of measurement, sizing text up or down from a baseline value. But the rem is sized relative to the root of your document—in other words, the value set on the body element.
css
font
typography
sh
november 2011 by davidetarascibu
Magazine Grid
october 2011 by davidetarascibu
It's an ultramodern CSS-Framework which comes with common magazine design elements such as pagination, gutters and of course a basic grid.
css
design
framework
ipad
october 2011 by davidetarascibu
CSS3 Animator, HTML5 Animations, Create Stunning Animations with Ease | Sencha Animator | Products | Sencha
june 2011 by davidetarascibu
Sencha Animator is a desktop app to create CSS3 animations for WebKit browsers and touchscreen mobile devices. Create rich experiences for today’s most popular devices.
animation
css
css3
html5
software
june 2011 by davidetarascibu
Easy front-end framework
june 2011 by davidetarascibu
Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques.
css
html
javascript
frontend
framework
june 2011 by davidetarascibu
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development
june 2011 by davidetarascibu
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles
css
design
html
mobile
june 2011 by davidetarascibu
QuirksMode - for all your browser quirks
may 2011 by davidetarascibu
QuirksMode.org is the prime source for browser compatibility information on the Internet. It is maintained by Peter-Paul Koch, mobile platform strategist in Amsterdam, the Netherlands.
css
javascript
reference
web
may 2011 by davidetarascibu
The 1140px Grid · Fluid down to mobile
april 2011 by davidetarascibu
The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
css
grid
fluid
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
april 2011 by davidetarascibu
0to255
april 2011 by davidetarascibu
0to255 is a simple tool that helps web designers find variations of any colo
color
css
design
april 2011 by davidetarascibu
320 and up
april 2011 by davidetarascibu
‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.
css
css3
mobile
april 2011 by davidetarascibu
Implementing a Fixed Position iOS Web Application - Google Mobile Developer Products - Google Code
march 2011 by davidetarascibu
In this article, we will show you the building blocks required to incorporate fixed position into your own mobile web applications.
css
ios
iphone
javascript
mobile
march 2011 by davidetarascibu
Sticky Plugin
february 2011 by davidetarascibu
Sticky is a jQuery plugin that gives you the ability to
make any element on your page always stay visible.
css
jquery
make any element on your page always stay visible.
february 2011 by davidetarascibu
Modernizr
january 2011 by davidetarascibu
Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.
javascript
html
css
january 2011 by davidetarascibu
CSS properties that affect type rendering « The Typekit Blog
january 2011 by davidetarascibu
When it comes to type rendering on the web, there’s not much web designers can do. The way fonts appear on screen is mostly due to operating systems, browsers, typeface designs, font files, and how those font files are (or are not) augmented with instructions for the most unforgiving rendering scenarios. But in some cases, CSS properties can affect how type looks.
Note: the following screenshots reflect rendering in Safari 5 on Mac OS 10.6, unless otherwise noted.
Font size
A slight change in font-size can mean a very different looking typeface.
First of all, there’s CSS font-size. Rasterizing a typeface’s vector outlines at sizes realistic for today’s screens means that each letter is represented by only a handful of pixels. This means a slight difference in type size can result in a very different looking typeface.
Color
CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that antialiasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.
Low contrast. Hover for high contrast.
Light-on-dark text. Hover for dark-on-light.
Light-on-dark text tends to look thicker than dark-on-light (see also Shawn Blanc᾿s research on this topic), so lower contrast makes an even bigger difference in these cases. Keep in mind that too little contrast can cause problems for vision-impaired readers. Jonathan Snook’s Colour Contrast Check tool checks foreground and background color for WCAG compliance.
WebKit font-smoothing
The vendor-prefixed property -webkit-font-smoothing allows designers to specify one of three options: subpixel-antialiased (the default), antialiased, or none. Tim Van Damme has pointed out that the “antialiased” value tends to make text look thinner in Safari for Mac, and there was much rejoicing among designers who had previously used unrelated properties like text-shadow to make text look less bulky.
Other folks have questioned the use of -webkit-font-smoothing as a means of thinning text, even though it’s a prefix and not a posthack. Christoph Zillgens argues that diagonal strokes suffer when subpixel-antialaising is diabled, and Dmitry Fadeyev says small text is less sharp.
Rotation
Finally, and perhaps obviously, type rendering suffers when text is rotated. CSS3 2D transforms, as Andy Clarke recently explained in a guest post for Typekit, allow designers to rotate elements; while this may achieve the intended result graphically, non-horizontal type is a veritable rendering wilderness. Thankfully, effects like this are less apparent on high-resolution screens.
Screenshot of text rotated at 90 degrees, image rotated back to horizontal.
Screenshot of text rotated at 45 degrees, image rotated back to horizontal.
Screenshot of text rotated at 45 degrees, image rotated back to horizontal (in Mobile Safari).
So: as a web designer, font rendering is mostly out of your hands. But it’s important to remember that certain styles within your control can have an effect. When testing, keep in mind that different styles for contrast, size, color, and rotation can result in significant differences.
css
type
rendering
text
typography
Type_rendering
Note: the following screenshots reflect rendering in Safari 5 on Mac OS 10.6, unless otherwise noted.
Font size
A slight change in font-size can mean a very different looking typeface.
First of all, there’s CSS font-size. Rasterizing a typeface’s vector outlines at sizes realistic for today’s screens means that each letter is represented by only a handful of pixels. This means a slight difference in type size can result in a very different looking typeface.
Color
CSS color is another factor. Varying contrast between text color and background color can significantly change how type looks. Lower contrast means that antialiasing appears more subtle — the graded steps from foreground (type color) to background are less dramatic.
Low contrast. Hover for high contrast.
Light-on-dark text. Hover for dark-on-light.
Light-on-dark text tends to look thicker than dark-on-light (see also Shawn Blanc᾿s research on this topic), so lower contrast makes an even bigger difference in these cases. Keep in mind that too little contrast can cause problems for vision-impaired readers. Jonathan Snook’s Colour Contrast Check tool checks foreground and background color for WCAG compliance.
WebKit font-smoothing
The vendor-prefixed property -webkit-font-smoothing allows designers to specify one of three options: subpixel-antialiased (the default), antialiased, or none. Tim Van Damme has pointed out that the “antialiased” value tends to make text look thinner in Safari for Mac, and there was much rejoicing among designers who had previously used unrelated properties like text-shadow to make text look less bulky.
Other folks have questioned the use of -webkit-font-smoothing as a means of thinning text, even though it’s a prefix and not a posthack. Christoph Zillgens argues that diagonal strokes suffer when subpixel-antialaising is diabled, and Dmitry Fadeyev says small text is less sharp.
Rotation
Finally, and perhaps obviously, type rendering suffers when text is rotated. CSS3 2D transforms, as Andy Clarke recently explained in a guest post for Typekit, allow designers to rotate elements; while this may achieve the intended result graphically, non-horizontal type is a veritable rendering wilderness. Thankfully, effects like this are less apparent on high-resolution screens.
Screenshot of text rotated at 90 degrees, image rotated back to horizontal.
Screenshot of text rotated at 45 degrees, image rotated back to horizontal.
Screenshot of text rotated at 45 degrees, image rotated back to horizontal (in Mobile Safari).
So: as a web designer, font rendering is mostly out of your hands. But it’s important to remember that certain styles within your control can have an effect. When testing, keep in mind that different styles for contrast, size, color, and rotation can result in significant differences.
january 2011 by davidetarascibu
Quick Grid Overlay with CSS and JQuery
may 2010 by davidetarascibu
Griddy is a simple JQuery plugin that overlays a customizable grid over any element.
css
grid_systems
html
javascript
jquery
from google
may 2010 by davidetarascibu
related tags
3d ⊕ animation ⊕ background ⊕ bootstrap ⊕ browser ⊕ color ⊕ css ⊖ css3 ⊕ design ⊕ fluid ⊕ font ⊕ framework ⊕ frontend ⊕ grid ⊕ grid_systems ⊕ html ⊕ html5 ⊕ image ⊕ inspiration ⊕ ios ⊕ ipad ⊕ iphone ⊕ javascript ⊕ jquery ⊕ mobile ⊕ notification ⊕ parallax ⊕ prototyping ⊕ reference ⊕ rendering ⊕ resource ⊕ sh ⊕ shadow ⊕ software ⊕ templating ⊕ text ⊕ tool ⊕ tutorial ⊕ twitter ⊕ type ⊕ Type_rendering ⊕ typography ⊕ ui ⊕ via:popular ⊕ web ⊕ wordpress ⊕Copy this bookmark: