[CSS]文字の半分で異なるカラーを指定するCSSのテクニック -こういうのを思いついた時って絶対楽しい！ | コリス文字の半分で異なるカラー、ブラックとホワイトにするCSSのテクニックを紹介します。もちろん、他のカラーでも利用でき、レスポンシブにも完全対応しています。 最近増えてきた2分割のレイアウトにも使えますね。 Vertical split layout text effect HTML: 目から鱗のアイデア 最初に思いつく方法として、ブラックとホワイトの「a」を2つ用意するがあるかもしれませんが、テキストとして「aa」となるのはいただけません。HTMLは、下記のように実装されています。
![[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)
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
How to create high-performance CSS animations | Articles | web.dev
Move an element To move an element, use the translate or rotation keyword values of the transform property. For example, to slide an item into view, use translate. .animate { animation: slide-in 0.7s both; } @keyframes slide-in { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } Use rotate to rotate elements. The following example rotates an element 360 degrees. .animate
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
CSS shaders: Cinematic effects for the web | Adobe Developer Connection
Advances in HTML5 and CSS (for example transitions, animations, transforms, text shadows, box-shadows, gradients, SVG) have improved the graphical and interactive richness of HTML. SVG filter effects are now moving to Filter Effects 1.0 to become available in CSS and HTML, in addition to SVG, and will bring effects such as grayscale, sepia tone, or hue-rotate to all web content. Note: Since CSS Sh
The Shapes Of CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into
CSS Flexible Box Layout Moduleで均等幅にレイアウトする - くらげだらけ
最近ではベンダープレフィックスも無くす方向に向かっているようですね。 数年前に比べればCSS3プロパティも使えるような状況になってきているような気がします。いや気がしているだけかもしれません。 まぁ、現状webkitが支配しているモバイルブラウザ環境ではCSS3だって使えますしね。 display: box 横幅を均等に分けてレイアウトしたいみたいなときにFlex boxは便利なプロパティですが、どんな感じにするのがいいのかを書いてみようと思います。 Flexible Boxの仕様はころころ変わってて、最初は「display: box」最新は「display: flex」だったりしますが、まずは「display: box」でやってみます。 http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/ <div class="flex-box"> <
CSSでアニメーションを作るのがグッと楽になるアニメーションライブラリまとめ
モダンブラウザの普及により、以前に比べるとCSS... / CSSアニメーションライブラリ / Animate.css他...全19件 モダンブラウザの普及により、以前に比べるとCSS3アニメーションを使う機会が増えてきています。CSSを使ったアニメーションは、プレフィックスが必要だったり、アニメーションの流れがコードを見ただけでは直感的に分かり辛かったり、自由に使いこなせるには慣れと経験が必要です。 そういった悩みを解決してくれるアニメーションライブラリが存在するのをご存氏でしょうか？ちょっとしたCSSアニメーションであればライブラリを使うことでいとも簡単に組み込むことができます。 そんなありがたーいライブラリを集めました。
Sassy Buttons, Awesome CSS3 Buttons With Compass and Sass - Jared Hardy
Want that fancy CSS3 button look with none of the work? Then Sassy Buttons are for you! Easily create great looking, cross-browser compatible buttons with just a few lines of Sass and you’ll be in button heaven in no time. Getting Started Sassy buttons is a compass extension so, naturally, you must have compass installed to use it. To install compass and the sassy buttons extension, simply open yo
モダンなサイトを作成するためのCSS3チュートリアル集:phpspot開発日誌
Latest CSS3 Tutorials For You To Create Modern Websites モダンなサイトを作成するためのCSS3チュートリアル集。 CSS3のテクニックがあつまったチュートリアル集のご紹介。自分に無い知識を取り入れるために参考にできそう。 いつも進んでる感を感じますが、もうずっと進化し続けるんでしょうね。 関連エントリ CSS3でChrome風ウィンドウを作成するチュートリアル 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル
Dev.Opera — CSS3 vs jQuery Animations
IntroductionFlash originally paved the way for us to feature more than just text and images on web pages. It allowed developers to include animations and other rich effects on web pages, leading to a much more colourful and varied user experience. However, Flash was plagued by a number of issues like security, long loading times on mediocre networks, etc. Then came JavaScript libraries like jQuery
Responsive imagesのための-webkit-image-set() - fragmentary
AppleがWebKitに-webkit-image-set()なるものを実装した。 Changeset 111637 – WebKit ― Implement image-set Bug 80322 – Implement image-set なにかというと、Retina displayやらPCとデバイスピクセル比が違うディスプレイに対して、違う画像を出し分ける、いわゆるResponsive imagesと呼ばれてるやつのための仕組み。 こんな感じで書くらしい。 selector { background: -webkit-image-set( url(foo-lowres.png) 1x, url(foo-highres.png) 2x ) center; image-set()内には複数の"imagespec"というものが入る。imagespecは<image>（画像、グラデーション
compassのベンダープリフィックス制御 « NAVER Engineers' Blog
歳晩の候、皆様におかれましてはますますのご繁栄の事とお喜び申し上げます。 NHN Japan ウェブサービス本部開発1室UITチーム(長い) 富田(@a_t)です。 CSS Preprocessor Advent Calendar 2012の3日目、css書くのに便利だからといって盲目的にcompass使ってないでちょっとは中でなにをしているか知っておいてもよかろうもん ということで タイトルのとおり、compassがベンダープリフィックスの制御をどのように行なっているかについて書きます。compassのソースをまだ一度も見たことがない人向けの内容です。 sassについてよくしらない、というかたは過去の記事をよむとわかるかもしれません。 CSS3関連のmixinはなにをしてるか compassのCSS3関連のミックスインは、引数に値を渡してあげるだけで、しちめんどくさいベンダープリ
[CSS]くるっとして、ゆらゆらしてぴたっと止まる素敵アニメーションを備えたメニュー -CSS Swinging Panel Menu
ホバー時に、子アイテムが上からくるっとスイングして、ゆらゆら揺れて、ぴたっと止まって表示する素敵なアニメーションを備えたメニューを実装するスタイルシートを紹介します。 CSS Swinging Panel Menu ゆらゆらとした動きはCSS3アニメーションで実装されています。 スクリプトは実装には使用されていません。 HTML リスト要素を入れ子にしたシンプルな実装です。 <div id="container"> <ul id="menu"> <li><a href="#">item 1</a> <ul> <li><a href="#">item 1-1</a></li> <li><a href="#">item 1-2</a></li> <li><a href="#">item 1-3</a></li> </ul> </li> <li><a href="#">item 2</a> <u
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix free via: PrefixFree: Break Free From CSS Prefix Hell [ad#ad-2] Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3グラデーションを通常のベンダープレフィックスを使用すると、下記のようなスタイルシートになります。 .download { background-image: -webkit-linear-gradient(transparent, rgba(0,0,0,.3
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいCSSの仕様を色々調べてみた
お盆休みにまとめ読み！Web制作のおすすめスライド コーダー・エンジニア編
短期間＋大規模ゲーム開発でも破綻しないHTML・SCSS
