はてなブックマーク

This is how I am deploying the build of my static website to staging and production domains. It requires basic use of the CLI, Git, and SSH. But once you’re set up, a single command will build and deploy. TL;DR: Push the static build to a remote, bare repository that has a detached working directory (on the same server). A post-receive hook checks out the files in the public directory. Prerequisit

By Nicolas Gallagher Multiple Borders demo for Multiple Backgrounds and Borders with CSS 2.1. You'll have to view the CSS file because Firebug won't show pseudo-elements. Fit for purpose: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, Internet Explorer 8+.

By Nicolas Gallagher Known support: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mau

Only one element to reproduce Silverback's parallax effect with more gorillas. <div id="silverback">[content]</div> Main: First in source Fluid faux columns without images. Source independent. The use of rgba background is only to show the area of each box. No problem putting links in the content. The markup for this section looks like this: <div id="faux"> <div class="main">[content]</div> <div c

A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. About semanticsSemantics is the study of the relationships between signs and symbols and what they represent. In linguistics, this is primarily the stud

A new image replacement technique was recently added to the HTML5 Boilerplate project. This post explains how it works and how it compares to alternative image replacement techniques. [15 December 2012] This technique is no longer used in HTML5 Boilerplate. It’s been replaced by another, more reliable approach. Here’s the CSS behind the recent update to the image replacement helper class in HTML5

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset. Normalize.css project siteNormalize.css source on GitHubAt the time of writing, normalize.css is used in some form by Twitter Bootstrap, HTML5 Boilerplate, GOV.UK, Rdio, CSS Tricks, and many other frameworks,

Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help. As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald. One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple b

The git-checkout command can be used to update specific files or directories in your working tree with those from another branch, without merging in the whole branch. This can be useful when working with several feature branches or using GitHub Pages to generate a static project site. The git-checkout manual page describes how the git checkout command is not just useful for switching between branc

CSS is a versatile style language that is most frequently used to control the look and formatting of an HTML document based on information in the document tree. But there are some common publishing effects – such as formatting the first line of a paragraph – that would not be possible if you were only able to style elements based on this information. Fortunately, CSS has pseudo-elements and pseudo

I (infrequently) write about software engineering and other things. We shall not cease from exploration And the end of all our exploring Will be to arrive where we started And know the place for the first time. T.S. Eliot – “Little Gidding”

Future CSS implementations should allow for some form of responsive images via CSS alone. This is an early idea for how that might be done. However, a significant drawback is that it would not prevent both “mobile optimised” and larger size images from being requested at larger screen resolutions. Note that the CSS presented here is not supported in any browsers at the time of writing. This method

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfi

Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers. Demos: Example CSS background image hacks Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentat

This is an experiment that creates social media icons using CSS and semantic HTML. It uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript. Demo: Pure CSS social media icons Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. CSS social media iconsThe image below shows you the final appearance in modern browsers.

An experiment that uses pseudo-elements to create 84 simple GUI icons using CSS and semantic HTML. Shared as an exercise in creative problem solving and working within constraints. This is not a “production ready” CSS icon set. Demo: Pure CSS GUI icons Known support: Firefox 3.5+, Safari 5+, Chrome 5+, Opera 10.6+. An exercise in constraintSeveral months ago I was experimenting with the creation o

An accessible image replacement method using pseudo-elements and generated-content. This method works with images and/or CSS off, with semi-transparent images, doesn’t hide text from screen-readers or search engines, and provides fallback for IE 6 and IE 7. Known support: Firefox 1.5+, Safari 3+, Chrome 3+, Opera 9+, IE 8+ What’s wrong with current methods?The two most widely used image replacemen

Speech bubbles are a popular effect but many tutorials rely on presentational HTML or JavaScript. This tutorial contains various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3. No images, no JavaScript and it can be applied to your existing semantic HTML. The CSS file used in the demo page is heavily commented so that you can see which lines of code are responsible for e

By Nicolas Gallagher Multiple Borders demo for Multiple Backgrounds and Borders with CSS 2.1. You'll have to view the CSS file because Firebug won't show pseudo-elements. Fit for purpose: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, Internet Explorer 8+.

Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Demo: Multiple Backgrounds with CSS 2.1Demo: Multiple Borders with CSS 2.1Support: Firefox