[B! CSS] hurikakeのブックマーク

CSS Paint API | Blog | Chrome for Developers

New possibilities in Chrome 65 CSS Paint API (also known as “CSS Custom Paint” or “Houdini’s paint worklet”) is enabled by default starting in Chrome 65. What is it? What can you do with it? And how does it work? Well, read on, will ya’… CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usua

hurikake 2018/01/22

CSS
chrome

リンク

WEB制作のIE対策いろいろチートシートやHTML5/CSS3対応方法など | DECONCEPTER

かわいいあいつIEとの付き合い Internet Explorer 通称 IEはかわいいやつである。私の心を掴んで離さない。IEについて言及すれば火が燃え上がる、存在が燃えている最強の火種だ。なぜこんなにIEはかわいいのか。テーブルタグでウェブサイトをレイアウトする時代からCSSでレイアウトする時代へ移行する際はIE5/IE5.5/IE6/Mac IE5.2でどうしたら同じレイアウトを実現できるかを苦悩させてくれた強敵（とも）だった。昨今のHTML5バンザイWEB制作においては、最新機能を使ってWEBサイトを作る上でIEの表示や機能をどうするかという話題が常にモチキリだ。そんな我々の心を離さないIEの対策をする上で一つ一つ表示を確認しながら作っていたら日がくれて定年を迎えてしまう。IE定年を迎えないためにある程度どういう対応が必要かよくまとまっているサイトを見ていこうと思う。チート

hurikake 2012/11/08

リンク

SEO検索エンジン最適化チュートリアル

オンページSEOとは、ウェブサイトの内部をユーザーと検索エンジンに最適化する施策です。ユーザーと検索エンジンの両方に対してわかりやすい構造を提供することのほか、ユーザーの検索意図を的確に満たすコンテンツを作成し管理するコンテンツSEOと、技術的な側面を最適化しサイトを検索エンジンに正しく理解・取得させるテクニカルSEOが含まれます。

hurikake 2012/07/23

リンク

[CSS]画像にちょっと素敵なエフェクトを与えるスタイルシートのまとめ

デモページ [ad#ad-2] HTML img要素とメッセージのp要素をdiv要素に内包します。 <div class="polaroid"> <p>Sarah, Dec '02</p> <img src="http://lorempixum.com/200/200/people/1" /> </div> デモで使用しているメッセージの手描き風のフォントは「Kaushan」です。フォントを利用する場合はhead内に下記を記述します。 <link href='http://fonts.google apis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'> CSS ポラロイド風のスタイルを適用するために、3つのセレクタを使用します。 .polaroid { position: relative; width: 2

hurikake 2012/04/02

CSS
HTML

リンク

見るだけでもワクワクする、CSS3とjQueryのかっこいい7つのエフェクト

ページを開いた瞬間、ユーザーの目を引きつけるようなCSS3とjQueryを使ったタイポグラフィのかっこいいエフェクトを紹介します。 Typography Effects with CSS3 and jQuery [ad#ad-2] かっこいい7つのデモ実装のポイントかっこいい7つのデモデモは7つあり、どれもトキメクようなかっこいいエフェクトです。デモを楽しむには、Chrome, Safari, Firefoxでご覧ください。 Demo 1

hurikake 2011/11/30

jQuery
CSS

リンク

[CSS]hr要素をおしゃれにスタイリングする8つのテクニック

デモページ CSS3を使った8つのテクニックデモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr

hurikake 2011/11/24

CSS

リンク

[CSS]画像に美しい角丸とボックスシャドウを適用する方法

img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。それを下記のように美しく適用されるようにします。角丸とボックスシャドウをこういう風にしたい左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。