ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life
CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください. Table of contents サンプル Step 00 – ベースとなる HTML を書こう Step 01 – CSS(LESS) の下準備 Step 02 – #tm .ribbon ミックスインを作ろう Step 03 – #tm .ribbon の中身を作っていこう サンプル 今回は下記のようなサンプルの作り方を解説していきます. up Step 00 – ベースとなる HTML を書こう リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます. 今回はヘッダーとその説明の２行を h1, p タグで追加しました. <div class="ribbon"> <h1> <a
「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」のサンプルを LESS で作ってみた | TM Life
昨日 に引き続き LESS 関連エントリーです. 「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです. 今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました. ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪ サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい. Table of contents サンプルを実行してみよう テーブルのメインカラーを変数化 linear-gradient を使ってヘッダーにテカリフィルター
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
