TopCoat An Open Source UI Library for creating beautiful and responsive applications using web standards coming to github Spring 2013 続きを読む
CSSDB is a curated collection of great CSS, Sass, LESS and Stylus librarieszurb/foundation The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites and apps that work on any kind o... 続きを読む
October 21-23, 2013 The Stanley Hotel in the Rocky Mountains · Colorado, U.S. Featured Speakers Zoe Gillenwater Eric Meyer Nicole Sullivan Jonathan Snoook Estelle Weyl Tab Atkins Workshops SMACSS Workshop Jonathan Snook brings his SMACSS Work... 続きを読む
May 28th, 2013 Amelia Island, FL More info coming soon Follow @CSSConf for updates Interested in presenting at CSSConf 2013? Submit your proposal by February 18 Sponsorship Opportunities Made with love by @stubbornella and @bretts 続きを読む
The most advanced responsive front-end framework in the world. Foundation 3 is built with Sass, a powerful CSS preprocessor, which allows us to much more quickly develop Foundation itself and gives you new tools to quickly customize and build... 続きを読む
About Clay is a CSS preprocessor like LESS and Sass, but implemented as an embedded domain specific language (EDSL) in Haskell. This means that all CSS selectors and style rules are first class Haskell functions, which makes reuse and composa... 続きを読む
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j k l m n o p q r s t u v w x y What is Stately? Stately is a symbol f... 続きを読む
Introduction Roole is a language that compiles to CSS. It drew many inspirations from other CSS preprocessing languages like Sass, LESS and Stylus. The most unique feature of Roole is that it has vendor prefixing built-in, so the language sta... 続きを読む
#css.day { date: "14th of June"; place: Amsterdam; } #css.day::during { content: "Eight world-class speakers\ discuss CSS modules"; } #css.day > .speakers { display: none; reveal: "12th of February"; } #css.day .keep-me-posted { email: ; twit... 続きを読む
This site teaches the CSS fundamentals that are used in any CSS layout. I assume you already know how to make things colorful. You know what selectors, properties, and values are. And you probably know a thing or two about layout, though it m... 続きを読む
CSS is funny! 続きを読む
Workless - A classy HTML5, CSS3 frameworkScaffold Forms Tables Buttons Typography Helpers Plugins A clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks.... 続きを読む
Native CSS feature detection via the @supports rule - Dev.OperaとOpera Developer News - Why use @supports instead of Modernizr?とFeature queries: the '@supports' ruleについての話。 @supports (display:flex) { section { display: flex } ... } @s... 続きを読む
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84... 続きを読む
画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを... 続きを読む
これは CSS Programming Advent Calendar 2012 の 14 日目の記事です。 Sticky Positioning 8 月の末に、WebKit に position: sticky というプロパティが追加されました。 position: sticky が指定された要素は、親要素との位置関係によって、position: fixed ... 続きを読む
Sprite sheet animation with steps(). If you don’t wanna use gifs on your site and rather PNGs for better colors, but still be able to animate them, here an option: CSS keyframe animations have a property called animation-timing-function and ... 続きを読む
Scalable and Modular Architecture for CSS Online Workshop By the end of this year, the SMACSS Workshop will have been to 8 cities in 4 countries on 2 continents. Since I can’t be in every city, I’m bringing the workshop straight to you — o... 続きを読む
UPDATE: We wrote a follow-up to this article titled Taking Sass to the Next Level with SMURF and @extend which you might also be interested in reading. I just had the the pleasure of attending the SMACSS workshop in Essen by Jonathan Snook (@... 続きを読む
Hot Tip: You can press the alt/option key when your cursor is over a HEX color to get a color picker. 続きを読む
UI設計におけるスマートフォン対応のまとめ — Presentation Transcript UI 設計におけるスマートフォン対応のまとめ【KLab× ミクシィ・リクルートメント】 ∼ HTML5 によるソーシャルゲームの新世界@福岡∼ スマートフォンにおけるバグおよび問題まとめ・共... 続きを読む
Ratchet: Prototype iPhone apps with simple HTML, CSS and JS components.Getting started Once you've downloaded Ratchet, here's what to do next. 1. Create your pages Use these docs as a reference for all the available components and piece toget... 続きを読む
Ensuring that your site works great on Windows Phone 8 is easier than ever, thanks to extensive HTML5 support in Internet Explorer 10. You might currently use WebKit on a site specifically optimized to support iOS or Android. Now, it’s very ... 続きを読む
Simple HTML & SCSS rapid prototyping toolkit for responsive web design.Proto is a simple HTML & SCSS rapid prototyping toolkit for responsive web design. Proto helps you knock up quick responsive layout concepts by providing a set of predefin... 続きを読む
Save the date on your calendar and follow us on Twitter. We will be posting about early bird tickets, hotel and venue information later on in the year. We're looking forward to discussing the latest in the intersection of CSS and Preprocessor... 続きを読む
コメンターとは コメンターは、クリエイターの気になるサイトやページをシェアして、匿名ならではの自由なコメントをみんなで楽しむコミュニティです。 このページをシェア 上記リンクをブックマークツールバーに登録することで、閲覧中のサイトをその場でシェ... 続きを読む
Ruby On Tails Designer, developer, co-founder of TheCodePlayer. You can follow me on twitter at https://twitter.com/#!/ruby... 続きを読む
MetroUI-Web : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface.Metro style web framework Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 MetroUI" style, wi... 続きを読む
はじめまして。こんにちは。 スマートフォン版Amebaプラットフォームでフロントエンドの開発を担当している遠藤と申します。 今回は、新しくなったAmebaのCSSに関するお話を簡単にさせていただこうと思います。 Stylus最近多く聞くようになったCSSメタ言語は、S... 続きを読む
CSS transforms are not supported in your browser CSS transitions are not supported in your browser Sorry, only modern browsers. 続きを読む
Pixate allows you to create beautiful native mobile apps with CSS. Launched: Jul. 20, 2012 Funding ends: Aug. 20, 2012 Don't want to forget? We'll remind you by email 48 hours before funding ends. As mobile apps become more sophisticated, one... 続きを読む
CSSPop is a CSS submission gallery where you can find, share and vote on CSS snippets.Submission Submitted: Jun 09, 2012 Type: <div> 27 upvotes Description: "Pure CSS 3D feature label, should be pretty compatible. Inspired by http://www.csspo... 続きを読む
Readymag is an interactive publishing platform which allows you to create, publish and discover truly amazing webzinesWe’re currently getting warm to our beta release, so you can leave your email and we’ll put you on our invite list: 続きを読む
One of the frustrations of OOCSS concepts is the amount of presentational classes that need to be created and the method of applying them to the DOM. Sass has looked to address this issue first with Mixins, then Extends, each with their own i... 続きを読む
In case you got issues when installing a plugin in Mac OS Lion, first install this patch from Adobe Download for CS5, CS6 Download for CS3, CS4 続きを読む
June 2012 (10) May 2012 (3) April 2012 (4) March 2012 (9) February 2012 (9) January 2012 (10) December 2011 (7) November 2011 (4) October 2011 (9) September 2011 (8) August 2011 (3) July 2011 (7) June 2011 (11) May 2011 (9) April 2011 (15) Ma... 続きを読む
Copyright © 2012 GitHub Inc. All slide content and descriptions are owned by their creators. F.A.Q. Terms of Service Privacy Policy 続きを読む
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery. View demo Download source Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the ... 続きを読む
translations/ja-JP/README.md 一貫性のあるCSSらしいCSSを書くための原則 以下の文書はCSS開発のための合理的なスタイルガイドの骨子です。 規範になるべきものではないし、私自身のスタイルの好みを他者のコードに押し付けるつもりは一切ありません。しかし、... 続きを読む
Using CSS3 to create Google-style UI elementsCSS3 Google Buttons CSS3 Google Buttons helps you easily create Google-style buttons. Buttons The "buttons" can be created by adding class="g-button" to any appropriate <a>, <button>, or <input> el... 続きを読む
Create rapid and logical page layout and app prototypes with Gumby, a responsive CSS framework based on the 960 grid you already know.Customization Download ❤ Love the Gumby Character? So do we! Like him on facebook, here. FLEXIBLE. FUN. FAM... 続きを読む
CSS Styleguide Welcome to the GitHub CSS Styleguide. It's pretty rad. Before reading this, you should have a general understanding for specificity, the SCSS syntax, and KSS documentation.. While we port our styles over to SCSS with KSS docume... 続きを読む
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 Entries c... 続きを読む
Having just spoken at the Front-Trends conference in Warsaw, I’ve decided to expand on something which my talk mentioned a lot: classes. My talk covered how to build big, scalable front-ends and one of the key factors involved in doing so is... 続きを読む
A 1140px wide, 12 column grid. Fluid all the way down to a mobile version.A 1140px wide, 12 column grid. Fluid all the way down to a mobile version. The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and ad... 続きを読む
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン(RWD)で制作したウェブサイトを運営してみて思ったことをまとめてみまし... 続きを読む
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can... 続きを読む
There is also an accent class. If you're compiling from Less, open up variables.less and change @accent to your desired accent colour - this will save a whole lot of search/replace! Controls Reusable components are built to provide the comple... 続きを読む
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles th... 続きを読む
A set of list scroll effects applied via CSS.Silly list scroll effects. Tested in WebKit/FF Nightly. In the mood for more CSS? Here you go. 続きを読む
I just had the the pleasure of attending the SMACSS workshop in Essen by Jonathan Snook (@snookca) and wanted to share my impression of the “SMACSS approach” to CSS and some considerations on using it together with SASS. Overview: The philo... 続きを読む
Revisions 5db93e scottke... March 25, 2012 6715c4 scottke... March 25, 2012 593654 scottke... March 24, 2012 deaded scottke... March 24, 2012 c43b5e scottke... March 24, 2012 db91ec scottke... March 24, 2012 a13832 scottke... March 24, 2012 9... 続きを読む
An experiment on creating volumetric clouds with CSS3 3D Transforms and a bit of Javascript. Works on Firefox and Chrome. Move the mouse to rotate around the clouds and mouse wheel to zoom in and out. 続きを読む
セイカファッションコレクション - 京都精華大学の学生のこだわりファッションスナップコンテンツ。 続きを読む
Flash of Unstyled Textの頭文字をとってFOUTと呼ばれる現象がある。FirefoxでWebフォントの読み込みが完了するまで別のフォントが使われる現象のことで、後にSafariやChrome、Internet Explorerで起こるようになった読み込みの完了まで空白になる現象のことも... 続きを読む
A Simple Device Diagram for Responsive Design Planning by Adam Edgerton, Project Manager At Metal Toad we're big fans of responsive design, but a common snag in the responsive planning process comes when choosing what device widths to design ... 続きを読む
SpritePad is your free and easy-to-use web app for creating CSS spritemaps. It only needs seconds: Drag & drop your images onto the grid and have it immediately available as one PNG + CSS code. No fiddling in Photoshop, no manual assignment o... 続きを読む
Wielding the true power of a CSS preprocessor is an adventure. There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different... 続きを読む
イーブックデザイナーの仕事/HTML5ブックデザインの可能性 — Presentation Transcript イーブックデザイナーの仕事HTML5 ブックデザインの可能性 WCAN 2012 Spring 2012年3月10日(土) 名古屋国際会議場 会議室 141+142 境祐司 Youji Sakai profile YOUJI SAKA... 続きを読む
Bourbon – Sass Mixin Library View on Github The purpose of Bourbon Sass Mixins is to provide a comprehensive library of sass mixins that are designed to be as vanilla as possible, meaning they should not deter from the original CSS syntax. T... 続きを読む
Fireworksの拡張機能である「Fireworks CSS3 Mobile Pack」が、Adobe Labsにて公開されています。この拡張機能を使えば、Web標準に沿ったWeb/モバイル/タブレット向けデザインの制作をより効率的に行うことができます。Fireworks CSS3 Mobile Packをインスト... 続きを読む
Geckoから-moz-border-radiusと-moz-box-shadowのエイリアスが削除された。 早ければFirefox 13でこれらが無視されることになる。 Drop support for -moz-box-shadow and -moz-border-radius-* now that we've supported the unprefixed versions since Firefox... 続きを読む
Statistics Favorites 2 Downloads 0 Comments 0 Embed Views 0 Views on SlideShare 77 Total Views 77 Twitter bootstrap入門 — Presentation Transcript Twitter Bootstrap Toshiaki Maki (@making)12 2 23 • Toshiaki Maki(@making) • http://blog.ik.am... 続きを読む
Back to the source. TASS does not supply any complex syntaxes or functions, so this is just little better CSS. TASS is like SCSS in SASS and can be used with only browsers like LESS because written in JavaScript. Check it out! <link rel="styl... 続きを読む
Visit our store!Packed with Ui tools, design resources and other cool Ui goodies. 続きを読む
HTML KickStart is a ultra–lean set of HTML5, CSS, and jQuery (javascript) files, layouts, and elements designed to give you a headstart and save you a lot of hours on your next web project.What is HTML KickStart? HTML KickStart is an ultra–... 続きを読む
Translation of: Learn You a Flexbox for Great Good! | The Haystack. written by Stephen Hay Flexboxについて知っていますか?多分、名前は聞いたことがあるでしょう。もしかしたらチュートリアルくらいは読んだことがあるかもしれません。既に試していたり... 続きを読む
04/01/2012 · Penarth, Wales · Proximity is one of the most ruthlessly subconscious of Design tools. Closeness relates, and every expanse of negative space severs. The deliberate and exact manipulation of space is a mark of superior Design (es... 続きを読む
normalize.cssをルールごとに分離させて、必要なルールだけをSassのpartialとして@importできるようにしたnormalize.scssを作った。各ルールには特に手を入れず、normalize.cssのセクションごとにディレクトリを切って整理しただけ。それぞれのpartialは特にSas... 続きを読む
変数 ( Variables ) // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } LESS The Dynamic Stylesheet language http://lesscss.org/ さらなる詳細は公式サイ... 続きを読む
About A Collection of Pure CSS Creations! Let's form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new featur... 続きを読む
Scout is a cross-platform app that delivers the power of Sass and Compass to the hands of web designers. Scout helps make your CSS workflow a snap by delivering more control, optimization, and organization. No developer required. Download Sco... 続きを読む
Everything here is rendered with CSS: no images, no canvas, no data URIs and no extra markup. The piCSSelz (see what I did there) are drawn with CSS gradients sized precisely to pixel boundaries. There are certainly more practical uses for th... 続きを読む
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による n... 続きを読む
2011年12月1日から25日まで、毎日違う人がLessかSassについてブログ記事を書く企画です。 参加表明した順番が日付(12月◯日)となります。 http://lesscss.org/ http://sass-lang.com/ 続きを読む
この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照し... 続きを読む
Hover Style #1 A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. Read More Hover Style #1 A wonderful serenity has taken possession of my entire soul, like thes... 続きを読む
Speed up CSS prototyping* This is a simple trick to overlay a grid or a mock-up over a page you're styling. It will also allow you to edit content directly in the browser to see how your layout behaves depending on various lines of text. Thes... 続きを読む
An explanation of the CSS animation on Apple's iPhone 4S webpage The "phone stage" (blue-bordered box) contains all 6 "slides" of the animation sequence and has a transition css property with a duration and timing function (a cubic bezier cur... 続きを読む
An experiment with CSS3 border-radius, transforms & animations. Animation properties currently only work on -webkit browsers (Chrome or Safari). Sun Mercury Venus Earth & Moon Mars Asteroids & Meteorids Jupiter Saturn & Ring Uranus Neptune Pl... 続きを読む
ユーザーを取り巻く環境の変化から制作ノウハウまでデバイス視点で多角的に調査・分析・研究を行うIMJグループの研究機関です。 続きを読む
Hmm... looks like you're using a browser that doesn't support CSS animations. You should go get one in order to use this cool stuff. animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for ... 続きを読む
突然のジョブズ氏逝去のニュースに驚きました。 windowsからmacに移って一年に満たないにわかマカーですが、ご冥福をお祈りいたします。 ネイバージャパンでマークアップを担当している富田です。 さて、今回はサイトの高速化について、とくに、MEひとりでも実... 続きを読む
30 September 2011 Editors: Vincent Hardy, Adobe Systems, vincent_hardy@yahoo.com Dean Jackson, Apple Inc., dino@apple.com Erik Dahlström, Opera Software ASA, ed@opera.com Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liab... 続きを読む
2011年9月29日、CSS3セレクタ仕様の勧告と同時に、Selectors Level 4のFPWDが公開されました。CSS4では誰もが考えた「親セレクタ」をはじめ、より高機能なセレクタが提案されています。このノートでは、CSS4セレクタ仕様で新しく追加された機能について紹介しま... 続きを読む
Web Designers' Browser Support Checklist, Web Designers' Browser Support ChecklistSkip to Main Content (access key: s) Skip to Primary Navigation (access key: n) Skip to Secondary Navigation (access key: b) View Accessibility Statement (acces... 続きを読む
Prefix your CSS3 code. Instantly! Convert your CSS3 syntax to the prefixed versionsCSS3 Supported Properties Full support Partial support No support animation background-clip background-origin background-size border-radius box-shadow gradient... 続きを読む
Google Chrome で text-shadow したフォントの表示がおかしくなることがあったのでちょっと調べてみました。 Arial やメイリオといったアンチエイリアスのかかったフォントが汚くなったり、ビットマップフォントにアンチエイリアスがかかってしまう現象です。 ... 続きを読む
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが... 続きを読む
Issues There is only one issue I can think of, specifically when starting off non-underlined; accessibility. Colour blind users may not necessarily be able to distinguish a link based on colour alone. Try and use a decent contrasting colour t... 続きを読む
Spinning spiraling cube using CSS3 3D animation and 3D transforms. Note: Hover the black box or cube to pause the animation. Please view in Safari, iPhone or iPad. If the animation freezes while viewing in wide-screen and at the same time hov... 続きを読む
fontwarp CSS text to path generator WarpInfomade by eleqtriq You need an HTML5 browser with activated Javascript, dude! © 2011 Dirk WeberContact Imprint 続きを読む
ウェブサイトのナビゲーションでよくある、アクティブ、つまりユーザーが閲覧中のページに対応する項目にマークを付ける場合、画像ファイルでやることが多い。最近はCSSグラデーションを使ってアクティブな時にへこませたような効果を与えたりすることもあるが... 続きを読む
CSS2.1で定義された疑似要素、:before,:after。 しかし以外に使い方を知らないって人が多いはず。 clearfixとかで色々お世話になっているはずのbefore,afterの使い方を改めてまとめて行ければと思います。 before,afterの生成される場所 selecter:before,select... 続きを読む
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文... 続きを読む
3D Text Use multiple text-shadows to create 3D text on any HTML element. No extra HTML, no extra headaches, just awesomesauce. Works in the latest builds of Safari, Chrome, and Firefox. h1 { text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0... 続きを読む