Learn HTML & CSS is a book about code that doesn’t read like a 1980s VCR manual…
Learn HTML & CSS is not just for programmers, it’s written and presented to make it easy for designers, bloggers, content and e-commerce managers, marketers to learn about the code used to write web pages…
Source: htmlandcssbook.com
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.
Source: getskeleton.com
Bricss: CSS hack to target Opera
Last week – while I was working on my new personal site – I had to find a way around Opera not supporting
pointer-events. After a quick round of googling, I stumbled upon a CSS hack to target Opera only. That way I was able to simply hide the overlaying generated content that was stealing…
Source: bricss
Bricss: The CSS profilers are coming!
Back in August I talked about the lack of benchmarks or performance tools for CSS. In the meantime, the fine folk we call browser makers have been working hard on new developer tools to do just that: measure CSS performance. First the Opera team showed off their upcoming style profiler, and…
Source: bricss
destroy/dstorey: HTML5 scoped attribute
The HTML5 spec adds the
scopedattribute tostyleelements. What does this do, and how can it be useful?The
scopedattribute is used to limit the scope of the CSS rules inside thestyleelement to that element’s parent and all the children of the parent. All other elements outside of…
Source: dstorey
CSS3D creates a stereoscopic 3D effect with CSS3 only. First I just created this red and cyan effect because I thought it looks cool. But then I got some 3D glasses and was shocked that it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset. The trick is to use “em“s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.
text-shadow: -0.06em 0 red, 0.06em 0 cyan;See the Demo →
Note: Actually you are not limited to text only. You can use the same technique with box-shadows. It even works when you add some of webkit’s 3D transforms like rotateY.
Update: Wow! I submitted this to Smashing Magazine’s CSS3 Design Contest and it made it on 3rd place, which makes me incredible happy. Thanks!
For comments please use twitter.
Source: simurai
PT Sans is based on Russian sans serif types of the second part of the XX century, but at the same time has a very distinctive features of modern humanistic design. The family consists of 8 styles: 4 basic styles; 2 captions styles for small sizes and 2 narrows styles for economic setting.
PT Serif is a transitional serif face with humanistic terminals designed for use together with
PT Sans and harmonized with
PT Sans on metrics, proportions, weights and design.
PT Serif consists of six styles: regular and bold weights with corresponding italics form a standard computer font family for basic text setting; two caption styles (regular and italic) are for texts of small point sizes.
Designed by Alexandra Korolkova, Olga Umpeleva and Vladimir Yefimov. Released by ParaType in 2010.
Source: paratype.com
The typeface with the working title »Edelsans« come into being with the idea to create a fashionable font which is, like Paul Renner’s Futura, really geometric. More over the typeface was planed to have only a light and a heavy weight to force an usage as display font. Orientated on Jakob Erbar’s Grotesk, the DTL Nobel and Christian Schwartz‹ Neutraface, the »Edelsans« characterize herself through less corners and more curves – obviously while having a look on the typefaces numerals.
Beside the ambition to design a geometric Grotesque, the »Edelsans« describes the attempt to generate a typeface completely digitally. Without hand-drawn sketches, the typeface is constructed by mono-lined vectors. Those were, of course, adjusted optically afterwards. Indeed the attempt to cover the vector with digital calligraphic brushes, shows how constrained a pure digital peace of work looks like.
»Edelsans« Characteristics
The proportions of the »Edelsans« are right inbetween those of the ancient Roman inscriptional capitals and modern ratio. As well the x-height, and the de– and ascender are inbetween both poles. Thus modernity and pragmatism accrues beside the typefaces luxury to be a little bit extensively.
»Edelsans« was designed as a noble geometric font for the screen, with few corners and mostly rounded glyphs. The typeface is not completely finished but is free for non-commercial use.
Source: 26plus-zeichen.de
With the release of Safari 3.1 for MacOS and Windows, Apple’s web browser now supports font embedding for websites. Now millions of web users can view websites the way they were intended to be. Safari 3.1 for Windows and Mac supports the embedding of sfnt fonts (TrueType, OpenType PS, OpenType TT) using the font-face declaration. Technically the fonts are not embedded in the website, but they are simply linked like an image file. Thus the fonts need to be stored on a public server. Since you cannot upload commercial fonts to a public webserver, you are limited to freeware fonts. fonts.info believes in the future of web fonts, so we decided to provide webdesigners with a set of high-quality web fonts supporting a wide range of character encodings.
Graublau Sans Web regular and bold were designed by Georg Seifert. Graublau Sans Web regular and bold are optimized for screen use and support a wide range of character encodings, for example ISO 8859-15 (Western), ISO 8859-2 (Central European), ISO 8859-3 (Turkish, Maltese and Esperanto), ISO 8859-4 (Baltic), ISO 8859-5 (Cyrillic), ISO 8859-7 (Greek) and ISO 8859-10 (Scandinavian).
Graublau Sans Web regular and bold may be embedded in any website free of charge. The new version now also works in Firefox 3.5 and supports ligatures and kerning.
Source: fonts.info
Bricss: Noise in CSS – fo' realz?
For some years now, addding a “noise” texture to a design seems to be all the craze, and admittedly it can spruce up an otherwise rather bland background. The web design community has been trying to come up with an easy, lightweight method of adding noise, with some degree of success.
It turned…
Source: bricss
ProtoFluid - Rapid Prototyping of Adaptive CSS and Responsive Design.
Prototype CSS on a multitude of device screen sizes, orientations and browsers.
Preview adaptive designs and target CSS3 compliant browsers using Media Queries.
Particularly suited to the early development of fluid layout based web applications.
Use all your favourite web browser development tools like Firebug.
Supports iPad for webkit, touch-based environment testing.
Source: protofluid.com
Webfonts.info is a free information resource about webfonts and @font-face embedding. All texts and code samples on this site are provided under Creative Commons License. The project is maintained by Ralf Herrmann, founder of fonts.info, but everyone is invited to contribute to this site.
Source: webfonts.info
Vogue creates a real-time link between your web browser and your file system. When you save a CSS file, used by the HTML page in your browser, Vogue will make the browser reload the stylesheet. Only the stylesheet is reloaded, not the entire page, making it work even for very dynamic/ajax pages.
Source: aboutcode.net
CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Source: csslint.net
























