Code in Full - J. Albert Bowden II

  • Archive
  • RSS

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…
View Separately

Page Sample - Learn HTML & CSS - A Book That Teaches You in a Nicer Way

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

    • #HTML and CSS Book
    • #HTML
    • #CSS
    • #reference
  • 4 months ago
  • 19
  • Permalink
  • Share
    Tweet


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.
View Separately

Skeleton's Base Grid is a Variation of 960 Grid System - Skeleton

Skeleton Employs Media Queries to Serve the Scalable Grid - Skeleton

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

    • #Skeleton
    • #toolkit
    • #CSS
    • #javascript
    • #Responsive Development
    • #mobile
    • #boilerplate
  • 4 months ago
  • 10
  • Permalink
  • Share
    Tweet
Pop-upView Separately

Source: programmerryangosling

    • #Ryan Gosling
    • #CSS
    • #HTML
    • #WebDev Humor
    • #Pickup Lines
    • #submission
  • 5 months ago > programmerryangosling
  • 32
  • Permalink
  • Share
    Tweet

Bricss: CSS hack to target Opera

bricss:

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

    • #CSS
    • #Opera
    • #Pointer Events
    • #CSS Hack
  • 5 months ago > bricss
  • 38
  • Permalink
  • Share
    Tweet

Bricss: The CSS profilers are coming!

bricss:

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

    • #css-profilers
    • #css
    • #css3
  • 5 months ago > bricss
  • 43
  • Permalink
  • Share
    Tweet

destroy/dstorey: HTML5 scoped attribute

dstorey:

The HTML5 spec adds the scoped attribute to style elements. What does this do, and how can it be useful?

The scoped attribute is used to limit the scope of the CSS rules inside the style element to that element’s parent and all the children of the parent. All other elements outside of…

Source: dstorey

    • #HTML5
    • #HTML Attrbutes
    • #CSS
    • #scoped Attribute
  • 7 months ago > dstorey
  • 13
  • Permalink
  • Share
    Tweet
simurai:

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.
View Separately

simurai:

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

    • #lab
    • #CSS3
    • #CSS
  • 9 months ago > simurai
  • 1119
  • Permalink
  • Share
    Tweet

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.
View Separately

PT Sans | Paratype

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 Font | Paratype

PT Sans  | Paratype

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.

PT Serif  | Paratype

Designed by Alexandra Korolkova, Olga Umpeleva and Vladimir Yefimov. Released by ParaType in 2010.

Source: paratype.com

    • #Typography
    • #Design
    • #Open Source
    • #CSS
    • #@font-face
    • #PT Sans
    • #PT Serif
  • 10 months ago
  • Permalink
  • Share
    Tweet

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.
View Separately

»Edelsans«

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

    • #Typography
    • #Edel Sans
    • #Design
    • #CSS
    • #@font-face
    • #Open Source
  • 10 months ago
  • 1
  • Permalink
  • Share
    Tweet

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.
View Separately

Graublau Sans Web

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.

Graublau Sans Web

Source: fonts.info

    • #Typography
    • #@font-face
    • #CSS
    • #Design
    • #Grablau Sans Fonts
    • #Open Source
  • 10 months ago
  • Permalink
  • Share
    Tweet

Bricss: Noise in CSS – fo' realz?

bricss:

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

    • #css
    • #spec
    • #design
    • #proposal
  • 10 months ago > bricss
  • 13
  • Permalink
  • Share
    Tweet

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.
View Separately

ProtoFluid, Rapid Prototyping of Adaptive CSS and Responsive Design

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.

Screenshot - ProtoFluid, Rapid Prototyping of Adaptive CSS and Responsive Design

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

    • #ProtoFluid
    • #Toolkit
    • #Responsive Development
    • #Adaptive Development
    • #CSS
    • #media queries
  • 10 months ago
  • 5
  • Permalink
  • Share
    Tweet
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.
View Separately

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.

Webfonts.info - Webfonts and @font-face Embedding Resource

Source: webfonts.info

    • #webfonts
    • #css
    • #Typography
    • #@font-face
  • 11 months ago
  • Permalink
  • Share
    Tweet
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.
You can download Vogue from GitHub here.
View Separately

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.

You can download Vogue from GitHub here.

Source: aboutcode.net

    • #Vogue.css
    • #CSS
    • #Toolkit
  • 11 months ago
  • Permalink
  • Share
    Tweet

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.
View Separately

CSS Lint Will Hurt Your Feelings (And Help You Code Better)

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

    • #CSS
    • #Toolkit
    • #CSS Lint
    • #Optimization
  • 11 months ago
  • Permalink
  • Share
    Tweet

About

http://bowdenweb.com/wp/

Twitter

loading tweets…

  • RSS
  • Random
  • Archive
  • Mobile

Effector Theme by Carlo Franco.

Powered by Tumblr