[B! css] jassmazのブックマーク

jassmaz id:jassmaz

cssに関するjassmazのブックマーク (3)

[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。まずはView Transitions APIの特徴から紹介したいと思います。特徴1：異なるDOM要素間でアニメーションできるアニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。特徴2：アニメーションがCSSで自由自在アニメー
jassmaz 2024/06/10
アニメーション

javascript

css
リンク
知らない人は遅れてる？新Zen-Coding Emmet
頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話しますが、まだ使ったことがないという方はまずこの映像から。早速EmmetをSublime Text 2にインストール 1. Package Controlのリポジトリに追加 Sublime Text 2の標準リポジトリにはまだ入っていません。Cmd + Shift + Pで入力ボックスにadd repositoryを入力、下記のリポジトリを追加します。 https://github.com/serge
jassmaz 2012/10/13
html5

css

CSS3

web制作
リンク
CSSで画像を三角に切り抜く
要素の一部を切り抜くclipプロパティー(CSS3ではcropにリネームされる予定)で使える関数にtri()とか欲しい所だけどないものはないし、追加されるとも思えないのでどうにかする話。空前のCSSで三角にするブーム。丸いサムネイルとかアキマシタヨネー。 Demo: Cut a Triangle from an Image with CSS 簡単そうなのでborderプロパティーを使ってやった。コンテナであるfigure要素に::before擬似要素で透過する三角をまず作る。CSSで作る吹き出しの逆バージョンと考えると割りと近いかも。 .test::before { border-top: 0; border-right: 160px solid white; border-bottom: 240px solid transparent; border-left: 160px solid
jassmaz 2012/10/12
CSS3

css
リンク
1