HTML <h3> <span>Harder</span> <span>Better</span> <span>Faster</span><span>Stronger</span></h3> CSS body { background-color: #ece5da; text-align: center; } h3 { /* margin: 20px; */ font-family: "Paytone One"; color: #202020; text-transform: uppercase; letter-spacing: -2px; } h3 span { display: block; margin: 11px 0 17px 0; font-size: 80px; line-height: 80px; color: #f1ebe5; text-shadow: 0 13.36px
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
レスポンシブ対応の縦長ページ、プロダクトページ、ランディングページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 そのまま使うもよし、スキルアップ用に勉強してもよし、です！ Beetle - Responsive HTML5 Template Beetleには、最近のWebサイトで人気のあるさまざまなコンポーネント・エフェクトが用意されています。大きい背景画像をつかったヘッダ、カード型のレイアウト、サークルを使ったエレメント、パララックススクロール、スクロールをトリガーにしたエフェクトなど、今年のWebデザインのトレンドがたくさん詰まっています。
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました WebアプリケーションはAjaxを多用するので処理状態を分かりやすくためローディングアイコンを使うと良いでしょう。通常その手のリソースにはアニメーションGIFが使われますが、色やサイズを変えたいと思う度に素材を作らないといけないのは不便です。 そこで新しいローディングアイコンを提供してくれるのがLoaders Kitです。なんとCSS3を使って多彩なローディングアイコンを提供しています。 画像では分かりづらいので動画にて。 実際の使い方ですが、例えば左上のタイマーの場合は次のようなスタイルシートになっています。 /* Timer*/ .timer{ width: 24px; height: 24px; background-color: transparent; box-shado
A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide.
画像は一切使用せず、その文字をホバーするとパタっと開くエフェクトを実装するスタイルシートを紹介します。 単に開くだけでなく、シャドウも開きに応じて変化してるのがスゴイ！ 日本語、しかも漢字でもOK 実装はこんな感じになります。 HTML 文字はspan要素で配置し、上に表示されるホワイトの文字はdata-letterに記述します。 <div class="foo"> <span class="letter" data-letter="A">A</span> <span class="letter" data-letter="B">B</span> <span class="letter" data-letter="C">C</span> ... ... </div> 日本語は、こんな感じです。 <div class="foo"> <span class="letter" data-lett
こんにちは。デザイナーのハルエです。 最近涼しくなってきましたね。私は自分があまり風邪をひかないせいか、「健康」に対して軽視しているところがあります。いつまでたっても自分は風の子元気な子だと信じきっています。そのせいかは分かりませんが、今は鼻水が止まらずのど飴を過剰に摂取しながら書かせていただいています。 ほんと健康って大事。 さてWEBデザイナーのみなさん、フォームのデザインって悩みませんか？ 登録フォームやお問い合わせフォームなど用途は様々ですが、最近はブラウザ標準のフォームを使用せず、CSS3やらプラグインやらを使っておしゃれに工夫されたフォームのまぁ多いこと。きれいで使い勝手のいいフォームデザインがしたい。でもコーディングに時間が・・ってことありますよね。私はちょっと苦手意識があったりします。 でも、サイトの窓口ともなるフォームは、WEBサイトを運営するにおいてとても重要な役割を持
How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about posi
1990年代初頭から記者としてまた起業家としてITスタートアップ業界のハードウェアからソフトウェアの事業創出に関わる。シリコンバレーやEU等でのスタートアップを経験。日本ではネットエイジ等に所属、大手企業の新規事業創出に協力。ブログやSNS、LINEなどの誕生から普及成長までを最前線で見てきた生き字引として注目される。通信キャリアのニュースポータルの創業デスクとして数億PV事業に。世界最大IT系メディア（スペイン）の元日本編集長、World Innovation Lab(WiL)などを経て、現在、スタートアップ支援側の取り組みに注力中。 [読了時間: 1分] もはや定番ともいえる次世代ウェブアプリ開発タッグ「HTML5+CSS3+JavaScript」。欧米圏ではHTML5+CSS3の活用事例が毎日何本も公開されており、最近は、「高度」と「アイディア指向」に二分化されている。このデモも高度
投稿者:haseo 投稿公開日:2009 年 3 月 14 日 投稿カテゴリー:ホームページ製作に役立つhtml&cssのmemo 投稿コメント:0件のコメント CSSで半透明にするって技。 いろいろ使えると思います。ロールオーバー画像を作るのが面倒くさいとき等。 但し、それぞれのブラウザに対応したスタイルシート(CSS)が必要。 実装する場合は ============================ filter:alpha(opacity=50); /*IE*/ -moz-opacity:0.50; /*FF*/ opacity:0.50; ============================ +IEのみ下記のいづれかを指定しないと半透明になりません。 display:inline-block; height:実際の値; width:実際の値; float:left または ri
Updated Jan 2022 Web typography has evolved significantly over the last 10 years. When I first wrote this article, designers were limited to a dozen system fonts, embedding type as images or using third-party libraries to render different non-system fonts dynamically. With an abundance of free web fonts and affordable premium fonts from well-known type foundries, web designers have plenty of optio
とっても可愛らしいコンタクトフォームがありま したのでメモがてらご紹介します。封筒に入 った手紙を模したフォームのデザインで、 マウスを乗せると、フォーム部分の手紙が アニメーションしながら出てきます。使いど ころは今は限られてしまいそうですが・・ 将来は普通に使えるといいですねｗ なかなか素敵なフォームデザインです。手紙にマウスを乗せるとゆっくりフォームが出てきますよ。こういう発想力がほしいですね・・ a unique contact form with css3 transitions お手紙が入った封筒です。チラッとフォームが見えてますね。 マウスを乗せると・・ ゆったりとしたアニメーションでするすると出てきます。かわええｗ こんな仕組みらしいです。アニメーションはtransitionで、ホバー時に高さを変えてるんですね。 form {background:#f7f2ec url('
Today we want to show you how to create a responsive, css-only content navigator. Today we’ll show you how to create a content navigator with CSS only. The idea is to have several slides or content layers that we’ll show or hide using the :target pseudo-class. With CSS transitions we can make the slides appear in a fancy way. We’ll also make the whole thing responsive. The images used in the demo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[Å] HTML5とCSS3をIE対応させるにはこの2つでいい？ブログを対応させる時に使った方法を書いたよ！](https://cdn-ak-scissors.b.st-hatena.com/image/square/e0934cbd6b1a55d10f10c2fe2231b2993624e5cd/height=288;version=1;width=512/https%3A%2F%2Fv17.ery.cc%3A443%2Fhttp%2Fwebmemo.biz%2Fwp-content%2Fuploads%2Fbefore.jpg)
