Free Gradients Collection by itmeo.com
Free for commercial or personal use by Dima Braven. WebGradients is a free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment! We've also prepared a .PNG version of each gradient. As a bonus, there are packs for Sketch & Photoshop.
%25E5%25AE%259F%25E8%25A3%2585)
CSS3の吹き出し(ツールチップ)実装 - とある地味なブログ
javascriptを使用せず、CSS3のみでTooltipを実装します。 サンプル コード コード全体は sujoyu/balloon-annotation · GitHub に上げてあります。 .balloon-annotation { display: inline-block; color: #2785C0; cursor: default; } .balloon-annotation > .balloon-annotation-body { display: inline-block; visibility: hidden; /* フェードインアニメーションのため、display: none;は使いません */ position: absolute; z-index: 100; margin: -16px 0 0 16px; padding: 16px 24px; border-
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
[CSS]フォームを入力する際、気持ちいいアニメーションで入力欄をちょっとだけ目立たせるスタイルシートのテクニック
ユーザーがフォームの入力欄をフォーカス・アクティブした際、アニメーションを加えて入力欄をちょっとだけ目立たせるスタイルシートを紹介します。 アニメーションでおっと思わせるだけでなく、入力欄が複数並んでいる時にアニメーションで目立たせるとフォーカスを失わずに入力できる効果もありますね。 Some :active & :focus effects 使い方は簡単、CSSファイルを外部ファイルとして記述し、input要素にclassを加えるだけです。CSSファイルは上記ページの下部「Download」からダウンロードできます。 エフェクトのカラーを変更したい場合は、CSSファイルで一括置換するだけでOKです。 HTML <head> ... <link rel="stylesheet" type="text/css" href="active_and_focus.min.css" media="a
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
Checkboxes and the ridiculous things you can do with them
+ :checked = Awesome What can checkboxes/radios do? <h1>CSS3 Checkbox Styles</h1> <!-- Slide ONE --> <div class="slideOne"> <input type="checkbox" value="None" id="slideOne" name="check" /> <label for="slideOne"></label> </div> <!-- Slide TWO --> <div class="slideTwo"> <input type="checkbox" value="None" id="slideTwo" name="check" /> <label for="slideTwo"></label> </div> <!-- Slide THREE --> <div
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
ピーピングウィキの評判と安全性は？
私自身もピーピングウィキへ入会と退会、再入会などを行っていますが今現在も不正利用や不正請求されたことはありません。 ネットが主流の時代に不正請求だとか不正利用とかの被害が多ければすぐに晒されてピーピングウィキは潰れてしまうだろう。これだけ毎日大量のユーザー入会していればなおさら。詐欺を働いてサイトが潰れてもまた新しいサイトを作れば良いんじゃないの？とはならない。 なぜなら詐欺をするにも作業量が多すぎてコスパが悪いからだ。動画の数は3000本以上になる。これを詐欺をする度に新しく作り直すとして、ドメインを変えてサイトのレイアウトを変えて動画すべてアップロードし直して・・・想像するだけで骨の折れる作業だ。 それなら健全に運営した方が利益があるし、作業量も動画を数本だけ毎日アップロードするだけと最小限で済む。それで毎日大量のユーザーが入会してくれるし、毎日大量のユーザーが継続利用してくれる。不正
webcolourdata.com - webcolourdata リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
56DOC BLOG
毎年年度後半が繁忙期の弊社ですが、今年は社内でだれもやったことがない仕事を丸投げされてすでに定時で帰れないごろどくですどうも。 今年のダイソーの新製品はいろいろ話題になっているものが多く この記事書いた後もロッドやらりリールやらフック類やら...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Online code convert tools and utilities - Beautify Converters beautifyconverter.com
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
CSSが破綻する4つの理由 - Qiita
今必要なCSSアーキテクチャ
