Inspiration for Menu Hover Effects | Codrops
Some menu link hover effects for your inspiration. Powered by CSS and JavaScript for individual letter animations. Today we’d like to share some menu hover effects with you. We hope this set inspires you and gives you some ideas for your next project. The effects are either powered by CSS only or with the help of anime.js. Some also use Charming, for individual letter effects. The first style is a
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
[ OAuth 対応] 最新のRSS記事をtwitterへ自動投稿するPHPスクリプトPEAR::HTTP_OAuth×RSS×SimplePieで作った「ニューすったー☆」 | レポート | 日本電子工藝社
PEAR::HTTP_OAuth×RSS×SimplePieで作った「ニューすったー☆」とは 「ニューすったー☆」はTwitterへ新着情報やブログのRSSを自動投稿してくれるPHPスクリプト（ボット）になります。ニュース記事等を更新して、Twitterへ投稿するという作業を一度に行ってくれます。またRSSの記事タイトルに設定されているリンクURLを認識し、短縮URｌとして各Tweet記事の文末に自動記載します。 動作環境 PHP 5.1.4 以上 Safe mode off 動作確認環境 PHP 5.3.0 設置方法 1.データダウンロード 「ニューすったー☆」をダウンロードしてZipファイルを解凍します。、Tweetフォルダ内あるtwitter.phpを開くと以下の内容が表示されています。 #!/usr/bin/php <?php $rss_list[] = "登録したいRSSのURL
Fo'xTailsの1stフルアルバム「INCEPTION」がカッコ良い曲だらけでやばい！ - ディレイマニア
リリース順に並べ直してタイアップについても記載しておきます。 GLITTER DAYS「黒子のバスケ」エンディング曲 Innocent Graffiti「純情ロマンチカ3」オープニング曲 MONSTERS「バトルスピリッツ烈火魂」エンディング曲 Contrast「Dimension W」エンディング曲 LiBERTY「はんだくん」オープニング曲 INCEPTION「JAPAN COUNTDOWN」エンディング曲 INCEPTIONだけがシングル曲ではなくて今作のリードトラックです。 全体的にテンポが速めな曲が多くて聴いていてテンションのあがるアルバムという印象。じっくり聴かせる曲はSHIN/ENとfarawayの2曲くらいですかね。 個人的には4thシングルの「Contrast」がかなり好きです。ポップな曲が多いFo’xTailsの曲の中でもこの曲はシリアスで緊張感があってたまらないです。
[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコードをまとめたスタイルシート -Beemuse
p, div要素などで実装したシンプルなHTMLに紙やステッチのかわいいスタイルを簡単に実装できるスタイルシートをまとめたフレームワークを紹介します。要素を少し増やすとリボンも簡単に実装できます。 Beemuse Beemuse -GitHub 使い方は簡単、CSSファイルを外部ファイルとして記述し、あとはHTMLにclassを追加するだけで、さまざまなかわいいスタイルを利用できます。 <head> ... <link rel="stylesheet" type="text/css" href="css/beemuse.min.css" /> </head> 各デモは:before, :after の疑似要素を使用しているため、IE8+でご覧ください。一部のスタイルはIE10+になります。
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
p要素などで実装したテキストの天地に、美しいグラデーションのボーダーと背景を適用するスタイルシートのデモを紹介します。 カルピスもちはおやつにもらったのがおいしかっただけで、スタイルシートには何の関係もありません。 上記は当方でテキストやサイズを変更したもので、デモは下記にあります。 Gradient Borders 実装はシンプルなので、他にも応用がききそうですね。 HTML p要素をdivで内包します。 <div class='backbox'> <p>This is the future.<br>Live it & love it.</p> </div> CSS まずは、Webフォントと背景カラーの設定です。 @import url(http://fonts.googleapis.com/css?family=Josefin+Slab); html { background-colo
透明度を少し駆使するだけで、CSSの装飾や変更が恐ろしく楽になる件 * prasm（プラズム）
CSSで定義済みの色「red」とか「blue」とかRBGの値（16進数）「#ffddcc」とか「#112233」とかRBGの値（10進数）「rgb(0 0 0)」とか「rgb(255 255 255 0.5)」とか初心者向けの本なんかでは例えば白を指定する場合は #ffffff、もしくは省略して#fff等で書いているコトがよくあると思います。 RGBの16進数で書けば rbg(255 255 255)と、表記することが出来ます。同じ意味です。 得られる結果は同じですが、知っておくべき概念として Webセーフカラーとは 【web safe colors】 – 意味/解説/説明/定義 ： IT用語辞典 webデザインをする場合、閲覧する環境が、閲覧する人によって変わるという考え方を常に持たないといけません。 webデザインにおける色の指定のおさらいをサラッと終わらせて、本題に入ります。 今回使
[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)
先日擬似要素のまとめを書きましたが、用途の説明に留まり不完全燃焼だったので…今回それを使った表現のコツなんかを突き詰めてみました。サンプルコード付きですー！★ 擬似要素で出来ることを考えていて、先日[CSS]擬似要素の実用的な使用用途のまとめ – WEBCRE8.jpというまとめを書きましたが、やっぱり自分で作ったりしたかったですｗ 今回は実際に擬似要素などを使ってCSSのみでどんな表現が出来るのか、どこが難しいのか、どんなことなら出来るのかを掘り下げてみました。その過程で出来たサンプルも公開しますー。 まずは枠線の作り方。通常枠線はCSSのborderプロパティを使い、値にdoubleを設定する事で二重線が出来ます。ここではそれにバリエーションをつける方法を解説します。 デモ：box-shadowによる実線のボーダー box-shadowで実線を作れる borderで枠線をつけるところ、
![[CSS3]擬似要素とbox-shadowを駆使したエレメントデザインのコツ(サンプルコード付き)](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d32ad08c42abf3adf6023a2cf5a9740723afbdb/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-design-sample-02-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス![[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c7d78a76d41374af7d5df22544559e0a0efe8ac/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201702%2F2017032701.png)
[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック![[CSS]見出しや本文やボタンなど、要素の両側にすぅーと天地中央のラインを配置するテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/79666273202704c389fa72d2bd2263ba5dbbf6e6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016080401.png)
さすが、Apple！刷新されたウェブサイトで見つけた3つのこだわりとは？
見出しデザインに迷ったら！吹き出しやリボンも一瞬で作れるCSS見出しジェネレーター。
【CSS初心者向け】ブログで良く見かけるシンプルな見出しの作り方 - ディレイマニア