CSS文字装飾のバリエーション(12パターン) - jsdo.it - Share JavaScript, HTML5 and CSS
<p>Normal</p> <p class="dropShadow">Drop Shadow</p> <p class="stroke">Stroke</p> <p class="outset">Outset</p> <p class="inset">Inset</p> <p class="block">Block</p> <p class="glow">Glow</p> <p class="blur">Blur</p> <p class="doubleStroke">Double Stroke</p> <p class="reflect">Reflect</p> <p class="deepInset">Deep Inset</p> <p class="gradient">Gradient</p> <p class="blind">Blind</p> body { background
HTML5&CSS3入門 with HTML5 パック 第5回 text-shadowによるテキストの装飾 | デベロッパーセンター
本連載では、Webデザイナーに向けて、HTML5／CSS3でWebデザインや制作手法はどう変わるのかを解説していきます。主なHTML5／CSS3の役割や機能を学んでいただくとともに、サンプル作成を通してコーディング手法を習得していただくことを目的としています。なお、サンプル作成のツールとして「HTML5 パック for Dreamweaver CS5」を使用します（詳しくは、「HTML5 Pack for Dreamweaver CS5 の使い方」をご覧ください）。HTML5 パックをインストールするには、Dreamweaver CS5のアップデータ11.0.3を適用する必要があります。 ※HTML5とCSS3は現在策定中の草案です。本連載は執筆時点の草案の内容にもとづいており、正式に勧告されるまでに変更されることもあり得ます。 前回では、「@font-face規則（ウェブフォント）」と
39 Box Shadows
39 Box Shadows, No Good Reason Confused? Read the Post » « Previous 10 Next 10 » The Light Source The Stadium The Lil‘ Guy The Soft Focus The Slip The Glow The Fog The My First Photoshop The Late Night The Doing It Wrong The Good Girl The Color Theorist The Dialer The In Deep The Cheshire The Dazzler The Batman The Googly Eyes The It’s So Cloud The Hypnotist The Bouncer The Pulse The Orbiter The R
Powerful New CSS Techniques And Tools — Smashing Magazine
A carefully selected list of useful (and powerful!) CSS techniques and tools. Collected, analyzed and curated resources for you to use them right away or save them for future reference! The hard work of front-end designers never ceases to amaze us. Over the last months, we’ve seen Web designers creating and presenting a plethora of truly remarkable CSS techniques and tools. We have collected, anal
画像を使わずCSS3だけで作ったあのロゴやあのキャラクター
画像を使わずCSS3だけで作ったchrome、Operaなどのロゴや、ドラえもん、アンパンマンなどのキャラクターなどを紹介します。 Google Chrome 若干リニューアルした新しい方のchromeのロゴです。以前のロゴよりこちらの方が再現しやすそうですね。 Opera 形自体は簡単ですが、陰のつけ方などかなりクオリティは高いです。IEだとただの四角になってしまう。。 Internet Explorer IEのロゴですが、IEはCSS3に対応しきれていないのでちゃんと表示されません。皮肉なロゴですね。 HTML5 ぼちぼち見かけるようになってきたHTML5のロゴです。「HTML」と「5」は文字を使っています。 twitter twitterのロゴです。曲線がきれいに表現されています。 Social media frickrやgoogleのロゴがあります。比較的シンプルです。 iPhon
Beginner's Guide to CSS3 (Updated)
20 Basic CSS Tips for Designers Boost your web designs with our guide to 20 must-know CSS tips and tricks. Read more Getting Started with CSS3 Take Your Design To The Next Level With CSS3 Advantages of CSS3, with explanations and examples of CSS3 properties and selectors. CSS3: Progressive Enhancement How you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in
Creating a modern modal with CSS
Using CSS3 techniques a modal box can be created without JavaScript or images. With a bit of animation, transition and transform, it can be made that little bit more special. CSS Modal Experiment 12 Feb 2012: Modal experiment updated for Firefox 10 which has better transform, transition and animation performance. Also supports 3D transforms. In this experiment, clicking an ‘open’ link pops up a di
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
CSS3 グラデーション WebkitとFirefoxが同じに！
2011年1月14日の Webkit.org の Surfin Safari にて CSS3 のグラデーションの記述が変更になったことが紹介されました。CSS3 グラデーション は、Webkit が2008年に最初に紹介した CSSのプロパティです。今回、この記述方法に変更がありました。 現在は、Safari4+、Chrome、Firefox3.6+ でサポートされています。 今まではWebkit系の Safari4とChromeの CSS3 グラデーションの記述方法と、Firefoxのそれでは大幅に違いました。 いままでの記述方法 Safariとchromeの場合 background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.39, rgb(108,218,3)), color-stop(0
Getting Started - Google Font API - Google Code
Getting Started This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style. Contents A quick example Here's an example. Copy and paste the following HTML into a file: <html> <head> <link rel="stylesheet" type="text/css" href=
HTML5 & CSS3 Resources for Designers
Updated: 2011-08-30 (new items highlighted below) CSS3 Examples (including Media Queries) http://www.html5rocks.com/tutorials/flexbox/quick/ https://github.com/doctyper/flexie http://thebox.maxvoltar.com/ http://hardboiledwebdesign.com http://lostworldsfairs.com http://www.informationarchitects.jp/ http://colly.com http://hicksdesign.co.uk http://jordandobson.com/better_rounded_border_demo/ http:/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ
IDEA * IDEA
Leaverou | Latest Social Media Marketing Trends
Ceaser - CSS Easing Animation Tool - Matthew Lein
NameBright - Coming Soon
Untitled Document
Android Bazaar and Conference 2011 Winter
Adobe Fonts
